From 0092d9332cd021597cdfa8adcc9ad1c665acbd33 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 16:46:47 +0000
Subject: [PATCH 01/19] add light theme

---
 site/.storybook/main.js                       |   8 +-
 site/.storybook/preview.jsx                   |  53 +-
 site/package.json                             |   1 +
 site/pnpm-lock.yaml                           |   9 +
 .../ActiveUserChart/ActiveUserChart.tsx       |  10 +-
 site/src/components/Badges/Badges.stories.tsx |  23 +
 site/src/components/Badges/Badges.tsx         |  28 +-
 .../CodeExample/CodeExample.stories.tsx       |  12 +-
 .../components/CodeExample/CodeExample.tsx    |  68 +--
 .../components/ExternalIcon/ExternalIcon.tsx  |  37 ++
 site/src/components/Pill/Pill.tsx             |   9 +-
 .../components/Resources/ResourceAvatar.tsx   |  28 +-
 .../AuditLogDescription.tsx                   |  10 +-
 site/src/pages/AuditPage/AuditPaywall.tsx     |   8 +-
 .../ExternalAuth.stories.tsx                  |  26 +-
 .../CreateWorkspacePage/ExternalAuth.tsx      | 122 ++--
 site/src/pages/GroupsPage/GroupsPageView.tsx  |   3 +-
 .../StarterTemplatePageView.tsx               |  17 +-
 .../TemplateInsightsPage.tsx                  |   4 +-
 .../TemplatePermissionsPage.tsx               |   2 +-
 .../AppearancePage/AppearanceForm.stories.tsx |   1 -
 .../AppearancePage/AppearanceForm.tsx         |  26 +-
 .../ExternalAuthPageView.stories.tsx          |  12 +-
 .../ExternalAuthPage/ExternalAuthPageView.tsx |  25 +-
 .../SSHKeysPage/SSHKeysPageView.stories.tsx   |   3 +-
 site/src/pages/WorkspaceBuildPage/Sidebar.tsx |   2 +-
 site/src/testHelpers/entities.ts              |  16 +-
 site/src/theme/dark/experimental.ts           |   6 +
 site/src/theme/dark/mui.ts                    |  16 +-
 site/src/theme/darkBlue/experimental.ts       |   6 +
 site/src/theme/darkBlue/mui.ts                |   1 +
 site/src/theme/experimental.ts                |   1 +
 site/src/theme/index.ts                       |   3 +-
 site/src/theme/light/colors.ts                |  62 ++
 site/src/theme/light/experimental.ts          | 136 +++++
 site/src/theme/light/index.ts                 |   9 +
 site/src/theme/light/mui.ts                   | 576 ++++++++++++++++++
 site/src/utils/latency.ts                     |   6 +-
 38 files changed, 1146 insertions(+), 239 deletions(-)
 create mode 100644 site/src/components/ExternalIcon/ExternalIcon.tsx
 create mode 100644 site/src/theme/light/colors.ts
 create mode 100644 site/src/theme/light/experimental.ts
 create mode 100644 site/src/theme/light/index.ts
 create mode 100644 site/src/theme/light/mui.ts

diff --git a/site/.storybook/main.js b/site/.storybook/main.js
index f955a9a2d9011..e5ede7b46b2f8 100644
--- a/site/.storybook/main.js
+++ b/site/.storybook/main.js
@@ -3,10 +3,16 @@ import turbosnap from "vite-plugin-turbosnap";
 module.exports = {
   stories: ["../src/**/*.stories.tsx"],
   addons: [
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        backgrounds: false,
+      },
+    },
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@storybook/addon-mdx-gfm",
     "@storybook/addon-actions",
