diff --git a/packages/lsd-react/src/components/Theme/createTheme.ts b/packages/lsd-react/src/components/Theme/createTheme.ts index 83a6cf9..73126cd 100644 --- a/packages/lsd-react/src/components/Theme/createTheme.ts +++ b/packages/lsd-react/src/components/Theme/createTheme.ts @@ -30,19 +30,35 @@ const createBreakpointStyle = ( index: number, theme: CreateThemeProps, defaultTheme: Theme, + overrides: Map, ) => { switch (key) { case 'typography': - return pairs(defaultTheme[key], (variant) => ({ - ...defaultTheme[key][variant], - ...theme[key][variant], - ...(all?.[index - 1]?.[key]?.[variant] ?? {}), - ...(defaultTheme.breakpoints?.[THEME_BREAKPOINTS[index]]?.[key]?.[ - variant - ] ?? {}), - ...(theme.breakpoints?.[THEME_BREAKPOINTS[index]]?.[key]?.[variant] ?? - {}), - })) + return pairs(defaultTheme[key], (variant) => { + const variantKey = `${key}.${variant}` + const overridden = overrides.get(variantKey) === true + + if ( + Object.keys( + theme.breakpoints?.[THEME_BREAKPOINTS[index]]?.[key]?.[variant] ?? + {}, + ).length > 0 + ) { + overrides.set(variantKey, true) + } + + return { + ...defaultTheme[key][variant], + ...theme[key][variant], + ...(overridden + ? all?.[index - 1]?.[key]?.[variant] ?? {} + : defaultTheme.breakpoints?.[THEME_BREAKPOINTS[index]]?.[key]?.[ + variant + ]), + ...(theme.breakpoints?.[THEME_BREAKPOINTS[index]]?.[key]?.[variant] ?? + {}), + } + }) default: return {} @@ -52,8 +68,10 @@ const createBreakpointStyle = ( const createBreakpointStyles = ( theme: CreateThemeProps, defaultTheme: Theme, -): Theme['breakpoints'] => - Object.fromEntries( +): Theme['breakpoints'] => { + const overrides = new Map() + + return Object.fromEntries( THEME_BREAKPOINTS.reduce( (all, key, index) => [ @@ -68,6 +86,7 @@ const createBreakpointStyles = ( index, theme, defaultTheme, + overrides, ), ), }, @@ -75,6 +94,7 @@ const createBreakpointStyles = ( [], ).map((styles, index) => [THEME_BREAKPOINTS[index], styles]), ) as ThemeBreakpoints +} const createPaletteStyles = (theme: CreateThemeProps, defaultTheme: Theme) => { const primary = theme.palette.primary ?? defaultTheme.palette.primary