feat: Dark Mode

.gitignore

@@ -108,3 +108,12 @@ storybook-static
 
 # OS Files
 .DS_Store
+
+# Yarn 3 files
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.storybook/preview.js

@@ -1,12 +1,19 @@
-import { defaultTheme } from "../packages/components/src/core/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { theme } from "../packages/components/src/core/styles";
 import { ThemeProvider } from "@mui/material/styles";
 
 export const decorators = [
-  (Story) => (
-    <ThemeProvider theme={defaultTheme}>
-      <Story />
-    </ThemeProvider>
-  ),
+  (Story, context) => {
+    const { theme: storybookTheme } = context.globals;
+
+    return (
+      <ThemeProvider theme={theme(storybookTheme)}>
+        {/* CssBaseline provides light/dark background MUI theme for all stories */}
+        <CssBaseline />
+        <Story />
+      </ThemeProvider>
+    );
+  },
 ];
 
 /**
@@ -15,8 +22,26 @@ export const decorators = [
  * https://github.com/chromaui/storybook-addon-pseudo-states/issues/59#issuecomment-1498182067
  */
 const preview = {
+  parameters: {
+    // Removes the change background button since it's controlled by the theme toggle
+    backgrounds: { disable: true },
+  },
   globalTypes: {
     pseudo: {},
+    theme: {
+        description: 'Global theme for components',
+        defaultValue: 'light',
+        toolbar: {
+            title: 'Theme',
+            icon: 'circlehollow',
+            dynamicTitle: true,
+            items: [
+                { value: 'light', left: '☀️', title: 'Light mode' },
+                { value: 'dark', left: '🌙', title: 'Dark mode' },
+            ],
+        },
+    },
   },
 };
+
 export default preview;

README.md

