Adjust UI to Support Dark Mode

.storybook/preview.tsx

@@ -62,7 +62,7 @@ const Panel = styled.div<{ orientation: "right" | "bottom" }>(
     // Add a backdrop to the outline because appBorderColor is semi-transparent
     boxShadow: `0 0 0 1px ${theme.background.content}`,
     background: theme.background.content,
-    color: theme.color.defaultText,
+    color: theme.base === "light" ? theme.color.dark : theme.color.mediumlight,
     fontSize: theme.typography.size.s2 - 1,
   })
 );

src/buildSteps.ts

@@ -34,7 +34,7 @@ export const BUILD_STEP_CONFIG: Record<
     key: "initialize",
     emoji: "🚀",
     renderName: () => `Initialize build`,
-    renderProgress: () => `Initializing build`,
+    renderProgress: () => `Initializing build...`,
     renderComplete: () => `Initialized`,
     estimateDuration: 2000,
   },
@@ -52,7 +52,7 @@ export const BUILD_STEP_CONFIG: Record<
     renderName: () => `Publish your Storybook`,
     renderProgress: ({ stepProgress }) => {
       const { numerator, denominator } = stepProgress.upload;
-      if (!denominator || !numerator) return `Uploading files`;
+      if (!denominator || !numerator) return `Uploading files...`;
       const { value: total, exponent } = filesize(denominator, {
         output: "object",
         round: 1,
@@ -62,7 +62,7 @@ export const BUILD_STEP_CONFIG: Record<
         output: "object",
         round: 1,
       });
-      return `Uploading files (${progress}/${total} ${symbol})`;
+      return `Uploading files (${progress}/${total} ${symbol})...`;
     },
     renderComplete: () => `Publish complete`,
     estimateDuration: 30_000,
@@ -82,8 +82,8 @@ export const BUILD_STEP_CONFIG: Record<
     renderProgress: ({ stepProgress }) => {
       const { numerator, denominator } = stepProgress.snapshot;
       return denominator
-        ? `Running visual tests (${numerator}/${denominator})`
-        : `Running visual tests`;
+        ? `Running visual tests (${numerator}/${denominator})...`
+        : `Running visual tests...`;
     },
     renderComplete: () => `Tested your stories`,
     estimateDuration: 60_000,

src/components/ActionButton.tsx

