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', + }, +};