From 9a56d59c352dd03429db27b3e8dc83457f475444 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Mon, 12 Jun 2023 02:31:39 +0330 Subject: [PATCH] feat: make the injection of theme CSS vars optional --- .../src/components/Theme/ThemeProvider.tsx | 4 +- .../src/components/Theme/baseTheme.ts | 6 +- .../src/components/Theme/createTheme.ts | 6 +- .../src/components/Theme/globalStyles.ts | 25 ++-- .../lsd-react/src/components/Theme/types.ts | 1 + .../Typography/Typography.styles.ts | 124 +++++++++--------- 6 files changed, 89 insertions(+), 77 deletions(-) diff --git a/packages/lsd-react/src/components/Theme/ThemeProvider.tsx b/packages/lsd-react/src/components/Theme/ThemeProvider.tsx index 1c8723d..fd16c59 100644 --- a/packages/lsd-react/src/components/Theme/ThemeProvider.tsx +++ b/packages/lsd-react/src/components/Theme/ThemeProvider.tsx @@ -7,18 +7,20 @@ import { Theme } from './types' export type ThemeProviderProps = React.PropsWithChildren<{ theme: Theme + injectCssVars?: boolean }> export const ThemeProvider: React.FC = ({ theme, children, + injectCssVars = true, }) => { return ( - + {injectCssVars && } {children} diff --git a/packages/lsd-react/src/components/Theme/baseTheme.ts b/packages/lsd-react/src/components/Theme/baseTheme.ts index 6a57b69..e097848 100644 --- a/packages/lsd-react/src/components/Theme/baseTheme.ts +++ b/packages/lsd-react/src/components/Theme/baseTheme.ts @@ -148,6 +148,10 @@ export const baseTheme: Theme = { }, }, globalStyles: css``, + cssVars: '', } -baseTheme.globalStyles = createThemeGlobalStyles(baseTheme) +const { cssVars, globalStyles } = createThemeGlobalStyles(baseTheme) + +baseTheme.cssVars = cssVars +baseTheme.globalStyles = globalStyles diff --git a/packages/lsd-react/src/components/Theme/createTheme.ts b/packages/lsd-react/src/components/Theme/createTheme.ts index 73126cd..815617c 100644 --- a/packages/lsd-react/src/components/Theme/createTheme.ts +++ b/packages/lsd-react/src/components/Theme/createTheme.ts @@ -136,9 +136,13 @@ export const createTheme = ( breakpoints: createBreakpointStyles(props, from), palette: createPaletteStyles(props, from), globalStyles: css``, + cssVars: '', } - theme.globalStyles = createThemeGlobalStyles(theme) + const { cssVars, globalStyles } = createThemeGlobalStyles(theme) + + theme.cssVars = cssVars + theme.globalStyles = globalStyles return theme } diff --git a/packages/lsd-react/src/components/Theme/globalStyles.ts b/packages/lsd-react/src/components/Theme/globalStyles.ts index 5f5d5b4..a6f2ca5 100644 --- a/packages/lsd-react/src/components/Theme/globalStyles.ts +++ b/packages/lsd-react/src/components/Theme/globalStyles.ts @@ -5,7 +5,6 @@ import { THEME_TYPOGRAPHY_VARIANTS, } from './constants' import { Theme, TypographyProperties, TypographyVariants } from './types' -import { withTheme } from './withTheme' const cssUtils = { vars: { @@ -22,7 +21,7 @@ const cssUtils = { define: (name: string, value: string) => `${name}: ${value};`, } -const generateThemeGlobalStyles = withTheme((theme) => { +const generateThemeGlobalStyles = (theme: Theme) => { const vars: Array = [] const styles: Array = [] const breakpointStyles: string[][] = THEME_BREAKPOINTS.map(() => []) @@ -98,18 +97,26 @@ const generateThemeGlobalStyles = withTheme((theme) => { }`) }) - return css` - :root { - ${vars.join('\n')} - } + const cssVars = ` + ${vars.join('\n')} ${styles.join('\n')} ` -}) + + return { + cssVars, + globalStyles: css` + :root { + ${cssVars} + } + `, + } +} export const createThemeGlobalStyles = (() => { - return (theme: Theme) => { - const cache: any = {} + const cache: any = {} + + return (theme: Theme): ReturnType => { const key = theme as any as string if ( diff --git a/packages/lsd-react/src/components/Theme/types.ts b/packages/lsd-react/src/components/Theme/types.ts index a3dd140..080249b 100644 --- a/packages/lsd-react/src/components/Theme/types.ts +++ b/packages/lsd-react/src/components/Theme/types.ts @@ -73,6 +73,7 @@ export type Theme = { typographyGlobal: GlobalTypographyStyles palette: ThemePalette globalStyles: SerializedStyles + cssVars: string } export type ThemeOptionBreakpointStyles = Partial< diff --git a/packages/lsd-react/src/components/Typography/Typography.styles.ts b/packages/lsd-react/src/components/Typography/Typography.styles.ts index 6f4bae2..38a1ce6 100644 --- a/packages/lsd-react/src/components/Typography/Typography.styles.ts +++ b/packages/lsd-react/src/components/Typography/Typography.styles.ts @@ -1,9 +1,5 @@ import { css } from '@emotion/react' -import { - THEME_TYPOGRAPHY_VARIANTS, - TypographyVariants, - withTheme, -} from '../Theme' +import { THEME_TYPOGRAPHY_VARIANTS, TypographyVariants } from '../Theme' import { THEME_TYPOGRAPHY_ELEMENTS } from '../Theme/constants' import { typographyClasses } from './Typography.classes' @@ -13,70 +9,68 @@ const selectors = (variant: TypographyVariants) => `.${typographyClasses[variant]}`, ].join(', ') -export const TypographyStyles = withTheme( - (theme) => css` - body * { - font-family: var(--lsd-typography-generic-font-family); - } +export const TypographyStyles = css` + body * { + font-family: var(--lsd-typography-generic-font-family); + } - .${typographyClasses.root} { - } + .${typographyClasses.root} { + } - .${typographyClasses.primary} { - color: rgb(var(--lsd-text-primary)); - } + .${typographyClasses.primary} { + color: rgb(var(--lsd-text-primary)); + } - .${typographyClasses.secondary} { - color: rgb(var(--lsd-text-secondary)); - } + .${typographyClasses.secondary} { + color: rgb(var(--lsd-text-secondary)); + } - .${typographyClasses.sansSerif} { - &, - * { - font-family: sans-serif; + .${typographyClasses.sansSerif} { + &, + * { + font-family: sans-serif; + } + } + + .${typographyClasses.serif} { + &, + * { + font-family: serif; + } + } + + .${typographyClasses.monospace} { + &, + * { + font-family: monospace; + } + } + + ${THEME_TYPOGRAPHY_VARIANTS.map( + (variant) => css` + ${selectors(variant)} { + color: rgb(var(--lsd-text-primary)); + font-weight: normal; + font-size: var(--lsd-${variant}-fontSize); + line-height: var(--lsd-${variant}-lineHeight); } - } + `, + )} - .${typographyClasses.serif} { - &, - * { - font-family: serif; - } - } + input { + color: rgb(var(--lsd-text-primary)); + font-size: var(--lsd-body1-fontSize); + font-weight: normal; + } - .${typographyClasses.monospace} { - &, - * { - font-family: monospace; - } - } - - ${THEME_TYPOGRAPHY_VARIANTS.map( - (variant) => css` - ${selectors(variant)} { - color: rgb(var(--lsd-text-primary)); - font-weight: normal; - font-size: var(--lsd-${variant}-fontSize); - line-height: var(--lsd-${variant}-lineHeight); - } - `, - )} - - input { - color: rgb(var(--lsd-text-primary)); - font-size: var(--lsd-body1-fontSize); - font-weight: normal; - } - - h1, - h2, - h3, - h4, - h5, - h6, - p, - span { - margin: 0; - } - `, -) + h1, + h2, + h3, + h4, + h5, + h6, + p, + span { + margin: 0; + } +`