diff --git a/coderd/database/migrations/000260_remove_dark_blue_theme.down.sql b/coderd/database/migrations/000260_remove_dark_blue_theme.down.sql new file mode 100644 index 0000000000000..8be3ce5999592 --- /dev/null +++ b/coderd/database/migrations/000260_remove_dark_blue_theme.down.sql @@ -0,0 +1 @@ +-- Nothing to restore diff --git a/coderd/database/migrations/000260_remove_dark_blue_theme.up.sql b/coderd/database/migrations/000260_remove_dark_blue_theme.up.sql new file mode 100644 index 0000000000000..9e6b509f99dd2 --- /dev/null +++ b/coderd/database/migrations/000260_remove_dark_blue_theme.up.sql @@ -0,0 +1 @@ +UPDATE users SET theme_preference = '' WHERE theme_preference = 'darkBlue'; diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx index 6559e31723156..3468685a246cb 100644 --- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx +++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx @@ -42,19 +42,12 @@ export const AppearanceForm: FC = ({ themes={[themes.dark, themes.light]} onSelect={() => onChangeTheme("auto")} /> - onChangeTheme("dark")} /> - onChangeTheme("darkBlue")} - /> { expect(API.updateAppearanceSettings).toBeCalledTimes(0); }); - it("changes theme to dark blue", async () => { - renderWithAuth(); - - jest.spyOn(API, "updateAppearanceSettings").mockResolvedValueOnce({ - ...MockUser, - theme_preference: "darkBlue", - }); - - const darkBlue = await screen.findByText("Dark blue"); - await userEvent.click(darkBlue); - - // Check if the API was called correctly - expect(API.updateAppearanceSettings).toBeCalledTimes(1); - expect(API.updateAppearanceSettings).toHaveBeenCalledWith("me", { - theme_preference: "darkBlue", - }); - }); - it("changes theme to light", async () => { renderWithAuth(); diff --git a/site/src/pages/UsersPage/storybookData/users.ts b/site/src/pages/UsersPage/storybookData/users.ts index 5056b3e827c89..2e9c98ccb0e73 100644 --- a/site/src/pages/UsersPage/storybookData/users.ts +++ b/site/src/pages/UsersPage/storybookData/users.ts @@ -343,7 +343,7 @@ export const MockUsers: User[] = [ last_seen_at: "2024-09-05T12:27:22.098297Z", status: "active", login_type: "oidc", - theme_preference: "darkBlue", + theme_preference: "dark", organization_ids: ["703f72a1-76f6-4f89-9de6-8a3989693fe5"], roles: [ { @@ -423,7 +423,7 @@ export const MockUsers: User[] = [ last_seen_at: "2024-09-05T07:24:39.324649Z", status: "active", login_type: "oidc", - theme_preference: "darkBlue", + theme_preference: "dark", organization_ids: ["703f72a1-76f6-4f89-9de6-8a3989693fe5"], roles: [ { diff --git a/site/src/theme/darkBlue/branding.ts b/site/src/theme/darkBlue/branding.ts deleted file mode 100644 index c59079b58a3e6..0000000000000 --- a/site/src/theme/darkBlue/branding.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { Branding } from "../branding"; -import colors from "../tailwindColors"; - -export const branding: Branding = { - enterprise: { - background: colors.blue[950], - divider: colors.blue[900], - border: colors.blue[400], - text: colors.blue[50], - }, - premium: { - background: colors.violet[950], - divider: colors.violet[900], - border: colors.violet[400], - text: colors.violet[50], - }, - - featureStage: { - background: colors.sky[900], - divider: colors.sky[800], - border: colors.sky[400], - text: colors.sky[400], - - hover: { - background: colors.gray[900], - divider: colors.gray[800], - border: colors.sky[400], - text: colors.sky[400], - }, - }, -}; - -export default branding; diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts deleted file mode 100644 index d7e4b816a775e..0000000000000 --- a/site/src/theme/darkBlue/experimental.ts +++ /dev/null @@ -1,52 +0,0 @@ -import type { NewTheme } from "../experimental"; -import colors from "../tailwindColors"; - -export default { - l1: { - background: colors.gray[950], - outline: colors.gray[700], - text: colors.white, - fill: { - solid: colors.gray[600], - outline: colors.gray[600], - text: colors.white, - }, - }, - - l2: { - background: colors.gray[900], - outline: colors.gray[700], - 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], - 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], - text: colors.white, - fill: { - solid: colors.zinc[400], - outline: colors.zinc[400], - text: colors.white, - }, - }, - }, - - pillDefault: { - background: colors.gray[800], - outline: colors.gray[700], - text: colors.gray[200], - }, -} satisfies NewTheme; diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts deleted file mode 100644 index 29cec249232c6..0000000000000 --- a/site/src/theme/darkBlue/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { forDarkThemes } from "../externalImages"; -import branding from "./branding"; -import experimental from "./experimental"; -import monaco from "./monaco"; -import muiTheme from "./mui"; -import roles from "./roles"; - -export default { - ...muiTheme, - externalImages: forDarkThemes, - experimental, - branding, - monaco, - roles, -}; diff --git a/site/src/theme/darkBlue/monaco.ts b/site/src/theme/darkBlue/monaco.ts deleted file mode 100644 index 4c73d8b9918e8..0000000000000 --- a/site/src/theme/darkBlue/monaco.ts +++ /dev/null @@ -1,37 +0,0 @@ -import type * as monaco from "monaco-editor"; -import muiTheme from "./mui"; - -export default { - base: "vs-dark", - inherit: true, - rules: [ - { - token: "comment", - foreground: "6B737C", - }, - { - token: "type", - foreground: "B392F0", - }, - { - token: "string", - foreground: "9DB1C5", - }, - { - token: "variable", - foreground: "DDDDDD", - }, - { - token: "identifier", - foreground: "B392F0", - }, - { - token: "delimiter.curly", - foreground: "EBB325", - }, - ], - colors: { - "editor.foreground": muiTheme.palette.text.primary, - "editor.background": muiTheme.palette.background.paper, - }, -} satisfies monaco.editor.IStandaloneThemeData as monaco.editor.IStandaloneThemeData; diff --git a/site/src/theme/darkBlue/mui.ts b/site/src/theme/darkBlue/mui.ts deleted file mode 100644 index 42a002c53d1c6..0000000000000 --- a/site/src/theme/darkBlue/mui.ts +++ /dev/null @@ -1,79 +0,0 @@ -// biome-ignore lint/nursery/noRestrictedImports: createTheme -import { createTheme } from "@mui/material/styles"; -import { BODY_FONT_FAMILY, borderRadius } from "../constants"; -import { components } from "../mui"; -import tw from "../tailwindColors"; - -const muiTheme = createTheme({ - palette: { - mode: "dark", - primary: { - main: tw.sky[500], - contrastText: tw.sky[50], - light: tw.sky[300], - dark: tw.sky[400], - }, - secondary: { - main: tw.gray[500], - contrastText: tw.gray[200], - dark: tw.gray[400], - }, - background: { - default: tw.gray[900], - paper: tw.gray[900], - }, - text: { - primary: tw.gray[50], - secondary: tw.gray[400], - disabled: tw.gray[500], - }, - divider: tw.gray[700], - warning: { - light: tw.amber[500], - main: tw.amber[800], - dark: tw.amber[950], - }, - success: { - main: tw.green[500], - dark: tw.green[600], - }, - info: { - light: tw.blue[400], - main: tw.blue[600], - dark: tw.blue[950], - contrastText: tw.gray[200], - }, - error: { - light: tw.red[400], - main: tw.red[500], - dark: tw.red[950], - contrastText: tw.gray[200], - }, - action: { - hover: tw.gray[800], - }, - neutral: { - main: tw.gray[50], - }, - dots: tw.gray[500], - }, - typography: { - fontFamily: BODY_FONT_FAMILY, - - body1: { - fontSize: "1rem" /* 16px at default scaling */, - lineHeight: "160%", - }, - - body2: { - fontSize: "0.875rem" /* 14px at default scaling */, - lineHeight: "160%", - }, - }, - shape: { - borderRadius, - }, - components, -}); - -export default muiTheme; diff --git a/site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/roles.ts deleted file mode 100644 index 413398ca6db45..0000000000000 --- a/site/src/theme/darkBlue/roles.ts +++ /dev/null @@ -1,157 +0,0 @@ -import type { Roles } from "../roles"; -import colors from "../tailwindColors"; - -const roles: Roles = { - danger: { - background: colors.orange[950], - outline: colors.orange[500], - text: colors.orange[50], - fill: { - solid: colors.orange[500], - outline: colors.orange[400], - text: colors.white, - }, - disabled: { - background: colors.orange[950], - outline: 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], - text: colors.white, - fill: { - solid: colors.orange[500], - outline: colors.orange[500], - text: colors.white, - }, - }, - }, - error: { - background: colors.red[950], - outline: colors.red[600], - 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], - text: colors.amber[50], - fill: { - solid: colors.amber[500], - outline: colors.amber[500], - text: colors.white, - }, - }, - notice: { - background: colors.blue[950], - outline: colors.blue[400], - text: colors.blue[50], - fill: { - solid: colors.blue[500], - outline: colors.blue[600], - 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], - 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], - 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], - text: colors.white, - fill: { - solid: colors.green[500], - outline: colors.green[500], - text: colors.white, - }, - }, - }, - active: { - background: colors.sky[950], - outline: colors.sky[500], - text: colors.sky[50], - fill: { - solid: colors.sky[600], - outline: colors.sky[400], - text: colors.white, - }, - disabled: { - background: colors.sky[950], - outline: 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], - text: colors.white, - fill: { - solid: colors.sky[500], - outline: colors.sky[500], - text: colors.white, - }, - }, - }, - inactive: { - background: colors.gray[950], - outline: colors.gray[500], - text: colors.gray[50], - fill: { - solid: colors.gray[400], - outline: colors.gray[400], - text: colors.white, - }, - }, - preview: { - background: colors.violet[950], - outline: colors.violet[500], - text: colors.violet[50], - fill: { - solid: colors.violet[400], - outline: colors.violet[400], - text: colors.white, - }, - }, -}; - -export default roles; diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts index b024e88db1577..a36bd9b223e8d 100644 --- a/site/src/theme/index.ts +++ b/site/src/theme/index.ts @@ -3,7 +3,6 @@ import type { Theme as MuiTheme } from "@mui/material/styles"; import type * as monaco from "monaco-editor"; import type { Branding } from "./branding"; import dark from "./dark"; -import darkBlue from "./darkBlue"; import type { NewTheme } from "./experimental"; import type { ExternalImageModeStyles } from "./externalImages"; import light from "./light"; @@ -33,7 +32,6 @@ export const DEFAULT_THEME = "dark"; const theme = { dark, - darkBlue, light, } satisfies Record;