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", 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, 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/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/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: , }; 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({ 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/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/darkBlue/roles.ts b/site/src/theme/darkBlue/roles.ts index bd480ce7c0225..744b7329249b9 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.gray[950], + outline: colors.gray[400], + text: colors.gray[50], + fill: { + solid: colors.gray[500], + outline: colors.gray[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: { @@ -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, }, }, diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts index 0f0e2484cfb50..f161ec88cfb64 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 prefer `theme.roles` when possible */ + 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; } 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: { 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], diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx index f85c3daa3877f..963adf58a7270 100644 --- a/site/src/utils/workspace.tsx +++ b/site/src/utils/workspace.tsx @@ -42,13 +42,13 @@ export const getDisplayWorkspaceBuildStatus = ( } as const; case "pending": return { - type: "secondary", + type: "inactive", color: theme.roles.active.text, status: DisplayWorkspaceBuildStatusLanguage.pending, } as const; case "running": return { - type: "info", + type: "active", color: theme.roles.active.text, status: DisplayWorkspaceBuildStatusLanguage.running, } 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; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy