fleekxyz · csosamorales · Jan 20, 2023 · Jan 13, 2023 · Jan 13, 2023 · Jan 13, 2023
diff --git a/ui/.storybook/preview-head.html b/ui/.storybook/preview-head.html
@@ -1,3 +1,7 @@
+<link
+  href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap"
+  rel="stylesheet"
+/>
 <script>
   window.global = window;
-</script>
+</script>
diff --git a/ui/.storybook/preview.js b/ui/.storybook/preview.js
@@ -1,3 +1,10 @@
+import { dripStitches } from '../src/theme/stitches';
+import addons from '@storybook/addons';
+import { useEffect } from 'react';
+import { themes } from '@storybook/theming';
+
+const channel = addons.getChannel();
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
@@ -7,3 +14,35 @@ export const parameters = {
     },
   },
 };
+
+const { darkTheme: darkThemeClassName } = dripStitches;
+
+export const decorators = [
+  (renderStory) => {
+    const { globalCss } = dripStitches;
+
+    const globalStyles = globalCss({
+      '*, html': {
+        'font-family': 'Manrope',
+      },
+      body: {
+        backgroundColor: 'black',
+      },
+    });
+
+    globalStyles();
+
+    useEffect(() => {
+      function switchColorMode(isDarkMode) {
+        document.body.style.backgroundColor = isDarkMode ? 'black' : 'white';
+        document.body.classList.remove('light', darkThemeClassName);
+        document.body.classList.add(isDarkMode ? darkThemeClassName : 'light');
+      }
+
+      channel.on('DARK_MODE', switchColorMode);
+      return () => channel.off('DARK_MODE', switchColorMode);
+    }, []);
+
+    return renderStory();
+  },
+];
diff --git a/ui/src/theme/stitches/foundations/index.ts b/ui/src/theme/stitches/foundations/index.ts
@@ -1 +1,8 @@
+export * from './media';
 export * from './colors';
+export * from './radii';
+export * from './shadows';
+export * from './sizes';
+export * from './spacing';
+export * from './typography';
+export * from './z-indices';
diff --git a/ui/src/theme/stitches/foundations/media.ts b/ui/src/theme/stitches/foundations/media.ts
@@ -0,0 +1,12 @@
+export const media = {
+  // Breakpoints
+  sm: '(min-width: 640px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 1024px)',
+  xl: '(min-width: 1280px)',
+  '2xl': '(min-width: 1536px)',
+
+  // Motion and hover
+  motion: '(prefers-reduced-motion)',
+  hover: '(any-hover: hover)',
+};
diff --git a/ui/src/theme/stitches/foundations/radii.ts b/ui/src/theme/stitches/foundations/radii.ts
@@ -0,0 +1,8 @@
+export const radii = {
+  none: '0',
+  sm: '0.25rem', // 4px
+  md: '0.5rem', // 8px
+  lg: '0.75rem', // 12px
+  xl: '1rem', // 16px
+  full: '9999px',
+};
diff --git a/ui/src/theme/stitches/foundations/shadows.ts b/ui/src/theme/stitches/foundations/shadows.ts
@@ -0,0 +1,11 @@
+//TODO: maybe we can use tailwind for this
+export const shadows = {
+  none: '0 0 #0000',
+  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+  xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  ['2xl']: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+};
diff --git a/ui/src/theme/stitches/foundations/sizes.ts b/ui/src/theme/stitches/foundations/sizes.ts
@@ -0,0 +1,22 @@
+import { spacing } from './spacing';
+
+export const sizes = {
+  ...spacing,
+  max: 'max-content',
+  min: 'min-content',
+  full: '100%',
+  '3xs': '14rem',
+  '2xs': '16rem',
+  xs: '20rem',
+  sm: '24rem',
+  md: '28rem',
+  lg: '32rem',
+  xl: '36rem',
+  '2xl': '42rem',
+  '3xl': '48rem',
+  '4xl': '56rem',
+  '5xl': '64rem',
+  '6xl': '72rem',
+  '7xl': '80rem',
+  '8xl': '90rem',
+};
diff --git a/ui/src/theme/stitches/foundations/spacing.ts b/ui/src/theme/stitches/foundations/spacing.ts
@@ -0,0 +1,35 @@
+export const spacing = {
+  '0': '0px',
+  '0h': '0.125rem', // 2px
+  1: '0.25rem', // 4px
+  '1h': '0.375rem', // 6px
+  2: '0.5rem', // 8px
+  '2h': '0.625rem', // 10px
+  3: '0.75rem', // 12px
+  '3h': '0.875rem', // 14px
+  4: '1rem', // 16px
+  5: '1.25rem', // 20px
+  6: '1.5rem',
+  7: '1.75rem',
+  8: '2rem',
+  9: '2.25rem',
+  10: '2.5rem',
+  12: '3rem',
+  14: '3.5rem',
+  16: '4rem',
+  20: '5rem',
+  24: '6rem',
+  28: '7rem',
+  32: '8rem',
+  36: '9rem',
+  40: '10rem',
+  44: '11rem',
+  48: '12rem',
+  52: '13rem',
+  56: '14rem',
+  60: '15rem',
+  64: '16rem',
+  72: '18rem',
+  80: '20rem',
+  96: '24rem',
+};
diff --git a/ui/src/theme/stitches/foundations/typography.ts b/ui/src/theme/stitches/foundations/typography.ts
@@ -0,0 +1,62 @@
+export const typography = {
+  letterSpacings: {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em',
+  },
+
+  lineHeights: {
+    normal: 'normal',
+    none: 1,
+    shorter: 1.25,
+    short: 1.375,
+    base: 1.5,
+    tall: 1.625,
+    taller: '2',
+    '3': '.75rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '7': '1.75rem',
+    '8': '2rem',
+    '9': '2.25rem',
+    '10': '2.5rem',
+  },
+
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  },
+
+  fonts: {
+    heading: `Manrope`,
+    body: `Manrope`,
+    mono: `Manrope`,
+  },
+
+  fontSizes: {
+    xs: '0.75rem', //12px
+    sm: '0.875rem', //14px
+    md: '1rem', //16px
+    lg: '1.125rem', //18px
+    xl: '1.25rem', //20px
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+    '6xl': '3.75rem',
+    '7xl': '4.5rem',
+    '8xl': '6rem',
+    '9xl': '8rem',
+  },
+};
diff --git a/ui/src/theme/stitches/foundations/z-indices.ts b/ui/src/theme/stitches/foundations/z-indices.ts
@@ -0,0 +1,15 @@
+export const zIndices = {
+  hide: -1,
+  auto: 'auto',
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800,
+};
diff --git a/ui/src/theme/stitches/index.ts b/ui/src/theme/stitches/index.ts
@@ -1 +1,2 @@
 export * from './themes';
+export * from './foundations';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './themes';
		export * from './foundations';