coder · aslilac · Dec 20, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
diff --git 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
@@ -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
@@ -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
diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -94,13 +94,15 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
     },
     scales: {
       y: {
+        grid: { color: theme.palette.divider },
         suggestedMin: 0,
         ticks: {
           precision: 0,
         },
       },
 
       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
@@ -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
@@ -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
@@ -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
@@ -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>>;