feat: make the injection of theme CSS vars optional

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<ThemeProviderProps> = ({
   theme,
   children,
+  injectCssVars = true,
 }) => {
   return (
     <ResizeObserverProvider>
       <PortalProvider>
         <ThemeContext.Provider value={{ theme }}>
           <CSSBaseline theme={theme} />
-          <Global styles={theme.globalStyles} />
+          {injectCssVars && <Global styles={theme.globalStyles} />}
           <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
         </ThemeContext.Provider>
       </PortalProvider>

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

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
 }

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<string | string[]> = []
   const styles: Array<string | string[]> = []
   const breakpointStyles: string[][] = THEME_BREAKPOINTS.map(() => [])
@@ -98,18 +97,26 @@ const generateThemeGlobalStyles = withTheme((theme) => {
     }`)
   })
 
-  return css`
+  const cssVars = `
-    :root {
+    ${vars.join('\n')} 
-      ${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<typeof generateThemeGlobalStyles> => {
     const key = theme as any as string
 
     if (

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<

packages/lsd-react/src/components/Typography/Typography.styles.ts

@@ -1,9 +1,5 @@
 import { css } from '@emotion/react'
-import {
+import { THEME_TYPOGRAPHY_VARIANTS, TypographyVariants } from '../Theme'
-  THEME_TYPOGRAPHY_VARIANTS,
-  TypographyVariants,
-  withTheme,
-} 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(
+export const TypographyStyles = css`
-  (theme) => css`
+  body * {
-    body * {
+    font-family: var(--lsd-typography-generic-font-family);
-      font-family: var(--lsd-typography-generic-font-family);
+  }
-    }
 
-    .${typographyClasses.root} {
+  .${typographyClasses.root} {
-    }
+  }
 
-    .${typographyClasses.primary} {
+  .${typographyClasses.primary} {
-      color: rgb(var(--lsd-text-primary));
+    color: rgb(var(--lsd-text-primary));
-    }
+  }
 
-    .${typographyClasses.secondary} {
+  .${typographyClasses.secondary} {
-      color: rgb(var(--lsd-text-secondary));
+    color: rgb(var(--lsd-text-secondary));
-    }
+  }
 
-    .${typographyClasses.sansSerif} {
+  .${typographyClasses.sansSerif} {
-      &,
+    &,
-      * {
+    * {
-        font-family: sans-serif;
+      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} {
+  input {
-      &,
+    color: rgb(var(--lsd-text-primary));
-      * {
+    font-size: var(--lsd-body1-fontSize);
-        font-family: serif;
+    font-weight: normal;
-      }
+  }
-    }
 
-    .${typographyClasses.monospace} {
+  h1,
-      &,
+  h2,
-      * {
+  h3,
-        font-family: monospace;
+  h4,
-      }
+  h5,
-    }
+  h6,
-
+  p,
-    ${THEME_TYPOGRAPHY_VARIANTS.map(
+  span {
-      (variant) => css`
+    margin: 0;
-        ${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;
-    }
-  `,
-)