generate vars in extendTheme

[siriwatknp]

Propose

If we want extendTheme() to produce theme.vars, the logic of producing variables should be in extendTheme(). I think it makes a lot of sense.

One major change is the shouldSkipGeneratingVar will be in extendTheme instead of CssVarsProvider. I think this should be fine since we haven't documented this configuration.

const theme = extendTheme({
+  shouldSkipGeneratingVar: (keys) => …,
})

<CssVarsProvider
- shouldSkipGeneratingVar={(keys) => …}
/>

Changes

Before:

After

Generating CSS variables outside of CssVarsProvider sounds like a better abstraction because it does not require the current colorScheme or mode of the application. It just prepare the variables for all of the color schemes.

---

• I have followed (at least) the PR section of the contributing guide.

[mnajdova]

The reason why I didn't go on this route, is because for Material You, I was aiming to make the components work without using CssVarsProvider, so my thought was that the theme.vars should point to the actual value, not a CSS var. Should we resolve this first? Make a decisions about this before merging the PR.

[siriwatknp]

The reason why I didn't go on this route, is because for Material You, I was aiming to make the components work without using CssVarsProvider, so my thought was that the theme.vars should point to the actual value, not a CSS var

I am afraid that if theme.vars point to the actual value, would it be misleading?

I was aiming to make the components work without using CssVarsProvider

I am not sure it it related to extendTheme() returning theme.vars or not. Can you elaborate?

[siriwatknp]

I am not sure it it related to extendTheme() returning theme.vars or not. Can you elaborate?

Ah, now I get it.