@@ -9,7 +9,7 @@ const themeColors = ({ theme, secondary, status }: { theme: Theme } & ActionButt
     return {
       color: theme.color.defaultText,
       backgroundColor: theme.background.app,
-      borderColor: theme.base === "dark" ? theme.color.darker : theme.color.medium,
+      borderColor: theme.base === "light" ? theme.color.medium : theme.color.darker,
       "&:hover": {
         color: theme.color.defaultText,
         backgroundColor: darken(0.03, theme.background.app),
@@ -43,9 +43,9 @@ const themeColors = ({ theme, secondary, status }: { theme: Theme } & ActionButt
     backgroundColor: theme.color.secondary,
     borderWidth: 0,
     borderColor:
-      theme.base === "dark"
-        ? darken(0.1, theme.color.secondary)
-        : lighten(0.2, theme.color.secondary),
+      theme.base === "light"
+        ? lighten(0.2, theme.color.secondary)
+        : darken(0.1, theme.color.secondary),
     "&:hover": {
       color: theme.color.lightest,
       backgroundColor: darken(0.05, theme.color.secondary),

src/components/BackButton.tsx

@@ -1,7 +1,8 @@
-import { Link } from "@storybook/components";
 import { styled } from "@storybook/theming";
 import React from "react";
 
+import { Link } from "./design-system";
+
 const OpaqueLink = styled(Link)({
   "&&": {
     fontSize: 13,

src/components/BrowserSelector.tsx

@@ -1,6 +1,6 @@
 import { TooltipNote, WithTooltip } from "@storybook/components";
 import { ChevronDownIcon } from "@storybook/icons";
-import { styled } from "@storybook/theming";
+import { styled, useTheme } from "@storybook/theming";
 import React, { ComponentProps } from "react";
 
 import { Browser, BrowserInfo, ComparisonResult } from "../gql/graphql";
@@ -25,7 +25,6 @@ const IconWrapper = styled.div(({ theme }) => ({
   gap: 6,
   height: 16,
   margin: "6px 7px",
-  color: `${theme.color.defaultText}99`,
   svg: {
     verticalAlign: "top",
   },
@@ -37,6 +36,7 @@ const Label = styled.span(({ theme }) => ({
   "@container (min-width: 300px)": {
     display: "inline-block",
   },
+  color: theme.base === "light" ? `${theme.color.defaultText}99` : theme.color.light,
 }));
 
 type BrowserData = Pick<BrowserInfo, "id" | "key" | "name">;
@@ -54,6 +54,7 @@ export const BrowserSelector = ({
   browserResults,
   onSelectBrowser,
 }: BrowserSelectorProps) => {
+  const theme = useTheme();
   const aggregate = aggregateResult(browserResults.map(({ result }) => result));
   if (!aggregate) return null;
 
@@ -92,7 +93,10 @@ export const BrowserSelector = ({
         <TooltipMenu placement="bottom" links={links}>
           {icon}
           <Label>{selectedBrowser.name}</Label>
-          <ChevronDownIcon style={{ width: 10, height: 10 }} />
+          <ChevronDownIcon
+            size={10}
+            color={theme.base === "light" ? `${theme.color.defaultText}99` : theme.color.light}
+          />
         </TooltipMenu>
       ) : (
         <IconWrapper>

src/components/BuildProgressBarInline.tsx

@@ -11,6 +11,11 @@ const ProgressTextWrapper = styled(Text)({
   flexDirection: "column",
   gap: 10,
   width: 200,
+  marginTop: 15,
+});
+
+const StyledBuildProgressLabel = styled(BuildProgressLabel)({
+  fontSize: 12,
 });
 
 export function BuildProgressInline({
@@ -19,16 +24,13 @@ export function BuildProgressInline({
   localBuildProgress: LocalBuildProgress;
 }) {
   return (
-    <ProgressTextWrapper
-      as="div"
-      style={{ display: "flex", flexDirection: "column", gap: 10, width: 200 }}
-    >
+    <ProgressTextWrapper as="div">
       <ProgressTrack>
         {typeof localBuildProgress.buildProgressPercentage === "number" && (
           <ProgressBar style={{ width: `${localBuildProgress.buildProgressPercentage}%` }} />
         )}
       </ProgressTrack>
-      <BuildProgressLabel localBuildProgress={localBuildProgress} />
+      <StyledBuildProgressLabel localBuildProgress={localBuildProgress} />
     </ProgressTextWrapper>
   );
 }

src/components/BuildProgressLabel.tsx

@@ -11,11 +11,13 @@ interface BuildProgressLabelProps {
 export const BuildProgressLabel = ({
   localBuildProgress,
   withEmoji = false,
+
+  ...props
 }: BuildProgressLabelProps) => {
   const { emoji, renderProgress } = BUILD_STEP_CONFIG[localBuildProgress.currentStep];
   const label = renderProgress(localBuildProgress);
   return (
-    <span>
+    <span {...props}>
       {withEmoji && emoji} {label}
     </span>
   );

src/components/Button.tsx

@@ -17,9 +17,6 @@ export const Button = styled(BaseButton)<{
       "@container (min-width: 800px)": {
         padding: "8px 10px",
       },
-      svg: {
-        marginRight: 6,
-      },
     },
   },
   ({ link, theme }) =>
@@ -30,8 +27,8 @@ export const Button = styled(BaseButton)<{
         boxShadow: "none",
         padding: 2,
         fontWeight: "normal",
-        color: theme.color.defaultText,
-        opacity: 0.5,
+        color: theme.base === "light" ? theme.color.darkest : theme.color.lightest,
+        opacity: 0.6,
         transition: "opacity 150ms ease-out",
         "&:hover, &:focus": {
           opacity: 0.9,

src/components/ButtonStack.tsx

@@ -0,0 +1,9 @@
+import { styled } from "@storybook/theming";
+
+export const ButtonStack = styled.div(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: 5,
+  alignItems: "center",
+  textAlign: "center",
+}));

src/components/Code.tsx

@@ -0,0 +1,9 @@
+import { Code as SBCode } from "@storybook/components";
+import { styled } from "@storybook/theming";
+
+export const Code = styled(SBCode)(({ theme }) => ({
+  color: theme.base === "light" ? theme.color.darker : theme.color.lighter,
+  border: `1px solid ${theme.appBorderColor}`,
+  fontSize: "12px",
+  padding: "2px 3px",
+}));

src/components/Eyebrow.tsx

@@ -2,8 +2,8 @@ import { styled } from "@storybook/theming";
 
 export const Eyebrow = styled.div(({ theme }) => ({
   background: theme.background.app,
-  borderBottom: `1px solid ${theme.appBorderColor}`,
   padding: "10px 15px",
   lineHeight: "20px",
   color: theme.color.defaultText,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
 }));

src/components/FooterMenu.tsx

@@ -41,7 +41,7 @@ export const FooterMenu = () => {
       ? [
           {
             id: "visit",
-            title: "Visit Project on Chromatic",
+            title: "Visit project on Chromatic",
             icon: <ShareAltIcon aria-hidden />,
             href: projectId
               ? `https://www.chromatic.com/builds?appId=${projectId?.split(":")[1]}`

src/components/Heading.tsx

@@ -1,7 +1,9 @@
 import { styled } from "@storybook/theming";
 
-export const Heading = styled.h1({
-  margin: 0,
+export const Heading = styled.h1(({ theme }) => ({
+  marginTop: 0,
+  marginBottom: 4,
   fontSize: "1em",
   fontWeight: "bold",
-});
+  color: theme.base === "light" ? theme.color.defaultText : theme.color.lightest,
+}));

src/components/ModeSelector.tsx

@@ -1,6 +1,6 @@
 import { TooltipNote, WithTooltip } from "@storybook/components";
 import { ChevronDownIcon, DiamondIcon } from "@storybook/icons";
-import { styled } from "@storybook/theming";
+import { styled, useTheme } from "@storybook/theming";
 import React from "react";
 
 import { ComparisonResult, TestMode } from "../gql/graphql";
@@ -17,6 +17,9 @@ const IconWrapper = styled.div(({ theme }) => ({
   color: `${theme.color.defaultText}99`,
   svg: {
     verticalAlign: "top",
+    path: {
+      fill: theme.base === "light" ? `${theme.color.defaultText}99` : theme.color.light,
+    },
   },
 }));
 
@@ -26,6 +29,7 @@ const Label = styled.span(({ theme }) => ({
   "@container (min-width: 300px)": {
     display: "inline-block",
   },
+  color: theme.base === "light" ? `${theme.color.defaultText}99` : theme.color.light,
 }));
 
 type ModeData = Pick<TestMode, "name">;
@@ -45,10 +49,15 @@ export const ModeSelector = ({
   onSelectMode,
   selectedMode,
 }: ModeSelectorProps) => {
+  const theme = useTheme();
   const aggregate = aggregateResult(modeResults.map(({ result }) => result));
   if (!aggregate) return null;
 
-  let icon = <DiamondIcon />;
+  let icon = (
+    <DiamondIcon
+      color={theme.base === "light" ? `${theme.color.defaultText}99` : theme.color.light}
+    />
+  );
   if (!isAccepted && aggregate !== ComparisonResult.Equal && modeResults.length >= 2) {
     icon = <StatusDotWrapper status={aggregate}>{icon}</StatusDotWrapper>;
   }

src/components/SidebarToggleButton.tsx

@@ -23,11 +23,15 @@ const Button = styled(IconButton)(
     !active &&
     css({
       "&:hover": {
-        color: theme.color.defaultText,
+        color: theme.base === "light" ? theme.color.defaultText : theme.color.light,
       },
     })
 );
 
+const Label = styled.span(({ theme }) => ({
+  color: theme.base === "light" ? theme.color.defaultText : theme.color.light,
+}));
+
 interface SidebarToggleButtonProps {
   count: number;
   onEnable: () => void;
@@ -55,7 +59,7 @@ export const SidebarToggleButton = React.memo(function SidebarToggleButton({
       <Badge status="warning" data-badge={filter}>
         {count}
       </Badge>
-      <span>{pluralize("Change", count)}</span>
+      <Label>{pluralize("Change", count)}</Label>
     </Button>
   );
 });

src/components/SidebarTopButton.tsx

@@ -11,7 +11,7 @@ import { StatusDotWrapper } from "./StatusDot";
 export const TooltipContent = styled.div(({ theme }) => ({
   width: 220,
   padding: 3,
-  color: theme.color.defaultText,
+  color: theme.base === "light" ? theme.color.defaultText : theme.color.light,
 
   "& > div": {
     margin: 7,
@@ -21,7 +21,8 @@ export const TooltipContent = styled.div(({ theme }) => ({
 export const ProgressTrack = styled.div(({ theme }) => ({
   height: 5,
   background: theme.background.hoverable,
-  borderRadius: 1,
+  borderRadius: 5,
+  overflow: "hidden",
 }));
 
 export const ProgressBar = styled(ProgressTrack)(({ theme }) => ({
@@ -72,6 +73,7 @@ export const SidebarIconButton = styled(IconButton)<ComponentProps<typeof IconBu
     color: theme.textMutedColor,
     marginTop: 0,
     zIndex: 1,
+    marginRight: 4,
   })
 );
 
@@ -107,7 +109,7 @@ export const SidebarTopButton = ({
         }
       >
         <SidebarIconButton aria-label="Stop tests" onClick={() => stopBuild()}>
-          <StopAltIcon style={{ width: 10 }} />
+          <StopAltIcon style={{ width: 10, margin: 2 }} />
           <ProgressCircle xmlns="http://www.w3.org/2000/svg">
             <circle />
           </ProgressCircle>