remove-stiches

tokens-studio · Dec 17, 2024 · 8b20f49 · 8b20f49
1 parent cc85d3b
commit 8b20f49
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 70 deletions.
diff --git a/packages/graph-editor/.storybook/preview.module.css b/packages/graph-editor/.storybook/preview.module.css
@@ -6,7 +6,7 @@
   width: 50%;
   bottom: 0;
   overflow: auto;
-  background: var(--colors-bgCanvas);
+  background: var(--color-neutral-canvas-default-bg);
   display: flex;
 }
 
@@ -16,7 +16,7 @@
 }
 
 .themeBlock.left {
-  border-right: 1px solid #202020;
+  border-right: 1px solid var(--color-neutral-stroke-subtle);
   right: 50%;
   left: 0;
 }

diff --git a/packages/graph-editor/.storybook/preview.tsx b/packages/graph-editor/.storybook/preview.tsx
@@ -1,7 +1,6 @@
 // .storybook/preview.tsx
 import React from 'react';
 import { Decorator } from '@storybook/react';
-import { createTheme, styled } from '../src/lib/stitches/index';
 import { darkTheme } from '@tokens-studio/tokens';
 import { Tooltip } from '@tokens-studio/ui';
 import { ReduxProvider } from '../src/redux/index.js';
@@ -16,11 +15,7 @@ import {
 } from '@storybook/blocks';
 
 import '../src/index.scss';
-
-const darkThemeMode = createTheme('dark-theme', {
-  colors: darkTheme.colors,
-  shadows: darkTheme.shadows,
-});
+import styles from './preview.module.scss';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -48,88 +43,48 @@ export const parameters = {
   },
 };
 
-const StyledThemeBlock = styled('div', {
-  position: 'absolute',
-  top: 0,
-  right: 0,
-  height: '100%',
-  width: '50%',
-  bottom: 0,
-  overflow: 'auto',
-  background: 'var(--color-neutral-canvas-minimal-bg)',
-  display: 'flex',
-  variants: {
-    fill: {
-      true: {
-        left: 0,
-        width: '100%',
-      },
-      false: {
-        left: '50%',
-      },
-    },
-    left: {
-      true: {
-        borderRight: '1px solid #202020',
-        right: '50%',
-        left: 0,
-      },
-    },
-  },
-});
-
-const StyledInner = styled('div', {
-  padding: '1rem',
-  display: 'flex',
-  alignItems: 'flex-start',
-  width: '100%',
-});
-
-const ThemeBlock = ({ children, ...props }) => {
+const ThemeBlock = ({ children, fill, left, ...props }) => {
   return (
-    <StyledThemeBlock {...props}>
-      <StyledInner>{children}</StyledInner>
-    </StyledThemeBlock>
+    <div 
+      className={`${styles.themeBlock} ${fill ? styles.fill : ''} ${left ? styles.left : ''}`} 
+      {...props}
+    >
+      <div className={styles.inner}>{children}</div>
+    </div>
   );
 };
 
-const Wrapper = ({ children }) => (
-  <ReduxProvider>
-    <Tooltip.Provider>{children}</Tooltip.Provider>
-  </ReduxProvider>
-);
-
 const withTheme: Decorator = (StoryFn, context) => {
   const theme = context.parameters.theme || context.globals.theme;
 
   if (context.viewMode === 'docs') {
     return (
-      <Wrapper>
+      <ReduxProvider>
         <StoryFn />
-      </Wrapper>
+      </ReduxProvider>
     );
   }
 
   switch (theme) {
     case 'side-by-side': {
       return (
-        <Wrapper>
-          <ThemeBlock left>
+        <ReduxProvider>
+          <div className={styles.left}>
             <StoryFn />
-          </ThemeBlock>
-          <ThemeBlock className={darkThemeMode}>
+          </div>
+          <div className={styles.right}>
             <StoryFn />
-          </ThemeBlock>
-        </Wrapper>
+          </div>
+        </ReduxProvider>
       );
     }
     default: {
       return (
-        <Wrapper>
-          <ThemeBlock fill className={theme === 'dark' ? darkThemeMode : ''}>
+        <ReduxProvider>
+          <div className={styles.fill}>
             <StoryFn />
-          </ThemeBlock>
-        </Wrapper>
+          </div>
+        </ReduxProvider>
       );
     }
   }

diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json
@@ -54,7 +54,6 @@
     "@radix-ui/react-toolbar": "^1.0.4",
     "@reactflow/node-resizer": "^2.2.8",
     "@rematch/core": "2.2.0",
-    "@stitches/react": "1.2.8",
     "@tokens-studio/graph-engine": "*",
     "@tokens-studio/icons": "^0.1.4",
     "@tokens-studio/tokens": "0.3.4",

diff --git a/packages/storybook-react/package.json b/packages/storybook-react/package.json
@@ -33,7 +33,6 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@stitches/react": "^1.2.8",
     "@tokens-studio/sd-transforms": "^0.15.2",
     "chokidar": "^3.6.0",
     "fbp-client": "^0.4.3",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -35,7 +35,6 @@
     "@opentelemetry/api-logs": "0.50.0",
     "@prisma/client": "5.16.2",
     "@radix-ui/react-popover": "^1.0.7",
-    "@stitches/react": "1.2.8",
     "@tanstack/react-query": "5.50.1",
     "@tanstack/react-query-devtools": "5.50.1",
     "@tokens-studio/graph-editor": "*",