From 000d3f4cc62c8576c62c26b13be5dd2d21861cb9 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 18:36:08 +0000 Subject: [PATCH 01/12] make info gray --- .editorconfig | 2 +- site/src/theme/dark/roles.ts | 20 ++++++++++---------- site/src/theme/light/mui.ts | 34 +++++++++++++++++----------------- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/.editorconfig b/.editorconfig index 9d2c8107492a9..6ca567c288220 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,7 +7,7 @@ trim_trailing_whitespace = true insert_final_newline = true indent_style = tab -[*.{md,yaml,yml,tf,tfvars,nix}] +[*.{yaml,yml,tf,tfvars,nix}] indent_style = space indent_size = 2 diff --git a/site/src/theme/dark/roles.ts b/site/src/theme/dark/roles.ts index 7602ae24b9abf..32a9ea4f12992 100644 --- a/site/src/theme/dark/roles.ts +++ b/site/src/theme/dark/roles.ts @@ -53,16 +53,6 @@ export default { }, }, notice: { - background: colors.yellow[950], - outline: colors.yellow[200], - text: colors.yellow[50], - fill: { - solid: colors.yellow[500], - outline: colors.yellow[500], - text: colors.white, - }, - }, - info: { background: colors.blue[950], outline: colors.blue[400], text: colors.blue[50], @@ -72,6 +62,16 @@ export default { text: colors.white, }, }, + info: { + background: colors.zinc[950], + outline: colors.zinc[400], + text: colors.zinc[50], + fill: { + solid: colors.zinc[500], + outline: colors.zinc[600], + text: colors.white, + }, + }, success: { background: colors.green[950], outline: colors.green[500], diff --git a/site/src/theme/light/mui.ts b/site/src/theme/light/mui.ts index 68ffe72ddae45..5782d3da4ffdb 100644 --- a/site/src/theme/light/mui.ts +++ b/site/src/theme/light/mui.ts @@ -32,7 +32,7 @@ const muiTheme = createTheme({ }, divider: tw.zinc[200], warning: { - light: tw.amber[500], + light: tw.amber[400], main: tw.amber[800], dark: tw.amber[950], }, @@ -80,25 +80,25 @@ const muiTheme = createTheme({ ...components, MuiCssBaseline: { styleOverrides: (theme) => ` - html, body, #root, #storybook-root { - height: 100%; - } + html, body, #root, #storybook-root { + height: 100%; + } - button, input { - font-family: ${BODY_FONT_FAMILY}; - } + button, input { + font-family: ${BODY_FONT_FAMILY}; + } - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - input:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important; - } + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important; + } - ::placeholder { - color: ${theme.palette.text.disabled}; - } - `, + ::placeholder { + color: ${theme.palette.text.disabled}; + } + `, }, MuiAvatar: { styleOverrides: { From 2ffbfcaad505f97dce78a9484108227a08dd3d18 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 21:45:23 +0000 Subject: [PATCH 02/12] a couple tweaks --- site/src/components/Badges/Badges.tsx | 12 ++++---- .../UserTable/UserRoleCell.tsx | 4 +-- site/src/theme/darkBlue/roles.ts | 30 +++++++++---------- site/src/theme/light/roles.ts | 20 ++++++------- 4 files changed, 33 insertions(+), 33 deletions(-) diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx index 5f54e6ecdbb8e..6e04dd3a5a482 100644 --- a/site/src/components/Badges/Badges.tsx +++ b/site/src/components/Badges/Badges.tsx @@ -112,9 +112,9 @@ export const EnterpriseBadge: FC = () => { css={[ styles.badge, (theme) => ({ - backgroundColor: theme.roles.info.background, - border: `1px solid ${theme.roles.info.outline}`, - color: theme.roles.info.text, + backgroundColor: theme.roles.notice.background, + border: `1px solid ${theme.roles.notice.outline}`, + color: theme.roles.notice.text, }), ]} > @@ -129,9 +129,9 @@ export const PremiumBadge: FC = () => { css={[ styles.badge, (theme) => ({ - backgroundColor: theme.roles.info.background, - border: `1px solid ${theme.roles.info.outline}`, - color: theme.roles.info.text, + backgroundColor: theme.roles.notice.background, + border: `1px solid ${theme.roles.notice.outline}`, + color: theme.roles.notice.text, }), ]} > diff --git a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx index 5f306b240d377..48764aa1e877d 100644 --- a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx +++ b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx @@ -170,8 +170,8 @@ const styles = { borderColor: theme.roles.active.outline, }), ownerRoleBadge: (theme) => ({ - backgroundColor: theme.roles.info.background, - borderColor: theme.roles.info.outline, + backgroundColor: theme.roles.notice.background, + borderColor: theme.roles.notice.outline, }), roleBadge: (theme) => ({ backgroundColor: theme.experimental.l2.background, diff --git a/site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/roles.ts index bd480ce7c0225..32a9ea4f12992 100644 --- a/site/src/theme/darkBlue/roles.ts +++ b/site/src/theme/darkBlue/roles.ts @@ -4,7 +4,7 @@ import colors from "../tailwindColors"; export default { danger: { background: colors.orange[950], - outline: colors.orange[600], + outline: colors.orange[500], text: colors.orange[50], fill: { solid: colors.orange[500], @@ -34,11 +34,11 @@ export default { }, error: { background: colors.red[950], - outline: colors.red[500], + outline: colors.red[600], text: colors.red[50], fill: { - solid: colors.red[600], - outline: colors.red[600], + solid: colors.red[400], + outline: colors.red[400], text: colors.white, }, }, @@ -53,16 +53,6 @@ export default { }, }, notice: { - background: colors.yellow[950], - outline: colors.yellow[200], - text: colors.yellow[50], - fill: { - solid: colors.yellow[500], - outline: colors.yellow[500], - text: colors.white, - }, - }, - info: { background: colors.blue[950], outline: colors.blue[400], text: colors.blue[50], @@ -72,6 +62,16 @@ export default { text: colors.white, }, }, + info: { + background: colors.zinc[950], + outline: colors.zinc[400], + text: colors.zinc[50], + fill: { + solid: colors.zinc[500], + outline: colors.zinc[600], + text: colors.white, + }, + }, success: { background: colors.green[950], outline: colors.green[500], @@ -108,7 +108,7 @@ export default { text: colors.sky[50], fill: { solid: colors.sky[600], - outline: colors.sky[600], + outline: colors.sky[400], text: colors.white, }, disabled: { diff --git a/site/src/theme/light/roles.ts b/site/src/theme/light/roles.ts index 12d7df3f400b6..fe3d1d9687bfa 100644 --- a/site/src/theme/light/roles.ts +++ b/site/src/theme/light/roles.ts @@ -53,16 +53,6 @@ export default { }, }, notice: { - background: colors.yellow[50], - outline: colors.yellow[600], - text: colors.yellow[950], - fill: { - solid: colors.yellow[500], - outline: colors.yellow[500], - text: colors.white, - }, - }, - info: { background: colors.blue[50], outline: colors.blue[400], text: colors.blue[950], @@ -72,6 +62,16 @@ export default { text: colors.white, }, }, + info: { + background: colors.zinc[50], + outline: colors.zinc[400], + text: colors.zinc[950], + fill: { + solid: colors.zinc[700], + outline: colors.zinc[600], + text: colors.white, + }, + }, success: { background: colors.green[50], outline: colors.green[500], From 717da32051eb730d6b68f8bfd210bd5a0cb83d25 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 21:47:56 +0000 Subject: [PATCH 03/12] fix darkBlue --- site/src/theme/darkBlue/roles.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/roles.ts index 32a9ea4f12992..744b7329249b9 100644 --- a/site/src/theme/darkBlue/roles.ts +++ b/site/src/theme/darkBlue/roles.ts @@ -63,12 +63,12 @@ export default { }, }, info: { - background: colors.zinc[950], - outline: colors.zinc[400], - text: colors.zinc[50], + background: colors.gray[950], + outline: colors.gray[400], + text: colors.gray[50], fill: { - solid: colors.zinc[500], - outline: colors.zinc[600], + solid: colors.gray[500], + outline: colors.gray[600], text: colors.white, }, }, @@ -133,12 +133,12 @@ export default { }, }, inactive: { - background: colors.zinc[950], - outline: colors.zinc[500], - text: colors.zinc[50], + background: colors.gray[950], + outline: colors.gray[500], + text: colors.gray[50], fill: { - solid: colors.zinc[400], - outline: colors.zinc[400], + solid: colors.gray[400], + outline: colors.gray[400], text: colors.white, }, }, From 2c939d04c1372f9e54e57b92d1b7066a7d7bef88 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 21:59:45 +0000 Subject: [PATCH 04/12] fix user status colors --- site/src/pages/UsersPage/UsersFilter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx index dfcdf51b021df..9cdabe27c8ff1 100644 --- a/site/src/pages/UsersPage/UsersFilter.tsx +++ b/site/src/pages/UsersPage/UsersFilter.tsx @@ -34,12 +34,12 @@ export const useStatusFilterMenu = ({ { value: "dormant", label: "Dormant", - startIcon: , + startIcon: , }, { value: "suspended", label: "Suspended", - startIcon: , + startIcon: , }, ]; return useFilterMenu({ From a8b5fec61a7216f4ec34a9f7f13206d8a4709d5a Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 22:13:41 +0000 Subject: [PATCH 05/12] ohp --- .../ManagementSettingsPage/OrganizationMembersPageView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx index d6e864284cdd1..58c260a360e89 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx @@ -201,8 +201,8 @@ const AddOrganizationMember: FC = ({ const styles = { role: (theme) => ({ - backgroundColor: theme.roles.info.background, - borderColor: theme.roles.info.outline, + backgroundColor: theme.roles.notice.background, + borderColor: theme.roles.notice.outline, }), globalRole: (theme) => ({ backgroundColor: theme.roles.inactive.background, From 8ef0b452adb14f79886b12990907032eef6a25cb Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 22:39:34 +0000 Subject: [PATCH 06/12] fix a few more colors --- site/src/components/Logs/LogLine.tsx | 6 +++--- .../TemplateInsightsPage/TemplateInsightsPage.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesTable.tsx | 2 +- site/src/utils/workspace.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/site/src/components/Logs/LogLine.tsx b/site/src/components/Logs/LogLine.tsx index 715d7f5190f80..fa12a2ce67d98 100644 --- a/site/src/components/Logs/LogLine.tsx +++ b/site/src/components/Logs/LogLine.tsx @@ -52,11 +52,11 @@ const styles = { }, "&.debug": { - backgroundColor: theme.roles.info.background, - color: theme.roles.info.text, + backgroundColor: theme.roles.notice.background, + color: theme.roles.notice.text, "& .dashed-line": { - backgroundColor: theme.roles.info.outline, + backgroundColor: theme.roles.notice.outline, }, }, diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx index acdd7bcc6661d..a7e0351e8ba80 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx @@ -423,7 +423,7 @@ const TemplateUsagePanel: FC = ({ const totalInSeconds = validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1; const usageColors = chroma - .scale([theme.roles.success.fill.solid, theme.roles.notice.fill.solid]) + .scale([theme.roles.success.fill.solid, theme.roles.warning.fill.solid]) .mode("lch") .colors(validUsage?.length ?? 0); // The API returns a row for each app, even if the user didn't use it. diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index f48c459d3f4d6..77f2d26685640 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -202,7 +202,7 @@ export const WorkspacesTable: FC = ({ {workspace.latest_build.status === "running" && !workspace.health.healthy && ( diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx index f85c3daa3877f..1a0ef30781adc 100644 --- a/site/src/utils/workspace.tsx +++ b/site/src/utils/workspace.tsx @@ -48,7 +48,7 @@ export const getDisplayWorkspaceBuildStatus = ( } as const; case "running": return { - type: "info", + type: "active", color: theme.roles.active.text, status: DisplayWorkspaceBuildStatusLanguage.running, } as const; From 4412186d55dc2bcef3922a3683582316b5d0fe20 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 22:53:17 +0000 Subject: [PATCH 07/12] oh, cool --- site/src/components/BuildAvatar/BuildAvatar.tsx | 2 +- .../workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx | 2 +- site/src/utils/workspace.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx index 90600ba02a65c..89648944caa22 100644 --- a/site/src/components/BuildAvatar/BuildAvatar.tsx +++ b/site/src/components/BuildAvatar/BuildAvatar.tsx @@ -17,7 +17,7 @@ export const BuildAvatar: FC = ({ build, size }) => { const theme = useTheme(); const { status, type } = getDisplayWorkspaceBuildStatus(theme, build); const badgeType = useClassName( - (css, theme) => css({ backgroundColor: theme.palette[type].light }), + (css, theme) => css({ backgroundColor: theme.roles[type].background }), [type], ); diff --git a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx index a7a62467cafee..57e1a35353f63 100644 --- a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx +++ b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx @@ -19,7 +19,7 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => { css={{ width: 16, height: 16, - color: theme.palette[statusType].light, + color: theme.roles[statusType].fill.solid, }} />
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx index 1a0ef30781adc..963adf58a7270 100644 --- a/site/src/utils/workspace.tsx +++ b/site/src/utils/workspace.tsx @@ -42,7 +42,7 @@ export const getDisplayWorkspaceBuildStatus = ( } as const; case "pending": return { - type: "secondary", + type: "inactive", color: theme.roles.active.text, status: DisplayWorkspaceBuildStatusLanguage.pending, } as const; @@ -68,7 +68,7 @@ export const getDisplayWorkspaceBuildStatus = ( } as const; case "canceled": return { - type: "secondary", + type: "inactive", color: theme.roles.warning.text, status: DisplayWorkspaceBuildStatusLanguage.canceled, } as const; From 2cb6aed8c88c0b56c2db3dc4961f0647a0725bc2 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 23:09:14 +0000 Subject: [PATCH 08/12] fix one more place --- .../TemplateVersionStatusBadge.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx index 0c49ed5e39865..a0d4856af6407 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx @@ -37,25 +37,25 @@ export const getStatus = ( switch (version.job.status) { case "running": return { - type: "info", + type: "active", text: "Running", icon: , }; case "pending": return { - type: "info", + type: "active", text: getPendingStatusLabel(version.job), icon: , }; case "canceling": return { - type: "warning", + type: "inactive", text: "Canceling", icon: , }; case "canceled": return { - type: "warning", + type: "inactive", text: "Canceled", icon: , }; From 8042a68cf4960b495551a572242bc3d025685ae7 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 19 Aug 2024 23:24:29 +0000 Subject: [PATCH 09/12] ohoho --- site/src/components/BuildAvatar/BuildAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx index 89648944caa22..e9870b4e746be 100644 --- a/site/src/components/BuildAvatar/BuildAvatar.tsx +++ b/site/src/components/BuildAvatar/BuildAvatar.tsx @@ -17,7 +17,7 @@ export const BuildAvatar: FC = ({ build, size }) => { const theme = useTheme(); const { status, type } = getDisplayWorkspaceBuildStatus(theme, build); const badgeType = useClassName( - (css, theme) => css({ backgroundColor: theme.roles[type].background }), + (css, theme) => css({ backgroundColor: theme.roles[type].fill.solid }), [type], ); From eedfaf3bd2c7bc243606837d2cbcb4d90895c7d4 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 20 Aug 2024 16:20:41 +0000 Subject: [PATCH 10/12] use blue for suggestions --- site/src/components/RichParameterInput/RichParameterInput.tsx | 2 +- site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 1da8810912257..92c7b528936a9 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -109,7 +109,7 @@ const styles = { }, }, suggestion: (theme) => ({ - color: theme.roles.info.fill.solid, + color: theme.roles.notice.fill.solid, marginLeft: "-4px", padding: "4px 6px", lineHeight: "inherit", diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 244cc7fbf6998..1c158b8225e2f 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -318,7 +318,7 @@ export const CreateWorkspacePageView: FC = ({ const styles = { nameSuggestion: (theme) => ({ - color: theme.roles.info.fill.solid, + color: theme.roles.notice.fill.solid, padding: "4px 8px", lineHeight: "inherit", fontSize: "inherit", From c75e758369dc1245ab13f1b2d9f950e12adf928e Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 20 Aug 2024 16:27:11 +0000 Subject: [PATCH 11/12] add some clarification to types --- site/src/theme/index.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts index 0f0e2484cfb50..30c3ccfa71efe 100644 --- a/site/src/theme/index.ts +++ b/site/src/theme/index.ts @@ -8,9 +8,18 @@ import type { ExternalImageModeStyles } from "./externalImages"; import light from "./light"; import type { Roles } from "./roles"; -export interface Theme extends MuiTheme { - experimental: NewTheme; +export interface Theme extends Omit { + /** @deprecated use `theme.roles` instead */ + palette: MuiTheme["palette"]; + + /** Sets of colors that can be used based on the role that a UI element serves + * for the user. + * Does it signify an error? a warning? that something is currently running? etc. + */ roles: Roles; + + /** Theme properties that we're testing out but haven't committed to. */ + experimental: NewTheme; monaco: monaco.editor.IStandaloneThemeData; externalImages: ExternalImageModeStyles; } From 090a2aa01b916564ef0a3b0950aee15075814df8 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 20 Aug 2024 16:28:30 +0000 Subject: [PATCH 12/12] =?UTF-8?q?=E2=9C=8F=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/theme/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts index 30c3ccfa71efe..f161ec88cfb64 100644 --- a/site/src/theme/index.ts +++ b/site/src/theme/index.ts @@ -9,7 +9,7 @@ import light from "./light"; import type { Roles } from "./roles"; export interface Theme extends Omit { - /** @deprecated use `theme.roles` instead */ + /** @deprecated prefer `theme.roles` when possible */ palette: MuiTheme["palette"]; /** Sets of colors that can be used based on the role that a UI element serves