search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
389 stars 18 forks source link

Restructure extendTheme #131

Open oliviertassinari opened 2 weeks ago

oliviertassinari commented 2 weeks ago

Steps to reproduce

The shape of extendTheme() API feels strange:

https://github.com/mui/pigment-css/blob/e672e4b4ee36bb135d6d50fd805d15376f13d1cb/packages/pigment-css-react/src/utils/extendTheme.ts#L5

  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: -