feat: adds spacing array to the theme

acid-info · Oct 11, 2023 · efa4792 · efa4792
1 parent 0ff0bbc
commit efa4792
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 0 deletions.
diff --git a/packages/lsd-react/.storybook/themes.ts b/packages/lsd-react/.storybook/themes.ts
@@ -8,6 +8,7 @@ const themeProps: CreateThemeProps = {
   breakpoints: {},
   palette: {},
   typographyGlobal: {},
+  spacing: [],
 }
 
 const createThemes = () => {

diff --git a/packages/lsd-react/src/components/Theme/baseTheme.ts b/packages/lsd-react/src/components/Theme/baseTheme.ts
@@ -201,6 +201,7 @@ export const baseTheme: Theme = {
       secondary: '255, 255, 255',
     },
   },
+  spacing: [4, 8, 16, 24, 32, 40, 64, 80, 96, 120],
   globalStyles: css``,
   cssVars: '',
 }

diff --git a/packages/lsd-react/src/components/Theme/createTheme.ts b/packages/lsd-react/src/components/Theme/createTheme.ts
@@ -141,6 +141,7 @@ export const createTheme = (
     palette: createPaletteStyles(props, from),
     globalStyles: css``,
     cssVars: '',
+    spacing: props.spacing.length ? props.spacing : from.spacing,
   }
 
   const { cssVars, globalStyles } = createThemeGlobalStyles(theme)

diff --git a/packages/lsd-react/src/components/Theme/defaultThemes.ts b/packages/lsd-react/src/components/Theme/defaultThemes.ts
@@ -8,6 +8,7 @@ const lightTheme = createTheme(
     typography: {},
     typographyGlobal: {},
     palette: {},
+    spacing: [],
   },
   baseTheme,
 )
@@ -22,6 +23,7 @@ const darkTheme = createTheme(
       primary: '255, 255, 255',
       secondary: '0, 0, 0',
     },
+    spacing: [],
   },
   lightTheme,
 )

diff --git a/packages/lsd-react/src/components/Theme/globalStyles.ts b/packages/lsd-react/src/components/Theme/globalStyles.ts
@@ -87,6 +87,14 @@ const generateThemeGlobalStyles = (theme: Theme) => {
     )
   }
 
+  // Spacing-related CSS variable definitions
+  {
+    theme.spacing.map((spacingValue) => {
+      const varName = cssUtils.vars.lsd('spacing', spacingValue.toString())
+      vars.push(cssUtils.define(varName, `${spacingValue}px`))
+    })
+  }
+
   THEME_BREAKPOINTS.map((breakpoint, index) => {
     styles.push(`@media (min-width: ${theme.breakpoints[breakpoint].width}px) {
       :root {

diff --git a/packages/lsd-react/src/components/Theme/types.ts b/packages/lsd-react/src/components/Theme/types.ts
@@ -77,6 +77,7 @@ export type Theme = {
   palette: ThemePalette
   globalStyles: SerializedStyles
   cssVars: string
+  spacing: number[]
 }
 
 export type ThemeOptionBreakpointStyles = Partial<
@@ -100,6 +101,7 @@ export type CreateThemeProps = {
   typography: ThemeOptionTypography
   typographyGlobal: Partial<GlobalTypographyStyles>
   palette: ThemeOptionPalette
+  spacing: number[]
 }
 
 export type ThemeContext = {