acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(lsd-react): respect custom breakpoint typography settings in the createTheme function 

BREAKING CHANGE: createTheme now ignores base theme typography settings for larger breakpoints when
custom typography settings are set for smaller breakpoints for a particular typography variant
This commit is contained in:
Hossein Mehrabi 2023-06-05 21:34:28 +03:30
parent bd9dccf258
commit 8f8a337151
1 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/lsd-react/src/components/Theme/createTheme.ts
View File

@ -30,19 +30,35 @@ const createBreakpointStyle = (
index: number, index: number,
theme: CreateThemeProps, theme: CreateThemeProps,
defaultTheme: Theme, defaultTheme: Theme,
overrides: Map<string, boolean>,
) => { ) => {
switch (key) { switch (key) {
case 'typography': case 'typography':
return pairs<TypographyVariants>(defaultTheme[key], (variant) => ({ return pairs<TypographyVariants>(defaultTheme[key], (variant) => {
...defaultTheme[key][variant], const variantKey = `${key}.${variant}`
...theme[key][variant], const overridden = overrides.get(variantKey) === true
...(all?.[index - 1]?.[key]?.[variant] ?? {}),
...(defaultTheme.breakpoints?.[THEME_BREAKPOINTS[index]]?.[key]?.[ if (
variant Object.keys(
] ?? {}), theme.breakpoints?.[THEME_BREAKPOINTS[index]]?.[key]?.[variant] ??
...(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: default:
return {} return {}
@ -52,8 +68,10 @@ const createBreakpointStyle = (
const createBreakpointStyles = ( const createBreakpointStyles = (
theme: CreateThemeProps, theme: CreateThemeProps,
defaultTheme: Theme, defaultTheme: Theme,
): Theme['breakpoints'] => ): Theme['breakpoints'] => {
Object.fromEntries( const overrides = new Map<string, boolean>()
return Object.fromEntries(
THEME_BREAKPOINTS.reduce<BreakpointStyles[]>( THEME_BREAKPOINTS.reduce<BreakpointStyles[]>(
(all, key, index) => (all, key, index) =>
[ [
@ -68,6 +86,7 @@ const createBreakpointStyles = (
index, index,
theme, theme,
defaultTheme, defaultTheme,
overrides,
), ),
), ),
}, },
@ -75,6 +94,7 @@ const createBreakpointStyles = (
[], [],
).map((styles, index) => [THEME_BREAKPOINTS[index], styles]), ).map((styles, index) => [THEME_BREAKPOINTS[index], styles]),
) as ThemeBreakpoints ) as ThemeBreakpoints
}
const createPaletteStyles = (theme: CreateThemeProps, defaultTheme: Theme) => { const createPaletteStyles = (theme: CreateThemeProps, defaultTheme: Theme) => {
const primary = theme.palette.primary ?? defaultTheme.palette.primary const primary = theme.palette.primary ?? defaultTheme.palette.primary