coder · aslilac · Nov 15, 2023 · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023
@@ -7,14 +7,21 @@ import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { withRouter } from "storybook-addon-react-router-v6";
 import { HelmetProvider } from "react-helmet-async";
 import { dark } from "theme/mui";
+import { dark as experimental } from "theme/experimental";
+import colors from "theme/tailwind";
 import "theme/globalFonts";
 import { QueryClient, QueryClientProvider } from "react-query";
 
+const theme = {
+  ...dark,
+  experimental,
+};
+
 export const decorators = [
   (Story) => (
     <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={dark}>
-        <EmotionThemeProvider theme={dark}>
+      <MuiThemeProvider theme={theme}>
+        <EmotionThemeProvider theme={theme}>
           <CssBaseline />
           <Story />
         </EmotionThemeProvider>
@@ -39,6 +46,19 @@ export const decorators = [
 ];
 
 export const parameters = {
+  backgrounds: {
+    default: "dark",
+    values: [
+      {
+        name: "dark",
+        value: colors.gray[950],
+      },
+      {
+        name: "light",
+        value: colors.gray[50],
+      },
+    ],
+  },
   actions: {
     argTypesRegex: "^(on|handler)[A-Z].*",
   },

@@ -1,7 +1,7 @@
 import CssBaseline from "@mui/material/CssBaseline";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { AuthProvider } from "components/AuthProvider/AuthProvider";
-import { FC, PropsWithChildren, ReactNode } from "react";
+import type { FC, PropsWithChildren, ReactNode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { AppRouter } from "./AppRouter";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";

@@ -10,62 +10,50 @@ const meta: Meta<typeof Avatar> = {
 export default meta;
 type Story = StoryObj<typeof Avatar>;
 
-export const Letter: Story = {
+export const WithLetter: Story = {
   args: {
     children: "Coder",
   },
 };
 
-export const LetterXL = {
+export const WithLetterXL = {
   args: {
     children: "Coder",
     size: "xl",
   },
 };
 
-export const LetterDarken = {
-  args: {
-    children: "Coder",
-    colorScheme: "darken",
-  },
-};
-
-export const Image = {
+export const WithImage = {
   args: {
     src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
   },
 };
 
-export const ImageXL = {
+export const WithImageXL = {
   args: {
     src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
     size: "xl",
   },
 };
 
-export const MuiIcon = {
-  args: {
-    children: <PauseIcon />,
-  },
-};
-
-export const MuiIconDarken = {
+export const WithMuiIcon = {
   args: {
+    background: true,
     children: <PauseIcon />,
-    colorScheme: "darken",
   },
 };
 
-export const MuiIconXL = {
+export const WithMuiIconXL = {
   args: {
+    background: true,
     children: <PauseIcon />,
     size: "xl",
   },
 };
 
-export const AvatarIconDarken = {
+export const WithAvatarIcon = {
   args: {
+    background: true,
     children: <AvatarIcon src="/icon/database.svg" alt="Database" />,
-    colorScheme: "darken",
   },
 };
@@ -8,7 +8,7 @@ import { visuallyHidden } from "@mui/utils";
 
 export type AvatarProps = MuiAvatarProps & {
   size?: "xs" | "sm" | "md" | "xl";
-  colorScheme?: "light" | "darken";
+  background?: boolean;
   fitImage?: boolean;
 };
 
@@ -33,14 +33,6 @@ const sizeStyles = {
   },
 } satisfies Record<string, Interpolation<Theme>>;
 
-const colorStyles = {
-  light: {},
-  darken: (theme) => ({
-    background: theme.palette.divider,
-    color: theme.palette.text.primary,
-  }),
-} satisfies Record<string, Interpolation<Theme>>;
-
 const fitImageStyles = css`
   & .MuiAvatar-img {
     object-fit: contain;
@@ -49,18 +41,24 @@ const fitImageStyles = css`
 
 export const Avatar: FC<AvatarProps> = ({
   size = "md",
-  colorScheme = "light",
   fitImage,
   children,
+  background,
   ...muiProps
 }) => {
+  const fromName = !muiProps.src && typeof children === "string";
+
   return (
     <MuiAvatar
       {...muiProps}
       css={[
         sizeStyles[size],
-        colorStyles[colorScheme],
         fitImage && fitImageStyles,
+        (theme) => ({
+          background:
+            background || fromName ? theme.palette.divider : undefined,
+          color: theme.palette.text.primary,
+        }),
       ]}
     >
       {typeof children === "string" ? firstLetter(children) : children}

@@ -1,12 +1,12 @@
 import { type ReactNode } from "react";
 import { Avatar } from "components/Avatar/Avatar";
 import { type CSSObject, useTheme } from "@emotion/react";
-import { colors } from "theme/colors";
 
 type AvatarCardProps = {
   header: string;
   imgUrl: string;
   altText: string;
+  background?: boolean;
 
   subtitle?: ReactNode;
   maxWidth?: number | "none";
@@ -16,6 +16,7 @@ export function AvatarCard({
   header,
   imgUrl,
   altText,
+  background,
   subtitle,
   maxWidth = "none",
 }: AvatarCardProps) {
@@ -71,12 +72,7 @@ export function AvatarCard({
         )}
       </div>
 
-      <Avatar
-        src={imgUrl}
-        alt={altText}
-        size="md"
-        css={{ backgroundColor: colors.gray[7] }}
-      >
+      <Avatar background={background} src={imgUrl} alt={altText} size="md">
         {header}
       </Avatar>
     </div>

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Badges,
+  AlphaBadge,
+  EnabledBadge,
+  EntitledBadge,
+  EnterpriseBadge,
+} from "./Badges";
+
+const meta: Meta<typeof Badges> = {
+  title: "components/Badges",
+  component: Badges,
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Badges>;
+
+export const Enabled: Story = {
+  args: {
+    children: <EnabledBadge />,
+  },
+};
+export const Entitled: Story = {
+  args: {
+    children: <EntitledBadge />,
+  },
+};
+export const Enterprise: Story = {
+  args: {
+    children: <EnterpriseBadge />,
+  },
+};
+export const Alpha: Story = {
+  args: {
+    children: <AlphaBadge />,
+  },
+};
@@ -2,7 +2,7 @@ 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/colors";
+import colors from "theme/tailwind";
 
 const styles = {
   badge: {
@@ -20,16 +20,16 @@ const styles = {
   },
 
   enabledBadge: (theme) => ({
-    border: `1px solid ${theme.palette.success.light}`,
-    backgroundColor: theme.palette.success.dark,
+    border: `1px solid ${theme.experimental.roles.success.outline}`,
+    backgroundColor: theme.experimental.roles.success.background,
   }),
   errorBadge: (theme) => ({
-    border: `1px solid ${theme.palette.error.light}`,
-    backgroundColor: theme.palette.error.dark,
+    border: `1px solid ${theme.experimental.roles.error.outline}`,
+    backgroundColor: theme.experimental.roles.error.background,
   }),
   warnBadge: (theme) => ({
-    border: `1px solid ${theme.palette.warning.light}`,
-    backgroundColor: theme.palette.warning.dark,
+    border: `1px solid ${theme.experimental.roles.warning.outline}`,
+    backgroundColor: theme.experimental.roles.warning.background,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
 
@@ -111,9 +111,9 @@ export const AlphaBadge: FC = () => {
       css={[
         styles.badge,
         {
-          border: `1px solid ${colors.violet[10]}`,
-          backgroundColor: colors.violet[14],
-          color: colors.violet[1],
+          border: `1px solid ${colors.violet[600]}`,
+          backgroundColor: colors.violet[950],
+          color: colors.violet[50],
         },
       ]}
     >

@@ -46,7 +46,7 @@ export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
       }}
       badgeContent={<div></div>}
     >
-      <Avatar size={size} colorScheme="darken">
+      <Avatar background size={size}>
         <BuildIcon transition={build.transition} />
       </Avatar>
     </StyledBadge>

@@ -48,15 +48,13 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
     display: flex;
     align-items: center;
     padding: 12px;
-    background-color: ${type === "error"
-      ? colors.red[12]
-      : theme.palette.warning.main};
+    background-color: ${type === "error" ? colors.red[10] : colors.orange[10]};
   `;
 
   if (messages.length === 1) {
     return (
       <div css={containerStyles}>
-        <Pill text={Language.licenseIssue} type={type} lightBorder />
+        <Pill text={Language.licenseIssue} type={type} />
         <div css={styles.leftContent}>
           <span>{messages[0]}</span>
           &nbsp;
@@ -70,11 +68,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
 
   return (
     <div css={containerStyles}>
-      <Pill
-        text={Language.licenseIssues(messages.length)}
-        type={type}
-        lightBorder
-      />
+      <Pill text={Language.licenseIssues(messages.length)} type={type} />
       <div css={styles.leftContent}>
         <div>
           {Language.exceeded}

@@ -1,8 +1,7 @@
 import { Pill } from "components/Pill/Pill";
 import ReactMarkdown from "react-markdown";
 import { colors } from "theme/colors";
-import { useTheme } from "@mui/system";
-import { css } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
 import { readableForegroundColor } from "utils/colors";
 
 export interface ServiceBannerViewProps {
@@ -43,7 +42,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
         }
       `}
     >
-      {isPreview && <Pill text="Preview" type="info" lightBorder />}
+      {isPreview && <Pill text="Preview" type="info" />}
       <div
         css={css`
           margin-right: auto;

@@ -3,20 +3,12 @@ import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import { css, useTheme } from "@emotion/react";
 import type { PropsWithChildren, FC } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { DisabledBadge, EnabledBadge } from "./Badges";
+import { DisabledBadge, EnabledBadge } from "../Badges/Badges";
 
 export const OptionName: FC<PropsWithChildren> = (props) => {
   const { children } = props;
 
-  return (
-    <span
-      css={{
-        display: "block",
-      }}
-    >
-      {children}
-    </span>
-  );
+  return <span css={{ display: "block" }}>{children}</span>;
 };
 
 export const OptionDescription: FC<PropsWithChildren> = (props) => {