fix: add additional theme colors (#11313)

site/src/components/Badges/Badges.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   Badges,
   AlphaBadge,
-  BetaBadge,
+  PreviewBadge,
   DisabledBadge,
   EnabledBadge,
   EntitledBadge,
@@ -55,9 +55,9 @@ export const Enterprise: Story = {
     children: <EnterpriseBadge />,
   },
 };
-export const Beta: Story = {
+export const Preview: Story = {
   args: {
-    children: <BetaBadge />,
+    children: <PreviewBadge />,
   },
 };
 export const Alpha: Story = {

site/src/components/Badges/Badges.tsx

@@ -108,7 +108,7 @@ export const EnterpriseBadge: FC = () => {
   );
 };
 
-export const BetaBadge: FC = () => {
+export const PreviewBadge: FC = () => {
   return (
     <span
       css={[
@@ -120,7 +120,7 @@ export const BetaBadge: FC = () => {
         }),
       ]}
     >
-      Beta
+      Preview
     </span>
   );
 };

site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx

@@ -5,7 +5,7 @@ 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 { PreviewBadge } from "components/Badges/Badges";
 import { ThemeOverride } from "contexts/ThemeProvider";
 
 export interface AppearanceFormProps {
@@ -57,7 +57,7 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
         />
         <ThemePreviewButton
           displayName="Light"
-          beta
+          preview
           active={currentTheme === "light"}
           theme={themes.light}
           onSelect={() => onChangeTheme("light")}
@@ -74,7 +74,7 @@ interface AutoThemePreviewButtonProps extends Omit<ThemePreviewProps, "theme"> {
 
 const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
   active,
-  beta,
+  preview,
   className,
   displayName,
   themes,
@@ -102,13 +102,13 @@ const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
             clipPath: "polygon(-5% -5%, 50% -5%, 50% 105%, -5% 105%)",
           }}
           active={active}
-          beta={beta}
+          preview={preview}
           displayName={displayName}
           theme={leftTheme}
         />
         <ThemePreview
           active={active}
-          beta={beta}
+          preview={preview}
           displayName={displayName}
           theme={rightTheme}
         />
@@ -123,7 +123,7 @@ interface ThemePreviewButtonProps extends ThemePreviewProps {
 
 const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
   active,
-  beta,
+  preview,
   className,
   displayName,
   theme,
@@ -143,7 +143,7 @@ const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
       <label htmlFor={displayName} className={className}>
         <ThemePreview
           active={active}
-          beta={beta}
+          preview={preview}
           displayName={displayName}
           theme={theme}
         />
@@ -154,7 +154,7 @@ const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
 
 interface ThemePreviewProps {
   active?: boolean;
-  beta?: boolean;
+  preview?: boolean;
   className?: string;
   displayName: string;
   theme: Theme;
@@ -162,7 +162,7 @@ interface ThemePreviewProps {
 
 const ThemePreview: FC<ThemePreviewProps> = ({
   active,
-  beta,
+  preview,
   className,
   displayName,
   theme,
@@ -198,7 +198,7 @@ const ThemePreview: FC<ThemePreviewProps> = ({
         </div>
         <div css={styles.label}>
           <span>{displayName}</span>
-          {beta && <BetaBadge />}
+          {preview && <PreviewBadge />}
         </div>
       </div>
     </ThemeOverride>

site/src/theme/dark/experimental.ts

@@ -15,34 +15,15 @@ export default {
     fill: colors.zinc[500],
     text: colors.zinc[50],
     disabled: {
-      background: "#f00",
-      outline: "#f00",
+      background: colors.gray[900],
+      outline: colors.zinc[700],
       fill: colors.zinc[500],
       text: colors.zinc[200],
     },
     hover: {
       background: colors.zinc[800],
       outline: colors.zinc[600],
-      fill: "#f00",
-      text: colors.white,
-    },
-  },
-
-  l3: {
-    background: colors.zinc[800],
-    outline: colors.zinc[700],
-    fill: colors.zinc[600],
-    text: colors.white,
-    disabled: {
-      background: "#f00",
-      outline: "#f00",
-      fill: "#f00",
-      text: colors.zinc[200],
-    },
-    hover: {
-      background: "#f00",
-      outline: "#f00",
-      fill: "#f00",
+      fill: colors.zinc[400],
       text: colors.white,
     },
   },
@@ -75,7 +56,7 @@ export default {
     warning: {
       background: colors.amber[950],
       outline: colors.amber[300],
-      fill: "#f00",
+      fill: colors.amber[500],
       text: colors.amber[50],
     },
     notice: {

site/src/theme/darkBlue/experimental.ts

@@ -15,34 +15,15 @@ export default {
     fill: colors.gray[500],
     text: colors.gray[50],
     disabled: {
-      background: "#f00",
-      outline: "#f00",
+      background: colors.gray[900],
+      outline: colors.zinc[700],
       fill: colors.gray[500],
       text: colors.gray[200],
     },
     hover: {
-      background: "#f00",
+      background: colors.gray[800],
       outline: colors.gray[600],
-      fill: "#f00",
-      text: colors.white,
-    },
-  },
-
-  l3: {
-    background: colors.gray[800],
-    outline: colors.gray[700],
-    fill: colors.gray[600],
-    text: colors.white,
-    disabled: {
-      background: "#f00",
-      outline: "#f00",
-      fill: "#f00",
-      text: colors.gray[200],
-    },
-    hover: {
-      background: "#f00",
-      outline: "#f00",
-      fill: "#f00",
+      fill: colors.zinc[400],
       text: colors.white,
     },
   },
@@ -75,7 +56,7 @@ export default {
     warning: {
       background: colors.amber[950],
       outline: colors.amber[300],
-      fill: "#f00",
+      fill: colors.amber[500],
       text: colors.amber[50],
     },
     notice: {

site/src/theme/experimental.ts

@@ -9,29 +9,62 @@ export type InteractiveThemeRole = keyof {
 export interface NewTheme {
   l1: Role; // page background, things which sit at the "root level"
   l2: InteractiveRole; // sidebars, table headers, navigation
-  l3: InteractiveRole; // buttons, inputs
 
   roles: {
-    danger: InteractiveRole; // delete, immutable parameters, stuff that sucks to fix
-    error: Role; // something went wrong
-    warning: Role; // something is amiss
-    notice: Role; // like info, but actionable. "this is fine, but you may want to..."
-    info: Role; // just sharing :)
-    success: InteractiveRole; // yay!! it's working!!
-    active: InteractiveRole; // selected items, focused inputs, in progress
-    preview: Role; // experiments, alpha/beta features
+    /** Something is wrong; either unexpectedly, or in a meaningful way. */
+    error: Role;
+
+    /** Something isn't quite right, but without serious consequence. */
+    warning: Role;
+
+    /** A prompt for action, to correct or look into something. */
+    notice: Role;
+
+    /** Notable information; just so you know! */
+    info: Role;
+
+    /** Confirmation, or affirming that things are as desired. */
+    success: InteractiveRole;
+
+    /** Selected, in progress, of particular relevance right now. */
+    active: InteractiveRole;
+
+    /** Actions that have long lasting or irreversible effects.
+     * Deletion, immutable parameters, etc.
+     */
+    danger: InteractiveRole;
+
+    /** This isn't quite ready for prime-time, but you're welcome to look around!
+     * Preview features, experiments, unstable etc.
+     */
+    preview: Role;
   };
 }
 
+/** A set of colors which work together to fill a desirable "communication role"
+ * ie. I wish to communicate an error, I wish to communicate that this is dangerous, etc.
+ */
 export interface Role {
+  /** A background color that works best with the corresponding `outline` and `text` colors */
   background: string;
+
+  /** A border, or a color for an outlined icon */
   outline: string;
+
+  /** A good color for icons, text on a neutral background, the background of a button which should stand out */
   fill: string;
-  // contrastOutline?: string;
+
+  /** A color great for text on the corresponding `background` */
   text: string;
+
+  // contrastOutline?: string;
 }
 
+/** Provides additional colors which can indicate different states for interactive elements */
 export interface InteractiveRole extends Role {
+  /** A set of colors which can indicate a disabled state */
   disabled: Role;
+
+  /** A set of colors which can indicate mouse hover (or keyboard focus)  */
   hover: Role;
 }

site/src/theme/light/experimental.ts

@@ -15,34 +15,15 @@ export default {
     fill: colors.gray[500],
     text: colors.gray[950],
     disabled: {
-      background: "#f00",
-      outline: "#f00",
+      background: colors.gray[100],
+      outline: colors.gray[500],
       fill: colors.gray[500],
-      text: colors.gray[200],
+      text: colors.gray[800],
     },
     hover: {
       background: colors.gray[200],
       outline: colors.gray[700],
-      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",
+      fill: colors.zinc[600],
       text: colors.black,
     },
   },
@@ -75,7 +56,7 @@ export default {
     warning: {
       background: colors.amber[50],
       outline: colors.amber[300],
-      fill: "#f00",
+      fill: colors.amber[500],
       text: colors.amber[950],
     },
     notice: {