diff --git a/packages/ui/.storybook/preview.jsx b/packages/ui/.storybook/preview.jsx
index e7904476cd..1f6aaf5c7c 100644
--- 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/') ? (
-
- ) : (
-
- );
+ const isDeprecatedComponent = title.startsWith('Deprecated/');
+
+ if (isDeprecatedComponent) {
+ return (
+ <>
+
+
+ >
+ );
+ }
return (
- <>
- {css}
+
- >
+
);
},
],
diff --git a/packages/ui/src/styled-components.d.ts b/packages/ui/src/styled-components.d.ts
new file mode 100644
index 0000000000..9e2b2f4f97
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..e16ec68325
--- /dev/null
+++ 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',
+ },
+};