Restructure extendTheme

[oliviertassinari]

Steps to reproduce

The shape of extendTheme() API feels strange:

pigment-css/packages/pigment-css-react/src/utils/extendTheme.ts

Line 5 in e672e4b

export interface ThemeInput<ColorScheme extends string = string> extends Record<string, any> {

1. shouldSkipGeneratingVar as an API name feels wrong. Why is there "should" in the name? How about we rename it to skipGeneratingVar?

2. extendTheme as a name doesn't feel specific enough. Wouldn't createTheme narrow down its meaning and be clearer? How about we rename it to it?

3. cssVarPrefix, defaultColorScheme, getSelector, shouldSkipGeneratingVar, they are not true theme values, why do they have a purpose to be in the theme? They are configuration options to generate a theme. I wonder if we shouldn't split the arguments. The API could look like this: extendTheme(theme1, theme2, options).

Overall, it feels like extendTheme should be as slim as possible to return a theme structure, delegating as much as possible its options to <CssVarProvider> props for fine grain injection points in the tree and pigment( plugin when injecting things globally.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: -