pivotal-181957167 switch theme css

.storybook/preview.js

@@ -11,17 +11,20 @@ export const parameters = {
   },
 }
 
-const themeKeys = Object.keys(AVAILABLE_THEMES)
-
 export const globalTypes = {
   theme: {
     name: 'Theme',
     description: 'Switch theme for preview',
-    defaultValue: themeKeys[0],
+    defaultValue: AVAILABLE_THEMES[0].key,
     toolbar: {
-      items: themeKeys.map((key) => {
-        return { value: key, title: AVAILABLE_THEMES[key] }
+      items: AVAILABLE_THEMES.map((theme) => {
+        return {
+          value: theme.key,
+          title: theme.title,
+          right: theme.key,
+        }
       }),
+      dynamicTitle: true, // https://github.com/storybookjs/storybook/issues/17790
       showName: true,
     },
   },

package.json

@@ -71,6 +71,7 @@
     "typescript": "^4.5.4",
     "vite": "^2.9.0",
     "vite-plugin-dts": "^1.0.5",
+    "vite-plugin-dynamic-import": "^0.9.3",
     "vite-plugin-eslint": "^1.6.0"
   },
   "lint-staged": {

src/helpers/ThemeProvider.tsx

@@ -1,20 +1,32 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useState } from 'react'
 import { Tokens } from '../../tokens'
 
-export const AVAILABLE_THEMES = {
-  org: 'betterplace.org',
-  at: 'betterplace.at',
-  me: 'betterplace.me',
-}
-
-type Theme = keyof typeof AVAILABLE_THEMES
+export const AVAILABLE_THEMES = [
+  {
+    key: 'org',
+    title: 'betterplace.org',
+  },
+  {
+    key: 'at',
+    title: 'betterplace.at',
+  },
+  {
+    key: 'me',
+    title: 'betterplace.me',
+  },
+] as const
+
+const keys = AVAILABLE_THEMES.map((theme) => theme.key)
+type Theme = typeof keys[number]
 
 type ThemeProviderProps = {
   theme: Theme
   children: ReactNode
 }
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
+  const [themeStyles, setThemeStyles] = useState('')
+
   const tokens = {
     globals: Tokens.globals,
     [props.theme]: Tokens[props.theme],
@@ -24,9 +36,14 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
 
   const ThemeContext = React.createContext(props.theme)
 
+  import(`../../src/lib/theme/theme-${props.theme}.css`).then((styles) => {
+    setThemeStyles(styles.default)
+  })
+
   return (
     <ThemeContext.Provider value={props.theme}>
-      <div className={'theme-' + props.theme}>{props.children}</div>
+      <style id="theme">{themeStyles}</style>
+      {props.children}
     </ThemeContext.Provider>
   )
 }

src/lib/theme/theme-at.css

@@ -0,0 +1,4 @@
+:root {
+  --primary: #357c00;
+  --secondary: #6d2c64;
+}

src/lib/theme/theme-me.css

@@ -0,0 +1,4 @@
+:root {
+  --primary: #ff854d;
+  --secondary: #00a0c8;
+}

src/lib/theme/theme-org.css

@@ -0,0 +1,4 @@
+:root {
+  --primary: #9ecb0a;
+  --secondary: #a75c96;
+}

src/stories/foundations/Colors.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+export default {
+  title: 'Foundations/Design Tokens/Colors',
+} as ComponentMeta<typeof ColorSwatch>
+
+type ColorSwatchProps = {
+  colors: string[]
+}
+
+const ColorSwatch = ({ colors }: ColorSwatchProps) => {
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
+      {colors.map((color: string) => {
+        return <div key={color} style={{ width: '4rem', height: '4rem', backgroundColor: `var(--${color})` }}></div>
+      })}
+    </div>
+  )
+}
+
+const Template: ComponentStory<typeof ColorSwatch> = (args) => <ColorSwatch {...args} />
+
+export const MainColors = Template.bind({})
+MainColors.args = {
+  colors: ['primary', 'secondary'],
+}

vite.config.ts

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
 import path from 'node:path'
 import dts from 'vite-plugin-dts'
 import eslint from 'vite-plugin-eslint'
+import dynamicImport from 'vite-plugin-dynamic-import'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -12,6 +13,7 @@ export default defineConfig({
     dts({
       insertTypesEntry: true,
     }),
+    dynamicImport(),
   ],
   build: {
     lib: {

yarn.lock

@@ -3088,6 +3088,11 @@ acorn-walk@^7.2.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
+acorn-walk@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^6.4.1:
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
@@ -11303,6 +11308,14 @@ vite-plugin-dts@^1.0.5:
     fs-extra "^10.0.1"
     ts-morph "^14.0.0"
 
+vite-plugin-dynamic-import@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-0.9.3.tgz#72e9801ca19476a5ec62b2b1665aede5d9821e4e"
+  integrity sha512-hIyHfiPkIKPq9gNBKCE++jZd0ICYmfWC5IgEspaM2TCFHQtjkqgkTSqjLtYWZeKM8c2u7nt5BReYIljQMHQdFA==
+  dependencies:
+    fast-glob "^3.2.11"
+    vite-plugin-utils "^0.1.0"
+
 vite-plugin-eslint@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vite-plugin-eslint/-/vite-plugin-eslint-1.6.0.tgz#6fc7e258c81893ecbc21e82d192e33c146be7c30"
@@ -11321,6 +11334,14 @@ vite-plugin-mdx@^3.5.6:
     resolve "^1.20.0"
     unified "^9.2.1"
 
+vite-plugin-utils@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-utils/-/vite-plugin-utils-0.1.0.tgz#3813082dad7c534cb53cc63b660b3150d2d048b1"
+  integrity sha512-zmW5venCPEZ5hRDmwhHdxHAcmTXYBF0MobZQQBGz92VkdHR9Mm3hf7dioPnA7ahHs32HdjI1Bpxisg5IhH4bvg==
+  dependencies:
+    acorn-walk "^8.2.0"
+    fast-glob "^3.2.11"
+
 vite@^2.9.0:
   version "2.9.6"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.6.tgz#29f1b33193b0de9e155d67ba0dd097501c3c3281"