coder · aslilac · Nov 13, 2023 · Nov 9, 2023 · Nov 13, 2023 · Nov 13, 2023
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -6,7 +6,7 @@ import {
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { withRouter } from "storybook-addon-react-router-v6";
 import { HelmetProvider } from "react-helmet-async";
-import { dark } from "theme";
+import { dark } from "theme/mui";
 import "theme/globalFonts";
 import { QueryClient, QueryClientProvider } from "react-query";
 

diff --git a/site/src/@types/emotion.d.ts b/site/src/@types/emotion.d.ts
@@ -1,5 +1,8 @@
 import type { DefaultTheme as MuiTheme } from "@mui/system";
+import type { NewTheme } from "theme/experimental";
 
 declare module "@emotion/react" {
-  interface Theme extends MuiTheme {}
+  interface Theme extends MuiTheme {
+    experimental: NewTheme;
+  }
 }
diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts
@@ -1,10 +1,19 @@
-import { PaletteColor, PaletteColorOptions, Theme } from "@mui/material/styles";
+import type {
+  PaletteColor,
+  PaletteColorOptions,
+  Theme,
+} from "@mui/material/styles";
+import type { NewTheme } from "theme/experimental";
 
 declare module "@mui/styles/defaultTheme" {
   interface DefaultTheme extends Theme {}
 }
 
 declare module "@mui/material/styles" {
+  interface Theme {
+    experimental: NewTheme;
+  }
+
   interface TypeBackground {
     paperLight: string;
   }
@@ -23,3 +32,9 @@ declare module "@mui/material/Button" {
     neutral: true;
   }
 }
+
+declare module "@mui/system" {
+  interface Theme {
+    experimental: NewTheme;
+  }
+}
diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -6,7 +6,8 @@ import { HelmetProvider } from "react-helmet-async";
 import { AppRouter } from "./AppRouter";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
-import { dark } from "./theme";
+import { dark } from "./theme/mui";
+import { dark as experimental } from "./theme/experimental";
 import "./theme/globalFonts";
 import {
   StyledEngineProvider,
@@ -25,11 +26,16 @@ const defaultQueryClient = new QueryClient({
   },
 });
 
+const theme = {
+  ...dark,
+  experimental,
+};
+
 export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
   return (
     <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={dark}>
-        <EmotionThemeProvider theme={dark}>
+      <MuiThemeProvider theme={theme}>
+        <EmotionThemeProvider theme={theme}>
           <CssBaseline enableColorScheme />
           {children}
         </EmotionThemeProvider>

diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx
@@ -1,11 +1,11 @@
 import Badge from "@mui/material/Badge";
-import { useTheme, withStyles } from "@mui/styles";
-import { FC } from "react";
+import { withStyles } from "@mui/styles";
+import { type FC } from "react";
 import { WorkspaceBuild } from "api/typesGenerated";
 import { getDisplayWorkspaceBuildStatus } from "utils/workspace";
 import { Avatar, AvatarProps } from "components/Avatar/Avatar";
-import { PaletteIndex } from "theme/theme";
-import { Theme } from "@mui/material/styles";
+import type { PaletteIndex } from "theme/mui";
+import { useTheme } from "@emotion/react";
 import { BuildIcon } from "components/BuildIcon/BuildIcon";
 
 interface StylesBadgeProps {
@@ -30,7 +30,7 @@ export interface BuildAvatarProps {
 }
 
 export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
-  const theme = useTheme<Theme>();
+  const theme = useTheme();
   const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build);
 
   return (

diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -1,27 +1,26 @@
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
-import MenuIcon from "@mui/icons-material/Menu";
-import { CoderIcon } from "components/Icons/CoderIcon";
-import { type FC, type ReactNode, useRef, useState } from "react";
-import { NavLink, useLocation, useNavigate } from "react-router-dom";
-import { colors } from "theme/colors";
-import * as TypesGen from "api/typesGenerated";
-import { navHeight } from "theme/constants";
-import { UserDropdown } from "./UserDropdown/UserDropdown";
+import Divider from "@mui/material/Divider";
+import Skeleton from "@mui/material/Skeleton";
 import Box from "@mui/material/Box";
 import Menu from "@mui/material/Menu";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
+import MenuIcon from "@mui/icons-material/Menu";
+import Typography from "@mui/material/Typography";
+import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { type FC, type ReactNode, useRef, useState } from "react";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
+import { colors } from "theme/colors";
+import type * as TypesGen from "api/typesGenerated";
+import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
 import { ProxyContextValue } from "contexts/ProxyContext";
 import { displayError } from "components/GlobalSnackbar/utils";
-import Divider from "@mui/material/Divider";
-import Skeleton from "@mui/material/Skeleton";
-import { BUTTON_SM_HEIGHT } from "theme/theme";
+import { CoderIcon } from "components/Icons/CoderIcon";
 import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
 import { usePermissions } from "hooks/usePermissions";
-import Typography from "@mui/material/Typography";
-import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { UserDropdown } from "./UserDropdown/UserDropdown";
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent(
   "status:active",

diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -2,11 +2,10 @@ import Badge from "@mui/material/Badge";
 import { type FC, type PropsWithChildren } from "react";
 import { colors } from "theme/colors";
 import type * as TypesGen from "api/typesGenerated";
-import { navHeight } from "theme/constants";
+import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { UserDropdownContent } from "./UserDropdownContent";
-import { BUTTON_SM_HEIGHT } from "theme/theme";
 import { css } from "@emotion/react";
 import {
   Popover,

diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -1,10 +1,9 @@
+import Box, { type BoxProps } from "@mui/material/Box";
+import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
+import { css, useTheme } from "@emotion/react";
 import type { PropsWithChildren, FC } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import Box, { BoxProps } from "@mui/material/Box";
-import { useTheme } from "@mui/system";
 import { DisabledBadge, EnabledBadge } from "./Badges";
-import { css } from "@emotion/react";
-import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 
 export const OptionName: FC<PropsWithChildren> = (props) => {
   const { children } = props;

diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts
@@ -7,3 +7,8 @@ export const containerWidth = 1380;
 export const containerWidthMedium = 1080;
 export const sidePadding = 24;
 export const dashboardContentBottomPadding = 8 * 6;
+
+// MUI does not have aligned heights for buttons and inputs so we have to "hack" it a little bit
+export const BUTTON_LG_HEIGHT = 40;
+export const BUTTON_MD_HEIGHT = 36;
+export const BUTTON_SM_HEIGHT = 32;
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
@@ -0,0 +1,154 @@
+import colors from "./tailwind";
+
+export interface NewTheme {
+  l1: Role; // page background, things which sit at the "root level"
+  l2: InteractiveRole; // sidebars, table headers, navigation
+  l3: InteractiveRole; // buttons, inputs
+  modal: Role; // modals/popovers/dropdowns
+
+  roles: {
+    danger: InteractiveRole; // delete, immutable parameters, stuff that sucks to fix
+    error: Role; // something went wrong
+    warning: Role; // something is amiss
+    notice: Role; // like info, but actionable. "this is fine, but you may want to..."
+    info: Role; // just sharing :)
+    success: InteractiveRole; // yay!! it's working!!
+    active: Role; // selected items, focused inputs, in progress
+  };
+}
+
+export interface Role {
+  background: string;
+  outline: string;
+  fill: string;
+  // contrastOutline?: string;
+  text: string;
+}
+
+export interface InteractiveRole extends Role {
+  disabled: Role;
+  hover: Role;
+}
+
+export const dark: NewTheme = {
+  l1: {
+    background: colors.gray[950],
+    outline: colors.gray[700],
+    fill: "#f00",
+    text: colors.white,
+  },
+
+  l2: {
+    background: colors.gray[900],
+    outline: colors.gray[700],
+    fill: "#f00",
+    text: colors.white,
+    disabled: {
+      background: "#f00",
+      outline: "#f00",
+      fill: "#f00",
+      text: colors.gray[200],
+    },
+    hover: {
+      background: "#f00",
+      outline: "#f00",
+      fill: "#f00",
+      text: colors.white,
+    },
+  },
+
+  l3: {
+    background: colors.gray[800],
+    outline: colors.gray[700],
+    fill: "#f00",
+    text: colors.white,
+    disabled: {
+      background: "#f00",
+      outline: "#f00",
+      fill: "#f00",
+      text: colors.gray[200],
+    },
+    hover: {
+      background: "#f00",
+      outline: "#f00",
+      fill: "#f00",
+      text: colors.white,
+    },
+  },
+
+  modal: {
+    background: "#f00",
+    outline: "#f00",
+    fill: "#f00",
+    text: colors.white,
+  },
+
+  roles: {
+    danger: {
+      background: colors.orange[950],
+      outline: colors.orange[500],
+      fill: colors.orange[600],
+      text: colors.orange[50],
+      disabled: {
+        background: colors.orange[950],
+        outline: colors.orange[600],
+        fill: colors.orange[800],
+        text: colors.orange[200],
+      },
+      hover: {
+        background: colors.orange[900],
+        outline: colors.orange[500],
+        fill: colors.orange[500],
+        text: colors.orange[50],
+      },
+    },
+    error: {
+      background: colors.red[950],
+      outline: colors.red[500],
+      fill: colors.red[600],
+      text: colors.red[50],
+    },
+    warning: {
+      background: colors.amber[950],
+      outline: colors.amber[300],
+      fill: "#f00",
+      text: colors.amber[50],
+    },
+    notice: {
+      background: colors.yellow[950],
+      outline: colors.yellow[200],
+      fill: "#f00",
+      text: colors.yellow[50],
+    },
+    info: {
+      background: colors.blue[950],
+      outline: colors.blue[400],
+      fill: "#f00",
+      text: colors.blue[50],
+    },
+    success: {
+      background: colors.green[950],
+      outline: colors.green[500],
+      fill: colors.green[600],
+      text: colors.green[50],
+      disabled: {
+        background: colors.green[950],
+        outline: colors.green[600],
+        fill: colors.green[800],
+        text: colors.green[200],
+      },
+      hover: {
+        background: colors.green[900],
+        outline: colors.green[500],
+        fill: colors.green[500],
+        text: colors.green[50],
+      },
+    },
+    active: {
+      background: colors.sky[950],
+      outline: colors.sky[500],
+      fill: "#f00",
+      text: colors.sky[50],
+    },
+  },
+};
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
diff --git a/site/src/theme/theme.ts → site/src/theme/mui.ts b/site/src/theme/theme.ts → site/src/theme/mui.ts
@@ -1,11 +1,12 @@
 import { colors, experimentalTheme } from "./colors";
 import { createTheme, type ThemeOptions } from "@mui/material/styles";
-import { BODY_FONT_FAMILY, borderRadius } from "./constants";
-
-// MUI does not have aligned heights for buttons and inputs so we have to "hack" it a little bit
-export const BUTTON_LG_HEIGHT = 40;
-export const BUTTON_MD_HEIGHT = 36;
-export const BUTTON_SM_HEIGHT = 32;
+import {
+  BODY_FONT_FAMILY,
+  borderRadius,
+  BUTTON_LG_HEIGHT,
+  BUTTON_MD_HEIGHT,
+  BUTTON_SM_HEIGHT,
+} from "./constants";
 
 export type PaletteIndex =
   | "primary"