coder · aslilac · Jan 26, 2024 · Jan 25, 2024
diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
@@ -72,24 +72,24 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
 const styles = {
   dangerButton: (theme) => ({
     "&.MuiButton-contained": {
-      backgroundColor: theme.experimental.roles.danger.fill,
-      borderColor: theme.experimental.roles.danger.outline,
+      backgroundColor: theme.experimental.roles.danger.fill.solid,
+      borderColor: theme.experimental.roles.danger.fill.outline,
 
       "&:not(.MuiLoadingButton-loading)": {
-        color: theme.experimental.roles.danger.text,
+        color: theme.experimental.roles.danger.fill.text,
       },
 
       "&:hover:not(:disabled)": {
-        backgroundColor: theme.experimental.roles.danger.hover.fill,
-        borderColor: theme.experimental.roles.danger.hover.outline,
+        backgroundColor: theme.experimental.roles.danger.hover.fill.solid,
+        borderColor: theme.experimental.roles.danger.hover.fill.outline,
       },
 
       "&.Mui-disabled": {
         backgroundColor: theme.experimental.roles.danger.disabled.background,
         borderColor: theme.experimental.roles.danger.disabled.outline,
 
         "&:not(.MuiLoadingButton-loading)": {
-          color: theme.experimental.roles.danger.disabled.text,
+          color: theme.experimental.roles.danger.disabled.fill.text,
         },
       },
     },

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -206,7 +206,7 @@ const styles = {
     display: "flex",
     alignItems: "center",
     ...(theme.typography.body2 as CSSObject),
-    color: theme.experimental.roles.active.fill,
+    color: theme.experimental.roles.active.fill.outline,
   }),
 
   linkIcon: {

diff --git a/site/src/components/LastSeen/LastSeen.tsx b/site/src/components/LastSeen/LastSeen.tsx
@@ -23,13 +23,13 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
     // Since the agent reports on a 10m interval,
     // the last_used_at can be inaccurate when recent.
     message = "Now";
-    color = theme.experimental.roles.success.fill;
+    color = theme.experimental.roles.success.fill.solid;
   } else if (t.isAfter(now.subtract(3, "day"))) {
     color = theme.experimental.l2.text;
   } else if (t.isAfter(now.subtract(1, "month"))) {
-    color = theme.experimental.roles.warning.fill;
+    color = theme.experimental.roles.warning.fill.solid;
   } else if (t.isAfter(now.subtract(100, "year"))) {
-    color = theme.experimental.roles.error.fill;
+    color = theme.experimental.roles.error.fill.solid;
   } else {
     message = "Never";
   }

diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -161,7 +161,7 @@ export const WorkspaceStatusText: FC<WorkspaceStatusBadgeProps> = ({
           css={(theme) => ({
             fontWeight: 600,
             color: type
-              ? theme.experimental.roles[type].fill
+              ? theme.experimental.roles[type].fill.solid
               : theme.experimental.l1.text,
           })}
         >

diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -45,7 +45,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
                   />
                 </Badge>
                 <DropdownArrow
-                  color={theme.experimental.l2.fill}
+                  color={theme.experimental.l2.fill.solid}
                   close={popover.isOpen}
                 />
               </div>

diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx
@@ -118,7 +118,7 @@ const styles = {
   }),
 
   providerConnectedLabelIcon: (theme) => ({
-    color: theme.experimental.roles.success.fill,
+    color: theme.experimental.roles.success.fill.solid,
     fontSize: 16,
   }),
 } as Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/DeploySettingsPage/Option.tsx b/site/src/pages/DeploySettingsPage/Option.tsx
@@ -1,6 +1,6 @@
 import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
-import { css, useTheme } from "@emotion/react";
-import { type HTMLAttributes, type PropsWithChildren, type FC } from "react";
+import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { type FC, type HTMLAttributes, type PropsWithChildren } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
 
@@ -107,42 +107,16 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 type OptionConfigProps = HTMLAttributes<HTMLDivElement> & { isSource: boolean };
 
 // OptionConfig takes a isSource bool to indicate if the Option is the source of the configured value.
-export const OptionConfig = ({ isSource, ...attrs }: OptionConfigProps) => {
-  const theme = useTheme();
-  const borderColor = isSource
-    ? theme.experimental.roles.active.outline
-    : theme.palette.divider;
-
+export const OptionConfig: FC<OptionConfigProps> = ({ isSource, ...attrs }) => {
   return (
     <div
       {...attrs}
-      css={[
-        {
-          fontSize: 13,
-          fontFamily: MONOSPACE_FONT_FAMILY,
-          fontWeight: 600,
-          backgroundColor: theme.palette.background.paper,
-          display: "inline-flex",
-          alignItems: "center",
-          borderRadius: 4,
-          padding: 6,
-          lineHeight: 1,
-          gap: 6,
-          border: `1px solid ${borderColor}`,
-        },
-        isSource
-          ? {
-              "& .OptionConfigFlag": {
-                background: theme.experimental.roles.active.fill,
-              },
-            }
-          : undefined,
-      ]}
+      css={[styles.configOption, isSource && styles.sourceConfigOption]}
     />
   );
 };
 
-export const OptionConfigFlag = (props: HTMLAttributes<HTMLDivElement>) => {
+export const OptionConfigFlag: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
   const theme = useTheme();
 
   return (
@@ -163,6 +137,28 @@ export const OptionConfigFlag = (props: HTMLAttributes<HTMLDivElement>) => {
 };
 
 const styles = {
+  configOption: (theme) => ({
+    fontSize: 13,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    fontWeight: 600,
+    backgroundColor: theme.palette.background.paper,
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: 4,
+    padding: 6,
+    lineHeight: 1,
+    gap: 6,
+    border: `1px solid ${theme.palette.divider}`,
+  }),
+
+  sourceConfigOption: (theme) => ({
+    border: `1px solid ${theme.experimental.roles.active.fill.outline}`,
+
+    "& .OptionConfigFlag": {
+      background: theme.experimental.roles.active.fill.solid,
+    },
+  }),
+
   option: css`
     font-size: 14px;
     font-family: ${MONOSPACE_FONT_FAMILY};
@@ -173,4 +169,4 @@ const styles = {
       padding: 16px;
     }
   `,
-};
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -421,8 +421,8 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
     validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
   const usageColors = chroma
     .scale([
-      theme.experimental.roles.success.fill,
-      theme.experimental.roles.notice.fill,
+      theme.experimental.roles.success.fill.solid,
+      theme.experimental.roles.notice.fill.solid,
     ])
     .mode("lch")
     .colors(validUsage?.length ?? 0);

diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx
@@ -129,7 +129,7 @@ const StatusIndicator: FC<StatusIndicatorProps> = ({ option }) => {
         height: 8,
         width: 8,
         borderRadius: 4,
-        backgroundColor: theme.experimental.roles[option.color].fill,
+        backgroundColor: theme.experimental.roles[option.color].fill.solid,
       }}
     />
   );

diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
@@ -182,9 +182,9 @@ const styles = {
     lineHeight: "18px",
 
     "& .option": {
-      color: theme.experimental.roles.danger.fill,
+      color: theme.experimental.roles.danger.fill.solid,
       "&.Mui-checked": {
-        color: theme.experimental.roles.danger.fill,
+        color: theme.experimental.roles.danger.fill.solid,
       },
     },
 

diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
@@ -477,7 +477,7 @@ const styles = {
   newVersion: (theme) => ({
     fontSize: 13,
     fontWeight: 500,
-    color: theme.experimental.roles.active.fill,
+    color: theme.experimental.roles.active.fill.solid,
   }),
 
   message: {

diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -40,16 +40,16 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
   );
 
   if (t.isAfter(now.subtract(1, "hour"))) {
-    circle = <Circle color={theme.experimental.roles.success.fill} />;
+    circle = <Circle color={theme.experimental.roles.success.fill.solid} />;
     // Since the agent reports on a 10m interval,
     // the last_used_at can be inaccurate when recent.
     message = "Now";
   } else if (t.isAfter(now.subtract(3, "day"))) {
     circle = <Circle color={theme.palette.text.secondary} />;
   } else if (t.isAfter(now.subtract(1, "month"))) {
-    circle = <Circle color={theme.palette.warning.light} />;
+    circle = <Circle color={theme.experimental.roles.warning.fill.solid} />;
   } else if (t.isAfter(now.subtract(100, "year"))) {
-    circle = <Circle color={theme.experimental.roles.error.fill} />;
+    circle = <Circle color={theme.experimental.roles.error.fill.solid} />;
   } else {
     message = "Never";
   }

diff --git a/site/src/pages/WorkspacesPage/filter/filter.tsx b/site/src/pages/WorkspacesPage/filter/filter.tsx
@@ -215,7 +215,7 @@ const StatusIndicator: FC<StatusIndicatorProps> = ({ option }) => {
         height: 8,
         width: 8,
         borderRadius: 4,
-        backgroundColor: theme.experimental.roles[option.color].fill,
+        backgroundColor: theme.experimental.roles[option.color].fill.solid,
       }}
     />
   );