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')} 
-    }
 
     ${styles.join('\n')}
   `
-})
+
+  return {
+    cssVars,
+    globalStyles: css`
+      :root {
+        ${cssVars}
+      }
+    `,
+  }
+}
 
 export const createThemeGlobalStyles = (() => {
-  return (theme: Theme) => {
   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,8 +9,7 @@ const selectors = (variant: TypographyVariants) =>
     `.${typographyClasses[variant]}`,
   ].join(', ')
 
-export const TypographyStyles = withTheme(
+export const TypographyStyles = css`
-  (theme) => css`
   body * {
     font-family: var(--lsd-typography-generic-font-family);
   }
@@ -78,5 +73,4 @@ export const TypographyStyles = withTheme(
   span {
     margin: 0;
   }
-  `,
+`
-)