Start building out theme

penumbra-zone · Jul 10, 2024 · b505518 · b505518
1 parent 98927e5
commit b505518
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 9 deletions.
diff --git a/packages/ui/.storybook/preview.jsx b/packages/ui/.storybook/preview.jsx
@@ -1,23 +1,28 @@
 import React from 'react';
 import globalsCssUrl from '../styles/globals.css?url';
 import penumbraTheme from './penumbraTheme';
-import { Normalize } from '../src/Normalize';
+import { ThemeProvider } from 'styled-components';
+import { theme } from '../src/utils/theme';
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   decorators: [
     (Story, { title }) => {
-      const css = title.startsWith('Deprecated/') ? (
-        <link rel='stylesheet' type='text/css' href={globalsCssUrl} />
-      ) : (
-        <Normalize />
-      );
+      const isDeprecatedComponent = title.startsWith('Deprecated/');
+
+      if (isDeprecatedComponent) {
+        return (
+          <>
+            <link rel='stylesheet' type='text/css' href={globalsCssUrl} />
+            <Story />
+          </>
+        );
+      }
 
       return (
-        <>
-          {css}
+        <ThemeProvider theme={theme}>
           <Story />
-        </>
+        </ThemeProvider>
       );
     },
   ],

diff --git a/packages/ui/src/styled-components.d.ts b/packages/ui/src/styled-components.d.ts
@@ -0,0 +1,26 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    fonts: {
+      default: string;
+      mono: string;
+      heading: string;
+    };
+    fontSizes: {
+      text9xl: string;
+      text8xl: string;
+      text7xl: string;
+      text6xl: string;
+      text5xl: string;
+      text4xl: string;
+      text3xl: string;
+      text2xl: string;
+      textXl: string;
+      textLg: string;
+      textBase: string;
+      textSm: string;
+      textXs: string;
+    };
+  }
+}
diff --git a/packages/ui/src/utils/theme.ts b/packages/ui/src/utils/theme.ts
@@ -0,0 +1,24 @@
+import { DefaultTheme } from 'styled-components';
+
+export const theme: DefaultTheme = {
+  fonts: {
+    default: 'Poppins',
+    mono: 'Iosevka Term, monospace',
+    heading: 'Work Sans',
+  },
+  fontSizes: {
+    text9xl: '8rem',
+    text8xl: '6rem',
+    text7xl: '4.5rem',
+    text6xl: '3.75rem',
+    text5xl: '3rem',
+    text4xl: '2.25rem',
+    text3xl: '1.875rem',
+    text2xl: '1.5rem',
+    textXl: '1.25rem',
+    textLg: '1.125rem',
+    textBase: '1rem',
+    textSm: '0.875rem',
+    textXs: '0.75rem',
+  },
+};