From efa4792a2adc31356eacccc36826a0b93727243a Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Wed, 11 Oct 2023 14:00:01 +0100
Subject: [PATCH] feat: adds spacing array to the theme

---
 packages/lsd-react/.storybook/themes.ts                  | 1 +
 packages/lsd-react/src/components/Theme/baseTheme.ts     | 1 +
 packages/lsd-react/src/components/Theme/createTheme.ts   | 1 +
 packages/lsd-react/src/components/Theme/defaultThemes.ts | 2 ++
 packages/lsd-react/src/components/Theme/globalStyles.ts  | 8 ++++++++
 packages/lsd-react/src/components/Theme/types.ts         | 2 ++
 6 files changed, 15 insertions(+)

diff --git a/packages/lsd-react/.storybook/themes.ts b/packages/lsd-react/.storybook/themes.ts
index a67907e..74f6273 100644
--- 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
index ee9e22b..d755786 100644
--- 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
index 418f921..4c18258 100644
--- 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
index bbfacaa..adb7129 100644
--- 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
index 72b97d9..b2d1d72 100644
--- 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
index 0b3100d..ecd153f 100644
--- 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 = {