+    "@storybook/addon-themes",
   ],
   staticDirs: ["../static"],
   framework: {
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
index 2a687e27cdb01..65ee5242b6c1d 100644
--- a/site/.storybook/preview.jsx
+++ b/site/.storybook/preview.jsx
@@ -4,24 +4,33 @@ import {
   ThemeProvider as MuiThemeProvider,
 } from "@mui/material/styles";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { DecoratorHelpers } from "@storybook/addon-themes";
 import { withRouter } from "storybook-addon-react-router-v6";
+import { QueryClient, QueryClientProvider } from "react-query";
 import { HelmetProvider } from "react-helmet-async";
-import theme from "theme";
-import colors from "theme/tailwind";
+import themes from "theme";
 import "theme/globalFonts";
-import { QueryClient, QueryClientProvider } from "react-query";
+
+DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");
 
 export const decorators = [
-  (Story) => (
-    <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme.dark}>
-        <EmotionThemeProvider theme={theme.dark}>
-          <CssBaseline />
-          <Story />
-        </EmotionThemeProvider>
-      </MuiThemeProvider>
-    </StyledEngineProvider>
-  ),
+  (Story, context) => {
+    const selectedTheme = DecoratorHelpers.pluckThemeFromContext(context);
+    const { themeOverride } = DecoratorHelpers.useThemeParameters();
+
+    const selected = themeOverride || selectedTheme || "dark";
+
+    return (
+      <StyledEngineProvider injectFirst>
+        <MuiThemeProvider theme={themes[selected]}>
+          <EmotionThemeProvider theme={themes[selected]}>
+            <CssBaseline />
+            <Story />
+          </EmotionThemeProvider>
+        </MuiThemeProvider>
+      </StyledEngineProvider>
+    );
+  },
   withRouter,
   (Story) => {
     return (
@@ -50,18 +59,12 @@ export const decorators = [
 ];
 
 export const parameters = {
-  backgrounds: {
-    default: "dark",
-    values: [
-      {
-        name: "dark",
-        value: colors.gray[950],
-      },
-      {
-        name: "light",
-        value: colors.gray[50],
-      },
-    ],
+  options: {
+    storySort: {
+      method: "alphabetical",
+      order: ["design", "pages", "components"],
+      locales: "en-US",
+    },
   },
   actions: {
     argTypesRegex: "^(on|handler)[A-Z].*",
diff --git a/site/package.json b/site/package.json
index 95614f5cc0606..b952d7ae6d3c1 100644
--- a/site/package.json
+++ b/site/package.json
@@ -104,6 +104,7 @@
     "@storybook/addon-essentials": "7.5.2",
     "@storybook/addon-links": "7.5.2",
     "@storybook/addon-mdx-gfm": "7.5.2",
+    "@storybook/addon-themes": "^7.6.4",
     "@storybook/react": "7.5.2",
     "@storybook/react-vite": "7.5.2",
     "@swc/core": "1.3.38",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
index 23c835d6f0ea5..c04f20a40e515 100644
--- a/site/pnpm-lock.yaml
+++ b/site/pnpm-lock.yaml
@@ -233,6 +233,9 @@ devDependencies:
   '@storybook/addon-mdx-gfm':
     specifier: 7.5.2
     version: 7.5.2
+  '@storybook/addon-themes':
+    specifier: ^7.6.4
+    version: 7.6.5
   '@storybook/react':
     specifier: 7.5.2
     version: 7.5.2(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)
@@ -4087,6 +4090,12 @@ packages:
       - '@types/react-dom'
     dev: true
 
+  /@storybook/addon-themes@7.6.5:
+    resolution: {integrity: sha512-TzGCxwdYAAlgeYuTYhMnL5KLutLVHrAXjVtWsYCYV+SVx+JklqCTk4zNUod64Z+sIYRMYd+YVC1KsWF2LHirow==}
+    dependencies:
+      ts-dedent: 2.2.0
+    dev: true
+
   /@storybook/addon-toolbars@7.5.2(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-BXzb5NOpILFOM7EOBxcF2Qj/q6BicWZ1AvAddORWGmqSa/MxMIa4X52oKXFUTHKBkrTO1X0XqHmoF88qm3TUFg==}
     peerDependencies:
diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
index 8541297819b99..b6f27d4be2906 100644
--- a/site/src/components/ActiveUserChart/ActiveUserChart.tsx
+++ b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -94,6 +94,7 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
     },
     scales: {
       y: {
+        grid: { color: theme.palette.divider },
         suggestedMin: 0,
         ticks: {
           precision: 0,
@@ -101,6 +102,7 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
       },
 
       x: {
+        grid: { color: theme.palette.divider },
         ticks: {
           stepSize: data.length > 10 ? 2 : undefined,
         },
@@ -122,11 +124,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
           {
             label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
             data: chartData,
-            pointBackgroundColor: theme.palette.info.light,
-            pointBorderColor: theme.palette.info.light,
-            borderColor: theme.palette.info.light,
-            backgroundColor: theme.palette.info.dark,
-            fill: "origin",
+            pointBackgroundColor: theme.experimental.roles.active.outline,
+            pointBorderColor: theme.experimental.roles.active.outline,
+            borderColor: theme.experimental.roles.active.outline,
           },
         ],
       }}
diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx
index e699b6317f0e7..ed7e88ea1b6e7 100644
--- a/site/src/components/Badges/Badges.stories.tsx
+++ b/site/src/components/Badges/Badges.stories.tsx
@@ -2,9 +2,14 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   Badges,
   AlphaBadge,
+  DisabledBadge,
   EnabledBadge,
   EntitledBadge,
   EnterpriseBadge,
+  HealthyBadge,
+  NotHealthyBadge,
+  NotRegisteredBadge,
+  NotReachableBadge,
 } from "./Badges";
 
 const meta: Meta<typeof Badges> = {
@@ -26,6 +31,24 @@ export const Entitled: Story = {
     children: <EntitledBadge />,
   },
 };
+export const ProxyStatus: Story = {
+  args: {
+    children: (
+      <>
+        <HealthyBadge />
+        <HealthyBadge derpOnly />
+        <NotHealthyBadge />
+        <NotRegisteredBadge />
+        <NotReachableBadge />
+      </>
+    ),
+  },
+};
+export const Disabled: Story = {
+  args: {
+    children: <DisabledBadge />,
+  },
+};
 export const Enterprise: Story = {
   args: {
     children: <EnterpriseBadge />,
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index e1ca731f749bf..b8e6b9ae330cd 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -22,14 +22,17 @@ const styles = {
   enabledBadge: (theme) => ({
     border: `1px solid ${theme.experimental.roles.success.outline}`,
     backgroundColor: theme.experimental.roles.success.background,
+    color: theme.experimental.roles.success.text,
   }),
   errorBadge: (theme) => ({
     border: `1px solid ${theme.experimental.roles.error.outline}`,
     backgroundColor: theme.experimental.roles.error.background,
+    color: theme.experimental.roles.error.text,
   }),
   warnBadge: (theme) => ({
     border: `1px solid ${theme.experimental.roles.warning.outline}`,
     backgroundColor: theme.experimental.roles.warning.background,
+    color: theme.experimental.roles.warning.text,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
 
@@ -42,10 +45,9 @@ export const EntitledBadge: FC = () => {
 };
 
 interface HealthyBadge {
-  derpOnly: boolean;
+  derpOnly?: boolean;
 }
-export const HealthyBadge: FC<HealthyBadge> = (props) => {
-  const { derpOnly } = props;
+export const HealthyBadge: FC<HealthyBadge> = ({ derpOnly }) => {
   return (
     <span css={[styles.badge, styles.enabledBadge]}>
       {derpOnly ? "Healthy (DERP only)" : "Healthy"}
@@ -79,8 +81,9 @@ export const DisabledBadge: FC = () => {
       css={[
         styles.badge,
         (theme) => ({
-          border: `1px solid ${theme.palette.divider}`,
-          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.experimental.l1.outline}`,
+          backgroundColor: theme.experimental.l1.background,
+          color: theme.experimental.l1.text,
         }),
       ]}
     >
@@ -95,8 +98,9 @@ export const EnterpriseBadge: FC = () => {
       css={[
         styles.badge,
         (theme) => ({
-          backgroundColor: theme.palette.info.dark,
-          border: `1px solid ${theme.palette.info.light}`,
+          backgroundColor: theme.experimental.roles.info.background,
+          border: `1px solid ${theme.experimental.roles.info.outline}`,
+          color: theme.experimental.roles.info.text,
         }),
       ]}
     >
@@ -110,11 +114,11 @@ export const AlphaBadge: FC = () => {
     <span
       css={[
         styles.badge,
-        {
-          border: `1px solid ${colors.violet[600]}`,
-          backgroundColor: colors.violet[950],
-          color: colors.violet[50],
-        },
+        (theme) => ({
+          border: `1px solid ${theme.experimental.roles.preview.outline}`,
+          backgroundColor: theme.experimental.roles.preview.background,
+          color: theme.experimental.roles.preview.text,
+        }),
       ]}
     >
       Alpha
diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
index 35c3da065f467..1af88cd98dafd 100644
--- a/site/src/components/CodeExample/CodeExample.stories.tsx
+++ b/site/src/components/CodeExample/CodeExample.stories.tsx
@@ -1,22 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { CodeExample } from "./CodeExample";
 
-const sampleCode = `echo "Hello, world"`;
-
 const meta: Meta<typeof CodeExample> = {
   title: "components/CodeExample",
   component: CodeExample,
-  argTypes: {
-    code: { control: "string", defaultValue: sampleCode },
+  args: {
+    code: `echo "hello, friend!"`,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof CodeExample>;
 
-export const Example: Story = {
+export const Example: Story = {};
+
+export const Secret: Story = {
   args: {
-    code: sampleCode,
+    secret: true,
   },
 };
 
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index 7f6dfc62cefbf..9014f04a58ce5 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,51 +1,51 @@
 import { type FC } from "react";
-import { useTheme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { CopyButton } from "../CopyButton/CopyButton";
 
 export interface CodeExampleProps {
   code: string;
-  password?: boolean;
+  secret?: boolean;
   className?: string;
 }
 
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: FC<CodeExampleProps> = (props) => {
-  const { code, password, className } = props;
-  const theme = useTheme();
-
+export const CodeExample: FC<CodeExampleProps> = ({
+  code,
+  secret,
+  className,
+}) => {
   return (
-    <div
-      css={{
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        background: "rgb(0 0 0 / 30%)",
-        color: theme.palette.primary.contrastText,
-        fontFamily: MONOSPACE_FONT_FAMILY,
-        fontSize: 14,
-        borderRadius: 8,
-        padding: 8,
-        lineHeight: "150%",
-        border: `1px solid ${theme.palette.divider}`,
-      }}
-      className={className}
-    >
-      <code
-        css={{
-          padding: "0 8px",
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          wordBreak: "break-all",
-          "-webkit-text-security": password ? "disc" : undefined,
-        }}
-      >
-        {code}
-      </code>
+    <div css={styles.container} className={className}>
+      <code css={[styles.code, secret && styles.secret]}>{code}</code>
       <CopyButton text={code} />
     </div>
   );
 };
+
+const styles = {
+  container: (theme) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    color: theme.experimental.l1.text,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    fontSize: 14,
+    borderRadius: 8,
+    padding: 8,
+    lineHeight: "150%",
+    border: `1px solid ${theme.experimental.l1.outline}`,
+  }),
+
+  code: {
+    padding: "0 8px",
+    flexGrow: 1,
+    wordBreak: "break-all",
+  },
+
+  secret: {
+    "-webkit-text-security": "disc", // also supported by firefox
+  },
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/ExternalIcon/ExternalIcon.tsx b/site/src/components/ExternalIcon/ExternalIcon.tsx
new file mode 100644
index 0000000000000..527847511343e
--- /dev/null
+++ b/site/src/components/ExternalIcon/ExternalIcon.tsx
@@ -0,0 +1,37 @@
+import { type Interpolation, type Theme } from "@emotion/react";
+import { type FC, type ImgHTMLAttributes } from "react";
+import colors from "theme/tailwind";
+
+interface ExternalIconProps extends ImgHTMLAttributes<HTMLImageElement> {
+  size?: number;
+}
+
+export const ExternalIcon: FC<ExternalIconProps> = ({
+  size = 36,
+  ...attrs
+}) => {
+  return (
+    <div css={[styles.container, { height: size, width: size }]}>
+      <img
+        alt=""
+        aria-hidden
+        css={[
+          styles.icon,
+          { height: size, width: size, padding: Math.ceil(size / 6) },
+        ]}
+        {...attrs}
+      />
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    borderRadius: 9999,
+    overflow: "clip",
+  },
+  icon: {
+    backgroundColor: "#000",
+    objectFit: "contain",
+  },
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 132955363c0af..edfc88c0a5490 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -1,5 +1,5 @@
 import { type FC, type ReactNode, useMemo, forwardRef } from "react";
-import { css, type Interpolation, type Theme } from "@emotion/react";
+import { css, useTheme, type Interpolation, type Theme } from "@emotion/react";
 import type { ThemeRole } from "theme/experimental";
 
 export type PillType = ThemeRole | keyof typeof themeOverrides;
@@ -14,8 +14,8 @@ export interface PillProps {
 
 const themeOverrides = {
   neutral: (theme) => ({
-    backgroundColor: theme.colors.gray[13],
-    borderColor: theme.colors.gray[6],
+    backgroundColor: theme.experimental.l1.background,
+    borderColor: theme.experimental.l1.outline,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
 
@@ -30,6 +30,7 @@ const themeStyles = (type: ThemeRole) => (theme: Theme) => {
 export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
   (props, ref) => {
     const { icon, text = null, type = "neutral", ...attrs } = props;
+    const theme = useTheme();
 
     const typeStyles = useMemo(() => {
       if (type in themeOverrides) {
@@ -50,7 +51,7 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
             borderStyle: "solid",
             borderRadius: 99999,
             fontSize: 12,
-            color: "#FFF",
+            color: theme.experimental.l1.text,
             height: 24,
             paddingLeft: icon ? 6 : 12,
             paddingRight: 12,
diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
index b74a75b754c80..0ce16cb2f441f 100644
--- a/site/src/components/Resources/ResourceAvatar.tsx
+++ b/site/src/components/Resources/ResourceAvatar.tsx
@@ -1,15 +1,13 @@
-import { Avatar, AvatarIcon } from "components/Avatar/Avatar";
-import { FC } from "react";
-import { WorkspaceResource } from "api/typesGenerated";
+import { type FC } from "react";
+import type { WorkspaceResource } from "api/typesGenerated";
+import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";
 
 const FALLBACK_ICON = "/icon/widgets.svg";
 
 // These resources (i.e. docker_image, kubernetes_deployment) map to Terraform
 // resource types. These are the most used ones and are based on user usage.
 // We may want to update from time-to-time.
-const BUILT_IN_ICON_PATHS: {
-  [resourceType: WorkspaceResource["type"]]: string;
-} = {
+const BUILT_IN_ICON_PATHS: Record<string, string> = {
   docker_volume: "/icon/database.svg",
   docker_container: "/icon/memory.svg",
   docker_image: "/icon/container.svg",
@@ -19,28 +17,16 @@ const BUILT_IN_ICON_PATHS: {
   google_compute_instance: "/icon/memory.svg",
   aws_instance: "/icon/memory.svg",
   kubernetes_deployment: "/icon/memory.svg",
-  null_resource: FALLBACK_ICON,
 };
 
 export const getIconPathResource = (resourceType: string): string => {
-  if (resourceType in BUILT_IN_ICON_PATHS) {
-    return BUILT_IN_ICON_PATHS[resourceType];
-  }
-
-  return FALLBACK_ICON;
+  return BUILT_IN_ICON_PATHS[resourceType] ?? FALLBACK_ICON;
 };
 
 export type ResourceAvatarProps = { resource: WorkspaceResource };
 
 export const ResourceAvatar: FC<ResourceAvatarProps> = ({ resource }) => {
-  const hasIcon = resource.icon && resource.icon !== "";
-  const avatarSrc = hasIcon
-    ? resource.icon
-    : getIconPathResource(resource.type);
+  const avatarSrc = resource.icon || getIconPathResource(resource.type);
 
-  return (
-    <Avatar background>
-      <AvatarIcon src={avatarSrc} alt={resource.name} />
-    </Avatar>
-  );
+  return <ExternalIcon src={avatarSrc} alt={resource.name} />;
 };
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx
index f583bd694aa2e..9e59cceb4e3df 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx
@@ -1,12 +1,16 @@
-import { FC } from "react";
+import { type FC } from "react";
 import { AuditLog } from "api/typesGenerated";
 import { Link as RouterLink } from "react-router-dom";
 import Link from "@mui/material/Link";
 import { BuildAuditDescription } from "./BuildAuditDescription";
 
-export const AuditLogDescription: FC<{ auditLog: AuditLog }> = ({
+interface AuditLogDescriptionProps {
+  auditLog: AuditLog;
+}
+
+export const AuditLogDescription: FC<AuditLogDescriptionProps> = ({
   auditLog,
-}): JSX.Element => {
+}) => {
   let target = auditLog.resource_target.trim();
   const user = auditLog.user?.username.trim();
 
diff --git a/site/src/pages/AuditPage/AuditPaywall.tsx b/site/src/pages/AuditPage/AuditPaywall.tsx
index 9fab0c4899156..8de74dbdc251c 100644
--- a/site/src/pages/AuditPage/AuditPaywall.tsx
+++ b/site/src/pages/AuditPage/AuditPaywall.tsx
@@ -13,8 +13,12 @@ export const AuditPaywall: FC = () => {
       description="Audit Logs allows Auditors to monitor user operations in their deployment. To use this feature, you need an Enterprise license."
       cta={
         <Stack direction="row" alignItems="center">
-          <Link href={docs("/admin/upgrade")} target="_blank" rel="noreferrer">
-            <Button size="small" startIcon={<ArrowRightAltOutlined />}>
+          <Link target="_blank" rel="noreferrer">
+            <Button
+              href={docs("/admin/upgrade")}
+              size="small"
+              startIcon={<ArrowRightAltOutlined />}
+            >
               See how to upgrade
             </Button>
           </Link>
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuth.stories.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuth.stories.tsx
index 87e7607282068..72e313968c688 100644
--- a/site/src/pages/CreateWorkspacePage/ExternalAuth.stories.tsx
+++ b/site/src/pages/CreateWorkspacePage/ExternalAuth.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta<typeof ExternalAuth> = {
 export default meta;
 type Story = StoryObj<typeof ExternalAuth>;
 
-export const GithubNotAuthenticated: Story = {
+export const Github: Story = {
   args: {
     displayIcon: "/icon/github.svg",
     displayName: "GitHub",
@@ -17,6 +17,24 @@ export const GithubNotAuthenticated: Story = {
   },
 };
 
+export const GithubTimeout: Story = {
+  args: {
+    displayIcon: "/icon/github.svg",
+    displayName: "GitHub",
+    authenticated: false,
+    externalAuthPollingState: "abandoned",
+  },
+};
+
+export const GithubFailed: Story = {
+  args: {
+    displayIcon: "/icon/github.svg",
+    displayName: "GitHub",
+    authenticated: false,
+    error: "Github doesn't like you",
+  },
+};
+
 export const GithubAuthenticated: Story = {
   args: {
     displayIcon: "/icon/github.svg",
@@ -25,7 +43,7 @@ export const GithubAuthenticated: Story = {
   },
 };
 
-export const GitlabNotAuthenticated: Story = {
+export const Gitlab: Story = {
   args: {
     displayIcon: "/icon/gitlab.svg",
     displayName: "GitLab",
@@ -41,7 +59,7 @@ export const GitlabAuthenticated: Story = {
   },
 };
 
-export const AzureDevOpsNotAuthenticated: Story = {
+export const AzureDevOps: Story = {
   args: {
     displayIcon: "/icon/azure-devops.svg",
     displayName: "Azure DevOps",
@@ -57,7 +75,7 @@ export const AzureDevOpsAuthenticated: Story = {
   },
 };
 
-export const BitbucketNotAuthenticated: Story = {
+export const Bitbucket: Story = {
   args: {
     displayIcon: "/icon/bitbucket.svg",
     displayName: "Bitbucket",
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx
index 691b6681afddb..b85d2bcb3145b 100644
--- a/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx
+++ b/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx
@@ -16,70 +16,82 @@ export interface ExternalAuthProps {
   startPollingExternalAuth: () => void;
   error?: string;
   message?: string;
+  fullWidth?: boolean;
 }
 
-export const ExternalAuth: FC<ExternalAuthProps> = (props) => {
-  const {
-    displayName,
-    displayIcon,
-    authenticated,
-    authenticateURL,
-    externalAuthPollingState,
-    startPollingExternalAuth,
-    error,
-    message,
-  } = props;
-
+export const ExternalAuth: FC<ExternalAuthProps> = ({
+  displayName,
+  displayIcon,
+  authenticated,
+  authenticateURL,
+  externalAuthPollingState,
+  startPollingExternalAuth,
+  error,
+  message,
+  fullWidth = true,
+}) => {
   const messageContent =
     message ??
     (authenticated
       ? `Authenticated with ${displayName}`
       : `Login with ${displayName}`);
+
   return (
-    <Tooltip
-      title={authenticated && `${displayName} has already been connected.`}
-    >
-      <Stack alignItems="center" spacing={1}>
-        <LoadingButton
-          loadingPosition="start"
-          loading={externalAuthPollingState === "polling"}
-          href={authenticateURL}
-          variant="contained"
-          size="large"
-          startIcon={
-            displayIcon && (
-              <img
-                src={displayIcon}
-                alt={`${displayName} Icon`}
-                width={16}
-                height={16}
-              />
-            )
-          }
-          disabled={authenticated}
-          css={{ height: 52 }}
-          color={error ? "error" : undefined}
-          fullWidth
-          onClick={(event) => {
-            event.preventDefault();
-            // If the user is already authenticated, we don't want to redirect them
-            if (authenticated || authenticateURL === "") {
-              return;
-            }
-            window.open(authenticateURL, "_blank", "width=900,height=600");
-            startPollingExternalAuth();
-          }}
+    <>
+      <Tooltip
+        title={authenticated && `${displayName} has already been connected.`}
+      >
+        <Stack
+          alignItems="center"
+          spacing={1}
+          css={!fullWidth && { display: "inline-block" }}
         >
-          {messageContent}
-        </LoadingButton>
+          <LoadingButton
+            loadingPosition="start"
+            loading={externalAuthPollingState === "polling"}
+            href={authenticateURL}
+            variant="contained"
+            size="large"
+            startIcon={
+              displayIcon && (
+                <img
+                  src={displayIcon}
+                  alt={`${displayName} Icon`}
+                  width={16}
+                  height={16}
+                />
+              )
+            }
+            disabled={authenticated}
+            css={{ height: 42 }}
+            fullWidth={fullWidth}
+            onClick={(event) => {
+              event.preventDefault();
+              // If the user is already authenticated, we don't want to redirect them
+              if (authenticated || authenticateURL === "") {
+                return;
+              }
+              window.open(authenticateURL, "_blank", "width=900,height=600");
+              startPollingExternalAuth();
+            }}
+          >
+            {messageContent}
+          </LoadingButton>
 
-        {externalAuthPollingState === "abandoned" && (
-          <Button variant="text" onClick={startPollingExternalAuth}>
-            <ReplayIcon /> Check again
-          </Button>
-        )}
-        {error && <FormHelperText error>{error}</FormHelperText>}
-      </Stack>
-    </Tooltip>
+          {externalAuthPollingState === "abandoned" && (
+            <Button variant="text" onClick={startPollingExternalAuth}>
+              <ReplayIcon /> Check again
+            </Button>
+          )}
+        </Stack>
+      </Tooltip>
+      {error && (
+        <FormHelperText
+          css={(theme) => ({ color: theme.experimental.roles.error.text })}
+        >
+          {error}
+        </FormHelperText>
+      )}
+    </>
   );
 };
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
index 510200819eb15..faaafafb9df7d 100644
--- a/site/src/pages/GroupsPage/GroupsPageView.tsx
+++ b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -59,6 +59,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
                   rel="noreferrer"
                   startIcon={<ArrowRightAltOutlined />}
                   variant="contained"
+                  color="primary"
                 >
                   Learn about Enterprise
                 </Button>
@@ -68,7 +69,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
                   target="_blank"
                   rel="noreferrer"
                 >
-                  Read the docs
+                  Read the documentation
                 </Link>
               </Stack>
             }
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index 91a0c446146ed..4b204f5e5e003 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -15,6 +15,7 @@ import { Stack } from "components/Stack/Stack";
 import { Link } from "react-router-dom";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import type { TemplateExample } from "api/typesGenerated";
+import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";
 
 export interface StarterTemplatePageViewProps {
   starterTemplate?: TemplateExample;
@@ -65,21 +66,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
         }
       >
         <Stack direction="row" spacing={3} alignItems="center">
-          <div
-            css={{
-              height: 48,
-              width: 48,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-
-              "& img": {
-                width: "100%",
-              },
-            }}
-          >
-            <img src={starterTemplate.icon} alt="" />
-          </div>
+          <ExternalIcon size={48} src={starterTemplate.icon} />
           <div>
             <PageHeaderTitle>{starterTemplate.name}</PageHeaderTitle>
             <PageHeaderSubtitle condensed>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index a2300cb06161d..1b8f80975c76b 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -18,10 +18,10 @@ import type {
 } from "api/typesGenerated";
 import { useTheme } from "@emotion/react";
 import {
-  PropsWithChildren,
   type FC,
+  type HTMLAttributes,
+  type PropsWithChildren,
   type ReactNode,
-  HTMLAttributes,
   useId,
 } from "react";
 import chroma from "chroma-js";
diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
index 6cf11ec1faf62..5b4bee3deee2a 100644
--- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
@@ -56,7 +56,7 @@ export const TemplatePermissionsPage: FC<
                 </Button>
               </Link>
               <Link href={docs("/admin/rbac")} target="_blank" rel="noreferrer">
-                Read the docs
+                Read the documentation
               </Link>
             </Stack>
           }
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.stories.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.stories.tsx
index fdb401d2b6a63..67e1308b02939 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.stories.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.stories.tsx
@@ -18,7 +18,6 @@ type Story = StoryObj<typeof AppearanceForm>;
 
 export const Example: Story = {
   args: {
-    enableAuto: true,
     initialValues: { theme_preference: "" },
   },
 };
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index b2c8e97b23201..982c2a0b7df90 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -11,10 +11,6 @@ export interface AppearanceFormProps {
   error?: unknown;
   initialValues: UpdateUserAppearanceSettingsRequest;
   onSubmit: (values: UpdateUserAppearanceSettingsRequest) => Promise<unknown>;
-
-  // temporary, so that storybook can test the right thing without showing
-  // a semi-broken auto theme to users. will be removed when light mode is done.
-  enableAuto?: boolean;
 }
 
 export const AppearanceForm: FC<AppearanceFormProps> = ({
@@ -22,7 +18,6 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
   error,
   onSubmit,
   initialValues,
-  enableAuto,
 }) => {
   const currentTheme = initialValues.theme_preference || DEFAULT_THEME;
 
@@ -39,14 +34,13 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
       {Boolean(error) && <ErrorAlert error={error} />}
 
       <Stack direction="row" wrap="wrap">
-        {enableAuto && (
-          <AutoThemePreviewButton
-            displayName="Auto"
-            active={currentTheme === "auto"}
-            themes={[themes.dark, themes.light]}
-            onSelect={() => onChangeTheme("auto")}
-          />
-        )}
+        <AutoThemePreviewButton
+          displayName="Auto"
+          active={currentTheme === "auto"}
+          themes={[themes.dark, themes.light]}
+          onSelect={() => onChangeTheme("auto")}
+        />
+
         <ThemePreviewButton
           displayName="Dark"
           active={currentTheme === "dark"}
@@ -59,6 +53,12 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
           theme={themes.darkBlue}
           onSelect={() => onChangeTheme("darkBlue")}
         />
+        <ThemePreviewButton
+          displayName="Light"
+          active={currentTheme === "light"}
+          theme={themes.light}
+          onSelect={() => onChangeTheme("light")}
+        />
       </Stack>
     </form>
   );
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.stories.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.stories.tsx
index b65a86774c144..abdd999f6abf0 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.stories.tsx
+++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.stories.tsx
@@ -26,6 +26,16 @@ type Story = StoryObj<typeof ExternalAuthPageView>;
 
 export const NoProviders: Story = {};
 
+export const NoIcon: Story = {
+  args: {
+    ...meta.args,
+    auths: {
+      providers: [{ ...MockGithubExternalProvider, display_icon: "" }],
+      links: [MockGithubAuthLink],
+    },
+  },
+};
+
 export const Authenticated: Story = {
   args: {
     ...meta.args,
@@ -36,7 +46,7 @@ export const Authenticated: Story = {
   },
 };
 
-export const UnAuthenticated: Story = {
+export const Unauthenticated: Story = {
   args: {
     ...meta.args,
     auths: {
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
index b789101fbc5ec..f0554952b8d44 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -14,9 +14,8 @@ import type {
   ExternalAuthLink,
 } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { Avatar } from "components/Avatar/Avatar";
-import { AvatarData } from "components/AvatarData/AvatarData";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { Stack } from "components/Stack/Stack";
 import {
   MoreMenu,
   MoreMenuContent,
@@ -25,7 +24,10 @@ import {
   ThreeDotsButton,
 } from "components/MoreMenu/MoreMenu";
 import { ExternalAuth } from "pages/CreateWorkspacePage/ExternalAuth";
-import { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage";
+import type { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage";
+import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";
+
+const FALLBACK_ICON = "/icon/widgets.svg";
 
 export type ExternalAuthPageViewProps = {
   isLoading: boolean;
@@ -129,15 +131,13 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
   return (
     <TableRow key={name}>
       <TableCell>
-        <AvatarData
-          title={app.display_name || app.id}
-          // subtitle={template.description}
-          avatar={
-            app.display_icon !== "" && (
-              <Avatar src={app.display_icon} variant="square" fitImage />
-            )
-          }
-        />
+        <Stack direction="row" alignItems="center">
+          <ExternalIcon
+            title={app.display_name || app.id}
+            src={app.display_icon || FALLBACK_ICON}
+          />
+          <span>{app.display_name}</span>
+        </Stack>
       </TableCell>
       <TableCell>
         <ExternalAuth
@@ -150,6 +150,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
           message={authenticated ? "Authenticated" : "Click to Login"}
           externalAuthPollingState={externalAuthPollingState}
           startPollingExternalAuth={startPollingExternalAuth}
+          fullWidth={false}
         />
       </TableCell>
       <TableCell>
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx
index 1986c7ef0cbdd..a8736defdcf46 100644
--- a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx
+++ b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx
@@ -11,7 +11,8 @@ const meta: Meta<typeof SSHKeysPageView> = {
       user_id: "test-user-id",
       created_at: "2022-07-28T07:45:50.795918897Z",
       updated_at: "2022-07-28T07:45:50.795919142Z",
-      public_key: "SSH-Key",
+      public_key:
+        "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
     },
   },
 };
diff --git a/site/src/pages/WorkspaceBuildPage/Sidebar.tsx b/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
index 869f3d4be9e08..370d51cdf6777 100644
--- a/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
+++ b/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
@@ -32,7 +32,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
   return (
     <button
       css={(theme) => ({
-        background: active ? theme.colors.gray[13] : "none",
+        background: active ? theme.experimental.l2.background : "none",
         border: "none",
         fontSize: 14,
         width: "100%",
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 743dcd57b7f12..8cb92562bd0ff 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -2931,7 +2931,7 @@ export const MockHealth: TypesGen.HealthcheckReport = {
           created_at: "2023-05-01T19:15:56.606593Z",
           updated_at: "2023-12-05T14:13:36.647535Z",
           deleted: false,
-          version: "v2.4.0-devel+5fad61102",
+          version: "v2.5.0-devel+5fad61102",
         },
         {
           id: "9d786ce0-55b1-4ace-8acc-a4672ff8d41f",
@@ -2954,7 +2954,7 @@ export const MockHealth: TypesGen.HealthcheckReport = {
           created_at: "2023-05-01T20:34:11.114005Z",
           updated_at: "2023-12-05T14:13:45.941716Z",
           deleted: false,
-          version: "v2.4.0-devel+5fad61102",
+          version: "v2.5.0-devel+5fad61102",
         },
         {
           id: "2e209786-73b1-4838-ba78-e01c9334450a",
@@ -2977,7 +2977,7 @@ export const MockHealth: TypesGen.HealthcheckReport = {
           created_at: "2023-05-01T20:41:02.76448Z",
           updated_at: "2023-12-05T14:13:41.968568Z",
           deleted: false,
-          version: "v2.4.0-devel+5fad61102",
+          version: "v2.5.0-devel+5fad61102",
         },
         {
           id: "c272e80c-0cce-49d6-9782-1b5cf90398e8",
@@ -3048,7 +3048,7 @@ export const MockHealth: TypesGen.HealthcheckReport = {
           created_at: "2023-12-01T09:21:15.996267Z",
           updated_at: "2023-12-05T14:13:59.663174Z",
           deleted: false,
-          version: "v2.4.0-devel+5fad61102",
+          version: "v2.5.0-devel+5fad61102",
         },
         {
           id: "72649dc9-03c7-46a8-bc95-96775e93ddc1",
@@ -3071,7 +3071,7 @@ export const MockHealth: TypesGen.HealthcheckReport = {
           created_at: "2023-12-01T09:23:44.505529Z",
           updated_at: "2023-12-05T14:13:55.769058Z",
           deleted: false,
-          version: "v2.4.0-devel+5fad61102",
+          version: "v2.5.0-devel+5fad61102",
         },
         {
           id: "1f78398f-e5ae-4c38-aa89-30222181d443",
@@ -3094,12 +3094,12 @@ export const MockHealth: TypesGen.HealthcheckReport = {
           created_at: "2023-12-01T09:36:00.231252Z",
           updated_at: "2023-12-05T14:13:47.015031Z",
           deleted: false,
-          version: "v2.4.0-devel+5fad61102",
+          version: "v2.5.0-devel+5fad61102",
         },
       ],
     },
   },
-  coder_version: "v0.27.1-devel+c575292",
+  coder_version: "v2.5.0-devel+5fad61102",
 };
 
 export const MockListeningPortsResponse: TypesGen.WorkspaceAgentListeningPortsResponse =
@@ -3182,7 +3182,7 @@ export const DeploymentHealthUnhealthy: TypesGen.HealthcheckReport = {
           created_at: "2023-11-23T15:37:25.513213Z",
           updated_at: "2023-11-23T18:09:19.734747Z",
           deleted: false,
-          version: "v2.4.0-devel+89bae7eff",
+          version: "v2.5.0-devel+89bae7eff",
         },
       ],
     },
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
index b5112ec5e23d0..9e1aaf383c379 100644
--- a/site/src/theme/dark/experimental.ts
+++ b/site/src/theme/dark/experimental.ts
@@ -126,5 +126,11 @@ export default {
         text: colors.white,
       },
     },
+    preview: {
+      background: colors.violet[950],
+      outline: colors.violet[500],
+      fill: colors.violet[400],
+      text: colors.violet[50],
+    },
   },
 } satisfies NewTheme;
diff --git a/site/src/theme/dark/mui.ts b/site/src/theme/dark/mui.ts
index 31d00fd6fa001..ae26de7cf895b 100644
--- a/site/src/theme/dark/mui.ts
+++ b/site/src/theme/dark/mui.ts
@@ -1,4 +1,5 @@
-import colors from "./colors";
+// eslint-disable-next-line no-restricted-imports -- We need MUI here
+import { alertClasses } from "@mui/material/Alert";
 import { createTheme, type ThemeOptions } from "@mui/material/styles";
 import {
   BODY_FONT_FAMILY,
@@ -8,17 +9,17 @@ import {
   BUTTON_SM_HEIGHT,
   BUTTON_XL_HEIGHT,
 } from "../constants";
-// eslint-disable-next-line no-restricted-imports -- We need MUI here
-import { alertClasses } from "@mui/material/Alert";
+import tw from "../tailwind";
+import colors from "./colors";
 
 let muiTheme = createTheme({
   palette: {
     mode: "dark",
     primary: {
-      main: colors.blue[7],
-      contrastText: colors.blue[1],
-      light: colors.blue[6],
-      dark: colors.blue[9],
+      main: tw.sky[500],
+      contrastText: tw.sky[50],
+      light: tw.sky[300],
+      dark: tw.sky[400],
     },
     secondary: {
       main: colors.gray[11],
@@ -489,6 +490,7 @@ muiTheme = createTheme(muiTheme, {
           lineHeight: "150%",
           borderRadius: 4,
           background: muiTheme.palette.divider,
+          padding: "8px 16px",
         },
       },
     },
diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts
index f694eca5823e2..4ba6059cc135f 100644
--- a/site/src/theme/darkBlue/experimental.ts
+++ b/site/src/theme/darkBlue/experimental.ts
@@ -126,5 +126,11 @@ export default {
         text: colors.white,
       },
     },
+    preview: {
+      background: colors.violet[950],
+      outline: colors.violet[500],
+      fill: colors.violet[400],
+      text: colors.violet[50],
+    },
   },
 } satisfies NewTheme;
diff --git a/site/src/theme/darkBlue/mui.ts b/site/src/theme/darkBlue/mui.ts
index 31d00fd6fa001..f9308dc00044b 100644
--- a/site/src/theme/darkBlue/mui.ts
+++ b/site/src/theme/darkBlue/mui.ts
@@ -489,6 +489,7 @@ muiTheme = createTheme(muiTheme, {
           lineHeight: "150%",
           borderRadius: 4,
           background: muiTheme.palette.divider,
+          padding: "8px 16px",
         },
       },
     },
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index 385ab548a98b2..7bbc247f2a8e1 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -19,6 +19,7 @@ export interface NewTheme {
     info: Role; // just sharing :)
     success: InteractiveRole; // yay!! it's working!!
     active: InteractiveRole; // selected items, focused inputs, in progress
+    preview: Role; // experiments, alpha/beta features
   };
 }
 
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index 7e23c0345c89d..2622b58c4a2a4 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1,6 +1,7 @@
 import type { Theme as MuiTheme } from "@mui/material/styles";
 import dark from "./dark";
 import darkBlue from "./darkBlue";
+import light from "./light";
 import type { NewTheme } from "./experimental";
 import type { Colors } from "./colors";
 
@@ -14,7 +15,7 @@ export const DEFAULT_THEME = "auto";
 const theme = {
   dark,
   darkBlue,
-  light: dark,
+  light,
 } satisfies Record<string, Theme>;
 
 export default theme;
diff --git a/site/src/theme/light/colors.ts b/site/src/theme/light/colors.ts
new file mode 100644
index 0000000000000..374c120e8f289
--- /dev/null
+++ b/site/src/theme/light/colors.ts
@@ -0,0 +1,62 @@
+import tw from "../tailwind";
+
+export default {
+  white: "#fff",
+
+  gray: {
+    17: tw.zinc[950],
+    16: tw.zinc[900],
+    14: tw.zinc[800],
+    13: tw.zinc[700],
+    12: tw.zinc[600],
+    11: tw.zinc[500],
+    9: tw.zinc[400],
+    6: tw.zinc[300],
+    4: tw.zinc[200],
+    2: tw.zinc[100],
+    1: tw.zinc[50],
+  },
+
+  red: {
+    15: tw.red[950],
+    12: tw.red[800],
+    10: tw.red[700],
+    9: tw.red[600],
+    8: tw.red[500],
+    6: tw.red[400],
+    2: tw.red[50],
+  },
+
+  orange: {
+    15: tw.amber[950],
+    14: tw.amber[900],
+    12: tw.amber[800],
+    11: tw.amber[700],
+    10: tw.amber[600],
+    9: tw.amber[500],
+    7: tw.amber[400],
+  },
+
+  yellow: {
+    5: tw.yellow[300],
+  },
+
+  green: {
+    15: tw.green[950],
+    13: tw.green[700],
+    12: tw.green[600],
+    11: tw.green[500],
+    9: tw.green[400],
+    8: tw.green[300],
+  },
+
+  blue: {
+    14: tw.blue[950],
+    9: tw.blue[600],
+    8: tw.blue[500],
+    7: tw.blue[400],
+    6: tw.blue[300],
+    3: tw.blue[200],
+    1: tw.blue[50],
+  },
+};
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
new file mode 100644
index 0000000000000..33d97e34df010
--- /dev/null
+++ b/site/src/theme/light/experimental.ts
@@ -0,0 +1,136 @@
+import { type NewTheme } from "../experimental";
+import colors from "../tailwind";
+
+export default {
+  l1: {
+    background: colors.gray[50],
+    outline: colors.gray[300],
+    fill: colors.gray[600],
+    text: colors.black,
+  },
+
+  l2: {
+    background: colors.gray[100],
+    outline: colors.gray[700],
+    fill: "#f00",
+    text: colors.black,
+    disabled: {
+      background: "#f00",
+      outline: "#f00",
+      fill: "#f00",
+      text: colors.gray[200],
+    },
+    hover: {
+      background: "#f00",
+      outline: "#f00",
+      fill: "#f00",
+      text: colors.black,
+    },
+  },
+
+  l3: {
+    background: colors.gray[200],
+    outline: colors.gray[700],
+    fill: colors.gray[600],
+    text: colors.black,
+    disabled: {
+      background: "#f00",
+      outline: "#f00",
+      fill: "#f00",
+      text: colors.gray[200],
+    },
+    hover: {
+      background: "#f00",
+      outline: "#f00",
+      fill: "#f00",
+      text: colors.black,
+    },
+  },
+
+  roles: {
+    danger: {
+      background: colors.orange[50],
+      outline: colors.orange[500],
+      fill: colors.orange[600],
+      text: colors.orange[950],
+      disabled: {
+        background: colors.orange[50],
+        outline: colors.orange[800],
+        fill: colors.orange[800],
+        text: colors.orange[800],
+      },
+      hover: {
+        background: colors.orange[100],
+        outline: colors.orange[500],
+        fill: colors.orange[500],
+        text: colors.black,
+      },
+    },
+    error: {
+      background: colors.red[50],
+      outline: colors.red[500],
+      fill: colors.red[600],
+      text: colors.red[950],
+    },
+    warning: {
+      background: colors.amber[50],
+      outline: colors.amber[300],
+      fill: "#f00",
+      text: colors.amber[950],
+    },
+    notice: {
+      background: colors.yellow[50],
+      outline: colors.yellow[200],
+      fill: colors.yellow[500],
+      text: colors.yellow[950],
+    },
+    info: {
+      background: colors.blue[50],
+      outline: colors.blue[400],
+      fill: colors.blue[600],
+      text: colors.blue[950],
+    },
+    success: {
+      background: colors.green[50],
+      outline: colors.green[500],
+      fill: colors.green[600],
+      text: colors.green[950],
+      disabled: {
+        background: colors.green[50],
+        outline: colors.green[800],
+        fill: colors.green[800],
+        text: colors.green[800],
+      },
+      hover: {
+        background: colors.green[100],
+        outline: colors.green[500],
+        fill: colors.green[500],
+        text: colors.black,
+      },
+    },
+    active: {
+      background: colors.sky[50],
+      outline: colors.sky[500],
+      fill: colors.sky[600],
+      text: colors.sky[950],
+      disabled: {
+        background: colors.sky[50],
+        outline: colors.sky[800],
+        fill: colors.sky[800],
+        text: colors.sky[200],
+      },
+      hover: {
+        background: colors.sky[100],
+        outline: colors.sky[500],
+        fill: colors.sky[500],
+        text: colors.black,
+      },
+    },
+    preview: {
+      background: colors.violet[50],
+      outline: colors.violet[500],
+      fill: colors.violet[600],
+      text: colors.violet[950],
+    },
+  },
+} satisfies NewTheme;
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
new file mode 100644
index 0000000000000..19a84fc4b2c0a
--- /dev/null
+++ b/site/src/theme/light/index.ts
@@ -0,0 +1,9 @@
+import colors from "./colors";
+import experimental from "./experimental";
+import muiTheme from "./mui";
+
+export default {
+  ...muiTheme,
+  colors,
+  experimental,
+};
diff --git a/site/src/theme/light/mui.ts b/site/src/theme/light/mui.ts
new file mode 100644
index 0000000000000..23040ee3f7a2f
--- /dev/null
+++ b/site/src/theme/light/mui.ts
@@ -0,0 +1,576 @@
+// eslint-disable-next-line no-restricted-imports -- We need MUI here
+import { alertClasses } from "@mui/material/Alert";
+import { createTheme, type ThemeOptions } from "@mui/material/styles";
+import {
+  BODY_FONT_FAMILY,
+  borderRadius,
+  BUTTON_LG_HEIGHT,
+  BUTTON_MD_HEIGHT,
+  BUTTON_SM_HEIGHT,
+  BUTTON_XL_HEIGHT,
+} from "../constants";
+import tw from "../tailwind";
+
+let muiTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: tw.sky[600],
+      contrastText: tw.sky[50],
+      light: tw.sky[400],
+      dark: tw.sky[500],
+    },
+    secondary: {
+      main: tw.zinc[500],
+      contrastText: tw.zinc[800],
+      dark: tw.zinc[600],
+    },
+    background: {
+      default: tw.zinc[50],
+      paper: tw.zinc[100],
+    },
+    text: {
+      primary: tw.zinc[950],
+      secondary: tw.zinc[700],
+      disabled: tw.zinc[600],
+    },
+    divider: tw.zinc[200],
+    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.zinc[200],
+    },
+    error: {
+      light: tw.red[400],
+      main: tw.red[500],
+      dark: tw.red[950],
+      contrastText: tw.zinc[800],
+    },
+    action: {
+      hover: tw.zinc[100],
+    },
+    neutral: {
+      main: tw.zinc[950],
+    },
+  },
+  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,
+  },
+});
+
+muiTheme = createTheme(muiTheme, {
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: `
+        html, body, #root, #storybook-root {
+          height: 100%;
+        }
+
+        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 ${muiTheme.palette.background.default} inset !important;
+        }
+
+        ::placeholder {
+          color: ${muiTheme.palette.text.disabled};
+        }
+      `,
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          width: 36,
+          height: 36,
+          fontSize: 18,
+
+          "& .MuiSvgIcon-root": {
+            width: "50%",
+          },
+        },
+        colorDefault: {
+          backgroundColor: tw.zinc[700],
+        },
+      },
+    },
+    // Button styles are based on
+    // https://tailwindui.com/components/application-ui/elements/buttons
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        variant: "outlined",
+        color: "neutral",
+      },
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          letterSpacing: "normal",
+          fontWeight: 500,
+          height: BUTTON_MD_HEIGHT,
+          padding: "8px 16px",
+          borderRadius: "6px",
+          fontSize: 14,
+
+          whiteSpace: "nowrap",
+          ":focus-visible": {
+            outline: `2px solid ${muiTheme.palette.primary.main}`,
+          },
+
+          "& .MuiLoadingButton-loadingIndicator": {
+            width: 14,
+            height: 14,
+          },
+
+          "& .MuiLoadingButton-loadingIndicator .MuiCircularProgress-root": {
+            width: "inherit !important",
+            height: "inherit !important",
+          },
+        },
+        sizeSmall: {
+          height: BUTTON_SM_HEIGHT,
+        },
+        sizeLarge: {
+          height: BUTTON_LG_HEIGHT,
+        },
+        sizeXlarge: {
+          height: BUTTON_XL_HEIGHT,
+        },
+        outlined: {
+          boxShadow: "0 1px 4px #0001",
+          ":hover": {
+            boxShadow: "0 1px 4px #0001",
+            border: `1px solid ${tw.zinc[500]}`,
+          },
+          "&.Mui-disabled": {
+            boxShadow: "none !important",
+          },
+        },
+        outlinedNeutral: {
+          borderColor: tw.zinc[300],
+
+          "&.Mui-disabled": {
+            borderColor: tw.zinc[200],
+            color: tw.zinc[500],
+
+            "& > .MuiLoadingButton-loadingIndicator": {
+              color: tw.zinc[500],
+            },
+          },
+        },
+        contained: {
+          boxShadow: "0 1px 4px #0001",
+          "&.Mui-disabled": {
+            boxShadow: "none !important",
+          },
+          ":hover": {
+            boxShadow: "0 1px 4px #0001",
+          },
+        },
+        containedNeutral: {
+          backgroundColor: tw.zinc[100],
+          border: `1px solid ${tw.zinc[200]}`,
+
+          "&.Mui-disabled": {
+            backgroundColor: tw.zinc[50],
+            border: `1px solid ${tw.zinc[100]}`,
+          },
+
+          "&:hover": {
+            backgroundColor: tw.zinc[200],
+            border: `1px solid ${tw.zinc[300]}`,
+          },
+        },
+        iconSizeMedium: {
+          "& > .MuiSvgIcon-root": {
+            fontSize: 14,
+          },
+        },
+        iconSizeSmall: {
+          "& > .MuiSvgIcon-root": {
+            fontSize: 13,
+          },
+        },
+        startIcon: {
+          marginLeft: "-2px",
+        },
+      },
+    },
+    MuiButtonGroup: {
+      styleOverrides: {
+        root: {
+          ">button:hover+button": {
+            // The !important is unfortunate, but necessary for the border.
+            borderLeftColor: `${tw.zinc[300]} !important`,
+          },
+        },
+      },
+    },
+    MuiLoadingButton: {
+      defaultProps: {
+        variant: "outlined",
+        color: "neutral",
+      },
+    },
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          borderRadius,
+          border: `1px solid ${muiTheme.palette.divider}`,
+        },
+      },
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderCollapse: "unset",
+          border: "none",
+          boxShadow: `0 0 0 1px ${muiTheme.palette.background.default} inset`,
+          overflow: "hidden",
+
+          "& td": {
+            paddingTop: 16,
+            paddingBottom: 16,
+            background: "transparent",
+          },
+
+          [theme.breakpoints.down("md")]: {
+            minWidth: 1000,
+          },
+        }),
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        head: {
+          fontSize: 14,
+          color: muiTheme.palette.text.secondary,
+          fontWeight: 600,
+          background: muiTheme.palette.background.paper,
+        },
+        root: {
+          fontSize: 16,
+          background: muiTheme.palette.background.paper,
+          borderBottom: `1px solid ${muiTheme.palette.divider}`,
+          padding: "12px 8px",
+          // This targets the first+last td elements, and also the first+last elements
+          // of a TableCellLink.
+          "&:not(:only-child):first-of-type, &:not(:only-child):first-of-type > a":
+            {
+              paddingLeft: 32,
+            },
+          "&:not(:only-child):last-child, &:not(:only-child):last-child > a": {
+            paddingRight: 32,
+          },
+        },
+      },
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:last-child .MuiTableCell-body": {
+            borderBottom: 0,
+          },
+        },
+      },
+    },
+    MuiLink: {
+      defaultProps: {
+        underline: "hover",
+      },
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0,
+      },
+      styleOverrides: {
+        root: {
+          border: `1px solid ${muiTheme.palette.divider}`,
+          backgroundImage: "none",
+        },
+      },
+    },
+    MuiSkeleton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: muiTheme.palette.divider,
+        },
+      },
+    },
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          borderRadius: 999,
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          backgroundColor: tw.zinc[400],
+        },
+      },
+    },
+    MuiMenu: {
+      defaultProps: {
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right",
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right",
+        },
+      },
+      styleOverrides: {
+        paper: {
+          marginTop: 8,
+          borderRadius: 4,
+          padding: "4px 0",
+          minWidth: 160,
+        },
+        root: {
+          // It should be the same as the menu padding
+          "& .MuiDivider-root": {
+            marginTop: `4px !important`,
+            marginBottom: `4px !important`,
+          },
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          gap: 12,
+
+          "& .MuiSvgIcon-root": {
+            fontSize: 20,
+          },
+        },
+      },
+    },
+    MuiSnackbar: {
+      styleOverrides: {
+        anchorOriginBottomRight: {
+          bottom: `${24 + 36}px !important`, // 36 is the bottom bar height
+        },
+      },
+    },
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          borderRadius: "4px !important",
+        },
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        InputLabelProps: {
+          shrink: true,
+        },
+      },
+    },
+    MuiInputBase: {
+      defaultProps: {
+        color: "primary",
+      },
+      styleOverrides: {
+        root: {
+          height: BUTTON_LG_HEIGHT,
+        },
+        sizeSmall: {
+          height: BUTTON_MD_HEIGHT,
+          fontSize: 14,
+        },
+        multiline: {
+          height: "auto",
+        },
+        colorPrimary: {
+          // Same as button
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: tw.zinc[300],
+          },
+          // The default outlined input color is white, which seemed jarring.
+          "&:hover:not(.Mui-error):not(.Mui-focused) .MuiOutlinedInput-notchedOutline":
+            {
+              borderColor: tw.zinc[500],
+            },
+        },
+      },
+    },
+    MuiFormHelperText: {
+      defaultProps: {
+        sx: {
+          marginLeft: 0,
+          marginTop: 1,
+        },
+      },
+    },
+    MuiRadio: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          /**
+           * Adds focus styling to checkboxes (which doesn't exist normally, for
+           * some reason?).
+           *
+           * The checkbox component is a root span with a checkbox input inside
+           * it. MUI does not allow you to use selectors like (& input) to
+           * target the inner checkbox (even though you can use & td to style
+           * tables). Tried every combination of selector possible (including
+           * lots of !important), and the main issue seems to be that the
+           * styling just never gets processed for it to get injected into the
+           * CSSOM.
+           *
+           * Had to settle for adding styling to the span itself (which does
+           * make the styling more obvious, even if there's not much room for
+           * customization).
+           */
+          "&.Mui-focusVisible": {
+            boxShadow: `0 0 0 2px ${tw.blue[600]}`,
+          },
+
+          "&.Mui-disabled": {
+            color: tw.zinc[500],
+          },
+        },
+      },
+    },
+    MuiSwitch: {
+      defaultProps: { color: "primary" },
+      styleOverrides: {
+        root: {
+          ".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 ${tw.blue[600]}`,
+          },
+        },
+      },
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          // Not sure why but since the input has padding we don't need it here
+          "& .MuiInputBase-root": {
+            padding: 0,
+          },
+        },
+      },
+    },
+    MuiList: {
+      defaultProps: {
+        disablePadding: true,
+      },
+    },
+    MuiTabs: {
+      defaultProps: {
+        textColor: "primary",
+        indicatorColor: "primary",
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          lineHeight: "150%",
+          borderRadius: 4,
+          background: muiTheme.palette.background.paper,
+          color: muiTheme.palette.secondary.contrastText,
+          border: `1px solid ${muiTheme.palette.divider}`,
+          padding: "8px 16px",
+          boxShadow: "0 1px 4px #0001",
+        },
+      },
+    },
+    MuiAlert: {
+      defaultProps: {
+        variant: "outlined",
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          background: theme.palette.background.paper,
+        }),
+        action: {
+          paddingTop: 2, // Idk why it is not aligned as expected
+        },
+        icon: {
+          fontSize: 16,
+          marginTop: "4px", // The size of text is 24 so (24 - 16)/2 = 4
+        },
+        message: ({ theme }) => ({
+          color: theme.palette.text.primary,
+        }),
+        outlinedWarning: {
+          [`& .${alertClasses.icon}`]: {
+            color: muiTheme.palette.warning.light,
+          },
+        },
+        outlinedInfo: {
+          [`& .${alertClasses.icon}`]: {
+            color: muiTheme.palette.primary.light,
+          },
+        },
+        outlinedError: {
+          [`& .${alertClasses.icon}`]: {
+            color: muiTheme.palette.error.light,
+          },
+        },
+      },
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: "inherit",
+          marginBottom: 0,
+        },
+      },
+    },
+
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          "&.Mui-focusVisible": {
+            boxShadow: `0 0 0 2px ${tw.blue[600]}`,
+          },
+        },
+      },
+    },
+  },
+} as ThemeOptions);
+
+export default muiTheme;
diff --git a/site/src/utils/latency.ts b/site/src/utils/latency.ts
index 0a7f45d551cf3..3bb891a20ee84 100644
--- a/site/src/utils/latency.ts
+++ b/site/src/utils/latency.ts
@@ -5,12 +5,12 @@ export const getLatencyColor = (theme: Theme, latency?: number) => {
     return theme.palette.text.secondary;
   }
 
