minimal fixes

coder · aslilac · Dec 21, 2023 · Dec 21, 2023 · Dec 21, 2023 · Dec 21, 2023
commit 72b9a8c4b3a4cbd38db12caa00bfd811e9be65da
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -36,7 +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 colors from "theme/tailwindColors";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
 import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";

diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
@@ -11,7 +11,7 @@ import { type FC, memo } from "react";
 import ReactMarkdown, { type Options } from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import gfm from "remark-gfm";
-import colors from "theme/tailwind";
+import colors from "theme/tailwindColors";
 import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 interface MarkdownProps {

diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
@@ -1,7 +1,7 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import type { AuditLog } from "api/typesGenerated";
-import colors from "theme/tailwind";
+import colors from "theme/tailwindColors";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
 const getDiffValue = (value: unknown): string => {

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -19,7 +19,7 @@ import {
 import { Fieldset } from "components/DeploySettingsLayout/Fieldset";
 import { Stack } from "components/Stack/Stack";
 import { getFormHelpers } from "utils/formUtils";
-import colors from "theme/tailwind";
+import colors from "theme/tailwindColors";
 
 export type AppearanceSettingsPageViewProps = {
   appearance: UpdateAppearanceConfig;

diff --git a/site/src/theme/dark/colors.ts b/site/src/theme/dark/colors.ts
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
@@ -1,5 +1,5 @@
 import { type NewTheme } from "../experimental";
-import colors from "../tailwind";
+import colors from "../tailwindColors";
 
 export default {
   l1: {

diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
@@ -1,11 +1,9 @@
-import colors from "./colors";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
 
 export default {
   ...muiTheme,
-  colors,
   experimental,
   monaco,
 };
diff --git a/site/src/theme/dark/mui.ts b/site/src/theme/dark/mui.ts
@@ -9,8 +9,7 @@ import {
   BUTTON_SM_HEIGHT,
   BUTTON_XL_HEIGHT,
 } from "../constants";
-import tw from "../tailwind";
-import colors from "./colors";
+import tw from "../tailwindColors";
 
 let muiTheme = createTheme({
   palette: {
@@ -22,46 +21,46 @@ let muiTheme = createTheme({
       dark: tw.sky[400],
     },
     secondary: {
-      main: colors.gray[11],
-      contrastText: colors.gray[4],
-      dark: colors.gray[9],
+      main: tw.zinc[500],
+      contrastText: tw.zinc[200],
+      dark: tw.zinc[400],
     },
     background: {
-      default: colors.gray[17],
-      paper: colors.gray[16],
+      default: tw.zinc[950],
+      paper: tw.zinc[900],
     },
     text: {
-      primary: colors.gray[1],
-      secondary: colors.gray[6],
-      disabled: colors.gray[9],
+      primary: tw.zinc[50],
+      secondary: tw.zinc[300],
+      disabled: tw.zinc[400],
     },
-    divider: colors.gray[13],
+    divider: tw.zinc[700],
     warning: {
-      light: colors.orange[9],
-      main: colors.orange[12],
-      dark: colors.orange[15],
+      light: tw.amber[500],
+      main: tw.amber[800],
+      dark: tw.amber[950],
     },
     success: {
-      main: colors.green[11],
-      dark: colors.green[12],
+      main: tw.green[500],
+      dark: tw.green[600],
     },
     info: {
-      light: colors.blue[7],
-      main: colors.blue[9],
-      dark: colors.blue[14],
-      contrastText: colors.gray[4],
+      light: tw.blue[400],
+      main: tw.blue[600],
+      dark: tw.blue[950],
+      contrastText: tw.zinc[200],
     },
     error: {
-      light: colors.red[6],
-      main: colors.red[8],
-      dark: colors.red[15],
-      contrastText: colors.gray[4],
+      light: tw.red[400],
+      main: tw.red[500],
+      dark: tw.red[950],
+      contrastText: tw.zinc[200],
     },
     action: {
-      hover: colors.gray[14],
+      hover: tw.zinc[800],
     },
     neutral: {
-      main: colors.gray[1],
+      main: tw.zinc[50],
     },
   },
   typography: {
@@ -118,7 +117,7 @@ muiTheme = createTheme(muiTheme, {
           },
         },
         colorDefault: {
-          backgroundColor: colors.gray[6],
+          backgroundColor: tw.zinc[300],
         },
       },
     },
@@ -170,26 +169,26 @@ muiTheme = createTheme(muiTheme, {
         },
         outlined: {
           ":hover": {
-            border: `1px solid ${colors.gray[11]}`,
+            border: `1px solid ${tw.zinc[500]}`,
           },
         },
         outlinedNeutral: {
-          borderColor: colors.gray[12],
+          borderColor: tw.zinc[600],
 
           "&.Mui-disabled": {
-            borderColor: colors.gray[13],
-            color: colors.gray[11],
+            borderColor: tw.zinc[700],
+            color: tw.zinc[500],
 
             "& > .MuiLoadingButton-loadingIndicator": {
-              color: colors.gray[11],
+              color: tw.zinc[500],
             },
           },
         },
         containedNeutral: {
-          backgroundColor: colors.gray[14],
+          backgroundColor: tw.zinc[800],
 
           "&:hover": {
-            backgroundColor: colors.gray[13],
+            backgroundColor: tw.zinc[700],
           },
         },
         iconSizeMedium: {
@@ -212,7 +211,7 @@ muiTheme = createTheme(muiTheme, {
         root: {
           ">button:hover+button": {
             // The !important is unfortunate, but necessary for the border.
-            borderLeftColor: `${colors.gray[11]} !important`,
+            borderLeftColor: `${tw.zinc[500]} !important`,
           },
         },
       },
@@ -318,7 +317,7 @@ muiTheme = createTheme(muiTheme, {
     MuiChip: {
       styleOverrides: {
         root: {
-          backgroundColor: colors.gray[12],
+          backgroundColor: tw.zinc[600],
         },
       },
     },
@@ -399,12 +398,12 @@ muiTheme = createTheme(muiTheme, {
         colorPrimary: {
           // Same as button
           "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors.gray[12],
+            borderColor: tw.zinc[600],
           },
           // The default outlined input color is white, which seemed jarring.
           "&:hover:not(.Mui-error):not(.Mui-focused) .MuiOutlinedInput-notchedOutline":
             {
-              borderColor: colors.gray[11],
+              borderColor: tw.zinc[500],
             },
         },
       },
@@ -442,11 +441,11 @@ muiTheme = createTheme(muiTheme, {
            * customization).
            */
           "&.Mui-focusVisible": {
-            boxShadow: `0 0 0 2px ${colors.blue[7]}`,
+            boxShadow: `0 0 0 2px ${tw.blue[400]}`,
           },
 
           "&.Mui-disabled": {
-            color: colors.gray[11],
+            color: tw.zinc[500],
           },
         },
       },
@@ -458,7 +457,7 @@ muiTheme = createTheme(muiTheme, {
           ".Mui-focusVisible .MuiSwitch-thumb": {
             // Had to thicken outline to make sure that the focus color didn't
             // bleed into the thumb and was still easily-visible
-            boxShadow: `0 0 0 3px ${colors.blue[7]}`,
+            boxShadow: `0 0 0 3px ${tw.blue[400]}`,
           },
         },
       },
@@ -542,7 +541,7 @@ muiTheme = createTheme(muiTheme, {
       styleOverrides: {
         root: {
           "&.Mui-focusVisible": {
-            boxShadow: `0 0 0 2px ${colors.blue[7]}`,
+            boxShadow: `0 0 0 2px ${tw.blue[400]}`,
           },
         },
       },

diff --git a/site/src/theme/darkBlue/colors.ts b/site/src/theme/darkBlue/colors.ts
@@ -1,4 +1,4 @@
-import tw from "../tailwind";
+import tw from "../tailwindColors";
 
 export default {
   white: "#fff",

diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts
@@ -1,5 +1,5 @@
 import { type NewTheme } from "../experimental";
-import colors from "../tailwind";
+import colors from "../tailwindColors";
 
 export default {
   l1: {

diff --git a/site/src/theme/light/colors.ts b/site/src/theme/light/colors.ts
@@ -1,4 +1,4 @@
-import tw from "../tailwind";
+import tw from "../tailwindColors";
 
 export default {
   white: "#fff",

diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
@@ -1,5 +1,5 @@
 import { type NewTheme } from "../experimental";
-import colors from "../tailwind";
+import colors from "../tailwindColors";
 
 export default {
   l1: {

diff --git a/site/src/theme/light/mui.ts b/site/src/theme/light/mui.ts
@@ -9,7 +9,7 @@ import {
   BUTTON_SM_HEIGHT,
   BUTTON_XL_HEIGHT,
 } from "../constants";
-import tw from "../tailwind";
+import tw from "../tailwindColors";
 
 let muiTheme = createTheme({
   palette: {

diff --git a/site/src/theme/tailwind.ts → site/src/theme/tailwindColors.ts b/site/src/theme/tailwind.ts → site/src/theme/tailwindColors.ts