remove theme.colors

aslilac · aslilac · commit 7cf5ad2aa491 · 2023-12-21T19:40:36.000Z
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -21,6 +21,8 @@ import WorkspacesPage from "./pages/WorkspacesPage/WorkspacesPage";
 import UserSettingsLayout from "./pages/UserSettingsPage/Layout";
 import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout";
 import { WorkspaceSettingsLayout } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsLayout";
+import { ThemeOverride } from "contexts/ThemeProvider";
+import themes from "theme";
 
 // Lazy load pages
 // - Pages that are secondary, not in the main navigation or not usually accessed
@@ -384,7 +386,11 @@ export const AppRouter: FC = () => {
             />
             <Route
               path="/:username/:workspace/terminal"
-              element={<TerminalPage />}
+              element={
+                <ThemeOverride theme={themes.dark}>
+                  <TerminalPage />
+                </ThemeOverride>
+              }
             />
             <Route path="/cli-auth" element={<CliAuthenticationPage />} />
             <Route path="/icons" element={<IconsPage />} />
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -36,6 +36,7 @@ import { TerminalIcon } from "components/Icons/TerminalIcon";
 import { RocketIcon } from "components/Icons/RocketIcon";
 import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import colors from "theme/tailwind";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
 import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";
@@ -439,9 +440,9 @@ const styles = {
       height: 16px;
     }
   `,
-  unhealthy: (theme) => css`
-    background-color: ${theme.colors.red[10]};
-  `,
+  unhealthy: (theme) => ({
+    backgroundColor: colors.red[700],
+  }),
   group: css`
     display: flex;
     align-items: center;
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -102,8 +102,8 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
                 styles={css`
                   em-emoji-picker {
                     --rgb-background: ${theme.palette.background.paper};
-                    --rgb-input: ${theme.colors.gray[17]};
-                    --rgb-color: ${theme.colors.gray[4]};
+                    --rgb-input: ${theme.palette.primary.main};
+                    --rgb-color: ${theme.palette.text.primary};
 
                     // Hack to prevent the right side from being cut off
                     width: 350px;
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -420,7 +420,10 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
   const totalInSeconds =
     validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
   const usageColors = chroma
-    .scale([theme.colors.green[8], theme.colors.blue[8]])
+    .scale([
+      theme.experimental.roles.success.fill,
+      theme.experimental.roles.notice.fill,
+    ])
     .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/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -108,7 +108,7 @@ const TerminalPage: FC = () => {
       fontFamily: MONOSPACE_FONT_FAMILY,
       fontSize: 16,
       theme: {
-        background: theme.colors.gray[16],
+        background: theme.palette.background.default,
       },
     });
     if (renderer === "webgl") {
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -40,7 +40,7 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
   );
 
   if (t.isAfter(now.subtract(1, "hour"))) {
-    circle = <Circle color={theme.colors.green[9]} />;
+    circle = <Circle color={theme.experimental.roles.success.fill} />;
     // Since the agent reports on a 10m interval,
     // the last_used_at can be inaccurate when recent.
     message = "Now";
@@ -49,15 +49,14 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
   } else if (t.isAfter(now.subtract(1, "month"))) {
     circle = <Circle color={theme.palette.warning.light} />;
   } else if (t.isAfter(now.subtract(100, "year"))) {
-    circle = <Circle color={theme.colors.red[10]} />;
+    circle = <Circle color={theme.experimental.roles.error.fill} />;
   } else {
-    // color = theme.palette.error.light
     message = "Never";
   }
 
   return (
     <Stack
-      css={{ color: theme.palette.text.secondary }}
+      style={{ color: theme.palette.text.secondary }}
       direction="row"
       spacing={1}
       alignItems="center"
diff --git a/site/src/theme/colors.ts b/site/src/theme/colors.ts
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
@@ -4,10 +4,8 @@ import dark from "./dark";
 import darkBlue from "./darkBlue";
 import light from "./light";
 import type { NewTheme } from "./experimental";
-import type { Colors } from "./colors";
 
 export interface Theme extends MuiTheme {
-  colors: Colors;
   experimental: NewTheme;
   monaco: monaco.editor.IStandaloneThemeData;
 }
