Merge branch 'master' of github.com:DevoInc/genesys-design-system

# Conflicts:
#	.storybook/preview.tsx

.storybook/preview.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
-import { ThemeProvider } from 'styled-components';
-import { Preview, ReactRenderer } from '@storybook/react';
-import { DocsContainer } from '@storybook/blocks';
-import { create } from '@storybook/theming/create';
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-
-import { light, dark } from '@devoinc/genesys-brand-devo';
+import { Preview } from '@storybook/react';
+import { PREFER_UI_THEME, DocContainer, themeDecorator } from './theming';
 
 import '@devoinc/genesys-base-styles/dist/css/styles.min.css';
 import './preview.scss';
@@ -25,53 +20,12 @@ export const createCustomComponents = (tagsList: (keyof React.ReactHTML)[]) => {
   }, {});
 };
 
-const customLightTheme = create({
-  base: 'light',
-  fontBase: '"Poppins", sans-serif',
-  fontCode: '"Mono Font", monospace',
-  textColor: '#5B6870',
-  textInverseColor: 'rgba(255,255,255,0.9)',
-});
-const customDarkTheme = create({
-  base: 'dark',
-  fontBase: '"Poppins", sans-serif',
-  fontCode: '"Mono Font", monospace',
-});
-
-// const THEME_CHANNEL = 'globalsUpdated';
-
-const preferTheme =
-  window?.matchMedia &&
-  window?.matchMedia('(prefers-color-scheme: dark)')?.matches
-    ? 'dark'
-    : 'light';
-
 const preview: Preview = {
-  decorators: [
-    // Themes
-    withThemeFromJSXProvider<ReactRenderer>({
-      themes: {
-        light,
-        dark,
-      },
-      defaultTheme: preferTheme,
-      Provider: ThemeProvider,
-    }),
-  ],
-
+  decorators: themeDecorator,
   parameters: {
     docs: {
-      theme: preferTheme === 'dark' ? customDarkTheme : customLightTheme,
-      container: ({ context, children }) => {
-        return (
-          // Theme for the doc
-          <div className="dali-wrapper dali-wrapper--default">
-            <DocsContainer context={context}>
-              <ThemeProvider theme={light}>{children}</ThemeProvider>
-            </DocsContainer>
-          </div>
-        );
-      },
+      theme: PREFER_UI_THEME,
+      container: DocContainer,
       components: createCustomComponents([
         'div',
         'h1',

.storybook/theming/DocContainer.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { DocsContainer as SBDocsContainer } from '@storybook/blocks';
+
+import { light } from '@devoinc/genesys-brand-devo';
+
+export const DocContainer = ({ context, children }) => (
+  <div className="dali-wrapper dali-wrapper--default">
+    <SBDocsContainer context={context}>
+      <ThemeProvider theme={light}>{children}</ThemeProvider>
+    </SBDocsContainer>
+  </div>
+);

.storybook/theming/constants.ts

@@ -0,0 +1,5 @@
+export const PREFER_THEME =
+  window?.matchMedia &&
+  window?.matchMedia('(prefers-color-scheme: dark)')?.matches
+    ? 'dark'
+    : 'light';

.storybook/theming/decorator.ts

@@ -0,0 +1,15 @@
+import { ReactRenderer } from '@storybook/react';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import { light, dark } from '@devoinc/genesys-brand-devo';
+import { ThemeProvider } from 'styled-components';
+
+// import { PREFER_THEME } from './constants';
+
+export const themeDecorator = withThemeFromJSXProvider<ReactRenderer>({
+  themes: {
+    light,
+    dark,
+  },
+  defaultTheme: 'light', // PREFER_THEME,
+  Provider: ThemeProvider,
+});

.storybook/theming/index.ts

@@ -0,0 +1,4 @@
+export * from './ui';
+export * from './decorator';
+export * from './constants';
+export * from './DocContainer';

.storybook/theming/ui.tsx

@@ -0,0 +1,24 @@
+import { create } from '@storybook/theming/create';
+
+// import { PREFER_THEME } from './constants';
+
+const uiLightTheme = create({
+  base: 'light',
+  fontBase: '"Poppins", sans-serif',
+  fontCode: '"Mono Font", monospace',
+  textColor: '#5B6870',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+});
+
+const uiDarkTheme = create({
+  base: 'dark',
+  fontBase: '"Poppins", sans-serif',
+  fontCode: '"Mono Font", monospace',
+});
+
+export const uiThemeMap = {
+  light: uiLightTheme,
+  dark: uiDarkTheme,
+};
+
+export const PREFER_UI_THEME = uiThemeMap.light; // uiThemeMap[PREFER_THEME];