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,16 @@
-import { defaultTheme } from "../packages/components/src/core/styles";
+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)}>
+        <Story />
+      </ThemeProvider>
+    );
+  },
 ];
 
 /**
@@ -17,6 +21,20 @@ export const decorators = [
 const preview = {
   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,6 @@
 import { Args, Meta } from "@storybook/react";
 import React from "react";
-import { defaultAppTheme } from "../styles";
+import { sharedAppTheme } from "../styles";
 import RawButtonIcon from "./index";
 import { ButtonIconExtraProps, ButtonIconSizeToTypes } from "./style";
 
@@ -95,7 +95,7 @@ export const Default = {
 // Live Preview
 
 const LivePreviewDemo = (): JSX.Element => {
-  const spacings = defaultAppTheme?.spacing;
+  const spacings = sharedAppTheme?.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/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 => {
@@ -30,7 +31,8 @@ export const Default = {
 // 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};