chore: add Storybook tool for dark mode (#1721)

Author: jzempel

.storybook/main.js

@@ -15,7 +15,7 @@ const PACKAGE_NAMES = readdirSync(path.resolve(__dirname, '../packages')).filter
 );
 
 module.exports = {
-  stories: ['../packages/*/demo/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: [`../packages/${process.env.PACKAGE || '*'}/demo/**/*.stories.@(js|jsx|ts|tsx|mdx)`],
   staticDirs: ['./static'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-designs'],
   framework: {

.storybook/preview.js

@@ -8,13 +8,16 @@
 import React, { StrictMode } from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { create } from '@storybook/theming/create';
-import { ThemeProvider, DEFAULT_THEME } from '../packages/theming/src';
+import { ThemeProvider, DEFAULT_THEME, getColor } from '../packages/theming/src';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: {
-    disable: true,
-    grid: { disable: true }
+    grid: { disable: true },
+    values: [
+      { name: 'light', value: DEFAULT_THEME.colors.background },
+      { name: 'dark', value: DEFAULT_THEME.colors.foreground }
+    ]
   },
   controls: {
     hideNoControlsWarning: true,
@@ -50,11 +53,19 @@ const withThemeProvider = (story, context) => {
     document.querySelector('link[href$="bedrock/dist/index.css"]').setAttribute('disabled', true);
   }
 
-  const theme = {
-    ...DEFAULT_THEME,
-    colors: { ...DEFAULT_THEME.colors, primaryHue: context.globals.primaryHue },
-    rtl
-  };
+  const colors = { ...DEFAULT_THEME.colors, primaryHue: context.globals.primaryHue };
+
+  if (
+    context.globals.backgrounds && context.globals.backgrounds.value !== 'transparent'
+      ? context.globals.backgrounds.value === DEFAULT_THEME.colors.foreground
+      : context.parameters.backgrounds.default === 'dark'
+  ) {
+    colors.base = 'dark';
+    colors.background = getColor('neutralHue', 900, DEFAULT_THEME);
+    colors.foreground = getColor('neutralHue', 200, DEFAULT_THEME);
+  }
+
+  const theme = { ...DEFAULT_THEME, colors, rtl };
 
   return (
     <ThemeProvider theme={theme}>

packages/theming/src/elements/ThemeProvider.tsx

@@ -9,7 +9,7 @@ import React, { PropsWithChildren, useRef } from 'react';
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
-import { IThemeProviderProps } from '../types';
+import { IGardenTheme, IThemeProviderProps } from '../types';
 import DEFAULT_THEME from './theme';
 import { useDocument } from '../utils/useDocument';
 
@@ -20,7 +20,7 @@ export const ThemeProvider = ({
   ...other
 }: PropsWithChildren<IThemeProviderProps>) => {
   const scopeRef = useRef<HTMLDivElement>(null);
-  const relativeDocument = useDocument(theme);
+  const relativeDocument = useDocument(theme as IGardenTheme);
   const controlledScopeRef =
     focusVisibleRef === null
       ? React.createRef<HTMLElement>()

packages/theming/src/types/index.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { ThemeProps } from 'styled-components';
+import { ThemeProviderProps } from 'styled-components';
 
 export const ARROW_POSITION = [
   'top',
@@ -146,13 +146,13 @@ export interface IGardenTheme {
   palette: Record<string, Hue>;
 }
 
-export interface IThemeProviderProps extends Partial<ThemeProps<IGardenTheme>> {
+export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenTheme>> {
   /**
    * Provides values for component styling. See styled-components
    * [`ThemeProvider`](https://styled-components.com/docs/api#themeprovider)
    * for details.
    */
-  theme?: IGardenTheme;
+  theme?: IGardenTheme | ((theme: IGardenTheme) => IGardenTheme);
   /**
    * Provides a reference to the DOM node used to scope a `:focus-visible`
    * polyfill. If left `undefined`, a scoping `<div>` will be rendered.