From 940b3dbf7362312e083c319b45db3c3c16e40380 Mon Sep 17 00:00:00 2001 From: Yassine Bounekhla Date: Thu, 30 Mar 2023 16:06:21 -0400 Subject: [PATCH] refactor theme --- web/packages/design/src/Alert/Alert.jsx | 10 +- web/packages/design/src/Button/Button.jsx | 28 ++--- web/packages/design/src/Button/Button.test.js | 10 +- .../design/src/ButtonLink/ButtonLink.jsx | 2 +- .../src/ButtonOutlined/ButtonOutlined.jsx | 18 +-- .../src/ButtonOutlined/ButtonOutlined.test.js | 2 +- web/packages/design/src/Card/Card.jsx | 2 +- .../design/src/CardError/CardError.jsx | 2 +- .../CardError.story.test.js.snap | 2 +- web/packages/design/src/Checkbox/Checkbox.tsx | 4 +- .../src/DataTable/InputSearch/InputSearch.tsx | 8 +- .../Pager/ClientSidePager/ClientSidePager.tsx | 2 +- .../design/src/DataTable/StyledTable.tsx | 14 +-- web/packages/design/src/Dialog/Dialog.jsx | 2 +- web/packages/design/src/Input/Input.jsx | 2 +- web/packages/design/src/Label/Label.jsx | 12 +- web/packages/design/src/Label/Label.test.js | 4 +- .../design/src/LabelState/LabelState.jsx | 12 +- .../design/src/LabelState/LabelState.test.js | 4 +- web/packages/design/src/SideNav/SideNav.jsx | 4 +- .../design/src/SideNav/SideNavItem.jsx | 14 +-- .../design/src/SlideTabs/SlideTabs.tsx | 2 +- .../__snapshots__/SlideTabs.test.tsx.snap | 10 +- .../src/StepSlider/StepSlider.story.tsx | 4 +- .../design/src/ThemeProvider/globals.js | 2 +- .../design/src/ThemeProvider/index.js | 3 +- web/packages/design/src/TopNav/TopNav.jsx | 2 +- web/packages/design/src/TopNav/TopNavItem.jsx | 6 +- .../TopNav/TopNavUserMenu/TopNavUserMenu.jsx | 2 +- web/packages/design/src/labels.story.jsx | 6 +- .../design/src/theme/{index.js => index.ts} | 0 .../design/src/theme/{theme.js => theme.ts} | 103 ++++++++++++++---- .../design/src/theme/typography.story.js | 4 +- .../__snapshots__/FieldInput.test.tsx.snap | 10 +- .../FileTransferStateless.tsx | 2 +- .../components/FormPassword/FormPassword.tsx | 2 +- .../__snapshots__/FormPassword.test.tsx.snap | 12 +- .../components/MenuLogin/MenuLogin.story.tsx | 2 +- .../shared/components/MenuLogin/MenuLogin.tsx | 2 +- .../shared/components/Search/SearchPanel.tsx | 2 +- .../components/Select/DarkStyledSelect.tsx | 8 +- .../shared/components/SplitPane/SplitPane.jsx | 4 +- .../ManageDevices/AddDevice/AddDevice.tsx | 2 +- .../AddDevice.story.test.tsx.snap | 8 +- .../__snapshots__/AddApp.story.test.tsx.snap | 12 +- .../__snapshots__/Apps.story.test.tsx.snap | 4 +- .../src/Audit/EventList/EventTypeCell.tsx | 2 +- .../__snapshots__/Audit.story.test.tsx.snap | 6 +- .../ConnectorList/ConnectorList.tsx | 2 +- .../DeleteConnectorDialog.tsx | 2 +- .../AuthConnectors/EmptyList/EmptyList.tsx | 2 +- .../Clusters.story.test.tsx.snap | 3 +- .../ClusterSelector/ClusterSelector.tsx | 2 +- .../Console/DocumentNodes/ThemeProvider.tsx | 10 +- .../DocumentNodes.story.test.tsx.snap | 2 +- .../src/Console/DocumentSsh/DocumentSsh.tsx | 2 +- .../Console/Tabs/JoinedUsers/JoinedUsers.jsx | 4 +- .../teleport/src/Console/Tabs/TabItem.tsx | 4 +- web/packages/teleport/src/Console/colors.ts | 18 ++- .../Databases.story.test.tsx.snap | 4 +- .../SelectCreatable/SelectCreatable.tsx | 12 +- .../teleport/src/Discover/Shared/Text.tsx | 2 +- .../teleport/src/Discover/Sidebar/Sidebar.tsx | 2 +- .../src/Discover/Sidebar/StepItem.tsx | 10 +- .../__snapshots__/Kubes.story.test.tsx.snap | 4 +- .../__snapshots__/LoginFailed.test.tsx.snap | 4 +- .../__snapshots__/Nodes.story.test.tsx.snap | 4 +- web/packages/teleport/src/Player/Player.tsx | 2 +- .../src/Player/PlayerTabs/PlayerTabs.tsx | 6 +- .../teleport/src/PlayerNext/PlayerNext.jsx | 3 +- .../src/PlayerNext/SwitchMode/SwitchMode.jsx | 4 +- .../Recordings.story.test.tsx.snap | 2 +- .../src/Roles/DeleteRole/DeleteRole.tsx | 2 +- .../Sessions.story.test.tsx.snap | 2 +- web/packages/teleport/src/SideNav/SideNav.tsx | 8 +- .../teleport/src/SideNav/SideNavItem.tsx | 14 +-- .../teleport/src/SideNav/SideNavItemGroup.tsx | 16 +-- web/packages/teleport/src/Support/Support.tsx | 6 +- web/packages/teleport/src/TopBar/TopBar.tsx | 3 +- .../DeleteTrust/DeleteTrust.tsx | 2 +- .../TrustedList/TrustedListItem.tsx | 2 +- .../__snapshots__/Users.story.test.tsx.snap | 2 +- .../teleport/src/Welcome/CardWelcome.tsx | 2 +- .../src/Welcome/NewCredentials/Expired.tsx | 9 +- .../NewCredentials/NewCredentials.story.tsx | 2 +- .../Welcome/NewCredentials/NewCredentials.tsx | 2 +- .../Welcome/NewCredentials/NewMfaDevice.tsx | 2 +- .../src/Welcome/NewCredentials/Success.tsx | 2 +- .../NewCredentials.story.test.tsx.snap | 20 ++-- .../ButtonOptions/ButtonOptions.tsx | 4 +- .../src/components/CardEmpty/CardEmpty.jsx | 2 +- .../src/components/FormLogin/FormLogin.tsx | 8 +- .../FormLogin.story.test.tsx.snap | 26 ++--- .../components/InputSearch/InputSearch.jsx | 6 +- .../LabelSelector/LabelSelector.tsx | 2 +- .../teleport/src/components/Layout/Layout.jsx | 7 +- .../RemoveDialog/RemoveDialog.tsx | 2 +- .../PrivateKeyPolicy/PrivateKeyPolicy.tsx | 2 +- .../components/QuickLaunch/QuickLaunch.jsx | 4 +- .../RecoveryCodes/RecoveryCodes.tsx | 6 +- .../ResourceEditor/ResourceEditor.jsx | 4 +- .../SelectFilters/SelectFilters.tsx | 10 +- .../ServersideSearchPanel/Tooltip/Tooltip.js | 2 +- .../src/components/TabIcon/TabIcon.tsx | 2 +- .../teleport/src/components/Toggle/Toggle.tsx | 8 +- .../src/mainProcess/windowsManager.ts | 2 +- .../ClusterLogin/ClusterLogin.story.tsx | 4 +- .../ClusterLogin/FormLogin/FormLogin.tsx | 2 +- .../teleterm/src/ui/Document/Document.tsx | 2 +- .../ClusterNavButton/ClusterNavButton.tsx | 2 +- .../ClusterResources/ClusterSearch.tsx | 6 +- .../ClusterResources/MenuLoginTheme.tsx | 14 +-- .../src/ui/DocumentGateway/CliCommand.tsx | 2 +- .../src/ui/DocumentGateway/common.tsx | 2 +- .../ui/DocumentTerminal/Terminal/Terminal.tsx | 2 +- .../src/ui/DocumentTerminal/Terminal/ctrl.ts | 2 +- .../ui/Documents/KeyboardShortcutsPanel.tsx | 7 +- .../teleterm/src/ui/QuickInput/QuickInput.tsx | 8 +- .../QuickInputList/QuickInputList.tsx | 13 +-- .../ShareFeedback/ShareFeedbackForm.tsx | 2 +- .../teleterm/src/ui/StatusBar/StatusBar.tsx | 2 +- .../ClusterConnectPanel.tsx | 2 +- .../ClusterConnectPanel/RecentClusters.tsx | 2 +- web/packages/teleterm/src/ui/Tabs/TabItem.tsx | 6 +- web/packages/teleterm/src/ui/Tabs/Tabs.tsx | 2 +- .../teleterm/src/ui/ThemeProvider/globals.ts | 2 +- .../teleterm/src/ui/ThemeProvider/theme.ts | 95 +++++++++++----- .../ClusterSelector/ClusterSelector.tsx | 2 +- .../src/ui/TopBar/Clusters/Clusters.tsx | 2 +- .../ClustersFilterableList/ClusterItem.tsx | 16 +-- .../src/ui/TopBar/Connections/Connections.tsx | 2 +- .../ConnectionsIcon/ConnectionsIcon.tsx | 2 +- .../src/ui/TopBar/Identity/Identity.tsx | 2 +- .../Identity/IdentityList/IdentityList.tsx | 2 +- .../Identity/IdentitySelector/UserIcon.tsx | 2 +- .../TopBar/NavigationMenu/NavigationItem.tsx | 4 +- .../TopBar/NavigationMenu/NavigationMenu.tsx | 2 +- .../teleterm/src/ui/TopBar/TopBar.tsx | 2 +- .../teleterm/src/ui/TopBar/TopBarButton.tsx | 2 +- .../FilterableList/FilterableList.tsx | 2 +- .../teleterm/src/ui/components/ListItem.tsx | 2 +- .../components/Notifcations/Notification.tsx | 2 +- .../teleterm/src/ui/components/Table.tsx | 6 +- 143 files changed, 522 insertions(+), 392 deletions(-) rename web/packages/design/src/theme/{index.js => index.ts} (100%) rename web/packages/design/src/theme/{theme.js => theme.ts} (56%) diff --git a/web/packages/design/src/Alert/Alert.jsx b/web/packages/design/src/Alert/Alert.jsx index 1028e6b36598a..de5d8197359f4 100644 --- a/web/packages/design/src/Alert/Alert.jsx +++ b/web/packages/design/src/Alert/Alert.jsx @@ -27,27 +27,27 @@ const kind = props => { case 'danger': return { background: theme.colors.danger, - color: theme.colors.primary.contrastText, + color: theme.colors.text.contrast, }; case 'info': return { background: theme.colors.info, - color: theme.colors.primary.contrastText, + color: theme.colors.text.contrast, }; case 'warning': return { background: theme.colors.warning, - color: theme.colors.primary.contrastText, + color: theme.colors.text.contrast, }; case 'success': return { background: theme.colors.success, - color: theme.colors.primary.contrastText, + color: theme.colors.text.contrast, }; default: return { background: theme.colors.danger, - color: theme.colors.primary.contrastText, + color: theme.colors.text.contrast, }; } }; diff --git a/web/packages/design/src/Button/Button.jsx b/web/packages/design/src/Button/Button.jsx index 711e3e831afab..83a2c9d1a9fba 100644 --- a/web/packages/design/src/Button/Button.jsx +++ b/web/packages/design/src/Button/Button.jsx @@ -58,10 +58,10 @@ const themedStyles = props => { const { kind } = props; const style = { - color: colors.text.primary, + color: colors.buttons.text, '&:disabled': { - background: kind === 'text' ? 'none' : colors.action.disabledBackground, - color: colors.action.disabled, + background: kind === 'text' ? 'none' : colors.buttons.bgDisabled, + color: colors.buttons.textDisabled, }, }; @@ -81,19 +81,19 @@ export const kinds = props => { switch (kind) { case 'secondary': return { - background: theme.colors.primary.light, + background: theme.colors.buttons.secondary.default, '&:hover, &:focus': { - background: theme.colors.primary.lighter, + background: theme.colors.buttons.secondary.hover, }, }; case 'border': return { - background: theme.colors.primary.lighter, - border: '1px solid ' + theme.colors.primary.main, + background: theme.colors.buttons.border.default, + border: '1px solid ' + theme.colors.buttons.border.border, opacity: '.87', '&:hover, &:focus': { - background: theme.colors.primary.lighter, - border: '1px solid ' + theme.colors.action.hover, + background: theme.colors.buttons.border.hover, + border: '1px solid ' + theme.colors.buttons.border.borderHover, opacity: 1, }, '&:active': { @@ -102,9 +102,9 @@ export const kinds = props => { }; case 'warning': return { - background: theme.colors.error.dark, + background: theme.colors.buttons.warning.default, '&:hover, &:focus': { - background: theme.colors.error.main, + background: theme.colors.buttons.warning.hover, }, }; case 'text': @@ -119,12 +119,12 @@ export const kinds = props => { case 'primary': default: return { - background: theme.colors.secondary.main, + background: theme.colors.buttons.primary.default, '&:hover, &:focus': { - background: theme.colors.secondary.light, + background: theme.colors.buttons.primary.hover, }, '&:active': { - background: theme.colors.secondary.dark, + background: theme.colors.buttons.primary.active, }, }; } diff --git a/web/packages/design/src/Button/Button.test.js b/web/packages/design/src/Button/Button.test.js index 6b9d78c31dd3c..1d2adf3331c8d 100644 --- a/web/packages/design/src/Button/Button.test.js +++ b/web/packages/design/src/Button/Button.test.js @@ -25,21 +25,21 @@ describe('design/Button', () => { const { container } = render(