From 4f4e29527e3e45e954963b94d892c9b616edf897 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 21 Dec 2023 16:56:40 +0000
Subject: [PATCH 1/4] tada

---
 site/src/theme/dark/experimental.ts     | 27 ++++-------------------
 site/src/theme/darkBlue/experimental.ts | 29 +++++--------------------
 site/src/theme/experimental.ts          |  1 -
 site/src/theme/light/experimental.ts    | 29 +++++--------------------
 4 files changed, 14 insertions(+), 72 deletions(-)

diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
index 7e929c4ea8e97..08977a6660ce8 100644
--- a/site/src/theme/dark/experimental.ts
+++ b/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: {
diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts
index 9b15df75a932b..2aeb5c50ef689 100644
--- a/site/src/theme/darkBlue/experimental.ts
+++ b/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: {
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index 7bbc247f2a8e1..7021ea2313aa1 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -9,7 +9,6 @@ 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
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index 87ea50527c9f9..add7b48b010e4 100644
--- a/site/src/theme/light/experimental.ts
+++ b/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: {

From f619cdb134784f00fa15ce5a750a53c24081f10a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 21 Dec 2023 17:49:56 +0000
Subject: [PATCH 2/4] small bits of cleanup, rebrand as "preview"

---
 site/src/components/Badges/Badges.stories.tsx |  6 +--
 site/src/components/Badges/Badges.tsx         |  4 +-
 .../AppearancePage/AppearanceForm.tsx         | 20 ++++----
 site/src/theme/experimental.ts                | 48 +++++++++++++++----
 4 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx
index fd31d446e0770..65b04d9d6c245 100644
--- a/site/src/components/Badges/Badges.stories.tsx
+++ b/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 = {
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index 1a60e949b0831..19f20f0cfbc15 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/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>
   );
 };
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index 85f0bd5d53129..e730ebb1aaa50 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/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>
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index 7021ea2313aa1..4faf20bbf24c0 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -11,26 +11,56 @@ export interface NewTheme {
   l2: InteractiveRole; // sidebars, table headers, navigation
 
   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
+    /** Deletion, immutable parameters, and things that have long lasting or irreversible effects */
+    danger: InteractiveRole;
+
+    /** Something went 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;
+
+    /** 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 "communiation role"
+ * ie. I wish to communicate an error, I wish to communicate that this is dangerous, etc.
+ */
 export interface Role {
+  /** A background color  */
   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;
 }

From 440db24787217743d954342b9f60e8e5c16c9fea Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 21 Dec 2023 17:55:00 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/theme/experimental.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index 4faf20bbf24c0..c144737ec9e0c 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -37,7 +37,7 @@ export interface NewTheme {
   };
 }
 
-/** A set of colors which work together to fill a desirable "communiation 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 {

From 90b35ce3fba9d6a7e7b3489d53d3f21d8470fa2c Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 21 Dec 2023 18:15:27 +0000
Subject: [PATCH 4/4] more comment tweaks

---
 site/src/theme/experimental.ts | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index c144737ec9e0c..bd8942a43ce36 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -11,16 +11,13 @@ export interface NewTheme {
   l2: InteractiveRole; // sidebars, table headers, navigation
 
   roles: {
-    /** Deletion, immutable parameters, and things that have long lasting or irreversible effects */
-    danger: InteractiveRole;
-
-    /** Something went wrong; either unexpectedly, or in a meaningful way */
+    /** Something is wrong; either unexpectedly, or in a meaningful way. */
     error: Role;
 
-    /** Something isn't quite right, but without serious consequence */
+    /** Something isn't quite right, but without serious consequence. */
     warning: Role;
 
-    /** A prompt for action, to correct or look into something */
+    /** A prompt for action, to correct or look into something. */
     notice: Role;
 
     /** Notable information; just so you know! */
@@ -29,10 +26,17 @@ export interface NewTheme {
     /** Confirmation, or affirming that things are as desired. */
     success: InteractiveRole;
 
-    /** Selected, in progress, of particular relevance right now */
+    /** Selected, in progress, of particular relevance right now. */
     active: InteractiveRole;
 
-    /** This isn't quite ready for prime-time, but you're welcome to look around! preview features, experiments, unstable etc. */
+    /** 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;
   };
 }
@@ -41,7 +45,7 @@ export interface NewTheme {
  * ie. I wish to communicate an error, I wish to communicate that this is dangerous, etc.
  */
 export interface Role {
-  /** A background color  */
+  /** A background color that works best with the corresponding `outline` and `text` colors */
   background: string;
 
   /** A border, or a color for an outlined icon */