small bits of cleanup, rebrand as "preview"

aslilac · aslilac · commit f619cdb13478 · 2023-12-21T17:49:56.000Z
diff --git 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
@@ -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
@@ -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,15 +154,15 @@ const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
 
 interface ThemePreviewProps {
   active?: boolean;
-  beta?: boolean;
+  preview?: boolean;
   className?: string;
   displayName: string;
   theme: Theme;
 }
 
 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
@@ -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;
 }
