tailwind css theme POC

reaviz · Mar 1, 2024 · fdce5d0 · fdce5d0
1 parent 751436c
commit fdce5d0
Show file tree

Hide file tree

Showing 18 changed files with 1,027 additions and 41 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -7,7 +7,8 @@ const config: StorybookConfig = {
   ],
   addons: [
     '@storybook/addon-storysource',
-    '@storybook/addon-essentials'
+    '@storybook/addon-essentials',
+    '@storybook/addon-themes'
   ],
   framework: {
     name: '@storybook/react-vite',

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -8,13 +8,25 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     color: var(--body-color) !important;
-    background: var(--body-background) !important;
     --icon-block-color: #fff;
     --icon-block-background: #000;
+
+    &.light {
+      background: #e6e6e6;
+    }
+    &.dark {
+      background: var(--body-background);
+    }
   }
-  .sb-show-main.sb-main-centered {
-    color: var(--body-color) !important;
-    background: var(--body-background) !important;
+
+  .light .sb-show-main.sb-main-centered {
+    color: var(--body-color);
+    background: #e6e6e6;
+  }
+
+  .dark .sb-show-main.sb-main-centered {
+    color: var(--body-color);
+    background: var(--body-background);
   }
   svg {
     overflow: visible;

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,16 +1,30 @@
-import { ThemeProvider, darkTheme } from '../src/utils/Theme';
 import theme from './theme';
 import { Preview } from '@storybook/react';
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+import { ThemeProvider, darkTheme } from '../src/utils/Theme';
+import { ThemeProvider as TWThemeProvider } from '../src/utils/Theme/TW';
+
+import '../src/index.css';
 
 const withProvider = (Story, context) => (
   <ThemeProvider theme={darkTheme}>
-    <Story {...context} />
+    <TWThemeProvider>
+      <Story {...context} />
+    </TWThemeProvider>
   </ThemeProvider>
 );
 
 const preview: Preview = {
   decorators: [
-    withProvider
+    withProvider,
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'dark',
+    }),
   ],
   parameters: {
     layout: 'centered',