From 3eeaff51efde5f9d5ec6208c6d6edc874b906c8c Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 25 Jan 2024 20:48:55 +0000 Subject: [PATCH] refactor: add more `fill` variants to the experimental theme --- site/src/components/Dialogs/Dialog.tsx | 12 +- .../components/HelpTooltip/HelpTooltip.tsx | 2 +- site/src/components/LastSeen/LastSeen.tsx | 6 +- .../WorkspaceStatusBadge.tsx | 2 +- .../Navbar/UserDropdown/UserDropdown.tsx | 2 +- .../ExternalAuthBanner/ExternalAuthItem.tsx | 2 +- site/src/pages/DeploySettingsPage/Option.tsx | 60 +++++----- .../TemplateInsightsPage.tsx | 4 +- site/src/pages/UsersPage/UsersFilter.tsx | 2 +- .../WorkspaceDeleteDialog.tsx | 4 +- .../BatchUpdateConfirmation.tsx | 2 +- site/src/pages/WorkspacesPage/LastUsed.tsx | 6 +- .../pages/WorkspacesPage/filter/filter.tsx | 2 +- site/src/theme/dark/experimental.ts | 108 +++++++++++++++--- site/src/theme/darkBlue/experimental.ts | 108 +++++++++++++++--- site/src/theme/experimental.ts | 15 ++- site/src/theme/light/experimental.ts | 108 +++++++++++++++--- site/src/utils/latency.ts | 6 +- 18 files changed, 335 insertions(+), 116 deletions(-) diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx index f526fa394d499..09b66b0c25111 100644 --- a/site/src/components/Dialogs/Dialog.tsx +++ b/site/src/components/Dialogs/Dialog.tsx @@ -72,16 +72,16 @@ export const DialogActionButtons: FC = ({ const styles = { dangerButton: (theme) => ({ "&.MuiButton-contained": { - backgroundColor: theme.experimental.roles.danger.fill, - borderColor: theme.experimental.roles.danger.outline, + backgroundColor: theme.experimental.roles.danger.fill.solid, + borderColor: theme.experimental.roles.danger.fill.outline, "&:not(.MuiLoadingButton-loading)": { - color: theme.experimental.roles.danger.text, + color: theme.experimental.roles.danger.fill.text, }, "&:hover:not(:disabled)": { - backgroundColor: theme.experimental.roles.danger.hover.fill, - borderColor: theme.experimental.roles.danger.hover.outline, + backgroundColor: theme.experimental.roles.danger.hover.fill.solid, + borderColor: theme.experimental.roles.danger.hover.fill.outline, }, "&.Mui-disabled": { @@ -89,7 +89,7 @@ const styles = { borderColor: theme.experimental.roles.danger.disabled.outline, "&:not(.MuiLoadingButton-loading)": { - color: theme.experimental.roles.danger.disabled.text, + color: theme.experimental.roles.danger.disabled.fill.text, }, }, }, diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx index a6b17e60df397..f72c0c2a7e1da 100644 --- a/site/src/components/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/HelpTooltip/HelpTooltip.tsx @@ -206,7 +206,7 @@ const styles = { display: "flex", alignItems: "center", ...(theme.typography.body2 as CSSObject), - color: theme.experimental.roles.active.fill, + color: theme.experimental.roles.active.fill.outline, }), linkIcon: { diff --git a/site/src/components/LastSeen/LastSeen.tsx b/site/src/components/LastSeen/LastSeen.tsx index bc954c38aea98..25ef1258a6558 100644 --- a/site/src/components/LastSeen/LastSeen.tsx +++ b/site/src/components/LastSeen/LastSeen.tsx @@ -23,13 +23,13 @@ export const LastSeen: FC = ({ at, ...attrs }) => { // Since the agent reports on a 10m interval, // the last_used_at can be inaccurate when recent. message = "Now"; - color = theme.experimental.roles.success.fill; + color = theme.experimental.roles.success.fill.solid; } else if (t.isAfter(now.subtract(3, "day"))) { color = theme.experimental.l2.text; } else if (t.isAfter(now.subtract(1, "month"))) { - color = theme.experimental.roles.warning.fill; + color = theme.experimental.roles.warning.fill.solid; } else if (t.isAfter(now.subtract(100, "year"))) { - color = theme.experimental.roles.error.fill; + color = theme.experimental.roles.error.fill.solid; } else { message = "Never"; } diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx index 1b40462adcf6d..011bcfebe5af1 100644 --- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx +++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx @@ -161,7 +161,7 @@ export const WorkspaceStatusText: FC = ({ css={(theme) => ({ fontWeight: 600, color: type - ? theme.experimental.roles[type].fill + ? theme.experimental.roles[type].fill.solid : theme.experimental.l1.text, })} > diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx index a5e83c0d50f1b..443a0655b9c96 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -45,7 +45,7 @@ export const UserDropdown: FC = ({ /> diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx index d50174e58eea8..ba8ac0ecef0a4 100644 --- a/site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx +++ b/site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx @@ -118,7 +118,7 @@ const styles = { }), providerConnectedLabelIcon: (theme) => ({ - color: theme.experimental.roles.success.fill, + color: theme.experimental.roles.success.fill.solid, fontSize: 16, }), } as Record>; diff --git a/site/src/pages/DeploySettingsPage/Option.tsx b/site/src/pages/DeploySettingsPage/Option.tsx index 518bc71aadc24..1cb38c4af67cf 100644 --- a/site/src/pages/DeploySettingsPage/Option.tsx +++ b/site/src/pages/DeploySettingsPage/Option.tsx @@ -1,6 +1,6 @@ import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined"; -import { css, useTheme } from "@emotion/react"; -import { type HTMLAttributes, type PropsWithChildren, type FC } from "react"; +import { css, type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { type FC, type HTMLAttributes, type PropsWithChildren } from "react"; import { MONOSPACE_FONT_FAMILY } from "theme/constants"; import { DisabledBadge, EnabledBadge } from "components/Badges/Badges"; @@ -107,42 +107,16 @@ export const OptionValue: FC = (props) => { type OptionConfigProps = HTMLAttributes & { isSource: boolean }; // OptionConfig takes a isSource bool to indicate if the Option is the source of the configured value. -export const OptionConfig = ({ isSource, ...attrs }: OptionConfigProps) => { - const theme = useTheme(); - const borderColor = isSource - ? theme.experimental.roles.active.outline - : theme.palette.divider; - +export const OptionConfig: FC = ({ isSource, ...attrs }) => { return (
); }; -export const OptionConfigFlag = (props: HTMLAttributes) => { +export const OptionConfigFlag: FC> = (props) => { const theme = useTheme(); return ( @@ -163,6 +137,28 @@ export const OptionConfigFlag = (props: HTMLAttributes) => { }; const styles = { + configOption: (theme) => ({ + fontSize: 13, + fontFamily: MONOSPACE_FONT_FAMILY, + fontWeight: 600, + backgroundColor: theme.palette.background.paper, + display: "inline-flex", + alignItems: "center", + borderRadius: 4, + padding: 6, + lineHeight: 1, + gap: 6, + border: `1px solid ${theme.palette.divider}`, + }), + + sourceConfigOption: (theme) => ({ + border: `1px solid ${theme.experimental.roles.active.fill.outline}`, + + "& .OptionConfigFlag": { + background: theme.experimental.roles.active.fill.solid, + }, + }), + option: css` font-size: 14px; font-family: ${MONOSPACE_FONT_FAMILY}; @@ -173,4 +169,4 @@ const styles = { padding: 16px; } `, -}; +} satisfies Record>; diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx index 7788caee5b0f1..99b1c432cdc74 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx @@ -421,8 +421,8 @@ const TemplateUsagePanel: FC = ({ validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1; const usageColors = chroma .scale([ - theme.experimental.roles.success.fill, - theme.experimental.roles.notice.fill, + theme.experimental.roles.success.fill.solid, + theme.experimental.roles.notice.fill.solid, ]) .mode("lch") .colors(validUsage?.length ?? 0); diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx index e01191346d1d1..c9e165dbe1fdb 100644 --- a/site/src/pages/UsersPage/UsersFilter.tsx +++ b/site/src/pages/UsersPage/UsersFilter.tsx @@ -129,7 +129,7 @@ const StatusIndicator: FC = ({ option }) => { height: 8, width: 8, borderRadius: 4, - backgroundColor: theme.experimental.roles[option.color].fill, + backgroundColor: theme.experimental.roles[option.color].fill.solid, }} /> ); diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx index f6133b00ada77..c497f381a791c 100644 --- a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx @@ -182,9 +182,9 @@ const styles = { lineHeight: "18px", "& .option": { - color: theme.experimental.roles.danger.fill, + color: theme.experimental.roles.danger.fill.solid, "&.Mui-checked": { - color: theme.experimental.roles.danger.fill, + color: theme.experimental.roles.danger.fill.solid, }, }, diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx index fe2b514d90556..89849533e55ce 100644 --- a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx +++ b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx @@ -477,7 +477,7 @@ const styles = { newVersion: (theme) => ({ fontSize: 13, fontWeight: 500, - color: theme.experimental.roles.active.fill, + color: theme.experimental.roles.active.fill.solid, }), message: { diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx index 7395151113a91..c2a4b6adc5247 100644 --- a/site/src/pages/WorkspacesPage/LastUsed.tsx +++ b/site/src/pages/WorkspacesPage/LastUsed.tsx @@ -40,16 +40,16 @@ export const LastUsed: FC = ({ lastUsedAt }) => { ); if (t.isAfter(now.subtract(1, "hour"))) { - circle = ; + circle = ; // Since the agent reports on a 10m interval, // the last_used_at can be inaccurate when recent. message = "Now"; } else if (t.isAfter(now.subtract(3, "day"))) { circle = ; } else if (t.isAfter(now.subtract(1, "month"))) { - circle = ; + circle = ; } else if (t.isAfter(now.subtract(100, "year"))) { - circle = ; + circle = ; } else { message = "Never"; } diff --git a/site/src/pages/WorkspacesPage/filter/filter.tsx b/site/src/pages/WorkspacesPage/filter/filter.tsx index 1974d923bdcc3..bd68bee831df8 100644 --- a/site/src/pages/WorkspacesPage/filter/filter.tsx +++ b/site/src/pages/WorkspacesPage/filter/filter.tsx @@ -215,7 +215,7 @@ const StatusIndicator: FC = ({ option }) => { height: 8, width: 8, borderRadius: 4, - backgroundColor: theme.experimental.roles[option.color].fill, + backgroundColor: theme.experimental.roles[option.color].fill.solid, }} /> ); diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts index ece573ae151ed..2684b7903f5e1 100644 --- a/site/src/theme/dark/experimental.ts +++ b/site/src/theme/dark/experimental.ts @@ -5,26 +5,42 @@ export default { l1: { background: colors.zinc[950], outline: colors.zinc[700], - fill: colors.zinc[600], text: colors.white, + fill: { + solid: colors.zinc[600], + outline: colors.zinc[600], + text: colors.white, + }, }, l2: { background: colors.zinc[900], outline: colors.zinc[700], - fill: colors.zinc[500], text: colors.zinc[50], + fill: { + solid: colors.zinc[500], + outline: colors.zinc[500], + text: colors.white, + }, disabled: { background: colors.gray[900], outline: colors.zinc[700], - fill: colors.zinc[500], text: colors.zinc[200], + fill: { + solid: colors.zinc[500], + outline: colors.zinc[500], + text: colors.white, + }, }, hover: { background: colors.zinc[800], outline: colors.zinc[600], - fill: colors.zinc[400], text: colors.white, + fill: { + solid: colors.zinc[400], + outline: colors.zinc[400], + text: colors.white, + }, }, }, @@ -32,86 +48,142 @@ export default { danger: { background: colors.orange[950], outline: colors.orange[500], - fill: colors.orange[700], text: colors.orange[50], + fill: { + solid: colors.orange[700], + outline: colors.orange[700], + text: colors.white, + }, disabled: { background: colors.orange[950], outline: colors.orange[800], - fill: colors.orange[800], text: colors.orange[200], + fill: { + solid: colors.orange[800], + outline: colors.orange[800], + text: colors.white, + }, }, hover: { background: colors.orange[900], outline: colors.orange[500], - fill: colors.orange[500], text: colors.white, + fill: { + solid: colors.orange[500], + outline: colors.orange[500], + text: colors.white, + }, }, }, error: { background: colors.red[950], outline: colors.red[600], - fill: colors.red[400], text: colors.red[50], + fill: { + solid: colors.red[400], + outline: colors.red[400], + text: colors.white, + }, }, warning: { background: colors.amber[950], outline: colors.amber[300], - fill: colors.amber[500], text: colors.amber[50], + fill: { + solid: colors.amber[500], + outline: colors.amber[500], + text: colors.white, + }, }, notice: { background: colors.yellow[950], outline: colors.yellow[200], - fill: colors.yellow[500], 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], - fill: colors.blue[600], text: colors.blue[50], + fill: { + solid: colors.blue[600], + outline: colors.blue[600], + text: colors.white, + }, }, success: { background: colors.green[950], outline: colors.green[500], - fill: colors.green[600], text: colors.green[50], + fill: { + solid: colors.green[600], + outline: colors.green[600], + text: colors.white, + }, disabled: { background: colors.green[950], outline: colors.green[800], - fill: colors.green[800], text: colors.green[200], + fill: { + solid: colors.green[800], + outline: colors.green[800], + text: colors.white, + }, }, hover: { background: colors.green[900], outline: colors.green[500], - fill: colors.green[500], text: colors.white, + fill: { + solid: colors.green[500], + outline: colors.green[500], + text: colors.white, + }, }, }, active: { background: colors.sky[950], outline: colors.sky[500], - fill: colors.sky[600], text: colors.sky[50], + fill: { + solid: colors.sky[600], + outline: colors.sky[600], + text: colors.white, + }, disabled: { background: colors.sky[950], outline: colors.sky[800], - fill: colors.sky[800], text: colors.sky[200], + fill: { + solid: colors.sky[800], + outline: colors.sky[800], + text: colors.white, + }, }, hover: { background: colors.sky[900], outline: colors.sky[500], - fill: colors.sky[500], text: colors.white, + fill: { + solid: colors.sky[500], + outline: colors.sky[500], + text: colors.white, + }, }, }, preview: { background: colors.violet[950], outline: colors.violet[500], - fill: colors.violet[400], text: colors.violet[50], + fill: { + solid: colors.violet[400], + outline: colors.violet[400], + text: colors.white, + }, }, }, } satisfies NewTheme; diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts index 8a2cb3a6600c0..5b1e9d739cc8c 100644 --- a/site/src/theme/darkBlue/experimental.ts +++ b/site/src/theme/darkBlue/experimental.ts @@ -5,26 +5,42 @@ export default { l1: { background: colors.gray[950], outline: colors.gray[700], - fill: colors.gray[600], text: colors.white, + fill: { + solid: colors.gray[600], + outline: colors.gray[600], + text: colors.white, + }, }, l2: { background: colors.gray[900], outline: colors.gray[700], - fill: colors.gray[500], text: colors.gray[50], + fill: { + solid: colors.gray[500], + outline: colors.gray[500], + text: colors.white, + }, disabled: { background: colors.gray[900], outline: colors.zinc[700], - fill: colors.gray[500], text: colors.gray[200], + fill: { + solid: colors.gray[500], + outline: colors.gray[500], + text: colors.white, + }, }, hover: { background: colors.gray[800], outline: colors.gray[600], - fill: colors.zinc[400], text: colors.white, + fill: { + solid: colors.zinc[400], + outline: colors.zinc[400], + text: colors.white, + }, }, }, @@ -32,86 +48,142 @@ export default { danger: { background: colors.orange[950], outline: colors.orange[600], - fill: colors.orange[600], text: colors.orange[50], + fill: { + solid: colors.orange[600], + outline: colors.orange[600], + text: colors.white, + }, disabled: { background: colors.orange[950], outline: colors.orange[800], - fill: colors.orange[800], text: colors.orange[200], + fill: { + solid: colors.orange[800], + outline: colors.orange[800], + text: colors.white, + }, }, hover: { background: colors.orange[900], outline: colors.orange[500], - fill: colors.orange[500], text: colors.white, + fill: { + solid: colors.orange[500], + outline: colors.orange[500], + text: colors.white, + }, }, }, error: { background: colors.red[950], outline: colors.red[500], - fill: colors.red[600], text: colors.red[50], + fill: { + solid: colors.red[600], + outline: colors.red[600], + text: colors.white, + }, }, warning: { background: colors.amber[950], outline: colors.amber[300], - fill: colors.amber[500], text: colors.amber[50], + fill: { + solid: colors.amber[500], + outline: colors.amber[500], + text: colors.white, + }, }, notice: { background: colors.yellow[950], outline: colors.yellow[200], - fill: colors.yellow[500], 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], - fill: colors.blue[500], text: colors.blue[50], + fill: { + solid: colors.blue[500], + outline: colors.blue[500], + text: colors.white, + }, }, success: { background: colors.green[950], outline: colors.green[500], - fill: colors.green[600], text: colors.green[50], + fill: { + solid: colors.green[600], + outline: colors.green[600], + text: colors.white, + }, disabled: { background: colors.green[950], outline: colors.green[800], - fill: colors.green[800], text: colors.green[200], + fill: { + solid: colors.green[800], + outline: colors.green[800], + text: colors.white, + }, }, hover: { background: colors.green[900], outline: colors.green[500], - fill: colors.green[500], text: colors.white, + fill: { + solid: colors.green[500], + outline: colors.green[500], + text: colors.white, + }, }, }, active: { background: colors.sky[950], outline: colors.sky[500], - fill: colors.sky[600], text: colors.sky[50], + fill: { + solid: colors.sky[600], + outline: colors.sky[600], + text: colors.white, + }, disabled: { background: colors.sky[950], outline: colors.sky[800], - fill: colors.sky[800], text: colors.sky[200], + fill: { + solid: colors.sky[800], + outline: colors.sky[800], + text: colors.white, + }, }, hover: { background: colors.sky[900], outline: colors.sky[500], - fill: colors.sky[500], text: colors.white, + fill: { + solid: colors.sky[500], + outline: colors.sky[500], + text: colors.white, + }, }, }, preview: { background: colors.violet[950], outline: colors.violet[500], - fill: colors.violet[400], text: colors.violet[50], + fill: { + solid: colors.violet[400], + outline: colors.violet[400], + text: colors.white, + }, }, }, } satisfies NewTheme; diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts index a26d4cc0cb739..bf290b75b1a14 100644 --- a/site/src/theme/experimental.ts +++ b/site/src/theme/experimental.ts @@ -51,13 +51,20 @@ export interface Role { /** A border, or a color for an outlined icon */ outline: string; - /** A color for icons, text on a neutral background, the background of a button which should stand out */ - fill: string; - /** A color for text on the corresponding `background` */ text: string; - // contrastOutline?: string; + /** A set of more saturated colors to make things stand out */ + fill: { + /** A saturated color for use as a background, or for text or icons on a neutral background */ + solid: string; + + /** A color for outlining an area using the solid background color, or for an outlined icon */ + outline: string; + + /** A color for text when using the `solid` background color */ + text: string; + }; } /** Provides additional colors which can indicate different states for interactive elements */ diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts index e8ad80d905b78..b7a565c7a812b 100644 --- a/site/src/theme/light/experimental.ts +++ b/site/src/theme/light/experimental.ts @@ -5,26 +5,42 @@ export default { l1: { background: colors.gray[50], outline: colors.gray[300], - fill: colors.gray[700], text: colors.black, + fill: { + solid: colors.gray[700], + outline: colors.gray[700], + text: colors.white, + }, }, l2: { background: colors.gray[100], outline: colors.gray[500], - fill: colors.gray[500], text: colors.gray[950], + fill: { + solid: colors.gray[500], + outline: colors.gray[500], + text: colors.white, + }, disabled: { background: colors.gray[100], outline: colors.gray[500], - fill: colors.gray[500], text: colors.gray[800], + fill: { + solid: colors.gray[500], + outline: colors.gray[500], + text: colors.white, + }, }, hover: { background: colors.gray[200], outline: colors.gray[700], - fill: colors.zinc[600], text: colors.black, + fill: { + solid: colors.zinc[600], + outline: colors.zinc[600], + text: colors.white, + }, }, }, @@ -32,86 +48,142 @@ export default { danger: { background: colors.orange[50], outline: colors.orange[400], - fill: colors.orange[600], text: colors.orange[950], + fill: { + solid: colors.orange[600], + outline: colors.orange[600], + text: colors.white, + }, disabled: { background: colors.orange[50], outline: colors.orange[800], - fill: colors.orange[800], text: colors.orange[800], + fill: { + solid: colors.orange[800], + outline: colors.orange[800], + text: colors.white, + }, }, hover: { background: colors.orange[100], outline: colors.orange[500], - fill: colors.orange[500], text: colors.black, + fill: { + solid: colors.orange[500], + outline: colors.orange[500], + text: colors.white, + }, }, }, error: { background: colors.red[100], outline: colors.red[500], - fill: colors.red[600], text: colors.red[950], + fill: { + solid: colors.red[600], + outline: colors.red[600], + text: colors.white, + }, }, warning: { background: colors.amber[50], outline: colors.amber[300], - fill: colors.amber[500], text: colors.amber[950], + fill: { + solid: colors.amber[500], + outline: colors.amber[500], + text: colors.white, + }, }, notice: { background: colors.yellow[50], outline: colors.yellow[600], - fill: colors.yellow[500], 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], - fill: colors.blue[600], text: colors.blue[950], + fill: { + solid: colors.blue[600], + outline: colors.blue[600], + text: colors.white, + }, }, success: { background: colors.green[50], outline: colors.green[500], - fill: colors.green[600], text: colors.green[950], + fill: { + solid: colors.green[600], + outline: colors.green[600], + text: colors.white, + }, disabled: { background: colors.green[50], outline: colors.green[800], - fill: colors.green[800], text: colors.green[800], + fill: { + solid: colors.green[800], + outline: colors.green[800], + text: colors.white, + }, }, hover: { background: colors.green[100], outline: colors.green[500], - fill: colors.green[500], text: colors.black, + fill: { + solid: colors.green[500], + outline: colors.green[500], + text: colors.white, + }, }, }, active: { background: colors.sky[100], outline: colors.sky[500], - fill: colors.sky[600], text: colors.sky[950], + fill: { + solid: colors.sky[600], + outline: colors.sky[600], + text: colors.white, + }, disabled: { background: colors.sky[50], outline: colors.sky[800], - fill: colors.sky[800], text: colors.sky[200], + fill: { + solid: colors.sky[800], + outline: colors.sky[800], + text: colors.white, + }, }, hover: { background: colors.sky[200], outline: colors.sky[400], - fill: colors.sky[500], text: colors.black, + fill: { + solid: colors.sky[500], + outline: colors.sky[500], + text: colors.white, + }, }, }, preview: { background: colors.violet[50], outline: colors.violet[500], - fill: colors.violet[600], text: colors.violet[950], + fill: { + solid: colors.violet[600], + outline: colors.violet[600], + text: colors.white, + }, }, }, } satisfies NewTheme; diff --git a/site/src/utils/latency.ts b/site/src/utils/latency.ts index 4281fa17e990f..86a2c2e936a8c 100644 --- a/site/src/utils/latency.ts +++ b/site/src/utils/latency.ts @@ -5,12 +5,12 @@ export const getLatencyColor = (theme: Theme, latency?: number) => { return theme.palette.text.secondary; } - let color = theme.experimental.roles.success.fill; + let color = theme.experimental.roles.success.fill.solid; if (latency >= 150 && latency < 300) { - color = theme.experimental.roles.warning.fill; + color = theme.experimental.roles.warning.fill.solid; } else if (latency >= 300) { - color = theme.experimental.roles.error.fill; + color = theme.experimental.roles.error.fill.solid; } return color; };