@atlaskit/storybook-addon-design-system/dist/es2019/decorator.js

Design token storybook addon

import React, { Fragment } from 'react';
import { useEffect } from '@storybook/preview-api';
import { setGlobalTheme } from '@atlaskit/tokens/set-global-theme';
const splitColumnStyles = {
  position: 'absolute',
  boxSizing: 'border-box',
  width: '50vw',
  height: '100vh',
  overflow: 'auto',
  padding: '10px',
  background: "var(--ds-surface, #FFFFFF)",
  color: "var(--ds-text, #292A2E)"
};
const stackColumnStyles = {
  position: 'absolute',
  boxSizing: 'border-box',
  width: '100%',
  height: '50%',
  overflow: 'auto',
  padding: '10px',
  background: "var(--ds-surface, #FFFFFF)",
  color: "var(--ds-text, #292A2E)"
};
const withDesignTokens = (StoryFn, context) => {
  const theme = context.globals.adsTheme || 'auto';

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    (async () => {
      switch (theme) {
        case 'light':
        case 'dark':
        case 'auto':
          await setGlobalTheme({
            colorMode: theme,
            spacing: 'spacing',
            shape: 'shape',
            typography: 'typography',
            motion: 'motion'
          });
          break;
        case 'split':
        case 'stack':
          await setGlobalTheme({
            colorMode: 'auto',
            spacing: 'spacing',
            shape: 'shape',
            typography: 'typography',
            motion: 'motion'
          });
          document.documentElement.querySelectorAll('style[data-theme]').forEach(el => {
            const clone = el.cloneNode(true);
            clone.setAttribute('data-theme', clone.getAttribute('data-theme') + '-clone');
            // HACK: re-target theme selectors to split div containers
            clone.textContent = clone.textContent.replace(/html\[/g, '[');
            document.head.append(clone);
          });
          break;
        case 'none':
          delete document.documentElement.dataset.theme;
          delete document.documentElement.dataset.colorMode;
          document.documentElement.querySelectorAll('style[data-theme]').forEach(el => el.remove());
          break;
        default:
          break;
      }
    })();
  }, [context.id, theme]);
  function renderStory() {
    const story = StoryFn({
      ...context,
      globals: {
        ...context.globals,
        adsTheme: theme
      }
    });
    if (theme === 'split' || theme === 'stack') {
      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
        "data-theme": "light:light",
        "data-color-mode": "light"
        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
        ,
        style: theme === 'split' ? {
          ...splitColumnStyles,
          inset: '0px 50vw 0px 0px'
        } : {
          ...stackColumnStyles,
          inset: '0px 0px 50% 0px'
        }
      }, story), /*#__PURE__*/React.createElement("div", {
        "data-theme": "dark:dark",
        "data-color-mode": "dark"
        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
        ,
        style: theme === 'split' ? {
          ...splitColumnStyles,
          inset: '0px 0px 0px 50vw'
        } : {
          ...stackColumnStyles,
          inset: '50% 0px 0px 0px'
        }
      }, story));
    }
    return /*#__PURE__*/React.createElement("div", null, story);
  }
  return renderStory();
};
export default withDesignTokens;