-  let color = theme.palette.success.light;
+  let color = theme.experimental.roles.success.fill;
 
   if (latency >= 150 && latency < 300) {
-    color = theme.palette.warning.light;
+    color = theme.experimental.roles.warning.fill;
   } else if (latency >= 300) {
-    color = theme.palette.error.light;
+    color = theme.experimental.roles.error.fill;
   }
   return color;
 };

From ef3c623e058ceb7845d0f39f4c750a8aef6b9f01 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 17:01:22 +0000
Subject: [PATCH 02/19] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/ExternalIcon/ExternalIcon.tsx | 1 -
 site/src/pages/CliAuthPage/CliAuthPageView.tsx    | 8 ++------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/site/src/components/ExternalIcon/ExternalIcon.tsx b/site/src/components/ExternalIcon/ExternalIcon.tsx
index 527847511343e..91eace58bec64 100644
--- a/site/src/components/ExternalIcon/ExternalIcon.tsx
+++ b/site/src/components/ExternalIcon/ExternalIcon.tsx
@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC, type ImgHTMLAttributes } from "react";
-import colors from "theme/tailwind";
 
 interface ExternalIconProps extends ImgHTMLAttributes<HTMLImageElement> {
   size?: number;
diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
index 88180b954a2f0..0c88a394b77ea 100644
--- a/site/src/pages/CliAuthPage/CliAuthPageView.tsx
+++ b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
@@ -32,17 +32,13 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
         }}
       >
         Copy the session token below and{" "}
-        <strong
-          css={{
-            whiteSpace: "nowrap",
-          }}
-        >
+        <strong css={{ whiteSpace: "nowrap" }}>
           paste it in your terminal
         </strong>
         .
       </p>
 
