feat: add support for font-family style

acid-info · Mar 20, 2023 · e2a3311 · e2a3311
1 parent b181444
commit e2a3311
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 13 deletions.
diff --git a/packages/lsd-react/.storybook/preview.tsx b/packages/lsd-react/.storybook/preview.tsx
@@ -1,5 +1,9 @@
 import { DecoratorFunction, Parameters } from '@storybook/addons'
-import { defaultThemes } from '../src'
+import {
+  storybookDefaultTheme,
+  storybookDefaultThemeKey,
+  themes,
+} from './themes'
 import { withTheme } from './withTheme.decorator'
 
 export const parameters: Parameters = {
@@ -12,15 +16,15 @@ export const parameters: Parameters = {
   },
   backgrounds: {
     default: 'light',
-    values: Object.entries(defaultThemes).map(([name, theme]) => ({
+    values: Object.entries(themes).map(([name, theme]) => ({
       name,
       value: `rgb(${theme.palette.secondary})`,
     })),
   },
   viewport: {
     viewports: {
       ...Object.fromEntries(
-        Object.entries(defaultThemes.light.breakpoints).map(
+        Object.entries(storybookDefaultTheme.breakpoints).map(
           ([key, { width }]) => [
             key,
             {
@@ -44,13 +48,14 @@ export const globalTypes = {
   theme: {
     name: 'Theme',
     description: 'Theme',
-    defaultValue: 'light',
+    defaultValue: storybookDefaultThemeKey,
     toolbar: {
       icon: 'circlehollow',
-      items: [
-        { value: 'light', icon: 'circlehollow', title: 'light' },
-        { value: 'dark', icon: 'circle', title: 'dark' },
-      ],
+      items: Object.entries(themes).map(([name, theme]) => ({
+        value: name,
+        icon: name.startsWith('Light') ? 'circlehollow' : 'circle',
+        title: name,
+      })),
     },
   },
 }
diff --git a/packages/lsd-react/.storybook/themes.ts b/packages/lsd-react/.storybook/themes.ts
@@ -0,0 +1,44 @@
+import { createTheme, CreateThemeProps, defaultThemes } from '../src'
+
+const themeProps: CreateThemeProps = {
+  typography: {
+    body3: {
+      fontFamily: 'sans-serif',
+    },
+  },
+  breakpoints: {},
+  palette: {},
+  typographyGlobal: {},
+}
+
+const typefaceTypes: Record<string, CreateThemeProps['typographyGlobal']> = {
+  'sans-serif': {
+    fontFamily: 'Helvetica, sans-serif',
+  },
+  serif: {
+    fontFamily: 'Georgia, serif',
+  },
+  monospace: {
+    fontFamily: 'Courier, monospace',
+  },
+}
+
+export const themesArray = Object.keys(defaultThemes).flatMap((key) =>
+  Object.entries(typefaceTypes).map(([typeFace, typographyGlobal]) =>
+    createTheme(
+      {
+        name: `${defaultThemes[key].name} (${typeFace})`,
+        ...themeProps,
+        typographyGlobal,
+      },
+      defaultThemes[key],
+    ),
+  ),
+)
+
+export const themes = Object.fromEntries(
+  themesArray.map((theme) => [theme.name, theme]),
+)
+
+export const storybookDefaultThemeKey = themesArray[0].name
+export const storybookDefaultTheme = themesArray[0]
diff --git a/packages/lsd-react/.storybook/withTheme.decorator.tsx b/packages/lsd-react/.storybook/withTheme.decorator.tsx
@@ -1,12 +1,13 @@
 import { DecoratorFunction, useGlobals } from '@storybook/addons'
 import React, { useEffect } from 'react'
-import { defaultThemes, Theme, ThemeProvider } from '../src'
+import { Theme, ThemeProvider } from '../src'
+import { storybookDefaultThemeKey, themes } from './themes'
 
 export const withTheme: DecoratorFunction = (Story, context) => {
   const StoryComponent = Story as any as React.ComponentType
 
-  const themeName = context.globals?.theme ?? 'light'
-  const theme = defaultThemes[themeName] as Theme
+  const themeName = context.globals?.theme ?? storybookDefaultThemeKey
+  const theme = themes[themeName] as Theme
 
   const [globals, setGlobals] = useGlobals()
 

diff --git a/packages/lsd-react/src/components/Theme/baseTheme.ts b/packages/lsd-react/src/components/Theme/baseTheme.ts
@@ -3,6 +3,7 @@ import { createThemeGlobalStyles } from './globalStyles'
 import { Theme } from './types'
 
 export const baseTheme: Theme = {
+  name: 'LSD',
   breakpoints: {
     xs: {
       width: 0,
@@ -122,6 +123,7 @@ export const baseTheme: Theme = {
     label1: { fontSize: '0.875rem', lineHeight: '1.25rem' },
     label2: { fontSize: '0.75rem', lineHeight: '1rem' },
   },
+  typographyGlobal: {},
   palette: {
     primary: '0, 0, 0',
     secondary: '255, 255, 255',

diff --git a/packages/lsd-react/src/components/Theme/constants.ts b/packages/lsd-react/src/components/Theme/constants.ts
@@ -42,6 +42,7 @@ export const THEME_TYPOGRAPHY_ELEMENTS: Partial<
 
 export const THEME_TYPOGRAPHY_PROPERTIES = [
   'fontSize',
+  'fontFamily',
   'lineHeight',
 ] as TypographyProperties[]
 

diff --git a/packages/lsd-react/src/components/Theme/createTheme.ts b/packages/lsd-react/src/components/Theme/createTheme.ts
@@ -15,6 +15,8 @@ import type {
 
 const createTypographyStyles = (theme: CreateThemeProps, defaultTheme: Theme) =>
   pairs<TypographyVariants>(THEME_TYPOGRAPHY_VARIANTS, (variant) => ({
+    ...defaultTheme.typographyGlobal,
+    ...theme.typographyGlobal,
     ...defaultTheme.typography[variant],
     ...(theme.typography[variant] ?? {}),
   }))
@@ -105,7 +107,9 @@ export const createTheme = (
   from = baseTheme,
 ): Theme => {
   const theme: Theme = {
+    name: props.name ?? from.name,
     typography: createTypographyStyles(props, from),
+    typographyGlobal: { ...from.typographyGlobal, ...props.typographyGlobal },
     breakpoints: createBreakpointStyles(props, from),
     palette: createPaletteStyles(props, from),
     globalStyles: css``,

diff --git a/packages/lsd-react/src/components/Theme/defaultThemes.ts b/packages/lsd-react/src/components/Theme/defaultThemes.ts
@@ -3,17 +3,21 @@ import { createTheme } from './createTheme'
 
 const lightTheme = createTheme(
   {
+    name: 'Light',
     breakpoints: {},
     typography: {},
+    typographyGlobal: {},
     palette: {},
   },
   baseTheme,
 )
 
 const darkTheme = createTheme(
   {
+    name: 'Dark',
     breakpoints: {},
     typography: {},
+    typographyGlobal: {},
     palette: {
       primary: '255, 255, 255',
       secondary: '0, 0, 0',

diff --git a/packages/lsd-react/src/components/Theme/types.ts b/packages/lsd-react/src/components/Theme/types.ts
@@ -23,7 +23,13 @@ export type TypographyVariants =
 
 export type VariantThemeProperties = keyof Pick<Theme, 'typography'>
 
-export type TypographyStyles = Pick<CSSProperties, 'fontSize' | 'lineHeight'>
+export type TypographyStyles = Pick<
+  CSSProperties,
+  'fontSize' | 'fontFamily' | 'lineHeight'
+> & { fontFamily?: string }
+export type GlobalTypographyStyles = {
+  fontFamily?: string
+}
 export type TypographyProperties = keyof TypographyStyles
 export type ThemeTypography<T extends string = TypographyVariants> = {
   [key in T]: TypographyStyles
@@ -61,8 +67,10 @@ export type ThemeBreakpoints = {
 }
 
 export type Theme = {
+  name: string
   breakpoints: ThemeBreakpoints
   typography: ThemeTypography
+  typographyGlobal: GlobalTypographyStyles
   palette: ThemePalette
   globalStyles: SerializedStyles
 }
@@ -83,8 +91,10 @@ export type ThemeOptionTypography = DeepPartial<ThemeTypography>
 export type ThemeOptionPalette = DeepPartial<ThemePalette>
 
 export type CreateThemeProps = {
+  name?: string
   breakpoints: ThemeOptionBreakpoints
   typography: ThemeOptionTypography
+  typographyGlobal: GlobalTypographyStyles
   palette: ThemeOptionPalette
 }
 

diff --git a/packages/lsd-react/src/components/Typography/Typography.styles.ts b/packages/lsd-react/src/components/Typography/Typography.styles.ts
@@ -32,12 +32,27 @@ export const TypographyStyles = withTheme(
           color: rgb(var(--lsd-text-primary));
           font-weight: normal;
           font-size: var(--lsd-${variant}-fontSize);
+          font-family: var(--lsd-${variant}-fontFamily);
           line-height: var(--lsd-${variant}-lineHeight);
         }
       `,
     )}
 
-    h1, h2, h3, h4, h5, h6, p, span {
+    input {
+      color: rgb(var(--lsd-text-primary));
+      font-weight: normal;
+      font-size: var(--lsd-body1-fontSize);
+      font-family: var(--lsd-body1-fontFamily);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    span {
       margin: 0;
     }
   `,