@@ -94,7 +94,7 @@ export const Title - styled(Typography)`
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
 import { styled } from '@mui/material/styles';
-import { getColors, getCorners } from "@czi-sds/components";
+import { getColors, getSpaces } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way

packages/components/src/core/Alert/index.stories.tsx

@@ -4,20 +4,20 @@ import { styled } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
 import React from "react";
 import Button from "../Button";
-import { defaultTheme } from "../styles/common/defaultTheme";
 import Alert from "./index";
 
-const DismissButton = styled(Button)`
-  margin-left: -${defaultTheme.spacing(3)}px;
+const DismissButton = styled(Button)(
+  ({ theme }) => `
+  margin-left: -${theme.spacing(3)}px;
   padding-bottom: 0;
   font-size: 12px;
   line-height: 18px;
   letter-spacing: 1px;
   font-weight: 600;
   &:hover {
     background: none;
-  }
-`;
+  }`
+);
 
 const Demo = (props: Args): JSX.Element => {
   const { text } = props;

packages/components/src/core/Alert/style.ts

@@ -1,7 +1,6 @@
 import { Alert } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { getColors, getShadows, getSpaces } from "../styles";
-import { defaultTheme } from "../styles/common/defaultTheme";
 
 export const StyledAlert = styled(Alert)`
   ${(props) => {
@@ -17,7 +16,7 @@ export const StyledAlert = styled(Alert)`
     return `
       background-color: ${backgroundColor};
       margin: ${spacings?.m}px 0;
-      color: ${defaultTheme.palette.text.primary};
+      color: ${props.theme.palette.text.primary};
       padding: ${spacings?.l}px ${spacings?.l}px
         ${spacings?.l}px 9px;
       background-color: ${alertColor};

packages/components/src/core/ButtonIcon/index.stories.tsx

@@ -1,6 +1,7 @@
+import { useTheme } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
 import React from "react";
-import { defaultAppTheme } from "../styles";
+import { SDSTheme } from "../styles";
 import RawButtonIcon from "./index";
 import { ButtonIconExtraProps, ButtonIconSizeToTypes } from "./style";
 
@@ -95,7 +96,8 @@ export const Default = {
 // Live Preview
 
 const LivePreviewDemo = (): JSX.Element => {
-  const spacings = defaultAppTheme?.spacing;
+  const theme: SDSTheme = useTheme();
+  const spacings = theme.app?.spacing;
 
   const livePreviewStyles: React.CSSProperties = {
     alignItems: "center",

packages/components/src/core/Callout/style.ts

@@ -8,7 +8,6 @@ import {
   getIconSizes,
   getSpaces,
 } from "../styles";
-import { defaultTheme } from "../styles/common/defaultTheme";
 
 interface CalloutExtraProps extends CommonThemeProps {
   collapsed?: boolean;
@@ -39,12 +38,13 @@ export const StyledCallout = styled(Alert, {
     // any buttom margin
     const titleBottomMargin = props.collapsed ? "margin-bottom: 0;" : "";
 
+    // TODO: Theme shouldn't be saying it might be null
     return `
       background-color: ${backgroundColor};
       width: 360px;
       margin: ${spacings?.m}px 0;
       border-radius: ${corners?.m}px;
-      color: ${defaultTheme.palette.text.primary};
+      color: ${props.theme?.palette.text.primary};
       padding: ${spacings?.m}px;
       background-color: ${calloutColor};
 

packages/components/src/core/DialogTitle/style.ts

@@ -24,7 +24,11 @@ export const StyledDialogTitle = styled(DialogTitle)`
 export const Title = styled(Typography)`
   ${fontHeaderXl}
 
-  color: black;
+  ${(props) => {
+    return `
+      color: ${props.theme.palette.text.primary};
+    `;
+  }}
 `;
 
 export const Subtitle = styled(Typography)`
@@ -34,7 +38,7 @@ export const Subtitle = styled(Typography)`
     const colors = getColors(props);
 
     return `
-      color: ${colors?.gray[500]};
+      color: ${props.theme.palette.text.secondary};
     `;
   }}
 `;

packages/components/src/core/LoadingIndicator/index.stories.tsx

@@ -1,6 +1,7 @@
+import { useTheme } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
 import React from "react";
-import { defaultAppTheme } from "../styles";
+import { SDSTheme } from "../styles";
 import RawLoadingIndicator from "./index";
 
 const LoadingIndicator = (props: Args): JSX.Element => {
@@ -37,7 +38,8 @@ export const CustomAriaLabel = {
 // Live Preview
 
 const LivePreviewDemo = (props: Args): JSX.Element => {
-  const spacings = defaultAppTheme?.spacing;
+  const theme: SDSTheme = useTheme();
+  const spacings = theme.app?.spacing;
 
   const livePreviewStyles = {
     display: "grid",

packages/components/src/core/Notification/style.ts

@@ -8,7 +8,6 @@ import {
   getShadows,
   getSpaces,
 } from "../styles";
-import { defaultTheme } from "../styles/common/defaultTheme";
 
 const fontBodyXs = fontBody("xs");
 
@@ -33,7 +32,7 @@ export const StyledNotification = styled(Alert)`
       box-sizing: border-box;
       margin: ${spacings?.m}px 0;
       border-radius: ${corners?.m}px;
-      color: ${defaultTheme.palette.text.primary};
+      color: ${props.theme.palette.text.primary};
       padding: ${spacings?.l}px;
       align-items: flex-start;
       background-color: ${notificationColor};

packages/components/src/core/Tabs/style.tsx

@@ -51,7 +51,9 @@ export const StyledTabs = styled(TempTabs, {
     return `
       margin-top: ${isLarge ? spaces?.l : spaces?.m}px;
       margin-bottom: ${isLarge ? spaces?.xl : spaces?.m}px;
-      border-bottom: ${underlined ? `2px solid ${colors?.gray[200]};` : "none"};
+      border-bottom: ${
+        underlined ? `2px solid ${props.theme.palette.divider};` : "none"
+      };
     `;
   }}
 `;
@@ -89,26 +91,26 @@ export const StyledTab = styled(RawTab, {
       // (thuang): Large Tab height is 30px, the offset is 4px
       height: ${isLarge ? 26 : 22}px;
 
-      color: ${colors?.gray[500]};
+      color: ${props.theme.palette.text.secondary};
 
       &:hover, :focus {
-        color: black;
+        color: ${props.theme.palette.text.primary};
       }
 
       &.Mui-selected {
-        color: black;
+        color: ${props.theme.palette.text.primary};
 
         &:hover {
-          color: black;
+          color: ${props.theme.palette.text.primary};
         }
       }
 
       &:active {
-        color: black;
+        color: ${props.theme.palette.text.primary};
       }
 
       &:disabled {
-        color: ${colors?.gray[200]};
+        color: ${props.theme.palette.text.disabled};
       }
     `;
   }}