-      <CodeExample code={sessionToken} password />
+      <CodeExample code={sessionToken} secret />
 
       <div
         css={{

From 6833e6ba49b921c49a2cacd39a4bfc3be770bc47 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 20:15:28 +0000
Subject: [PATCH 03/19] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/package.json                             |  2 +-
 site/pnpm-lock.yaml                           |  8 ++--
 .../Dashboard/Navbar/NavbarView.stories.tsx   |  2 +
 .../Dashboard/Navbar/NavbarView.tsx           |  4 +-
 site/src/components/Resources/AgentRow.tsx    | 41 +++++-------------
 .../Resources/PortForwardButton.stories.tsx   | 34 +++++----------
 .../Resources/PortForwardButton.tsx           | 24 ++++++++---
 .../PortForwardPopoverView.stories.tsx        | 43 +++++++++++++++++++
 .../components/WorkspaceBuildLogs/Logs.tsx    | 26 +++++++----
 .../WorkspaceBuildLogs.stories.tsx            |  6 ++-
 .../CreateWorkspacePageView.stories.tsx       |  2 +
 .../pages/SetupPage/SetupPageView.stories.tsx |  6 ++-
 site/src/testHelpers/chromatic.ts             |  6 +++
 site/src/theme/dark/experimental.ts           | 22 +++++-----
 site/src/theme/light/experimental.ts          |  4 +-
 15 files changed, 137 insertions(+), 93 deletions(-)
 create mode 100644 site/src/components/Resources/PortForwardPopoverView.stories.tsx
 create mode 100644 site/src/testHelpers/chromatic.ts

diff --git a/site/package.json b/site/package.json
index b952d7ae6d3c1..92fc67de02cfb 100644
--- a/site/package.json
+++ b/site/package.json
@@ -104,7 +104,7 @@
     "@storybook/addon-essentials": "7.5.2",
     "@storybook/addon-links": "7.5.2",
     "@storybook/addon-mdx-gfm": "7.5.2",
-    "@storybook/addon-themes": "^7.6.4",
+    "@storybook/addon-themes": "7.6.4",
     "@storybook/react": "7.5.2",
     "@storybook/react-vite": "7.5.2",
     "@swc/core": "1.3.38",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
index c04f20a40e515..5bf7c2544766a 100644
--- a/site/pnpm-lock.yaml
+++ b/site/pnpm-lock.yaml
@@ -234,8 +234,8 @@ devDependencies:
     specifier: 7.5.2
     version: 7.5.2
   '@storybook/addon-themes':
-    specifier: ^7.6.4
-    version: 7.6.5
+    specifier: 7.6.4
+    version: 7.6.4
   '@storybook/react':
     specifier: 7.5.2
     version: 7.5.2(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)
@@ -4090,8 +4090,8 @@ packages:
       - '@types/react-dom'
     dev: true
 
-  /@storybook/addon-themes@7.6.5:
-    resolution: {integrity: sha512-TzGCxwdYAAlgeYuTYhMnL5KLutLVHrAXjVtWsYCYV+SVx+JklqCTk4zNUod64Z+sIYRMYd+YVC1KsWF2LHirow==}
+  /@storybook/addon-themes@7.6.4:
+    resolution: {integrity: sha512-jz6/6LSRVgL9G5vknxROGOakXAsTIIl2sR7tkuC4gyGkCIGwvb9oO9jUaHkUHQ8rtcLXbVpFncQzUXmrwK6CGg==}
     dependencies:
       ts-dedent: 2.2.0
     dev: true
diff --git a/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx b/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
index 189cd82d65a88..7a59ab19d0067 100644
--- a/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
+++ b/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import { MockUser, MockUser2 } from "testHelpers/entities";
 import { NavbarView } from "./NavbarView";
 
 const meta: Meta<typeof NavbarView> = {
   title: "components/NavbarView",
+  parameters: { chromatic },
   component: NavbarView,
   args: {
     user: MockUser,
diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
index 56b5bdbf7398e..8b37d41ba1d53 100644
--- a/site/src/components/Dashboard/Navbar/NavbarView.tsx
+++ b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -456,7 +456,7 @@ const styles = {
   },
   link: (theme) => css`
     align-items: center;
-    color: ${theme.colors.gray[6]};
+    color: ${theme.palette.text.secondary};
     display: flex;
     flex: 1;
     font-size: 16px;
@@ -470,7 +470,7 @@ const styles = {
     }
 
     &:hover {
-      background-color: ${theme.palette.action.hover};
+      background-color: ${theme.experimental.l2.hover.background};
     }
 
     ${theme.breakpoints.up("md")} {
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 25a38fd8ed76d..1971453bddd0e 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -426,28 +426,14 @@ export const AgentRow: FC<AgentRowProps> = ({
             </AutoSizer>
           </Collapse>
 
-          <div css={styles.logsPanelButtons}>
-            {showLogs ? (
-              <button
-                css={[styles.logsPanelButton, styles.toggleLogsButton]}
-                onClick={() => {
-                  setShowLogs((v) => !v);
-                }}
-              >
-                <DropdownArrow close />
-                Hide logs
-              </button>
-            ) : (
-              <button
-                css={[styles.logsPanelButton, styles.toggleLogsButton]}
-                onClick={() => {
-                  setShowLogs((v) => !v);
-                }}
-              >
-                <DropdownArrow />
-                Show logs
-              </button>
-            )}
+          <div css={{ display: "flex" }}>
+            <button
+              css={styles.logsPanelButton}
+              onClick={() => setShowLogs((v) => !v)}
+            >
+              <DropdownArrow close={showLogs} />
+              {showLogs ? "Hide" : "Show"} logs
+            </button>
           </div>
         </div>
       )}
@@ -673,10 +659,6 @@ const styles = {
     borderTop: `1px solid ${theme.palette.divider}`,
   }),
 
-  logsPanelButtons: {
-    display: "flex",
-  },
-
   logsPanelButton: (theme) => ({
     textAlign: "left",
     background: "transparent",
@@ -689,10 +671,11 @@ const styles = {
     alignItems: "center",
     gap: 8,
     whiteSpace: "nowrap",
+    width: "100%",
 
     "&:hover": {
       color: theme.palette.text.primary,
-      backgroundColor: theme.colors.gray[14],
+      backgroundColor: theme.experimental.l2.hover.background,
     },
 
     "& svg": {
@@ -700,10 +683,6 @@ const styles = {
     },
   }),
 
-  toggleLogsButton: {
-    width: "100%",
-  },
-
   buttonSkeleton: {
     borderRadius: 4,
   },
diff --git a/site/src/components/Resources/PortForwardButton.stories.tsx b/site/src/components/Resources/PortForwardButton.stories.tsx
index 1f4c710e711a1..b2fc7ccfe704d 100644
--- a/site/src/components/Resources/PortForwardButton.stories.tsx
+++ b/site/src/components/Resources/PortForwardButton.stories.tsx
@@ -1,43 +1,31 @@
-import { PortForwardPopoverView } from "./PortForwardButton";
+import { PortForwardButton } from "./PortForwardButton";
 import type { Meta, StoryObj } from "@storybook/react";
 import {
   MockListeningPortsResponse,
   MockWorkspaceAgent,
 } from "testHelpers/entities";
 
-const meta: Meta<typeof PortForwardPopoverView> = {
-  title: "components/PortForwardPopoverView",
-  component: PortForwardPopoverView,
-  decorators: [
-    (Story) => (
-      <div
-        css={(theme) => ({
-          width: 304,
-          border: `1px solid ${theme.palette.divider}`,
-          borderRadius: 8,
-          backgroundColor: theme.palette.background.paper,
-        })}
-      >
-        <Story />
-      </div>
-    ),
-  ],
+const meta: Meta<typeof PortForwardButton> = {
+  title: "components/PortForwardButton",
+  component: PortForwardButton,
   args: {
     agent: MockWorkspaceAgent,
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof PortForwardPopoverView>;
+type Story = StoryObj<typeof PortForwardButton>;
 
-export const WithPorts: Story = {
+export const Example: Story = {
   args: {
-    ports: MockListeningPortsResponse.ports,
+    storybook: {
+      portsQueryData: MockListeningPortsResponse,
+    },
   },
 };
 
-export const Empty: Story = {
+export const Loading: Story = {
   args: {
-    ports: [],
+    storybook: {},
   },
 };
diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx
index a1935d282c56f..2b284586eaf45 100644
--- a/site/src/components/Resources/PortForwardButton.tsx
+++ b/site/src/components/Resources/PortForwardButton.tsx
@@ -10,6 +10,7 @@ import { getAgentListeningPorts } from "api/api";
 import type {
   WorkspaceAgent,
   WorkspaceAgentListeningPort,
+  WorkspaceAgentListeningPortsResponse,
 } from "api/typesGenerated";
 import { portForwardURL } from "utils/portForward";
 import { type ClassName, useClassName } from "hooks/useClassName";
@@ -32,34 +33,43 @@ export interface PortForwardButtonProps {
   username: string;
   workspaceName: string;
   agent: WorkspaceAgent;
+
+  /**
+   * Only for use in Storybook
+   */
+  storybook?: {
+    portsQueryData?: WorkspaceAgentListeningPortsResponse;
+  };
 }
 
 export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
-  const { agent } = props;
+  const { agent, storybook } = props;
 
   const paper = useClassName(classNames.paper, []);
 
   const portsQuery = useQuery({
     queryKey: ["portForward", agent.id],
     queryFn: () => getAgentListeningPorts(agent.id),
-    enabled: agent.status === "connected",
+    enabled: !storybook && agent.status === "connected",
     refetchInterval: 5_000,
   });
 
+  const data = storybook ? storybook.portsQueryData : portsQuery.data;
+
   return (
     <Popover>
       <PopoverTrigger>
-        <AgentButton disabled={!portsQuery.data}>
+        <AgentButton disabled={!data}>
           {DisplayAppNameMap["port_forwarding_helper"]}
-          {portsQuery.data ? (
-            <div css={styles.portCount}>{portsQuery.data.ports.length}</div>
+          {data ? (
+            <div css={styles.portCount}>{data.ports.length}</div>
           ) : (
             <CircularProgress size={10} css={{ marginLeft: 8 }} />
           )}
         </AgentButton>
       </PopoverTrigger>
       <PopoverContent horizontal="right" classes={{ paper }}>
-        <PortForwardPopoverView {...props} ports={portsQuery.data?.ports} />
+        <PortForwardPopoverView {...props} ports={data?.ports} />
       </PopoverContent>
     </Popover>
   );
@@ -204,7 +214,7 @@ const styles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.colors.gray[11],
+    backgroundColor: theme.experimental.l2.background,
     marginLeft: 8,
   }),
 
diff --git a/site/src/components/Resources/PortForwardPopoverView.stories.tsx b/site/src/components/Resources/PortForwardPopoverView.stories.tsx
new file mode 100644
index 0000000000000..1f4c710e711a1
--- /dev/null
+++ b/site/src/components/Resources/PortForwardPopoverView.stories.tsx
@@ -0,0 +1,43 @@
+import { PortForwardPopoverView } from "./PortForwardButton";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  MockListeningPortsResponse,
+  MockWorkspaceAgent,
+} from "testHelpers/entities";
+
+const meta: Meta<typeof PortForwardPopoverView> = {
+  title: "components/PortForwardPopoverView",
+  component: PortForwardPopoverView,
+  decorators: [
+    (Story) => (
+      <div
+        css={(theme) => ({
+          width: 304,
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: 8,
+          backgroundColor: theme.palette.background.paper,
+        })}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    agent: MockWorkspaceAgent,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PortForwardPopoverView>;
+
+export const WithPorts: Story = {
+  args: {
+    ports: MockListeningPortsResponse.ports,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    ports: [],
+  },
+};
diff --git a/site/src/components/WorkspaceBuildLogs/Logs.tsx b/site/src/components/WorkspaceBuildLogs/Logs.tsx
index 585adf0f9788b..40c419b600dc8 100644
--- a/site/src/components/WorkspaceBuildLogs/Logs.tsx
+++ b/site/src/components/WorkspaceBuildLogs/Logs.tsx
@@ -5,6 +5,8 @@ import { type FC, type ReactNode, useMemo } from "react";
 import AnsiToHTML from "ansi-to-html";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
+const convert = new AnsiToHTML();
+
 export interface Line {
   time: string;
   output: string;
@@ -16,9 +18,10 @@ export interface LogsProps {
   lines: Line[];
   hideTimestamps?: boolean;
   className?: string;
+  children?: ReactNode;
 }
 
-export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
+export const Logs: FC<LogsProps> = ({
   hideTimestamps,
   lines,
   className = "",
@@ -50,16 +53,23 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
 
 export const logLineHeight = 20;
 
-const convert = new AnsiToHTML();
-
-export const LogLine: FC<{
+interface LogLineProps {
   line: Line;
   hideTimestamp?: boolean;
   number?: number;
   style?: React.CSSProperties;
   sourceIcon?: ReactNode;
   maxNumber?: number;
-}> = ({ line, hideTimestamp, number, maxNumber, sourceIcon, style }) => {
+}
+
+export const LogLine: FC<LogLineProps> = ({
+  line,
+  hideTimestamp,
+  number,
+  maxNumber,
+  sourceIcon,
+  style,
+}) => {
   const output = useMemo(() => {
     return convert.toHtml(line.output.split(/\r/g).pop() as string);
   }, [line.output]);
@@ -120,15 +130,15 @@ const styles = {
     padding: "0 32px",
 
     "&.error": {
-      backgroundColor: theme.palette.error.dark,
+      backgroundColor: theme.experimental.roles.error.background,
     },
 
     "&.debug": {
-      backgroundColor: theme.palette.background.paper,
+      backgroundColor: theme.experimental.roles.info.background,
     },
 
     "&.warn": {
-      backgroundColor: theme.palette.warning.dark,
+      backgroundColor: theme.experimental.roles.warning.background,
     },
   }),
   space: {
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
index 5044a9c4e07bd..39d966b890fa7 100644
--- a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
+++ b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
@@ -1,9 +1,11 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { WorkspaceBuildLogs } from "./WorkspaceBuildLogs";
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import { MockWorkspaceBuildLogs } from "testHelpers/entities";
+import { WorkspaceBuildLogs } from "./WorkspaceBuildLogs";
 
 const meta: Meta<typeof WorkspaceBuildLogs> = {
   title: "components/WorkspaceBuildLogs",
+  parameters: { chromatic },
   component: WorkspaceBuildLogs,
 };
 
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
index dfb43f5c31a9b..002b6c678a857 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import {
   mockApiError,
   MockTemplate,
@@ -11,6 +12,7 @@ import { CreateWorkspacePageView } from "./CreateWorkspacePageView";
 
 const meta: Meta<typeof CreateWorkspacePageView> = {
   title: "pages/CreateWorkspacePage",
+  parameters: { chromatic },
   component: CreateWorkspacePageView,
   args: {
     defaultName: "",
diff --git a/site/src/pages/SetupPage/SetupPageView.stories.tsx b/site/src/pages/SetupPage/SetupPageView.stories.tsx
index 98f388043efed..239fb10cab930 100644
--- a/site/src/pages/SetupPage/SetupPageView.stories.tsx
+++ b/site/src/pages/SetupPage/SetupPageView.stories.tsx
@@ -1,9 +1,11 @@
-import { SetupPageView } from "./SetupPageView";
-import { mockApiError } from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { mockApiError } from "testHelpers/entities";
+import { SetupPageView } from "./SetupPageView";
 
 const meta: Meta<typeof SetupPageView> = {
   title: "pages/SetupPage",
+  parameters: { chromatic },
   component: SetupPageView,
 };
 
diff --git a/site/src/testHelpers/chromatic.ts b/site/src/testHelpers/chromatic.ts
new file mode 100644
index 0000000000000..1617287b9e885
--- /dev/null
+++ b/site/src/testHelpers/chromatic.ts
@@ -0,0 +1,6 @@
+export const chromatic = {
+  modes: {
+    dark: { theme: "dark" },
+    light: { theme: "light" },
+  },
+};
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
index 9e1aaf383c379..dfa82cce3be94 100644
--- a/site/src/theme/dark/experimental.ts
+++ b/site/src/theme/dark/experimental.ts
@@ -3,25 +3,25 @@ import colors from "../tailwind";
 
 export default {
   l1: {
-    background: colors.gray[950],
-    outline: colors.gray[700],
-    fill: colors.gray[600],
+    background: colors.zinc[950],
+    outline: colors.zinc[700],
+    fill: colors.zinc[600],
     text: colors.white,
   },
 
   l2: {
-    background: colors.gray[900],
-    outline: colors.gray[700],
+    background: colors.zinc[900],
+    outline: colors.zinc[700],
     fill: "#f00",
     text: colors.white,
     disabled: {
       background: "#f00",
       outline: "#f00",
       fill: "#f00",
-      text: colors.gray[200],
+      text: colors.zinc[200],
     },
     hover: {
-      background: "#f00",
+      background: colors.zinc[800],
       outline: "#f00",
       fill: "#f00",
       text: colors.white,
@@ -29,15 +29,15 @@ export default {
   },
 
   l3: {
-    background: colors.gray[800],
-    outline: colors.gray[700],
-    fill: colors.gray[600],
+    background: colors.zinc[800],
+    outline: colors.zinc[700],
+    fill: colors.zinc[600],
     text: colors.white,
     disabled: {
       background: "#f00",
       outline: "#f00",
       fill: "#f00",
-      text: colors.gray[200],
+      text: colors.zinc[200],
     },
     hover: {
       background: "#f00",
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index 33d97e34df010..3c29de3b8ad23 100644
--- a/site/src/theme/light/experimental.ts
+++ b/site/src/theme/light/experimental.ts
@@ -21,7 +21,7 @@ export default {
       text: colors.gray[200],
     },
     hover: {
-      background: "#f00",
+      background: colors.gray[200],
       outline: "#f00",
       fill: "#f00",
       text: colors.black,
@@ -80,7 +80,7 @@ export default {
     },
     notice: {
       background: colors.yellow[50],
-      outline: colors.yellow[200],
+      outline: colors.yellow[600],
       fill: colors.yellow[500],
       text: colors.yellow[950],
     },

From d86c20e8049cac6f2abdb56a5e3639b1edf8b604 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 21:07:33 +0000
Subject: [PATCH 04/19] fix the editor

---
 .../FileTreeView.tsx                          | 11 +--
 .../MonacoEditor.tsx                          | 76 ++++++-------------
 .../TemplateVersionEditor.stories.tsx         | 12 +--
 site/src/theme/dark/index.ts                  |  2 +
 site/src/theme/dark/monaco.ts                 | 37 +++++++++
 site/src/theme/darkBlue/index.ts              |  2 +
 site/src/theme/darkBlue/monaco.ts             | 37 +++++++++
 site/src/theme/index.ts                       |  2 +
 site/src/theme/light/experimental.ts          |  2 +-
 site/src/theme/light/index.ts                 |  2 +
 site/src/theme/light/monaco.ts                | 37 +++++++++
 11 files changed, 156 insertions(+), 64 deletions(-)
 create mode 100644 site/src/theme/dark/monaco.ts
 create mode 100644 site/src/theme/darkBlue/monaco.ts
 create mode 100644 site/src/theme/light/monaco.ts

diff --git a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
index c2e753cdb2bc6..a9924a1104781 100644
--- a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
@@ -92,8 +92,8 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
             }
 
             &.Mui-selected {
-              color: ${theme.palette.text.primary};
-              background: ${theme.colors.gray[14]};
+              color: ${theme.experimental.roles.active.text};
+              background: ${theme.experimental.roles.active.background};
             }
 
             &.Mui-focused {
@@ -133,16 +133,13 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
           } as CSSProperties
         }
       >
-        {isFolder ? (
+        {isFolder &&
           Object.keys(content)
             .sort(sortFileTree(content))
             .map((filename) => {
               const child = content[filename];
               return buildTreeItems(filename, child, currentPath);
-            })
-        ) : (
-          <></>
-        )}
+            })}
       </TreeItem>
     );
   };
diff --git a/site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx b/site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx
index 7b3ed9ab29d2a..7667afc4431b7 100644
--- a/site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx
@@ -1,16 +1,22 @@
 import { useTheme } from "@emotion/react";
 import Editor, { loader } from "@monaco-editor/react";
 import * as monaco from "monaco-editor";
-import { FC, useMemo } from "react";
+import { type FC, useEffect, useMemo } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
 loader.config({ monaco });
 
-export const MonacoEditor: FC<{
+interface MonacoEditorProps {
   value?: string;
   path?: string;
   onChange?: (value: string) => void;
-}> = ({ onChange, value, path }) => {
+}
+
+export const MonacoEditor: FC<MonacoEditorProps> = ({
+  onChange,
+  value,
+  path,
+}) => {
   const theme = useTheme();
 
   const language = useMemo(() => {
@@ -31,6 +37,20 @@ export const MonacoEditor: FC<{
     }
   }, [path]);
 
+  useEffect(() => {
+    document.fonts.ready
+      .then(() => {
+        // Ensures that all text is measured properly.
+        // If this isn't done, there can be weird selection issues.
+        monaco.editor.remeasureFonts();
+      })
+      .catch(() => {
+        // Not a biggie!
+      });
+
+    monaco.editor.defineTheme("min", theme.monaco);
+  }, [theme]);
+
   return (
     <Editor
       value={value}
@@ -52,62 +72,16 @@ export const MonacoEditor: FC<{
           onChange(newValue);
         }
       }}
-      onMount={(editor, monaco) => {
+      onMount={(editor) => {
         // This jank allows for Ctrl + Enter to work outside the editor.
         // We use this keybind to trigger a build.
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Private type in Monaco!
         (editor as any)._standaloneKeybindingService.addDynamicKeybinding(
           `-editor.action.insertLineAfter`,
           monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-          () => {
-            //
-          },
+          () => {},
         );
 
-        document.fonts.ready
-          .then(() => {
-            // Ensures that all text is measured properly.
-            // If this isn't done, there can be weird selection issues.
-            monaco.editor.remeasureFonts();
-          })
-          .catch(() => {
-            // Not a biggie!
-          });
-
-        monaco.editor.defineTheme("min", {
-          base: "vs-dark",
-          inherit: true,
-          rules: [
-            {
-              token: "comment",
-              foreground: "6B737C",
-            },
-            {
-              token: "type",
-              foreground: "B392F0",
-            },
-            {
-              token: "string",
-              foreground: "9DB1C5",
-            },
-            {
-              token: "variable",
-              foreground: "BBBBBB",
-            },
-            {
-              token: "identifier",
-              foreground: "B392F0",
-            },
-            {
-              token: "delimiter.curly",
-              foreground: "EBB325",
-            },
-          ],
-          colors: {
-            "editor.foreground": theme.palette.text.primary,
-            "editor.background": theme.palette.background.paper,
-          },
-        });
         editor.updateOptions({
           theme: "min",
         });
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
index bcd60352568ae..a2fe510d2badf 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -1,3 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import {
   MockFailedProvisionerJob,
   MockRunningProvisionerJob,
@@ -14,19 +16,19 @@ import {
   MockWorkspaceVolumeResource,
 } from "testHelpers/entities";
 import { TemplateVersionEditor } from "./TemplateVersionEditor";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof TemplateVersionEditor> = {
-  title: "pages/TemplateVersionEditorPage",
+  title: "pages/TemplateVersionEditor",
+  parameters: {
+    chromatic,
+    layout: "fullscreen",
+  },
   component: TemplateVersionEditor,
   args: {
     template: MockTemplate,
     templateVersion: MockTemplateVersion,
     defaultFileTree: MockTemplateVersionFileTree,
   },
-  parameters: {
-    layout: "fullscreen",
-  },
 };
 
 export default meta;
diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
index 19a84fc4b2c0a..4a1d9094c6bc2 100644
--- a/site/src/theme/dark/index.ts
+++ b/site/src/theme/dark/index.ts
@@ -1,9 +1,11 @@
 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/monaco.ts b/site/src/theme/dark/monaco.ts
new file mode 100644
index 0000000000000..727c481b7f3a2
--- /dev/null
+++ b/site/src/theme/dark/monaco.ts
@@ -0,0 +1,37 @@
+import muiTheme from "./mui";
+import type * as monaco from "monaco-editor";
+
+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;
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
index 19a84fc4b2c0a..4a1d9094c6bc2 100644
--- a/site/src/theme/darkBlue/index.ts
+++ b/site/src/theme/darkBlue/index.ts
@@ -1,9 +1,11 @@
 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/darkBlue/monaco.ts b/site/src/theme/darkBlue/monaco.ts
new file mode 100644
index 0000000000000..727c481b7f3a2
--- /dev/null
+++ b/site/src/theme/darkBlue/monaco.ts
@@ -0,0 +1,37 @@
+import muiTheme from "./mui";
+import type * as monaco from "monaco-editor";
+
+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;
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index 2622b58c4a2a4..6920f5662baa0 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1,4 +1,5 @@
 import type { Theme as MuiTheme } from "@mui/material/styles";
+import type * as monaco from "monaco-editor";
 import dark from "./dark";
 import darkBlue from "./darkBlue";
 import light from "./light";
@@ -8,6 +9,7 @@ import type { Colors } from "./colors";
 export interface Theme extends MuiTheme {
   colors: Colors;
   experimental: NewTheme;
+  monaco: monaco.editor.IStandaloneThemeData;
 }
 
 export const DEFAULT_THEME = "auto";
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index 3c29de3b8ad23..9750c9abd4e57 100644
--- a/site/src/theme/light/experimental.ts
+++ b/site/src/theme/light/experimental.ts
@@ -109,7 +109,7 @@ export default {
       },
     },
     active: {
-      background: colors.sky[50],
+      background: colors.sky[100],
       outline: colors.sky[500],
       fill: colors.sky[600],
       text: colors.sky[950],
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
index 19a84fc4b2c0a..4a1d9094c6bc2 100644
--- a/site/src/theme/light/index.ts
+++ b/site/src/theme/light/index.ts
@@ -1,9 +1,11 @@
 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/light/monaco.ts b/site/src/theme/light/monaco.ts
new file mode 100644
index 0000000000000..500a84858dda3
--- /dev/null
+++ b/site/src/theme/light/monaco.ts
@@ -0,0 +1,37 @@
+import muiTheme from "./mui";
+import type * as monaco from "monaco-editor";
+
+export default {
+  base: "vs",
+  inherit: true,
+  rules: [
+    {
+      token: "comment",
+      foreground: "6B737C",
+    },
+    {
+      token: "type",
+      foreground: "682CD7",
+    },
+    {
+      token: "string",
+      foreground: "1766B4",
+    },
+    {
+      token: "variable",
+      foreground: "444444",
+    },
+    {
+      token: "identifier",
+      foreground: "682CD7",
+    },
+    {
+      token: "delimiter.curly",
+      foreground: "EBB325",
+    },
+  ],
+  colors: {
+    "editor.foreground": muiTheme.palette.text.primary,
+    "editor.background": muiTheme.palette.background.paper,
+  },
+} satisfies monaco.editor.IStandaloneThemeData;

From 3eeb8d0ef6324eba34cde7ca6992ea261a6722e9 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 21:19:43 +0000
Subject: [PATCH 05/19] tweak story parameters

---
 site/.storybook/preview.jsx                         | 12 ++++++++++++
 .../Dashboard/Navbar/NavbarView.stories.tsx         | 13 ++-----------
 site/src/testHelpers/chromatic.ts                   |  7 +++++++
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
index 65ee5242b6c1d..05d5a340747c5 100644
--- a/site/.storybook/preview.jsx
+++ b/site/.storybook/preview.jsx
@@ -76,4 +76,16 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewport: {
+    viewports: {
+      ipad: {
+        name: "iPad Mini",
+        styles: {
+          height: "1024px",
+          width: "768px",
+        },
+        type: "tablet",
+      },
+    },
+  },
 };
diff --git a/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx b/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
index 7a59ab19d0067..fa9dcc4cfbe36 100644
--- a/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
+++ b/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { chromatic } from "testHelpers/chromatic";
+import { chromaticWithTablet } from "testHelpers/chromatic";
 import { MockUser, MockUser2 } from "testHelpers/entities";
 import { NavbarView } from "./NavbarView";
 
 const meta: Meta<typeof NavbarView> = {
   title: "components/NavbarView",
-  parameters: { chromatic },
+  parameters: { chromatic: chromaticWithTablet },
   component: NavbarView,
   args: {
     user: MockUser,
@@ -25,12 +25,3 @@ export const ForMember: Story = {
     canViewAllUsers: false,
   },
 };
-
-export const SmallViewport: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "tablet",
-    },
-    chromatic: { viewports: [420] },
-  },
-};
diff --git a/site/src/testHelpers/chromatic.ts b/site/src/testHelpers/chromatic.ts
index 1617287b9e885..a3282f2178c97 100644
--- a/site/src/testHelpers/chromatic.ts
+++ b/site/src/testHelpers/chromatic.ts
@@ -4,3 +4,10 @@ export const chromatic = {
     light: { theme: "light" },
   },
 };
+
+export const chromaticWithTablet = {
+  modes: {
+    "dark desktop": { theme: "dark" },
+    "light tablet": { theme: "light", viewport: "ipad" },
+  },
+};

From 405d0f3497e99609137fc48619975fd90ebd3a0e Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 21:36:00 +0000
Subject: [PATCH 06/19] oh boy

---
 site/src/@types/mui.d.ts                      |  4 ---
 .../ProxyStatusLatency/ProxyStatusLatency.tsx |  2 +-
 .../src/components/Resources/AgentLatency.tsx |  9 ++++--
 site/src/pages/HealthPage/DERPRegionPage.tsx  | 31 ++++++++++---------
 site/src/theme/dark/monaco.ts                 |  2 +-
 site/src/theme/darkBlue/monaco.ts             |  2 +-
 site/src/theme/light/monaco.ts                |  2 +-
 site/src/utils/latency.ts                     |  2 +-
 8 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts
index 4017af0f1b6e8..02b3c1ae4517e 100644
--- a/site/src/@types/mui.d.ts
+++ b/site/src/@types/mui.d.ts
@@ -2,10 +2,6 @@ import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
 import type { NewTheme } from "theme/experimental";
 
 declare module "@mui/material/styles" {
-  interface Theme {
-    experimental: NewTheme;
-  }
-
   interface Palette {
     neutral: PaletteColor;
   }
diff --git a/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx b/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
index 330aaa542eeb5..6776cf06e1f55 100644
--- a/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
+++ b/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from "@mui/material/styles";
+import { useTheme } from "@emotion/react";
 import HelpOutline from "@mui/icons-material/HelpOutline";
 import Tooltip from "@mui/material/Tooltip";
 import { type FC } from "react";
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
index a6ee1757f67e6..e30400465e9e3 100644
--- a/site/src/components/Resources/AgentLatency.tsx
+++ b/site/src/components/Resources/AgentLatency.tsx
@@ -1,6 +1,5 @@
 import { type FC, useRef, useState } from "react";
-import { useTheme } from "@emotion/react";
-import { Theme } from "@mui/material/styles";
+import { type Theme, useTheme } from "@emotion/react";
 import type { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
 import {
   HelpTooltipText,
@@ -29,7 +28,11 @@ const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
   };
 };
 
-export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
+interface AgentLatencyProps {
+  agent: WorkspaceAgent;
+}
+
+export const AgentLatency: FC<AgentLatencyProps> = ({ agent }) => {
   const theme = useTheme();
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(false);
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 3dfb1cea2a7b0..35503c3f39388 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -1,4 +1,19 @@
+import Tooltip from "@mui/material/Tooltip";
+import CodeOutlined from "@mui/icons-material/CodeOutlined";
+import TagOutlined from "@mui/icons-material/TagOutlined";
+import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
+import { useTheme } from "@emotion/react";
+import { type FC } from "react";
+import { Helmet } from "react-helmet-async";
 import { Link, useOutletContext, useParams } from "react-router-dom";
+import type {
+  HealthMessage,
+  HealthSeverity,
+  HealthcheckReport,
+} from "api/typesGenerated";
+import { getLatencyColor } from "utils/latency";
+import { Alert } from "components/Alert/Alert";
+import { pageTitle } from "utils/page";
 import {
   Header,
   HeaderTitle,
@@ -8,22 +23,8 @@ import {
   Logs,
   HealthyDot,
 } from "./Content";
-import {
-  HealthMessage,
-  HealthSeverity,
-  HealthcheckReport,
-} from "api/typesGenerated";
-import CodeOutlined from "@mui/icons-material/CodeOutlined";
-import TagOutlined from "@mui/icons-material/TagOutlined";
-import Tooltip from "@mui/material/Tooltip";
-import { useTheme } from "@mui/material/styles";
-import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
-import { getLatencyColor } from "utils/latency";
-import { Alert } from "components/Alert/Alert";
-import { Helmet } from "react-helmet-async";
-import { pageTitle } from "utils/page";
 
-export const DERPRegionPage = () => {
+export const DERPRegionPage: FC = () => {
   const theme = useTheme();
   const healthStatus = useOutletContext<HealthcheckReport>();
   const params = useParams() as { regionId: string };
diff --git a/site/src/theme/dark/monaco.ts b/site/src/theme/dark/monaco.ts
index 727c481b7f3a2..ae020bdd1ba33 100644
--- a/site/src/theme/dark/monaco.ts
+++ b/site/src/theme/dark/monaco.ts
@@ -34,4 +34,4 @@ export default {
     "editor.foreground": muiTheme.palette.text.primary,
     "editor.background": muiTheme.palette.background.paper,
   },
-} satisfies monaco.editor.IStandaloneThemeData;
+} satisfies monaco.editor.IStandaloneThemeData as monaco.editor.IStandaloneThemeData;
diff --git a/site/src/theme/darkBlue/monaco.ts b/site/src/theme/darkBlue/monaco.ts
index 727c481b7f3a2..ae020bdd1ba33 100644
--- a/site/src/theme/darkBlue/monaco.ts
+++ b/site/src/theme/darkBlue/monaco.ts
@@ -34,4 +34,4 @@ export default {
     "editor.foreground": muiTheme.palette.text.primary,
     "editor.background": muiTheme.palette.background.paper,
   },
-} satisfies monaco.editor.IStandaloneThemeData;
+} satisfies monaco.editor.IStandaloneThemeData as monaco.editor.IStandaloneThemeData;
diff --git a/site/src/theme/light/monaco.ts b/site/src/theme/light/monaco.ts
index 500a84858dda3..6dc38d2be7c36 100644
--- a/site/src/theme/light/monaco.ts
+++ b/site/src/theme/light/monaco.ts
@@ -34,4 +34,4 @@ export default {
     "editor.foreground": muiTheme.palette.text.primary,
     "editor.background": muiTheme.palette.background.paper,
   },
-} satisfies monaco.editor.IStandaloneThemeData;
+} satisfies monaco.editor.IStandaloneThemeData as monaco.editor.IStandaloneThemeData;
diff --git a/site/src/utils/latency.ts b/site/src/utils/latency.ts
index 3bb891a20ee84..4281fa17e990f 100644
--- a/site/src/utils/latency.ts
+++ b/site/src/utils/latency.ts
@@ -1,4 +1,4 @@
-import { Theme } from "@mui/material/styles";
+import type { Theme } from "@emotion/react";
 
 export const getLatencyColor = (theme: Theme, latency?: number) => {
   if (!latency) {

From d407ccf3ad8c12a355d01452c91c149a76d0ee9a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 21:51:17 +0000
Subject: [PATCH 07/19] =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/@types/mui.d.ts                                    | 1 -
 site/src/components/Dashboard/Navbar/NavbarView.stories.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts
index 02b3c1ae4517e..255981fdf60fc 100644
--- a/site/src/@types/mui.d.ts
+++ b/site/src/@types/mui.d.ts
@@ -1,5 +1,4 @@
 import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
-import type { NewTheme } from "theme/experimental";
 
 declare module "@mui/material/styles" {
   interface Palette {
diff --git a/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx b/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
index fa9dcc4cfbe36..93afc9c618622 100644
--- a/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
+++ b/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
@@ -5,7 +5,7 @@ import { NavbarView } from "./NavbarView";
 
 const meta: Meta<typeof NavbarView> = {
   title: "components/NavbarView",
-  parameters: { chromatic: chromaticWithTablet },
+  parameters: { chromatic: chromaticWithTablet, layout: "fullscreen" },
   component: NavbarView,
   args: {
     user: MockUser,

From e81f23a86f0183dc50f7950dbb2bb5ce37e4c43e Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 22:08:16 +0000
Subject: [PATCH 08/19] add some ignore attributes for chromatic

---
 site/src/components/Loader/Loader.tsx      | 1 +
 site/src/pages/HealthPage/HealthLayout.tsx | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
index d225b5dc2621f..5b7142bef4ae9 100644
--- a/site/src/components/Loader/Loader.tsx
+++ b/site/src/components/Loader/Loader.tsx
@@ -16,6 +16,7 @@ export const Loader: FC<LoaderProps> = ({ size = 26, ...attrs }) => {
         justifyContent: "center",
       }}
       data-testid="loader"
+      data-chromatic="ignore"
       {...attrs}
     >
       <CircularProgress size={size} />
diff --git a/site/src/pages/HealthPage/HealthLayout.tsx b/site/src/pages/HealthPage/HealthLayout.tsx
index 448de1665f4a3..c45825507c763 100644
--- a/site/src/pages/HealthPage/HealthLayout.tsx
+++ b/site/src/pages/HealthPage/HealthLayout.tsx
@@ -126,6 +126,7 @@ export function HealthLayout() {
                 <div css={{ display: "flex", flexDirection: "column" }}>
                   <span css={{ fontWeight: 500 }}>Last check</span>
                   <span
+                    data-chromatic="ignore"
                     css={{
                       color: theme.palette.text.secondary,
                       lineHeight: "150%",
@@ -138,6 +139,7 @@ export function HealthLayout() {
                 <div css={{ display: "flex", flexDirection: "column" }}>
                   <span css={{ fontWeight: 500 }}>Version</span>
                   <span
+                    data-chromatic="ignore"
                     css={{
                       color: theme.palette.text.secondary,
                       lineHeight: "150%",

From c22a879b11e0f5a1c53c2f1f37242cf10473012a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 18 Dec 2023 23:10:51 +0000
Subject: [PATCH 09/19] next round

---
 .../src/components/Resources/AgentRow.stories.tsx |  4 +++-
 .../RichParameterInput.stories.tsx                |  6 ++++--
 .../AuditPage/AuditLogRow/AuditLogRow.stories.tsx |  5 ++++-
 .../src/pages/AuditPage/AuditPageView.stories.tsx | 15 ++++-----------
 .../WorkspaceScheduleForm.tsx                     |  7 ++++---
 site/src/theme/dark/experimental.ts               |  2 +-
 6 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx
index f4a08edbed846..b760899683304 100644
--- a/site/src/components/Resources/AgentRow.stories.tsx
+++ b/site/src/components/Resources/AgentRow.stories.tsx
@@ -1,3 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import {
   MockPrimaryWorkspaceProxy,
   MockWorkspaceProxies,
@@ -21,7 +23,6 @@ import {
 } from "testHelpers/entities";
 import { AgentRow, LineWithID } from "./AgentRow";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const defaultAgentMetadata = [
   {
@@ -102,6 +103,7 @@ const storybookLogs: LineWithID[] = [
 
 const meta: Meta<typeof AgentRow> = {
   title: "components/AgentRow",
+  parameters: { chromatic },
   component: AgentRow,
   args: {
     storybookLogs,
diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
index cd654ba7f2abc..8d1d5212fa59a 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
@@ -1,9 +1,11 @@
-import { TemplateVersionParameter } from "api/typesGenerated";
-import { RichParameterInput } from "./RichParameterInput";
 import type { Meta, StoryObj } from "@storybook/react";
+import type { TemplateVersionParameter } from "api/typesGenerated";
+import { chromatic } from "testHelpers/chromatic";
+import { RichParameterInput } from "./RichParameterInput";
 
 const meta: Meta<typeof RichParameterInput> = {
   title: "components/RichParameterInput",
+  parameters: { chromatic },
   component: RichParameterInput,
 };
 
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
index 9c7c681d4e59a..352b6b8d578aa 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
@@ -4,6 +4,8 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import {
   MockAuditLog,
   MockAuditLog2,
@@ -12,7 +14,6 @@ import {
   MockAuditLogGitSSH,
 } from "testHelpers/entities";
 import { AuditLogRow } from "./AuditLogRow";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof AuditLogRow> = {
   title: "pages/AuditPage/AuditLogRow",
@@ -48,6 +49,7 @@ export const NoDiff: Story = {
 };
 
 export const WithDiff: Story = {
+  parameters: { chromatic },
   args: {
     auditLog: MockAuditLog2,
     defaultIsDiffOpen: true,
@@ -55,6 +57,7 @@ export const WithDiff: Story = {
 };
 
 export const WithLongDiffRow: Story = {
+  parameters: { chromatic },
   args: {
     auditLog: {
       ...MockAuditLog2,
diff --git a/site/src/pages/AuditPage/AuditPageView.stories.tsx b/site/src/pages/AuditPage/AuditPageView.stories.tsx
index e64e54b48699d..69aa64977e92a 100644
--- a/site/src/pages/AuditPage/AuditPageView.stories.tsx
+++ b/site/src/pages/AuditPage/AuditPageView.stories.tsx
@@ -1,12 +1,13 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { type ComponentProps } from "react";
+import { chromaticWithTablet } from "testHelpers/chromatic";
 import { MockAuditLog, MockAuditLog2, MockUser } from "testHelpers/entities";
-import { AuditPageView } from "./AuditPageView";
-import { ComponentProps } from "react";
 import {
   mockInitialRenderResult,
   mockSuccessResult,
 } from "components/PaginationWidget/PaginationContainer.mocks";
 import { type UsePaginatedQueryResult } from "hooks/usePaginatedQuery";
+import { AuditPageView } from "./AuditPageView";
 
 import {
   MockMenu,
@@ -43,6 +44,7 @@ export default meta;
 type Story = StoryObj<typeof AuditPageView>;
 
 export const AuditPage: Story = {
+  parameters: { chromatic: chromaticWithTablet },
   args: {
     auditsQuery: mockSuccessResult,
   },
@@ -84,12 +86,3 @@ export const NotVisible: Story = {
     auditsQuery: mockInitialRenderResult,
   },
 };
-
-export const AuditPageSmallViewport: Story = {
-  args: {
-    auditsQuery: mockSuccessResult,
-  },
-  parameters: {
-    chromatic: { viewports: [600] },
-  },
-};
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
index f72ee49fefcfa..e4c51bd8a91b2 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
@@ -25,13 +25,14 @@ import {
   defaultSchedule,
   emptySchedule,
 } from "pages/WorkspaceSettingsPage/WorkspaceSchedulePage/schedule";
-import { ChangeEvent, FC } from "react";
+import { type ChangeEvent, type FC } from "react";
 import * as Yup from "yup";
 import { getFormHelpers } from "utils/formUtils";
 import { timeZones } from "utils/timeZones";
 import { Pill } from "components/Pill/Pill";
 import Tooltip from "@mui/material/Tooltip";
 import { formatDuration, intervalToDuration } from "date-fns";
+import { DisabledBadge } from "components/Badges/Badges";
 
 // REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
 //         sorted alphabetically.
@@ -290,7 +291,7 @@ export const WorkspaceScheduleForm: FC<
             </div>
             {!enableAutoStart && (
               <Tooltip title="This option can be enabled in the template settings">
-                <Pill text="Disabled" />
+                <DisabledBadge />
               </Tooltip>
             )}
           </>
@@ -378,7 +379,7 @@ export const WorkspaceScheduleForm: FC<
             </div>
             {!enableAutoStop && (
               <Tooltip title="This option can be enabled in the template settings">
-                <Pill text="Disabled" />
+                <DisabledBadge />
               </Tooltip>
             )}
           </>
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
index dfa82cce3be94..f715327c41367 100644
--- a/site/src/theme/dark/experimental.ts
+++ b/site/src/theme/dark/experimental.ts
@@ -69,7 +69,7 @@ export default {
     error: {
       background: colors.red[950],
       outline: colors.red[500],
-      fill: colors.red[600],
+      fill: colors.red[400],
       text: colors.red[50],
     },
     warning: {

From 058991f1a88b70ec8fd4bff1fbabab5d80484f89 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 00:26:14 +0000
Subject: [PATCH 10/19] bunch of polish

---
 site/src/components/Badges/Badges.tsx         | 10 +--
 .../DeploymentBanner/DeploymentBannerView.tsx |  2 +-
 .../LicenseBannerView.stories.tsx             |  2 +
 .../LicenseBanner/LicenseBannerView.tsx       | 18 +++--
 .../Navbar/UserDropdown/UserDropdown.tsx      |  2 +-
 .../ServiceBanner/ServiceBannerView.tsx       | 72 +++++++------------
 site/src/components/Markdown/Markdown.tsx     | 23 ++++--
 .../AppearanceSettingsPageView.tsx            |  4 +-
 .../TemplateVersionsPage/VersionRow.tsx       | 11 ---
 .../TemplatesPageView.stories.tsx             | 13 +---
 .../pages/TemplatesPage/TemplatesPageView.tsx | 16 ++---
 site/src/theme/dark/experimental.ts           | 10 +--
 site/src/theme/darkBlue/experimental.ts       |  8 +--
 site/src/theme/light/experimental.ts          | 12 ++--
 14 files changed, 97 insertions(+), 106 deletions(-)

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index b8e6b9ae330cd..cd230156551ee 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -131,11 +131,11 @@ export const DeprecatedBadge: FC = () => {
     <span
       css={[
         styles.badge,
-        {
-          border: `1px solid ${colors.orange[600]}`,
-          backgroundColor: colors.orange[950],
-          color: colors.orange[50],
-        },
+        (theme) => ({
+          border: `1px solid ${theme.experimental.roles.danger.outline}`,
+          backgroundColor: theme.experimental.roles.danger.background,
+          color: theme.experimental.roles.danger.text,
+        }),
       ]}
     >
       Deprecated
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
index 1cb105118ebf8..191187449fbe5 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -378,7 +378,7 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
     <Stack direction="row" spacing={1} alignItems="center">
       <ErrorIcon
         css={{ width: 16, height: 16 }}
-        htmlColor={theme.colors.red[10]}
+        htmlColor={theme.experimental.roles.error.outline}
       />
       {children}
     </Stack>
diff --git a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.stories.tsx b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.stories.tsx
index cc37d18488085..ffd396bb0fba6 100644
--- a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.stories.tsx
+++ b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.stories.tsx
@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import { LicenseBannerView } from "./LicenseBannerView";
 
 const meta: Meta<typeof LicenseBannerView> = {
   title: "components/LicenseBannerView",
+  parameters: { chromatic },
   component: LicenseBannerView,
 };
 
diff --git a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
index 7e3889fcebdd8..31c9f4269e48d 100644
--- a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -47,11 +47,11 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
     display: flex;
     align-items: center;
     padding: 12px;
-    background-color: ${type === "error"
-      ? theme.colors.red[10]
-      : theme.colors.orange[10]};
+    background-color: ${theme.experimental.roles[type].background};
   `;
 
+  const textColor = theme.experimental.roles[type].text;
+
   if (messages.length === 1) {
     return (
       <div css={containerStyles}>
@@ -59,7 +59,11 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
         <div css={styles.leftContent}>
           <span>{messages[0]}</span>
           &nbsp;
-          <Link color="white" fontWeight="medium" href="mailto:sales@coder.com">
+          <Link
+            color={textColor}
+            fontWeight="medium"
+            href="mailto:sales@coder.com"
+          >
             {Language.upgrade}
           </Link>
         </div>
@@ -74,7 +78,11 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
         <div>
           {Language.exceeded}
           &nbsp;
-          <Link color="white" fontWeight="medium" href="mailto:sales@coder.com">
+          <Link
+            color={textColor}
+            fontWeight="medium"
+            href="mailto:sales@coder.com"
+          >
             {Language.upgrade}
           </Link>
         </div>
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
index 3f5661e8df5e5..a5e83c0d50f1b 100644
--- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
+++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -45,7 +45,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
                   />
                 </Badge>
                 <DropdownArrow
-                  color={theme.colors.gray[6]}
+                  color={theme.experimental.l2.fill}
                   close={popover.isOpen}
                 />
               </div>
diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
index cc389f191ff09..b2b30ecb46d70 100644
--- a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
+++ b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
@@ -1,6 +1,7 @@
+import { css, type Interpolation, type Theme } from "@emotion/react";
+import { type FC } from "react";
+import { InlineMarkdown } from "components/Markdown/Markdown";
 import { Pill } from "components/Pill/Pill";
-import ReactMarkdown from "react-markdown";
-import { css, useTheme } from "@emotion/react";
 import { readableForegroundColor } from "utils/colors";
 
 export interface ServiceBannerViewProps {
@@ -9,58 +10,39 @@ export interface ServiceBannerViewProps {
   isPreview: boolean;
 }
 
-export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
+export const ServiceBannerView: FC<ServiceBannerViewProps> = ({
   message,
   backgroundColor,
   isPreview,
 }) => {
-  const theme = useTheme();
-  // We don't want anything funky like an image or a heading in the service
-  // banner.
-  const markdownElementsAllowed = [
-    "text",
-    "a",
-    "pre",
-    "ul",
-    "strong",
-    "emphasis",
-    "italic",
-    "link",
-    "em",
-  ];
   return (
-    <div
-      css={css`
-        padding: 12px;
-        background-color: ${backgroundColor ?? theme.palette.warning.main};
-        display: flex;
-        align-items: center;
-
-        &.error {
-          background-color: ${theme.colors.red[12]};
-        }
-      `}
-    >
+    <div css={[styles.banner, { backgroundColor }]}>
       {isPreview && <Pill text="Preview" type="info" />}
       <div
-        css={css`
-          margin-right: auto;
-          margin-left: auto;
-          font-weight: 400;
-          color: ${readableForegroundColor(backgroundColor)};
-
-          & a {
-            color: inherit;
-          }
-        `}
+        css={[
+          styles.wrapper,
+          { color: readableForegroundColor(backgroundColor) },
+        ]}
       >
-        <ReactMarkdown
-          allowedElements={markdownElementsAllowed}
-          unwrapDisallowed
-        >
-          {message}
-        </ReactMarkdown>
+        <InlineMarkdown>{message}</InlineMarkdown>
       </div>
     </div>
   );
 };
+
+const styles = {
+  banner: css`
+    padding: 12px;
+    display: flex;
+    align-items: center;
+  `,
+  wrapper: css`
+    margin-right: auto;
+    margin-left: auto;
+    font-weight: 400;
+
+    & a {
+      color: inherit;
+    }
+  `,
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
index a3a54f0dd6241..e6defa3733288 100644
--- a/site/src/components/Markdown/Markdown.tsx
+++ b/site/src/components/Markdown/Markdown.tsx
@@ -121,12 +121,19 @@ export const Markdown: FC<MarkdownProps> = (props) => {
   );
 };
 
-interface MarkdownInlineProps {
+interface InlineMarkdownProps {
   /**
    * The Markdown text to parse and render
    */
   children: string;
 
+  /**
+   * Additional element types to allow.
+   * Allows italic, bold, links, and inline code snippets by default.
+   * eg. `["ol", "ul", "li"]` to support lists.
+   */
+  allowedElements?: readonly string[];
+
   className?: string;
 
   /**
@@ -138,13 +145,21 @@ interface MarkdownInlineProps {
 /**
  * Supports a strict subset of Markdown that behaves well as inline/confined content.
  */
-export const InlineMarkdown: FC<MarkdownInlineProps> = (props) => {
-  const { children, className, components = {} } = props;
+export const InlineMarkdown: FC<InlineMarkdownProps> = (props) => {
+  const { children, allowedElements = [], className, components = {} } = props;
 
   return (
     <ReactMarkdown
       className={className}
-      allowedElements={["p", "em", "strong", "a", "pre", "code"]}
+      allowedElements={[
+        "p",
+        "em",
+        "strong",
+        "a",
+        "pre",
+        "code",
+        ...allowedElements,
+      ]}
       unwrapDisallowed
       components={{
         p: ({ children }) => <>{children}</>,
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
index e4ae30c846757..be6092f0b0b88 100644
--- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -19,6 +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";
 
 export type AppearanceSettingsPageViewProps = {
   appearance: UpdateAppearanceConfig;
@@ -29,11 +30,12 @@ export type AppearanceSettingsPageViewProps = {
   ) => void;
 };
 
+const fallbackBgColor = colors.neutral[500];
+
 export const AppearanceSettingsPageView: FC<
   AppearanceSettingsPageViewProps
 > = ({ appearance, isEntitled, onSaveAppearance }) => {
   const theme = useTheme();
-  const fallbackBgColor = theme.colors.blue[7];
 
   const applicationNameForm = useFormik<{
     application_name: string;
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
index 2f1ecffeeb1ac..af8110c7ad5b9 100644
--- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
+++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
@@ -39,7 +39,6 @@ export const VersionRow: FC<VersionRowProps> = ({
     <TimelineEntry
       data-testid={`version-${version.id}`}
       {...clickableProps}
-      css={[styles.row]}
       className={clickableProps.className}
     >
       <TableCell css={styles.versionCell}>
@@ -127,16 +126,6 @@ export const VersionRow: FC<VersionRowProps> = ({
 };
 
 const styles = {
-  row: (theme) => ({
-    "&:hover $promoteButton": {
-      color: theme.palette.text.primary,
-      borderColor: theme.colors.gray[11],
-      "&:hover": {
-        borderColor: theme.palette.text.primary,
-      },
-    },
-  }),
-
   promoteButton: (theme) => ({
     color: theme.palette.text.secondary,
     transition: "none",
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
index 93c13c55cd794..07aecdb173ae9 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
@@ -1,3 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromaticWithTablet } from "testHelpers/chromatic";
 import {
   mockApiError,
   MockTemplate,
@@ -5,10 +7,10 @@ import {
   MockTemplateExample2,
 } from "testHelpers/entities";
 import { TemplatesPageView } from "./TemplatesPageView";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof TemplatesPageView> = {
   title: "pages/TemplatesPage",
+  parameters: { chromatic: chromaticWithTablet },
   component: TemplatesPageView,
 };
 
@@ -65,15 +67,6 @@ export const WithTemplates: Story = {
   },
 };
 
-export const WithTemplatesSmallViewPort: Story = {
-  args: {
-    ...WithTemplates.args,
-  },
-  parameters: {
-    chromatic: { viewports: [600] },
-  },
-};
-
 export const EmptyCanCreate: Story = {
   args: {
     canCreateTemplates: true,
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index e9aef584fc0fa..7004e3d86c934 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -42,7 +42,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { docs } from "utils/docs";
 import Skeleton from "@mui/material/Skeleton";
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
-import { Pill } from "components/Pill/Pill";
+import { DeprecatedBadge } from "components/Badges/Badges";
 
 export const Language = {
   developerCount: (activeCount: number): string => {
@@ -122,7 +122,7 @@ const TemplateRow: FC<TemplateRowProps> = ({ template }) => {
 
       <TableCell css={styles.actionCell}>
         {template.deprecated ? (
-          <Pill text="Deprecated" type="warning" />
+          <DeprecatedBadge />
         ) : (
           <Button
             size="small"
@@ -273,15 +273,15 @@ const styles = {
   }),
   tableRow: (theme) => ({
     "&:hover .actionButton": {
-      color: theme.palette.text.primary,
-      borderColor: theme.colors.gray[11],
-      "&:hover": {
-        borderColor: theme.palette.text.primary,
-      },
+      color: theme.experimental.l2.hover.text,
+      borderColor: theme.experimental.l2.hover.outline,
     },
   }),
   actionButton: (theme) => ({
-    color: theme.palette.text.secondary,
     transition: "none",
+    color: theme.palette.text.secondary,
+    "&:hover": {
+      borderColor: theme.palette.text.primary,
+    },
   }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
index f715327c41367..86c22bdecbcf0 100644
--- a/site/src/theme/dark/experimental.ts
+++ b/site/src/theme/dark/experimental.ts
@@ -12,17 +12,17 @@ export default {
   l2: {
     background: colors.zinc[900],
     outline: colors.zinc[700],
-    fill: "#f00",
-    text: colors.white,
+    fill: colors.zinc[500],
+    text: colors.zinc[50],
     disabled: {
       background: "#f00",
       outline: "#f00",
-      fill: "#f00",
+      fill: colors.zinc[500],
       text: colors.zinc[200],
     },
     hover: {
       background: colors.zinc[800],
-      outline: "#f00",
+      outline: colors.zinc[600],
       fill: "#f00",
       text: colors.white,
     },
@@ -68,7 +68,7 @@ export default {
     },
     error: {
       background: colors.red[950],
-      outline: colors.red[500],
+      outline: colors.red[600],
       fill: colors.red[400],
       text: colors.red[50],
     },
diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts
index 4ba6059cc135f..75328e6b116d5 100644
--- a/site/src/theme/darkBlue/experimental.ts
+++ b/site/src/theme/darkBlue/experimental.ts
@@ -12,17 +12,17 @@ export default {
   l2: {
     background: colors.gray[900],
     outline: colors.gray[700],
-    fill: "#f00",
-    text: colors.white,
+    fill: colors.gray[500],
+    text: colors.gray[50],
     disabled: {
       background: "#f00",
       outline: "#f00",
-      fill: "#f00",
+      fill: colors.gray[500],
       text: colors.gray[200],
     },
     hover: {
       background: "#f00",
-      outline: "#f00",
+      outline: colors.gray[600],
       fill: "#f00",
       text: colors.white,
     },
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index 9750c9abd4e57..c2e33debcfd85 100644
--- a/site/src/theme/light/experimental.ts
+++ b/site/src/theme/light/experimental.ts
@@ -11,18 +11,18 @@ export default {
 
   l2: {
     background: colors.gray[100],
-    outline: colors.gray[700],
-    fill: "#f00",
-    text: colors.black,
+    outline: colors.gray[600],
+    fill: colors.gray[500],
+    text: colors.gray[950],
     disabled: {
       background: "#f00",
       outline: "#f00",
-      fill: "#f00",
+      fill: colors.gray[500],
       text: colors.gray[200],
     },
     hover: {
       background: colors.gray[200],
-      outline: "#f00",
+      outline: colors.gray[700],
       fill: "#f00",
       text: colors.black,
     },
@@ -67,7 +67,7 @@ export default {
       },
     },
     error: {
-      background: colors.red[50],
+      background: colors.red[100],
       outline: colors.red[500],
       fill: colors.red[600],
       text: colors.red[950],

From 64911175031a410f308fef711941291d769d4884 Mon Sep 17 00:00:00 2001
From: Muhammad Atif Ali <atif@coder.com>
Date: Tue, 19 Dec 2023 17:05:54 +0300
Subject: [PATCH 11/19] add helm dependency update

---
 .github/workflows/pr-deploy.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/pr-deploy.yaml b/.github/workflows/pr-deploy.yaml
index 0aaf6664372f9..9c657b43ba699 100644
--- a/.github/workflows/pr-deploy.yaml
+++ b/.github/workflows/pr-deploy.yaml
@@ -351,6 +351,7 @@ jobs:
       - name: Install/Upgrade Helm chart
         run: |
           set -euo pipefail
+          helm dependency update --skip-refresh ./helm/coder
           helm upgrade --install "pr${{ env.PR_NUMBER }}" ./helm/coder \
           --namespace "pr${{ env.PR_NUMBER }}" \
           --values ./pr-deploy-values.yaml \

From 4cc558b999a97a43e79299aa0f2ad885509c0355 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 20:15:54 +0000
Subject: [PATCH 12/19] mark light as beta

---
 site/src/components/Badges/Badges.stories.tsx |   6 +
 site/src/components/Badges/Badges.tsx         |  17 ++
 site/src/components/Dialogs/Dialog.tsx        |  16 +-
 site/src/contexts/ThemeProviders.tsx          |  31 +-
 .../AppearancePage/AppearanceForm.tsx         | 285 +++++++++---------
 .../WorkspaceDeleteDialog.tsx                 |   8 +-
 site/src/theme/darkBlue/experimental.ts       |   2 +-
 site/src/theme/index.ts                       |   2 +-
 site/src/theme/light/experimental.ts          |   2 +-
 9 files changed, 209 insertions(+), 160 deletions(-)

diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx
index ed7e88ea1b6e7..fd31d446e0770 100644
--- a/site/src/components/Badges/Badges.stories.tsx
+++ b/site/src/components/Badges/Badges.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   Badges,
   AlphaBadge,
+  BetaBadge,
   DisabledBadge,
   EnabledBadge,
   EntitledBadge,
@@ -54,6 +55,11 @@ export const Enterprise: Story = {
     children: <EnterpriseBadge />,
   },
 };
+export const Beta: Story = {
+  args: {
+    children: <BetaBadge />,
+  },
+};
 export const Alpha: Story = {
   args: {
     children: <AlphaBadge />,
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index cd230156551ee..ccfe10f797343 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -109,6 +109,23 @@ export const EnterpriseBadge: FC = () => {
   );
 };
 
+export const BetaBadge: FC = () => {
+  return (
+    <span
+      css={[
+        styles.badge,
+        (theme) => ({
+          border: `1px solid ${theme.experimental.roles.preview.outline}`,
+          backgroundColor: theme.experimental.roles.preview.background,
+          color: theme.experimental.roles.preview.text,
+        }),
+      ]}
+    >
+      Beta
+    </span>
+  );
+};
+
 export const AlphaBadge: FC = () => {
   return (
     <span
diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index ed379576305b9..0a962109fc805 100644
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@@ -72,24 +72,24 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
 const styles = {
   warningButton: (theme) => ({
     "&.MuiButton-contained": {
-      backgroundColor: theme.palette.warning.main,
-      borderColor: theme.palette.warning.main,
+      backgroundColor: theme.experimental.roles.danger.fill,
+      borderColor: theme.experimental.roles.danger.outline,
 
       "&:not(.MuiLoadingButton-loading)": {
-        color: theme.palette.text.primary,
+        color: theme.experimental.roles.danger.text,
       },
 
       "&:hover:not(:disabled)": {
-        backgroundColor: theme.palette.warning.main,
-        borderColor: theme.palette.warning.main,
+        backgroundColor: theme.experimental.roles.danger.disabled.fill,
+        borderColor: theme.experimental.roles.danger.disabled.outline,
       },
 
       "&.Mui-disabled": {
-        backgroundColor: theme.palette.warning.dark,
-        borderColor: theme.palette.warning.dark,
+        backgroundColor: theme.experimental.roles.danger.disabled.background,
+        borderColor: theme.experimental.roles.danger.disabled.outline,
 
         "&:not(.MuiLoadingButton-loading)": {
-          color: theme.palette.warning.main,
+          color: theme.experimental.roles.danger.disabled.text,
         },
       },
     },
diff --git a/site/src/contexts/ThemeProviders.tsx b/site/src/contexts/ThemeProviders.tsx
index 33a3357da5c9d..488c2906022cc 100644
--- a/site/src/contexts/ThemeProviders.tsx
+++ b/site/src/contexts/ThemeProviders.tsx
@@ -7,15 +7,19 @@ import {
 import {
   type FC,
   type PropsWithChildren,
+  type ReactNode,
   useContext,
   useEffect,
   useMemo,
   useState,
 } from "react";
-import themes, { DEFAULT_THEME } from "theme";
+import themes, { DEFAULT_THEME, type Theme } from "theme";
 import { AuthContext } from "./AuthProvider/AuthProvider";
 
-export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
+/**
+ *
+ */
+export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   // We need to use the `AuthContext` directly, rather than the `useAuth` hook,
   // because Storybook and many tests depend on this component, but do not provide
   // an `AuthProvider`, and `useAuth` will throw in that case.
@@ -56,12 +60,23 @@ export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline enableColorScheme />
-          {children}
-        </EmotionThemeProvider>
-      </MuiThemeProvider>
+      <ThemeOverride theme={theme}>{children}</ThemeOverride>
     </StyledEngineProvider>
   );
 };
+
+interface ThemeOverrideProps {
+  theme: Theme;
+  children?: ReactNode;
+}
+
+export const ThemeOverride: FC<ThemeOverrideProps> = ({ theme, children }) => {
+  return (
+    <MuiThemeProvider theme={theme}>
+      <EmotionThemeProvider theme={theme}>
+        <CssBaseline enableColorScheme />
+        {children}
+      </EmotionThemeProvider>
+    </MuiThemeProvider>
+  );
+};
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index 982c2a0b7df90..5ab201f6144a4 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -1,10 +1,12 @@
 import { visuallyHidden } from "@mui/utils";
 import { type Interpolation } from "@emotion/react";
-import { type FC, useMemo } from "react";
+import { type FC } from "react";
 import type { UpdateUserAppearanceSettingsRequest } from "api/typesGenerated";
 import themes, { DEFAULT_THEME, type Theme } from "theme";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Stack } from "components/Stack/Stack";
+import { BetaBadge } from "components/Badges/Badges";
+import { ThemeOverride } from "contexts/ThemeProviders";
 
 export interface AppearanceFormProps {
   isUpdating?: boolean;
@@ -55,6 +57,7 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
         />
         <ThemePreviewButton
           displayName="Light"
+          beta
           active={currentTheme === "light"}
           theme={themes.light}
           onSelect={() => onChangeTheme("light")}
@@ -64,16 +67,14 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
   );
 };
 
-interface AutoThemePreviewButtonProps {
-  active?: boolean;
-  className?: string;
-  displayName: string;
+interface AutoThemePreviewButtonProps extends Omit<ThemePreviewProps, "theme"> {
   themes: [Theme, Theme];
   onSelect?: () => void;
 }
 
 const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
   active,
+  beta,
   className,
   displayName,
   themes,
@@ -101,11 +102,13 @@ const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
             clipPath: "polygon(-5% -5%, 50% -5%, 50% 105%, -5% 105%)",
           }}
           active={active}
+          beta={beta}
           displayName={displayName}
           theme={leftTheme}
         />
         <ThemePreview
           active={active}
+          beta={beta}
           displayName={displayName}
           theme={rightTheme}
         />
@@ -114,16 +117,13 @@ const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
   );
 };
 
-interface ThemePreviewButtonProps {
-  active?: boolean;
-  className?: string;
-  displayName: string;
-  theme: Theme;
+interface ThemePreviewButtonProps extends ThemePreviewProps {
   onSelect?: () => void;
 }
 
 const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
   active,
+  beta,
   className,
   displayName,
   theme,
@@ -141,7 +141,12 @@ const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
         css={{ ...visuallyHidden }}
       />
       <label htmlFor={displayName} className={className}>
-        <ThemePreview active={active} displayName={displayName} theme={theme} />
+        <ThemePreview
+          active={active}
+          beta={beta}
+          displayName={displayName}
+          theme={theme}
+        />
       </label>
     </>
   );
@@ -149,6 +154,7 @@ const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
 
 interface ThemePreviewProps {
   active?: boolean;
+  beta?: boolean;
   className?: string;
   displayName: string;
   theme: Theme;
@@ -156,141 +162,146 @@ interface ThemePreviewProps {
 
 const ThemePreview: FC<ThemePreviewProps> = ({
   active,
+  beta,
   className,
   displayName,
   theme,
 }) => {
-  const styles = useMemo(
-    () =>
-      ({
-        container: {
-          backgroundColor: theme.palette.background.default,
-          border: `1px solid ${theme.palette.divider}`,
-          width: 220,
-          color: theme.palette.text.primary,
-          borderRadius: 6,
-          overflow: "clip",
-          userSelect: "none",
-        },
-        containerActive: {
-          outline: `2px solid ${theme.experimental.roles.active.outline}`,
-        },
-        page: {
-          backgroundColor: theme.palette.background.default,
-          color: theme.palette.text.primary,
-        },
-        header: {
-          backgroundColor: theme.palette.background.paper,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "6px 10px",
-          marginBottom: 8,
-          borderBottom: `1px solid ${theme.palette.divider}`,
-        },
-        headerLinks: {
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-        },
-        headerLink: {
-          backgroundColor: theme.palette.text.secondary,
-          height: 6,
-          width: 20,
-          borderRadius: 3,
-        },
-        activeHeaderLink: {
-          backgroundColor: theme.palette.text.primary,
-        },
-        proxy: {
-          backgroundColor: theme.palette.success.light,
-          height: 6,
-          width: 12,
-          borderRadius: 3,
-        },
-        user: {
-          backgroundColor: theme.palette.text.primary,
-          height: 8,
-          width: 8,
-          borderRadius: 4,
-          float: "right",
-        },
-        body: {
-          width: 120,
-          margin: "auto",
-        },
-        title: {
-          backgroundColor: theme.palette.text.primary,
-          height: 8,
-          width: 45,
-          borderRadius: 4,
-          marginBottom: 6,
-        },
-        table: {
-          border: `1px solid ${theme.palette.divider}`,
-          borderBottom: "none",
-          borderTopLeftRadius: 3,
-          borderTopRightRadius: 3,
-          overflow: "clip",
-        },
-        tableHeader: {
-          backgroundColor: theme.palette.background.paper,
-          height: 10,
-          margin: -1,
-        },
-        label: {
-          borderTop: `1px solid ${theme.palette.divider}`,
-          padding: "4px 12px",
-          fontSize: 14,
-        },
-        workspace: {
-          borderTop: `1px solid ${theme.palette.divider}`,
-          height: 15,
-
-          "&::after": {
-            content: '""',
-            display: "block",
-            marginTop: 4,
-            marginLeft: 4,
-            backgroundColor: theme.palette.text.disabled,
-            height: 6,
-            width: 30,
-            borderRadius: 3,
-          },
-        },
-      }) satisfies Record<string, Interpolation<never>>,
-    [theme],
-  );
-
   return (
-    <div
-      css={[styles.container, active && styles.containerActive]}
-      className={className}
-    >
-      <div css={styles.page}>
-        <div css={styles.header}>
-          <div css={styles.headerLinks}>
-            <div css={[styles.headerLink, styles.activeHeaderLink]}></div>
-            <div css={styles.headerLink}></div>
-            <div css={styles.headerLink}></div>
+    <ThemeOverride theme={theme}>
+      <div
+        css={[styles.container, active && styles.containerActive]}
+        className={className}
+      >
+        <div css={styles.page}>
+          <div css={styles.header}>
+            <div css={styles.headerLinks}>
+              <div css={[styles.headerLink, styles.activeHeaderLink]}></div>
+              <div css={styles.headerLink}></div>
+              <div css={styles.headerLink}></div>
+            </div>
+            <div css={styles.headerLinks}>
+              <div css={styles.proxy}></div>
+              <div css={styles.user}></div>
+            </div>
           </div>
-          <div css={styles.headerLinks}>
-            <div css={styles.proxy}></div>
-            <div css={styles.user}></div>
+          <div css={styles.body}>
+            <div css={styles.title}></div>
+            <div css={styles.table}>
+              <div css={styles.tableHeader}></div>
+              <div css={styles.workspace}></div>
+              <div css={styles.workspace}></div>
+              <div css={styles.workspace}></div>
+              <div css={styles.workspace}></div>
+            </div>
           </div>
         </div>
-        <div css={styles.body}>
-          <div css={styles.title}></div>
-          <div css={styles.table}>
-            <div css={styles.tableHeader}></div>
-            <div css={styles.workspace}></div>
-            <div css={styles.workspace}></div>
-            <div css={styles.workspace}></div>
-            <div css={styles.workspace}></div>
-          </div>
+        <div css={styles.label}>
+          <span>{displayName}</span>
+          {beta && <BetaBadge />}
         </div>
       </div>
-      <div css={styles.label}>{displayName}</div>
-    </div>
+    </ThemeOverride>
   );
 };
+
+const styles = {
+  container: (theme) => ({
+    backgroundColor: theme.palette.background.default,
+    border: `1px solid ${theme.palette.divider}`,
+    width: 220,
+    color: theme.palette.text.primary,
+    borderRadius: 6,
+    overflow: "clip",
+    userSelect: "none",
+  }),
+  containerActive: (theme) => ({
+    outline: `2px solid ${theme.experimental.roles.active.outline}`,
+  }),
+  page: (theme) => ({
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+  }),
+  header: (theme) => ({
+    backgroundColor: theme.palette.background.paper,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "6px 10px",
+    marginBottom: 8,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  }),
+  headerLinks: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+  },
+  headerLink: (theme) => ({
+    backgroundColor: theme.palette.text.secondary,
+    height: 6,
+    width: 20,
+    borderRadius: 3,
+  }),
+  activeHeaderLink: (theme) => ({
+    backgroundColor: theme.palette.text.primary,
+  }),
+  proxy: (theme) => ({
+    backgroundColor: theme.palette.success.light,
+    height: 6,
+    width: 12,
+    borderRadius: 3,
+  }),
+  user: (theme) => ({
+    backgroundColor: theme.palette.text.primary,
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    float: "right",
+  }),
+  body: {
+    width: 120,
+    margin: "auto",
+  },
+  title: (theme) => ({
+    backgroundColor: theme.palette.text.primary,
+    height: 8,
+    width: 45,
+    borderRadius: 4,
+    marginBottom: 6,
+  }),
+  table: (theme) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderBottom: "none",
+    borderTopLeftRadius: 3,
+    borderTopRightRadius: 3,
+    overflow: "clip",
+  }),
+  tableHeader: (theme) => ({
+    backgroundColor: theme.palette.background.paper,
+    height: 10,
+    margin: -1,
+  }),
+  label: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderTop: `1px solid ${theme.palette.divider}`,
+    padding: "4px 12px",
+    fontSize: 14,
+  }),
+  workspace: (theme) => ({
+    borderTop: `1px solid ${theme.palette.divider}`,
+    height: 15,
+
+    "&::after": {
+      content: '""',
+      display: "block",
+      marginTop: 4,
+      marginLeft: 4,
+      backgroundColor: theme.palette.text.disabled,
+      height: 6,
+      width: 30,
+      borderRadius: 3,
+    },
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
index aa6880badda7b..f6133b00ada77 100644
--- a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
@@ -173,18 +173,18 @@ const styles = {
   orphanContainer: (theme) => ({
     marginTop: 24,
     display: "flex",
-    backgroundColor: theme.colors.orange[15],
+    backgroundColor: theme.experimental.roles.danger.background,
     justifyContent: "space-between",
-    border: `1px solid ${theme.colors.orange[11]}`,
+    border: `1px solid ${theme.experimental.roles.danger.outline}`,
     borderRadius: 8,
     padding: 12,
     gap: 8,
     lineHeight: "18px",
 
     "& .option": {
-      color: theme.colors.orange[11],
+      color: theme.experimental.roles.danger.fill,
       "&.Mui-checked": {
-        color: theme.colors.orange[11],
+        color: theme.experimental.roles.danger.fill,
       },
     },
 
diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts
index 75328e6b116d5..9b15df75a932b 100644
--- a/site/src/theme/darkBlue/experimental.ts
+++ b/site/src/theme/darkBlue/experimental.ts
@@ -50,7 +50,7 @@ export default {
   roles: {
     danger: {
       background: colors.orange[950],
-      outline: colors.orange[500],
+      outline: colors.orange[600],
       fill: colors.orange[600],
       text: colors.orange[50],
       disabled: {
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index 6920f5662baa0..6f889785286f9 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -12,7 +12,7 @@ export interface Theme extends MuiTheme {
   monaco: monaco.editor.IStandaloneThemeData;
 }
 
-export const DEFAULT_THEME = "auto";
+export const DEFAULT_THEME = "dark";
 
 const theme = {
   dark,
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index c2e33debcfd85..5e5ec17ec9770 100644
--- a/site/src/theme/light/experimental.ts
+++ b/site/src/theme/light/experimental.ts
@@ -50,7 +50,7 @@ export default {
   roles: {
     danger: {
       background: colors.orange[50],
-      outline: colors.orange[500],
+      outline: colors.orange[400],
       fill: colors.orange[600],
       text: colors.orange[950],
       disabled: {

From 0b4dc8d71c7bee93aabc6b66409518a4af26868a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 21:40:20 +0000
Subject: [PATCH 13/19] fix some more issues

---
 site/src/App.tsx                              |   6 +-
 .../DeploymentBanner/DeploymentBannerView.tsx |   4 +-
 .../components/HelpTooltip/HelpTooltip.tsx    |   1 +
 .../components/Resources/AgentMetadata.tsx    |   8 +-
 .../SyntaxHighlighter/SyntaxHighlighter.tsx   |  11 +-
 .../SyntaxHighlighter/coderTheme.ts           | 220 +-----------------
 .../TemplateFiles/TemplateFiles.stories.tsx   |  31 +++
 .../TemplateFiles/TemplateFiles.tsx           |  10 +-
 .../WorkspaceStatusBadge.tsx                  |   2 +-
 .../{ThemeProviders.tsx => ThemeProvider.tsx} |   0
 .../TemplateFilesPage/TemplateFilesPage.tsx   |   6 +-
 .../AppearancePage/AppearanceForm.tsx         |   2 +-
 .../UsersPage/UsersTable/UserRoleCell.tsx     |  27 ++-
 .../UsersTable/UsersTable.stories.tsx         |  11 +-
 site/src/testHelpers/renderHelpers.tsx        |   4 +-
 site/src/theme/light/experimental.ts          |   4 +-
 site/src/utils/workspace.tsx                  |  28 ++-
 17 files changed, 110 insertions(+), 265 deletions(-)
 create mode 100644 site/src/components/TemplateFiles/TemplateFiles.stories.tsx
 rename site/src/contexts/{ThemeProviders.tsx => ThemeProvider.tsx} (100%)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index 8266aeb1bea12..a311c074430de 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import type { FC, ReactNode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { AppRouter } from "./AppRouter";
-import { ThemeProviders } from "./contexts/ThemeProviders";
+import { ThemeProvider } from "./contexts/ThemeProvider";
 import { AuthProvider } from "./contexts/AuthProvider/AuthProvider";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
@@ -30,10 +30,10 @@ export const AppProviders: FC<AppProvidersProps> = ({
     <HelmetProvider>
       <QueryClientProvider client={queryClient}>
         <AuthProvider>
-          <ThemeProviders>
+          <ThemeProvider>
             {children}
             <GlobalSnackbar />
-          </ThemeProviders>
+          </ThemeProvider>
         </AuthProvider>
       </QueryClientProvider>
     </HelmetProvider>
diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
index 191187449fbe5..46efd3712ca55 100644
--- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -426,13 +426,13 @@ const classNames = {
 } satisfies Record<string, ClassName>;
 
 const styles = {
-  statusBadge: css`
+  statusBadge: (theme) => css`
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 12px;
     height: 100%;
-    color: #fff;
+    color: ${theme.experimental.l1.text};
 
     & svg {
       width: 16px;
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index e5d06d67b6490..84d08812a0410 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -295,6 +295,7 @@ const styles = {
     display: "flex",
     alignItems: "center",
     ...(theme.typography.body2 as CSSObject),
+    color: theme.experimental.roles.active.fill,
   }),
 
   linkIcon: {
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
index 13ef4dc5478e8..ab78842854fb1 100644
--- a/site/src/components/Resources/AgentMetadata.tsx
+++ b/site/src/components/Resources/AgentMetadata.tsx
@@ -95,7 +95,7 @@ export interface AgentMetadataViewProps {
 
 export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
   if (metadata.length === 0) {
-    return <></>;
+    return null;
   }
   return (
     <div css={styles.root}>
@@ -131,7 +131,7 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
       return;
     }
 
-    let timeout: NodeJS.Timeout | undefined = undefined;
+    let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
     const connect = (): (() => void) => {
       const source = watchAgentMetadata(agent.id);
@@ -259,7 +259,9 @@ const styles = {
   },
 
   metadataValueSuccess: (theme) => ({
-    color: theme.palette.success.light,
+    // color: theme.palette.success.light,
+    color: theme.experimental.roles.success.fill,
+    // color: theme.experimental.roles.success.text,
   }),
 
   metadataValueError: (theme) => ({
diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
index 0fb184fb1d6bb..e34659cef104d 100644
--- a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
+++ b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -5,13 +5,20 @@ import { useCoderTheme } from "./coderTheme";
 
 loader.config({ monaco });
 
-export const SyntaxHighlighter: FC<{
+interface SyntaxHighlighterProps {
   value: string;
   language: string;
   editorProps?: ComponentProps<typeof Editor> &
     ComponentProps<typeof DiffEditor>;
   compareWith?: string;
-}> = ({ value, compareWith, language, editorProps }) => {
+}
+
+export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
+  value,
+  compareWith,
+  language,
+  editorProps,
+}) => {
   const hasDiff = compareWith && value !== compareWith;
   const coderTheme = useCoderTheme();
   const commonProps = {
diff --git a/site/src/components/SyntaxHighlighter/coderTheme.ts b/site/src/components/SyntaxHighlighter/coderTheme.ts
index 377651fd02f9e..d543a04111a1d 100644
--- a/site/src/components/SyntaxHighlighter/coderTheme.ts
+++ b/site/src/components/SyntaxHighlighter/coderTheme.ts
@@ -1,222 +1,6 @@
 import { useMonaco } from "@monaco-editor/react";
+import { useTheme } from "@emotion/react";
 import { useEffect, useState } from "react";
-import { editor } from "monaco-editor";
-import { type Theme, useTheme } from "@emotion/react";
-
-// Theme based on https://github.com/brijeshb42/monaco-themes/blob/master/themes/Dracula.json
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- The theme is not typed
-export const coderTheme = (theme: Theme): editor.IStandaloneThemeData => ({
-  base: "vs-dark",
-  inherit: true,
-  rules: [
-    {
-      background: "282a36",
-      token: "",
-    },
-    {
-      foreground: "6272a4",
-      token: "comment",
-    },
-    {
-      foreground: "f1fa8c",
-      token: "string",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.numeric",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.language",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.character",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.other",
-    },
-    {
-      foreground: "ffb86c",
-      token: "variable.other.readwrite.instance",
-    },
-    {
-      foreground: "ff79c6",
-      token: "constant.character.escaped",
-    },
-    {
-      foreground: "ff79c6",
-      token: "constant.character.escape",
-    },
-    {
-      foreground: "ff79c6",
-      token: "string source",
-    },
-    {
-      foreground: "ff79c6",
-      token: "string source.ruby",
-    },
-    {
-      foreground: "ff79c6",
-      token: "keyword",
-    },
-    {
-      foreground: "ff79c6",
-      token: "storage",
-    },
-    {
-      foreground: "8be9fd",
-      fontStyle: "italic",
-      token: "storage.type",
-    },
-    {
-      foreground: "50fa7b",
-      fontStyle: "underline",
-      token: "entity.name.class",
-    },
-    {
-      foreground: "50fa7b",
-      fontStyle: "italic underline",
-      token: "entity.other.inherited-class",
-    },
-    {
-      foreground: "50fa7b",
-      token: "entity.name.function",
-    },
-    {
-      foreground: "ffb86c",
-      fontStyle: "italic",
-      token: "variable.parameter",
-    },
-    {
-      foreground: "ff79c6",
-      token: "entity.name.tag",
-    },
-    {
-      foreground: "50fa7b",
-      token: "entity.other.attribute-name",
-    },
-    {
-      foreground: "8be9fd",
-      token: "support.function",
-    },
-    {
-      foreground: "6be5fd",
-      token: "support.constant",
-    },
-    {
-      foreground: "66d9ef",
-      fontStyle: " italic",
-      token: "support.type",
-    },
-    {
-      foreground: "66d9ef",
-      fontStyle: " italic",
-      token: "support.class",
-    },
-    {
-      foreground: "f8f8f0",
-      background: "ff79c6",
-      token: "invalid",
-    },
-    {
-      foreground: "f8f8f0",
-      background: "bd93f9",
-      token: "invalid.deprecated",
-    },
-    {
-      foreground: "cfcfc2",
-      token: "meta.structure.dictionary.json string.quoted.double.json",
-    },
-    {
-      foreground: "6272a4",
-      token: "meta.diff",
-    },
-    {
-      foreground: "6272a4",
-      token: "meta.diff.header",
-    },
-    {
-      foreground: "ff79c6",
-      token: "markup.deleted",
-    },
-    {
-      foreground: "50fa7b",
-      token: "markup.inserted",
-    },
-    {
-      foreground: "e6db74",
-      token: "markup.changed",
-    },
-    {
-      foreground: "bd93f9",
-      token: "constant.numeric.line-number.find-in-files - match",
-    },
-    {
-      foreground: "e6db74",
-      token: "entity.name.filename",
-    },
-    {
-      foreground: "f83333",
-      token: "message.error",
-    },
-    {
-      foreground: "eeeeee",
-      token:
-        "punctuation.definition.string.begin.json - meta.structure.dictionary.value.json",
-    },
-    {
-      foreground: "eeeeee",
-      token:
-        "punctuation.definition.string.end.json - meta.structure.dictionary.value.json",
-    },
-    {
-      foreground: "8be9fd",
-      token: "meta.structure.dictionary.json string.quoted.double.json",
-    },
-    {
-      foreground: "f1fa8c",
-      token: "meta.structure.dictionary.value.json string.quoted.double.json",
-    },
-    {
-      foreground: "50fa7b",
-      token:
-        "meta meta meta meta meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "ffb86c",
-      token: "meta meta meta meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "ff79c6",
-      token: "meta meta meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "bd93f9",
-      token: "meta meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "50fa7b",
-      token: "meta meta meta.structure.dictionary.value string",
-    },
-    {
-      foreground: "ffb86c",
-      token: "meta meta.structure.dictionary.value string",
-    },
-  ],
-  colors: {
-    "editor.foreground": theme.palette.text.primary,
-    "editor.background": theme.palette.background.default,
-    "editor.selectionBackground": theme.palette.action.hover,
-    "editor.lineHighlightBackground": theme.palette.background.paper,
-
-    "editorCursor.foreground": "#f8f8f0",
-    "editorWhitespace.foreground": "#3B3A32",
-    "editorIndentGuide.activeBackground": "#9D550FB0",
-    "editor.selectionHighlightBorder": "#222218",
-  },
-});
 
 export const useCoderTheme = (): { isLoading: boolean; name: string } => {
   const [isLoading, setIsLoading] = useState(true);
@@ -226,7 +10,7 @@ export const useCoderTheme = (): { isLoading: boolean; name: string } => {
 
   useEffect(() => {
     if (monaco) {
-      monaco.editor.defineTheme(name, coderTheme(theme));
+      monaco.editor.defineTheme(name, theme.monaco);
       setIsLoading(false);
     }
   }, [monaco, theme]);
diff --git a/site/src/components/TemplateFiles/TemplateFiles.stories.tsx b/site/src/components/TemplateFiles/TemplateFiles.stories.tsx
new file mode 100644
index 0000000000000..ce565ed3d0a48
--- /dev/null
+++ b/site/src/components/TemplateFiles/TemplateFiles.stories.tsx
@@ -0,0 +1,31 @@
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { TemplateFiles } from "./TemplateFiles";
+
+const exampleFiles = {
+  "README.md":
+    "---\nname: Develop in Docker\ndescription: Develop inside Docker containers using your local daemon\ntags: [local, docker]\nicon: /icon/docker.png\n---\n\n# docker\n\nTo get started, run `coder templates init`. When prompted, select this template.\nFollow the on-screen instructions to proceed.\n\n## Editing the image\n\nEdit the `Dockerfile` and run `coder templates push` to update workspaces.\n\n## code-server\n\n`code-server` is installed via the `startup_script` argument in the `coder_agent`\nresource block. The `coder_app` resource is defined to access `code-server` through\nthe dashboard UI over `localhost:13337`.\n\n## Extending this template\n\nSee the [kreuzwerker/docker](https://registry.terraform.io/providers/kreuzwerker/docker) Terraform provider documentation to\nadd the following features to your Coder template:\n\n- SSH/TCP docker host\n- Registry authentication\n- Build args\n- Volume mounts\n- Custom container spec\n- More\n\nWe also welcome contributions!\n",
+  "build/Dockerfile":
+    'FROM ubuntu\n\nRUN apt-get update \\\n\t&& apt-get install -y \\\n\tcurl \\\n\tgit \\\n\tgolang \\\n\tsudo \\\n\tvim \\\n\twget \\\n\t&& rm -rf /var/lib/apt/lists/*\n\nARG USER=coder\nRUN useradd --groups sudo --no-create-home --shell /bin/bash ${USER} \\\n\t&& echo "${USER} ALL=(ALL) NOPASSWD:ALL" >/etc/sudoers.d/${USER} \\\n\t&& chmod 0440 /etc/sudoers.d/${USER}\nUSER ${USER}\nWORKDIR /home/${USER}\n',
+  "main.tf":
+    'terraform {\n  required_providers {\n    coder = {\n      source = "coder/coder"\n    }\n    docker = {\n      source = "kreuzwerker/docker"\n    }\n  }\n}\n\nlocals {\n  username = data.coder_workspace.me.owner\n}\n\ndata "coder_provisioner" "me" {\n}\n\nprovider "docker" {\n}\n\ndata "coder_workspace" "me" {\n}\n\nresource "coder_agent" "main" {\n  arch                   = data.coder_provisioner.me.arch\n  os                     = "linux"\n  startup_script_timeout = 180\n  startup_script         = <<-EOT\n    set -e\n\n    # install and start code-server\n    curl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone --prefix=/tmp/code-server --version 4.11.0\n    /tmp/code-server/bin/code-server --auth none --port 13337 >/tmp/code-server.log 2>&1 &\n  EOT\n\n  # These environment variables allow you to make Git commits right away after creating a\n  # workspace. Note that they take precedence over configuration defined in ~/.gitconfig!\n  # You can remove this block if you\'d prefer to configure Git manually or using\n  # dotfiles. (see docs/dotfiles.md)\n  env = {\n    GIT_AUTHOR_NAME     = "${data.coder_workspace.me.owner}"\n    GIT_COMMITTER_NAME  = "${data.coder_workspace.me.owner}"\n    GIT_AUTHOR_EMAIL    = "${data.coder_workspace.me.owner_email}"\n    GIT_COMMITTER_EMAIL = "${data.coder_workspace.me.owner_email}"\n  }\n\n  # The following metadata blocks are optional. They are used to display\n  # information about your workspace in the dashboard. You can remove them\n  # if you don\'t want to display any information.\n  # For basic resources, you can use the `coder stat` command.\n  # If you need more control, you can write your own script.\n  metadata {\n    display_name = "CPU Usage"\n    key          = "0_cpu_usage"\n    script       = "coder stat cpu"\n    interval     = 10\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "RAM Usage"\n    key          = "1_ram_usage"\n    script       = "coder stat mem"\n    interval     = 10\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "Home Disk"\n    key          = "3_home_disk"\n    script       = "coder stat disk --path $${HOME}"\n    interval     = 60\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "CPU Usage (Host)"\n    key          = "4_cpu_usage_host"\n    script       = "coder stat cpu --host"\n    interval     = 10\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "Memory Usage (Host)"\n    key          = "5_mem_usage_host"\n    script       = "coder stat mem --host"\n    interval     = 10\n    timeout      = 1\n  }\n\n  metadata {\n    display_name = "Load Average (Host)"\n    key          = "6_load_host"\n    # get load avg scaled by number of cores\n    script   = <<EOT\n      echo "`cat /proc/loadavg | awk \'{ print $1 }\'` `nproc`" | awk \'{ printf "%0.2f", $1/$2 }\'\n    EOT\n    interval = 60\n    timeout  = 1\n  }\n\n  metadata {\n    display_name = "Swap Usage (Host)"\n    key          = "7_swap_host"\n    script       = <<EOT\n      free -b | awk \'/^Swap/ { printf("%.1f/%.1f", $3/1024.0/1024.0/1024.0, $2/1024.0/1024.0/1024.0) }\'\n    EOT\n    interval     = 10\n    timeout      = 1\n  }\n}\n\nresource "coder_app" "code-server" {\n  agent_id     = coder_agent.main.id\n  slug         = "code-server"\n  display_name = "code-server"\n  url          = "http://localhost:13337/?folder=/home/${local.username}"\n  icon         = "/icon/code.svg"\n  subdomain    = false\n  share        = "owner"\n\n  healthcheck {\n    url       = "http://localhost:13337/healthz"\n    interval  = 5\n    threshold = 6\n  }\n}\n\nresource "docker_volume" "home_volume" {\n  name = "coder-${data.coder_workspace.me.id}-home"\n  # Protect the volume from being deleted due to changes in attributes.\n  lifecycle {\n    ignore_changes = all\n  }\n  # Add labels in Docker to keep track of orphan resources.\n  labels {\n    label = "coder.owner"\n    value = data.coder_workspace.me.owner\n  }\n  labels {\n    label = "coder.owner_id"\n    value = data.coder_workspace.me.owner_id\n  }\n  labels {\n    label = "coder.workspace_id"\n    value = data.coder_workspace.me.id\n  }\n  # This field becomes outdated if the workspace is renamed but can\n  # be useful for debugging or cleaning out dangling volumes.\n  labels {\n    label = "coder.workspace_name_at_creation"\n    value = data.coder_workspace.me.name\n  }\n}\n\nresource "docker_image" "main" {\n  name = "coder-${data.coder_workspace.me.id}"\n  build {\n    context = "./build"\n    build_args = {\n      USER = local.username\n    }\n  }\n  triggers = {\n    dir_sha1 = sha1(join("", [for f in fileset(path.module, "build/*") : filesha1(f)]))\n  }\n}\n\nresource "docker_container" "workspace" {\n  count = data.coder_workspace.me.start_count\n  image = docker_image.main.name\n  # Uses lower() to avoid Docker restriction on container names.\n  name = "coder-${data.coder_workspace.me.owner}-${lower(data.coder_workspace.me.name)}"\n  # Hostname makes the shell more user friendly: coder@my-workspace:~$\n  hostname = data.coder_workspace.me.name\n  # Use the docker gateway if the access URL is 127.0.0.1\n  entrypoint = ["sh", "-c", replace(coder_agent.main.init_script, "/localhost|127\\\\.0\\\\.0\\\\.1/", "host.docker.internal")]\n  env        = ["CODER_AGENT_TOKEN=${coder_agent.main.token}"]\n  host {\n    host = "host.docker.internal"\n    ip   = "host-gateway"\n  }\n  volumes {\n    container_path = "/home/${local.username}"\n    volume_name    = docker_volume.home_volume.name\n    read_only      = false\n  }\n  # Add labels in Docker to keep track of orphan resources.\n  labels {\n    label = "coder.owner"\n    value = data.coder_workspace.me.owner\n  }\n  labels {\n    label = "coder.owner_id"\n    value = data.coder_workspace.me.owner_id\n  }\n  labels {\n    label = "coder.workspace_id"\n    value = data.coder_workspace.me.id\n  }\n  labels {\n    label = "coder.workspace_name"\n    value = data.coder_workspace.me.name\n  }\n}\n',
+};
+
+const meta: Meta<typeof TemplateFiles> = {
+  title: "components/TemplateFiles",
+  parameters: { chromatic },
+  component: TemplateFiles,
+  args: {
+    currentFiles: exampleFiles,
+    previousFiles: exampleFiles,
+    tab: { value: "0", set: action("change tab") },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateFiles>;
+
+const Example: Story = {};
+
+export { Example as TemplateFiles };
diff --git a/site/src/components/TemplateFiles/TemplateFiles.tsx b/site/src/components/TemplateFiles/TemplateFiles.tsx
index 7acce3a1b0ee1..da1cc9bf07356 100644
--- a/site/src/components/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/components/TemplateFiles/TemplateFiles.tsx
@@ -37,11 +37,17 @@ const languageByExtension: Record<AllowedExtension, string> = {
   protobuf: "protobuf",
 };
 
-export const TemplateFiles: FC<{
+interface TemplateFilesProps {
   currentFiles: TemplateVersionFiles;
   previousFiles?: TemplateVersionFiles;
   tab: UseTabResult;
-}> = ({ currentFiles, previousFiles, tab }) => {
+}
+
+export const TemplateFiles: FC<TemplateFilesProps> = ({
+  currentFiles,
+  previousFiles,
+  tab,
+}) => {
   const filenames = Object.keys(currentFiles);
   const selectedFilename = filenames[Number(tab.value)];
   const currentFile = currentFiles[selectedFilename];
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index b889e9cd1dbb9..00aced41ad3f6 100644
--- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -69,7 +69,7 @@ export const DormantStatusBadge: FC<DormantStatusBadgeProps> = ({
   className,
 }) => {
   if (!workspace.dormant_at) {
-    return <></>;
+    return null;
   }
 
   const formatDate = (dateStr: string): string => {
diff --git a/site/src/contexts/ThemeProviders.tsx b/site/src/contexts/ThemeProvider.tsx
similarity index 100%
rename from site/src/contexts/ThemeProviders.tsx
rename to site/src/contexts/ThemeProvider.tsx
diff --git a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
index 1a1cd9b244b10..0c8b53c6d53f9 100644
--- a/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateFilesPage/TemplateFilesPage.tsx
@@ -1,10 +1,10 @@
+import { type FC } from "react";
+import { Helmet } from "react-helmet-async";
 import { Loader } from "components/Loader/Loader";
 import { TemplateFiles } from "components/TemplateFiles/TemplateFiles";
+import { useFileTab, useTemplateFiles } from "components/TemplateFiles/hooks";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
-import { FC } from "react";
-import { Helmet } from "react-helmet-async";
 import { getTemplatePageTitle } from "../utils";
-import { useFileTab, useTemplateFiles } from "components/TemplateFiles/hooks";
 
 const TemplateFilesPage: FC = () => {
   const { template, activeVersion } = useTemplateLayoutContext();
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index 5ab201f6144a4..85f0bd5d53129 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -6,7 +6,7 @@ import themes, { DEFAULT_THEME, type Theme } from "theme";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Stack } from "components/Stack/Stack";
 import { BetaBadge } from "components/Badges/Badges";
-import { ThemeOverride } from "contexts/ThemeProviders";
+import { ThemeOverride } from "contexts/ThemeProvider";
 
 export interface AppearanceFormProps {
   isUpdating?: boolean;
diff --git a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
index 2143a15b5f463..5ad5c148fa606 100644
--- a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
@@ -14,18 +14,17 @@
  * users like that, though, know that it will be painful
  */
 import { useTheme } from "@emotion/react";
-import { type User, type Role } from "api/typesGenerated";
-
-import { EditRolesButton } from "./EditRolesButton";
-import { Pill } from "components/Pill/Pill";
 import TableCell from "@mui/material/TableCell";
 import Stack from "@mui/material/Stack";
-
+import { type FC } from "react";
+import { type User, type Role } from "api/typesGenerated";
+import { Pill } from "components/Pill/Pill";
 import {
   Popover,
   PopoverTrigger,
   PopoverContent,
 } from "components/Popover/Popover";
+import { EditRolesButton } from "./EditRolesButton";
 
 type UserRoleCellProps = {
   canEditUsers: boolean;
@@ -36,14 +35,14 @@ type UserRoleCellProps = {
   onUserRolesUpdate: (user: User, newRoleNames: string[]) => void;
 };
 
-export function UserRoleCell({
+export const UserRoleCell: FC<UserRoleCellProps> = ({
   canEditUsers,
   allAvailableRoles,
   user,
   isLoading,
   oidcRoleSyncEnabled,
   onUserRolesUpdate,
-}: UserRoleCellProps) {
+}) => {
   const theme = useTheme();
 
   const [mainDisplayRole = fallbackRole, ...extraRoles] =
@@ -75,11 +74,11 @@ export function UserRoleCell({
           text={mainDisplayRole.display_name}
           css={{
             backgroundColor: hasOwnerRole
-              ? theme.palette.info.dark
-              : theme.palette.background.paper,
+              ? theme.experimental.roles.info.background
+              : theme.experimental.l2.background,
             borderColor: hasOwnerRole
-              ? theme.palette.info.light
-              : theme.palette.divider,
+              ? theme.experimental.roles.info.outline
+              : theme.experimental.l2.outline,
           }}
         />
 
@@ -87,13 +86,13 @@ export function UserRoleCell({
       </Stack>
     </TableCell>
   );
-}
+};
 
 type OverflowRolePillProps = {
   roles: readonly Role[];
 };
 
-function OverflowRolePill({ roles }: OverflowRolePillProps) {
+const OverflowRolePill: FC<OverflowRolePillProps> = ({ roles }) => {
   const theme = useTheme();
 
   return (
@@ -144,7 +143,7 @@ function OverflowRolePill({ roles }: OverflowRolePillProps) {
       </PopoverContent>
     </Popover>
   );
-}
+};
 
 const fallbackRole: Role = {
   name: "member",
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTable.stories.tsx b/site/src/pages/UsersPage/UsersTable/UsersTable.stories.tsx
index 801de67349586..ce6b0055ed543 100644
--- a/site/src/pages/UsersPage/UsersTable/UsersTable.stories.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UsersTable.stories.tsx
@@ -4,6 +4,10 @@ import {
   MockAssignableSiteRoles,
   MockAuthMethodsPasswordOnly,
   MockGroup,
+  MockUserAdminRole,
+  MockTemplateAdminRole,
+  MockMemberRole,
+  MockAuditorRole,
 } from "testHelpers/entities";
 import { UsersTable } from "./UsersTable";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -43,7 +47,12 @@ export const Editable: Story = {
         ...MockUser,
         username: "John Doe",
         email: "john.doe@coder.com",
-        roles: [],
+        roles: [
+          MockUserAdminRole,
+          MockTemplateAdminRole,
+          MockMemberRole,
+          MockAuditorRole,
+        ],
         status: "dormant",
       },
       {
diff --git a/site/src/testHelpers/renderHelpers.tsx b/site/src/testHelpers/renderHelpers.tsx
index fad96f08e8676..4d16b40a44ded 100644
--- a/site/src/testHelpers/renderHelpers.tsx
+++ b/site/src/testHelpers/renderHelpers.tsx
@@ -7,7 +7,7 @@ import {
 import { type ReactNode, useState } from "react";
 import { QueryClient } from "react-query";
 import { AppProviders } from "App";
-import { ThemeProviders } from "contexts/ThemeProviders";
+import { ThemeProvider } from "contexts/ThemeProvider";
 import { DashboardLayout } from "components/Dashboard/DashboardLayout";
 import { RequireAuth } from "components/RequireAuth/RequireAuth";
 import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout";
@@ -265,6 +265,6 @@ export const waitForLoaderToBeRemoved = async (): Promise<void> => {
 
 export const renderComponent = (component: React.ReactElement) => {
   return tlRender(component, {
-    wrapper: ({ children }) => <ThemeProviders>{children}</ThemeProviders>,
+    wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
   });
 };
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index 5e5ec17ec9770..785c198402ed7 100644
--- a/site/src/theme/light/experimental.ts
+++ b/site/src/theme/light/experimental.ts
@@ -5,13 +5,13 @@ export default {
   l1: {
     background: colors.gray[50],
     outline: colors.gray[300],
-    fill: colors.gray[600],
+    fill: colors.gray[700],
     text: colors.black,
   },
 
   l2: {
     background: colors.gray[100],
-    outline: colors.gray[600],
+    outline: colors.gray[500],
     fill: colors.gray[500],
     text: colors.gray[950],
     disabled: {
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
index 048af1cab10ab..3f823b659f686 100644
--- a/site/src/utils/workspace.tsx
+++ b/site/src/utils/workspace.tsx
@@ -1,15 +1,16 @@
-import { Theme } from "@mui/material/styles";
-import dayjs from "dayjs";
-import duration from "dayjs/plugin/duration";
-import minMax from "dayjs/plugin/minMax";
-import utc from "dayjs/plugin/utc";
-import semver from "semver";
-import * as TypesGen from "api/typesGenerated";
 import CircularProgress from "@mui/material/CircularProgress";
 import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import StopIcon from "@mui/icons-material/StopOutlined";
 import PlayIcon from "@mui/icons-material/PlayArrowOutlined";
 import QueuedIcon from "@mui/icons-material/HourglassEmpty";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import minMax from "dayjs/plugin/minMax";
+import utc from "dayjs/plugin/utc";
+import { type Theme } from "@emotion/react";
+import { type FC } from "react";
+import semver from "semver";
+import type * as TypesGen from "api/typesGenerated";
 
 dayjs.extend(duration);
 dayjs.extend(utc);
@@ -28,6 +29,15 @@ const DisplayAgentVersionLanguage = {
   unknown: "Unknown",
 };
 
+const LoadingIcon: FC = () => {
+  return (
+    <CircularProgress
+      size={10}
+      css={(theme) => ({ color: theme.experimental.l1.text })}
+    />
+  );
+};
+
 export const getDisplayWorkspaceBuildStatus = (
   theme: Theme,
   build: TypesGen.WorkspaceBuild,
@@ -249,10 +259,6 @@ const getPendingWorkspaceStatusText = (
   return "Position in queue: " + provisionerJob.queue_position;
 };
 
-const LoadingIcon = () => {
-  return <CircularProgress size={10} style={{ color: "#FFF" }} />;
-};
-
 export const hasJobError = (workspace: TypesGen.Workspace) => {
   return workspace.latest_build.job.error !== undefined;
 };

From 6314341bfef1bd7d823824dab3ef0507074780ba Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 21:52:31 +0000
Subject: [PATCH 14/19] test

---
 site/src/components/Badges/Badges.tsx         |  1 -
 .../AppearancePage/AppearancePage.test.tsx    | 25 +++++++++++++++----
 .../WorkspaceScheduleForm.tsx                 |  1 -
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index ccfe10f797343..1a60e949b0831 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -2,7 +2,6 @@ import type { PropsWithChildren, FC } from "react";
 import Tooltip from "@mui/material/Tooltip";
 import { type Interpolation, type Theme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
-import colors from "theme/tailwind";
 
 const styles = {
   badge: {
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx
index 89e85424011cf..623faccb0d7df 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx
@@ -6,7 +6,7 @@ import { AppearancePage } from "./AppearancePage";
 import { MockUser } from "testHelpers/entities";
 
 describe("appearance page", () => {
-  it("changes theme to dark", async () => {
+  it("does nothing when selecting current theme", async () => {
     renderWithAuth(<AppearancePage />);
 
     jest.spyOn(API, "updateAppearanceSettings").mockResolvedValueOnce({
@@ -18,10 +18,7 @@ describe("appearance page", () => {
     await userEvent.click(dark);
 
     // Check if the API was called correctly
-    expect(API.updateAppearanceSettings).toBeCalledTimes(1);
-    expect(API.updateAppearanceSettings).toHaveBeenCalledWith("me", {
-      theme_preference: "dark",
-    });
+    expect(API.updateAppearanceSettings).toBeCalledTimes(0);
   });
 
   it("changes theme to dark blue", async () => {
@@ -41,4 +38,22 @@ describe("appearance page", () => {
       theme_preference: "darkBlue",
     });
   });
+
+  it("changes theme to light", async () => {
+    renderWithAuth(<AppearancePage />);
+
+    jest.spyOn(API, "updateAppearanceSettings").mockResolvedValueOnce({
+      ...MockUser,
+      theme_preference: "light",
+    });
+
+    const light = await screen.findByText("Light");
+    await userEvent.click(light);
+
+    // Check if the API was called correctly
+    expect(API.updateAppearanceSettings).toBeCalledTimes(1);
+    expect(API.updateAppearanceSettings).toHaveBeenCalledWith("me", {
+      theme_preference: "light",
+    });
+  });
 });
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
index e4c51bd8a91b2..079b064e9d981 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
@@ -29,7 +29,6 @@ import { type ChangeEvent, type FC } from "react";
 import * as Yup from "yup";
 import { getFormHelpers } from "utils/formUtils";
 import { timeZones } from "utils/timeZones";
-import { Pill } from "components/Pill/Pill";
 import Tooltip from "@mui/material/Tooltip";
 import { formatDuration, intervalToDuration } from "date-fns";
 import { DisabledBadge } from "components/Badges/Badges";

From ee81c62b72df88eef6d87d0d6ff043f9d07c005f Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 22:23:27 +0000
Subject: [PATCH 15/19] ok

---
 site/src/components/Dialogs/Dialog.tsx            |  4 ++--
 site/src/components/Form/Form.tsx                 | 15 ++++-----------
 .../LicensesSettingsPageView.stories.tsx          |  4 +++-
 site/src/pages/HealthPage/storybook.tsx           |  4 +++-
 .../TemplateInsightsPage.stories.tsx              |  4 +++-
 site/src/theme/dark/experimental.ts               |  2 +-
 6 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index 0a962109fc805..7e429752ddaa2 100644
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@@ -58,7 +58,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
           disabled={disabled}
           type="submit"
           css={[
-            type === "delete" && styles.warningButton,
+            type === "delete" && styles.dangerButton,
             type === "success" && styles.successButton,
           ]}
         >
@@ -70,7 +70,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
 };
 
 const styles = {
-  warningButton: (theme) => ({
+  dangerButton: (theme) => ({
     "&.MuiButton-contained": {
       backgroundColor: theme.experimental.roles.danger.fill,
       borderColor: theme.experimental.roles.danger.outline,
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
index e8e2160054bcb..d288f2cdb9d74 100644
--- a/site/src/components/Form/Form.tsx
+++ b/site/src/components/Form/Form.tsx
@@ -120,13 +120,7 @@ export const FormSection: FC<
         }}
         className={classes.sectionInfo}
       >
-        <h2
-          css={[
-            styles.formSectionInfoTitle,
-            alpha && styles.formSectionInfoTitleAlpha,
-          ]}
-          className={classes.infoTitle}
-        >
+        <h2 css={styles.formSectionInfoTitle} className={classes.infoTitle}>
           {title}
           {alpha && <AlphaBadge />}
           {deprecated && <DeprecatedBadge />}
@@ -149,19 +143,18 @@ export const FormFields: FC<PropsWithChildren> = ({ children }) => {
 
 const styles = {
   formSectionInfoTitle: (theme) => ({
+    display: "flex",
+    gap: 6,
     fontSize: 20,
     color: theme.palette.text.primary,
     fontWeight: 400,
     margin: 0,
     marginBottom: 8,
-  }),
-
-  formSectionInfoTitleAlpha: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
-  },
+  }),
 
   formSectionInfoDescription: (theme) => ({
     fontSize: 14,
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
index 21edae00d209c..54426f1cb1258 100644
--- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
+++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx
@@ -1,8 +1,10 @@
-import LicensesSettingsPageView from "./LicensesSettingsPageView";
+import { chromatic } from "testHelpers/chromatic";
 import { MockLicenseResponse } from "testHelpers/entities";
+import LicensesSettingsPageView from "./LicensesSettingsPageView";
 
 export default {
   title: "pages/DeploySettingsPage/LicensesSettingsPageView",
+  parameters: { chromatic },
   component: LicensesSettingsPageView,
 };
 
diff --git a/site/src/pages/HealthPage/storybook.tsx b/site/src/pages/HealthPage/storybook.tsx
index 387fa6465d4f7..886402af3a1bf 100644
--- a/site/src/pages/HealthPage/storybook.tsx
+++ b/site/src/pages/HealthPage/storybook.tsx
@@ -1,9 +1,11 @@
+import type { Meta } from "@storybook/react";
 import { useQueryClient } from "react-query";
 import {
   reactRouterParameters,
   reactRouterOutlet,
   RouteDefinition,
 } from "storybook-addon-react-router-v6";
+import { chromatic } from "testHelpers/chromatic";
 import {
   MockBuildInfo,
   MockEntitlements,
@@ -11,7 +13,6 @@ import {
   MockHealth,
   MockHealthSettings,
 } from "testHelpers/entities";
-import { Meta } from "@storybook/react";
 import { HEALTH_QUERY_KEY, HEALTH_QUERY_SETTINGS_KEY } from "api/queries/debug";
 import { DashboardProvider } from "components/Dashboard/DashboardProvider";
 import { HealthLayout } from "./HealthLayout";
@@ -26,6 +27,7 @@ export const generateMeta = ({ element, path, params }: MetaOptions): Meta => {
   return {
     render: HealthLayout,
     parameters: {
+      chromatic,
       layout: "fullscreen",
       reactRouter: reactRouterParameters({
         location: { pathParams: params },
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx
index 361ff4f12ce1a..894beb3a600d0 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx
@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { TemplateInsightsPageView } from "./TemplateInsightsPage";
+import { chromatic } from "testHelpers/chromatic";
 import { MockEntitlementsWithUserLimit } from "testHelpers/entities";
+import { TemplateInsightsPageView } from "./TemplateInsightsPage";
 
 const meta: Meta<typeof TemplateInsightsPageView> = {
   title: "pages/TemplatePage/TemplateInsightsPageView",
+  parameters: { chromatic },
   component: TemplateInsightsPageView,
 };
 
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
index 86c22bdecbcf0..7e929c4ea8e97 100644
--- a/site/src/theme/dark/experimental.ts
+++ b/site/src/theme/dark/experimental.ts
@@ -51,7 +51,7 @@ export default {
     danger: {
       background: colors.orange[950],
       outline: colors.orange[500],
-      fill: colors.orange[600],
+      fill: colors.orange[700],
       text: colors.orange[50],
       disabled: {
         background: colors.orange[950],

From 481560458f2fcdd136774691cdff5072fc6d9364 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 22:35:48 +0000
Subject: [PATCH 16/19] whoops

---
 site/src/components/Form/Form.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
index d288f2cdb9d74..a7e902a3deb59 100644
--- a/site/src/components/Form/Form.tsx
+++ b/site/src/components/Form/Form.tsx
@@ -143,8 +143,6 @@ export const FormFields: FC<PropsWithChildren> = ({ children }) => {
 
 const styles = {
   formSectionInfoTitle: (theme) => ({
-    display: "flex",
-    gap: 6,
     fontSize: 20,
     color: theme.palette.text.primary,
     fontWeight: 400,

From c68faf0bbecd7ec0004e5d885e799d6ad46c81bd Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 23:07:37 +0000
Subject: [PATCH 17/19] revert `ExternalIcon` stuff

---
 .../components/Resources/ResourceAvatar.tsx   |  8 +++++--
 .../StarterTemplatePageView.tsx               | 17 +++++++++++--
 .../ExternalAuthPage/ExternalAuthPageView.tsx | 24 +++++++++----------
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
index 0ce16cb2f441f..2951cb5af210a 100644
--- a/site/src/components/Resources/ResourceAvatar.tsx
+++ b/site/src/components/Resources/ResourceAvatar.tsx
@@ -1,6 +1,6 @@
 import { type FC } from "react";
 import type { WorkspaceResource } from "api/typesGenerated";
-import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";
+import { Avatar, AvatarIcon } from "components/Avatar/Avatar";
 
 const FALLBACK_ICON = "/icon/widgets.svg";
 
@@ -28,5 +28,9 @@ export type ResourceAvatarProps = { resource: WorkspaceResource };
 export const ResourceAvatar: FC<ResourceAvatarProps> = ({ resource }) => {
   const avatarSrc = resource.icon || getIconPathResource(resource.type);
 
-  return <ExternalIcon src={avatarSrc} alt={resource.name} />;
+  return (
+    <Avatar background>
+      <AvatarIcon src={avatarSrc} alt={resource.name} />
+    </Avatar>
+  );
 };
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index 4b204f5e5e003..91a0c446146ed 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -15,7 +15,6 @@ import { Stack } from "components/Stack/Stack";
 import { Link } from "react-router-dom";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import type { TemplateExample } from "api/typesGenerated";
-import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";
 
 export interface StarterTemplatePageViewProps {
   starterTemplate?: TemplateExample;
@@ -66,7 +65,21 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
         }
       >
         <Stack direction="row" spacing={3} alignItems="center">
-          <ExternalIcon size={48} src={starterTemplate.icon} />
+          <div
+            css={{
+              height: 48,
+              width: 48,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+
+              "& img": {
+                width: "100%",
+              },
+            }}
+          >
+            <img src={starterTemplate.icon} alt="" />
+          </div>
           <div>
             <PageHeaderTitle>{starterTemplate.name}</PageHeaderTitle>
             <PageHeaderSubtitle condensed>
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
index f0554952b8d44..93023af59bc75 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -14,8 +14,9 @@ import type {
   ExternalAuthLink,
 } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Avatar } from "components/Avatar/Avatar";
+import { AvatarData } from "components/AvatarData/AvatarData";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
-import { Stack } from "components/Stack/Stack";
 import {
   MoreMenu,
   MoreMenuContent,
@@ -24,10 +25,7 @@ import {
   ThreeDotsButton,
 } from "components/MoreMenu/MoreMenu";
 import { ExternalAuth } from "pages/CreateWorkspacePage/ExternalAuth";
-import type { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage";
-import { ExternalIcon } from "components/ExternalIcon/ExternalIcon";
-
-const FALLBACK_ICON = "/icon/widgets.svg";
+import { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage";
 
 export type ExternalAuthPageViewProps = {
   isLoading: boolean;
@@ -131,13 +129,14 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
   return (
     <TableRow key={name}>
       <TableCell>
-        <Stack direction="row" alignItems="center">
-          <ExternalIcon
-            title={app.display_name || app.id}
-            src={app.display_icon || FALLBACK_ICON}
-          />
-          <span>{app.display_name}</span>
-        </Stack>
+        <AvatarData
+          title={app.display_name || app.id}
+          avatar={
+            app.display_icon && (
+              <Avatar src={app.display_icon} variant="square" fitImage />
+            )
+          }
+        />
       </TableCell>
       <TableCell>
         <ExternalAuth
@@ -150,7 +149,6 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
           message={authenticated ? "Authenticated" : "Click to Login"}
           externalAuthPollingState={externalAuthPollingState}
           startPollingExternalAuth={startPollingExternalAuth}
-          fullWidth={false}
         />
       </TableCell>
       <TableCell>

From 00c9f74adcc64a90a4984eb631e8262bc9f7cebb Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 23:21:52 +0000
Subject: [PATCH 18/19] fix pagination

---
 .../PaginationWidget/PageButtons.tsx          | 31 ++++++++++++-------
 .../PaginationWidget/PaginationWidgetBase.tsx | 12 +++----
 site/src/theme/light/experimental.ts          |  4 +--
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx
index ceef484aa13b3..003cb7bf4be34 100644
--- a/site/src/components/PaginationWidget/PageButtons.tsx
+++ b/site/src/components/PaginationWidget/PageButtons.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import Button from "@mui/material/Button";
 import { useTheme } from "@emotion/react";
 
@@ -11,13 +11,13 @@ type NumberedPageButtonProps = {
   disabled?: boolean;
 };
 
-export function NumberedPageButton({
+export const NumberedPageButton: FC<NumberedPageButtonProps> = ({
   pageNumber,
   totalPages,
   onClick,
   highlighted = false,
   disabled = false,
-}: NumberedPageButtonProps) {
+}) => {
   return (
     <BasePageButton
       name="Page button"
@@ -29,16 +29,16 @@ export function NumberedPageButton({
       {pageNumber}
     </BasePageButton>
   );
-}
+};
 
 type PlaceholderPageButtonProps = PropsWithChildren<{
   pagesOmitted: number;
 }>;
 
-export function PlaceholderPageButton({
+export const PlaceholderPageButton: FC<PlaceholderPageButtonProps> = ({
   pagesOmitted,
   children = <>&hellip;</>,
-}: PlaceholderPageButtonProps) {
+}) => {
   return (
     <BasePageButton
       disabled
@@ -48,7 +48,7 @@ export function PlaceholderPageButton({
       {children}
     </BasePageButton>
   );
-}
+};
 
 type BasePageButtonProps = PropsWithChildren<{
   name: string;
@@ -59,22 +59,29 @@ type BasePageButtonProps = PropsWithChildren<{
   disabled?: boolean;
 }>;
 
-function BasePageButton({
+const BasePageButton: FC<BasePageButtonProps> = ({
   children,
   onClick,
   name,
   "aria-label": ariaLabel,
   highlighted = false,
   disabled = false,
-}: BasePageButtonProps) {
+}) => {
   const theme = useTheme();
 
   return (
     <Button
       css={
         highlighted && {
-          borderColor: `${theme.palette.info.main}`,
-          backgroundColor: `${theme.palette.info.dark}`,
+          borderColor: theme.experimental.roles.active.outline,
+          backgroundColor: theme.experimental.roles.active.background,
+
+          // Override the hover state with active colors, but not hover
+          // colors because clicking won't do anything.
+          "&:hover": {
+            borderColor: theme.experimental.roles.active.outline,
+            backgroundColor: theme.experimental.roles.active.background,
+          },
         }
       }
       aria-label={ariaLabel}
@@ -85,7 +92,7 @@ function BasePageButton({
       {children}
     </Button>
   );
-}
+};
 
 function getNumberedButtonLabel(
   page: number,
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
index da431fb8b1367..420b4a024add2 100644
--- a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
+++ b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -1,6 +1,6 @@
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@emotion/react";
-
+import { type FC } from "react";
 import { PlaceholderPageButton, NumberedPageButton } from "./PageButtons";
 import { buildPagedList } from "./utils";
 import { PaginationNavButton } from "./PaginationNavButton";
@@ -17,14 +17,14 @@ export type PaginationWidgetBaseProps = {
   hasNextPage?: boolean;
 };
 
-export const PaginationWidgetBase = ({
+export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
   currentPage,
   pageSize,
   totalRecords,
   onPageChange,
   hasPreviousPage,
   hasNextPage,
-}: PaginationWidgetBaseProps) => {
+}) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const totalPages = Math.ceil(totalRecords / pageSize);
@@ -99,11 +99,11 @@ type PaginationRowProps = {
   onChange: (newPage: number) => void;
 };
 
-function PaginationRow({
+const PaginationRow: FC<PaginationRowProps> = ({
   currentPage,
   totalPages,
   onChange,
-}: PaginationRowProps) {
+}) => {
   const pageInfo = buildPagedList(totalPages, currentPage);
   const pagesOmitted = totalPages - pageInfo.length - 1;
 
@@ -131,4 +131,4 @@ function PaginationRow({
       })}
     </>
   );
-}
+};
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index 785c198402ed7..87ea50527c9f9 100644
--- a/site/src/theme/light/experimental.ts
+++ b/site/src/theme/light/experimental.ts
@@ -120,8 +120,8 @@ export default {
         text: colors.sky[200],
       },
       hover: {
-        background: colors.sky[100],
-        outline: colors.sky[500],
+        background: colors.sky[200],
+        outline: colors.sky[400],
         fill: colors.sky[500],
         text: colors.black,
       },

From 7121d451eabc1029c74d547c7f48cadf6b42dad3 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 19 Dec 2023 23:32:51 +0000
Subject: [PATCH 19/19] ah

---
 .../UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
index 93023af59bc75..a095a39ed0a8c 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -149,6 +149,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
           message={authenticated ? "Authenticated" : "Click to Login"}
           externalAuthPollingState={externalAuthPollingState}
           startPollingExternalAuth={startPollingExternalAuth}
+          fullWidth={false}
         />
       </TableCell>
       <TableCell>