Skip to content

Web: Remove hard coded coloring (mainly for discover related components) #25156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kimlisa wants to merge 4 commits into from
Closed

Web: Remove hard coded coloring (mainly for discover related components) #25156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e503ae
Add light grey colors to main color themes
kimlisa Apr 25, 2023
a7e6239
Remove hard coded coloring
kimlisa Apr 25, 2023
578d9a5
Rename color theme 'grey' to 'blueGrey'
kimlisa Apr 25, 2023
62fb255
Rename color theme 'lightGrey' to 'grey'
kimlisa Apr 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion e
Open in desktop
Submodule e updated from da36ee to bcd9c6
8 changes: 6 additions & 2 deletions web/packages/design/src/theme/darkTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ limitations under the License.

import { fonts } from './fonts';
import { getContrastRatio } from './utils/colorManipulator';
import { lightBlue, blueGrey, yellow } from './palette';
import { lightBlue, blueGrey, yellow, grey } from './palette';
import typography, { fontSizes, fontWeights } from './typography';
import { sharedStyles } from './sharedStyles';

Expand Down Expand Up @@ -119,10 +119,14 @@ const colors = {
dark: '#000000',
light: '#FFFFFF',

grey: {
blueGrey: {
Copy link
Copy Markdown
Member

@ravicious ravicious Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I renamed the theme colors (grey -> blueGrey and lightGrey -> grey) to its more appropriate form at the last two commits

"More appropriate" as in the new names describe the colors better or is there a doc that describes those colors as such? I couldn't find blue greys and greys in the application design system.

Overall I think we should probably use these greys as sparingly as possible since they don't seem to play well with the concept of custom themes. But I suppose this is something that we'll have to take care of once we get to actually allowing custom themes.

...blueGrey,
},

grey: {
...grey,
},

error: {
main: '#FF6257',
hover: '#FF8179',
Expand Down
8 changes: 6 additions & 2 deletions web/packages/design/src/theme/lightTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ limitations under the License.

import { fonts } from './fonts';
import { getContrastRatio } from './utils/colorManipulator';
import { lightBlue, blueGrey, yellow } from './palette';
import { lightBlue, blueGrey, grey, yellow } from './palette';
import typography, { fontSizes, fontWeights } from './typography';
import { sharedStyles } from './sharedStyles';

Expand Down Expand Up @@ -115,10 +115,14 @@ const colors = {
dark: '#000000',
light: '#FFFFFF',

grey: {
blueGrey: {
...blueGrey,
},

grey: {
...grey,
},

error: {
main: '#CC372D',
hover: '#A32C24',
Expand Down
2 changes: 1 addition & 1 deletion web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const PathInput = forwardRef<

const StyledFieldInput = styled(FieldInput)`
input {
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid ${props => props.theme.colors.text.placeholder};
Copy link
Copy Markdown
Contributor Author

@kimlisa kimlisa Apr 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think after @rudream changes, this will be called muted instead of placeholder right?

Copy link
Copy Markdown
Contributor

@rudream rudream Apr 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct

background: transparent;
color: white;
box-shadow: none;
Expand Down
2 changes: 1 addition & 1 deletion web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const Li = styled.li`

const ProgressBackground = styled.div`
border-radius: 50px;
background: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
width: 100%;
`;

Expand Down
6 changes: 3 additions & 3 deletions web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const StyledUsers = styled.div`
justify-content: center;
margin-right: 3px;
background-color: ${props =>
props.active ? props.theme.colors.brand : props.theme.colors.grey[900]};
props.active ? props.theme.colors.brand : props.theme.colors.blueGrey[900]};
`;

const StyledAvatar = styled.div`
Expand All @@ -121,8 +121,8 @@ const StyledAvatar = styled.div`
`;

const UserItem = styled.div`
border-bottom: 1px solid ${props => props.theme.colors.grey[50]};
color: ${props => props.theme.colors.grey[600]};
border-bottom: 1px solid ${props => props.theme.colors.blueGrey[50]};
color: ${props => props.theme.colors.blueGrey[600]};
font-size: 12px;
align-items: center;
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ const StatusLight = styled(Box)`
if (status === Status.Warning) {
return theme.colors.warning;
}
return theme.colors.grey[300]; // Unknown
return theme.colors.blueGrey[300]; // Unknown
}};
`;

Expand Down
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,7 +392,7 @@ function DbEngineInstructions({

const StyledBox = styled(Box)`
max-width: 800px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
border-radius: 8px;
padding: 20px;
`;
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export function TestConnectionView({

const StyledBox = styled(Box)`
max-width: 800px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
border-radius: 8px;
padding: 20px;
`;
3 changes: 1 addition & 2 deletions web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,8 +453,7 @@ const InstallHelmChart = ({

const StyledBox = styled(Box)`
max-width: 1000px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
padding: ${props => `${props.theme.space[3]}px`};
border-radius: ${props => `${props.theme.space[2]}px`};
border: 2px solid #2f3659;
`;
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export function TestConnection({

const StyledBox = styled(Box)`
max-width: 800px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
border-radius: 8px;
padding: 20px;
`;
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export function TestConnection({

const StyledBox = styled(Box)`
max-width: 800px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
border-radius: 8px;
padding: 20px;
`;
3 changes: 1 addition & 2 deletions web/packages/teleport/src/Discover/Shared/CommandBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,9 @@ import { Box, Text } from 'design';

const Container = styled(Box)`
max-width: 1000px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
padding: ${props => `${props.theme.space[3]}px`};
border-radius: ${props => `${props.theme.space[2]}px`};
border: 2px solid #2f3659;
Copy link
Copy Markdown
Member

@ravicious ravicious Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this border supposed to be removed?

Copy link
Copy Markdown
Contributor Author

@kimlisa kimlisa May 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, this border was unnecessary (early days of discover)

`;

interface CommandBoxProps {
Expand Down
8 changes: 4 additions & 4 deletions web/packages/teleport/src/Discover/Shared/HintBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,25 +25,25 @@ import { TextIcon } from 'teleport/Discover/Shared/Text';

const HintBoxContainer = styled(Box)`
max-width: 1000px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
padding: ${props => `${props.theme.space[3]}px`};
border-radius: ${props => `${props.theme.space[2]}px`};
border: 2px solid ${props => props.theme.colors.warning}; ;
`;

export const WaitingInfo = styled(Box)`
max-width: 1000px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
padding: ${props => `${props.theme.space[3]}px`};
border-radius: ${props => `${props.theme.space[2]}px`};
border: 2px solid #2f3659;
border: 2px solid ${props => props.theme.colors.text.placeholder};
Copy link
Copy Markdown
Contributor Author

@kimlisa kimlisa Apr 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here (note to self)

display: flex;
align-items: center;
`;

export const SuccessInfo = styled(Box)`
max-width: 1000px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
padding: ${props => `${props.theme.space[3]}px`};
border-radius: ${props => `${props.theme.space[2]}px`};
border: 2px solid ${props => props.theme.colors.success};
Expand Down
47 changes: 28 additions & 19 deletions web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,33 +18,39 @@ import React from 'react';
import { useTheme } from 'styled-components';
import ReactSelectCreatable from 'react-select/creatable';

import { StyledSelect } from 'shared/components/Select/Select';

const styles = theme => ({
multiValue: (base, state) => {
return state.data.isFixed ? { ...base, backgroundColor: 'gray' } : base;
return state.data.isFixed
? {
...base,
backgroundColor: `${theme.colors.grey['600']} !important`,
Copy link
Copy Markdown
Member

@ravicious ravicious Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we able to avoid adding colors.grey in the first place, like replace it here with another color? This seems to be the only place which uses it. 😶‍🌫️

Copy link
Copy Markdown
Contributor Author

@kimlisa kimlisa May 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for the callout, i misunderstand how this all worked. i am closing this PR to address this (specific to select creatable) later, the other hard coded removal (replacing with existing theme colors) is addressed here instead: #25438

tracking: #25453

}
: base;
},
multiValueLabel: (base, state) => {
if (state.data.isFixed) {
return { ...base, color: theme.colors.text.primary, paddingRight: 6 };
return {
...base,
paddingRight: 6,
};
}

if (state.isDisabled) {
return { ...base, paddingRight: 6 };
}

return { ...base, color: theme.colors.text.primaryInverse };
return { ...base };
},
multiValueRemove: (base, state) => {
return state.data.isFixed || state.isDisabled
? { ...base, display: 'none' }
: {
...base,
cursor: 'pointer',
color: theme.colors.text.primaryInverse,
};
},
menuList: base => {
return { ...base, color: theme.colors.text.primaryInverse };
},
});

export type SelectCreatableProps = {
Expand Down Expand Up @@ -77,18 +83,21 @@ export const SelectCreatable = ({
}: SelectCreatableProps) => {
const theme = useTheme();
return (
<ReactSelectCreatable
className="react-select"
components={{
DropdownIndicator: null,
}}
styles={styles(theme)}
{...rest}
isMulti={isMulti}
isClearable={isClearable}
isDisabled={isDisabled}
autoFocus={autoFocus}
/>
<StyledSelect>
<ReactSelectCreatable
className="react-select-container"
classNamePrefix="react-select"
components={{
DropdownIndicator: null,
}}
styles={styles(theme)}
{...rest}
isMulti={isMulti}
isClearable={isClearable}
isDisabled={isDisabled}
autoFocus={autoFocus}
/>
</StyledSelect>
);
};

Expand Down
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export function SetupAccessWrapper({

const StyledBox = styled(Box)`
max-width: 700px;
background-color: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
border-radius: 8px;
padding: 20px;
`;
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Discover/Shared/Step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function Step(props: StepProps) {
}

export const StepContainer = styled.div`
background: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
Expand Down
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Integrations/IntegrationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const StatusLight = styled(Box)`
if (status === Status.Warning) {
return theme.colors.warning.main;
}
return theme.colors.grey[300]; // Unknown
return theme.colors.blueGrey[300]; // Unknown
}};
`;

Expand Down
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const ActiveValue = styled.div<OpenProps>`
cursor: pointer;

&:focus {
background: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
}
`;

Expand Down
4 changes: 2 additions & 2 deletions web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const StyledCloseButton = styled.button`
background: transparent;
border-radius: 2px;
border: none;
color: ${props => props.theme.colors.grey[900]};
color: ${props => props.theme.colors.blueGrey[900]};
cursor: pointer;
height: 24px;
width: 24px;
Expand All @@ -121,7 +121,7 @@ const StyledCloseButton = styled.button`
right: 0px;

&:hover {
background: ${props => props.theme.colors.grey[200]};
background: ${props => props.theme.colors.blueGrey[200]};
}
`;

Expand Down
2 changes: 1 addition & 1 deletion web/packages/teleport/src/components/Toggle/Toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const StyledInput = styled.input.attrs({ type: 'checkbox' })`
background: ${props => props.theme.colors.levels.surface};

&:before {
background: ${props => props.theme.colors.grey[700]};
background: ${props => props.theme.colors.blueGrey[700]};
}
}
`;
2 changes: 1 addition & 1 deletion web/packages/teleport/src/components/ToolTipNoPermBadge/ToolTipNoPermBadge.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,5 @@ const SomeBox = styled.div`
display: flex;
position: relative;
align-items: center;
background: rgba(255, 255, 255, 0.05);
background-color: ${props => props.theme.colors.spotBackground[0]};
`;
15 changes: 13 additions & 2 deletions web/packages/teleterm/src/ui/ThemeProvider/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,14 @@ limitations under the License.

import { fonts } from 'design/theme/fonts';
import { getContrastRatio } from 'design/theme/utils/colorManipulator';
import { lightBlue, teal, pink, blueGrey, yellow } from 'design/theme/palette';
import {
lightBlue,
teal,
pink,
blueGrey,
yellow,
grey,
} from 'design/theme/palette';
import typography, { fontSizes, fontWeights } from 'design/theme/typography';
import { sharedStyles } from 'design/theme/sharedStyles';

Expand Down Expand Up @@ -114,10 +121,14 @@ const colors = {
},
},

grey: {
blueGrey: {
...blueGrey,
},

grey: {
...grey,
},

error: {
main: '#FF6257',
hover: '#FF8179',
Expand Down
2 changes: 1 addition & 1 deletion ...eleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const StyledStatus = styled<Props>(Box)`
const { $connected, theme } = props;
const backgroundColor = $connected
? theme.colors.success
: theme.colors.grey[300];
: theme.colors.blueGrey[300];
return {
backgroundColor,
};
Expand Down