From e2a331136071bc0125f56fb0502a4e1c0bfb67cc Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Tue, 21 Mar 2023 03:18:44 +0330 Subject: [PATCH] feat: add support for font-family style --- packages/lsd-react/.storybook/preview.tsx | 21 +++++---- packages/lsd-react/.storybook/themes.ts | 44 +++++++++++++++++++ .../.storybook/withTheme.decorator.tsx | 7 +-- .../src/components/Theme/baseTheme.ts | 2 + .../src/components/Theme/constants.ts | 1 + .../src/components/Theme/createTheme.ts | 4 ++ .../src/components/Theme/defaultThemes.ts | 4 ++ .../lsd-react/src/components/Theme/types.ts | 12 ++++- .../Typography/Typography.styles.ts | 17 ++++++- 9 files changed, 99 insertions(+), 13 deletions(-) create mode 100644 packages/lsd-react/.storybook/themes.ts diff --git a/packages/lsd-react/.storybook/preview.tsx b/packages/lsd-react/.storybook/preview.tsx index 0b4845b..69430d3 100644 --- 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,7 +16,7 @@ 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})`, })), @@ -20,7 +24,7 @@ export const parameters: Parameters = { 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 new file mode 100644 index 0000000..33bdac3 --- /dev/null +++ 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 = { + '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 index 312e4e7..b0a5ae9 100644 --- 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 index 61cbcb9..d9e2c9d 100644 --- 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 index 21572d8..fde0644 100644 --- 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 index d5ef8c6..b73f6cc 100644 --- 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(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 index cf34a31..bbfacaa 100644 --- a/packages/lsd-react/src/components/Theme/defaultThemes.ts +++ b/packages/lsd-react/src/components/Theme/defaultThemes.ts @@ -3,8 +3,10 @@ import { createTheme } from './createTheme' const lightTheme = createTheme( { + name: 'Light', breakpoints: {}, typography: {}, + typographyGlobal: {}, palette: {}, }, baseTheme, @@ -12,8 +14,10 @@ const lightTheme = createTheme( 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 index 66bf066..a0ab511 100644 --- 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 -export type TypographyStyles = Pick +export type TypographyStyles = Pick< + CSSProperties, + 'fontSize' | 'fontFamily' | 'lineHeight' +> & { fontFamily?: string } +export type GlobalTypographyStyles = { + fontFamily?: string +} export type TypographyProperties = keyof TypographyStyles export type ThemeTypography = { [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 export type ThemeOptionPalette = DeepPartial 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 index 12d852a..23fac10 100644 --- 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; } `,