[core] Generate vars in extendTheme

[mnajdova]

Breaking change

• The shouldSkipGeneratingVar prop was moved from the createCssVarsProvider's option to the theme.
• If the default theme does not use extendTheme from Material UI or Joy UI, it needs to be wrapped inside unstable_createCssVarsTheme - a util exported from the MUI System.

 import {
   unstable_createCssVarsProvider as createCssVarsProvider,
+   unstable_createCssVarsTheme as createCssVarsTheme,
 } from '@mui/system';

 const { CssVarsProvider } = createCssVarsProvider({
-  theme: {
+  theme: createCssVarsTheme({
     colorSchemes: {
       light: {
         typography: {
           htmlFontSize: '16px',
           h1: {
             fontSize: '1rem',
             fontWeight: 500,
           },
         },
       },
     },
+    shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
-  },
+  }),
   defaultColorScheme: 'light',
-  shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
});

Or define it directly in the theme prop:

 <CssVarsProvider 
+   theme={createCssVarsProvider({ 
+    // other theme keys
+    shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1'
+   })} />

---

As agreed upon in #35446 (comment)

Changes done in the PR:

• extendTheme now adds the theme.vars object containing values in a form of: var(--joy-palette-primary-500, #aaaaaa) - containing default values from the light color scheme
• CssVarsProvider now uses the shouldSkipGeneratingVar from the theme
• updated the regexp for the CSS vars values to accept line height & color channel values
• updated and added few other tests to reflect the changes

Result:

1. Joy UI no longer requires the CssVarsProvider to be used 🎉 - https://codesandbox.io/s/staging-cache-85f1co?file=/demo.tsx
2. Joy UI works with custom theme - https://codesandbox.io/s/icy-smoke-bmk4qw?file=/index.tsx
3. Material Design 3 implementation does not require CssVarsProvider to be used (this was the case before too) - https://codesandbox.io/s/winter-haze-txd52g?file=/demo.tsx
4. Material Design 3 with custom theme - https://codesandbox.io/s/laughing-frog-1tzo5w?file=/package.json
5. Material Design 3 can co-exist with Material Design 2 - https://codesandbox.io/s/nifty-pine-gqn5uz?file=/demo.tsx
6. Material Design 2 with custom theme - https://codesandbox.io/s/objective-hamilton-uzbhpo?file=/demo.tsx

[mui-bot]

Netlify deploy preview

https://deploy-preview-35739--material-ui.netlify.app/

@material-ui/core: parsed: +0.14% , gzip: +0.18%
@material-ui/system: parsed: +1.11% , gzip: +1.11%
@mui/material-next: parsed: +0.88% , gzip: +1.34%
@mui/joy: parsed: +1.32% , gzip: +1.36%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against d12e77b

[mnajdova]

The same default implementation as in defaultTheme.

[siriwatknp]

I wonder if extendTheme() should not resolve the palette yet.

My initial intention is that extendTheme() should return sets of colors for your application but it should not decide what the current color scheme is. That logic will be handled by CssVarsProvider.

[mnajdova]

We decided with generating the CSS vars in extendTheme with containing the css variable that defaults to the actual theme css value.

[mnajdova]

@siriwatknp would be great if you can revalidate the screenshot differences, before I revert the change for adding back the CssVarsProvider. We can ignore the changes related to icons.

[siriwatknp]

@siriwatknp would be great if you can revalidate the screenshot differences, before I revert the change for adding back the CssVarsProvider. We can ignore the changes related to icons.

Got it, this is next on my list.

[siriwatknp]

✅ Looks great! pushed a minor fix.

[Rafcin]

I think this change to unstable_createCssVarsTheme and Provider has messed up custom themes that use Experimental_CssVarsProvider as CssVarsProvider and experimental_extendTheme. This seems to have broken light and dark color schemes when using experimental.

[siriwatknp]

I think this change to unstable_createCssVarsTheme and Provider has messed up custom themes that use Experimental_CssVarsProvider as CssVarsProvider and experimental_extendTheme. This seems to have broken light and dark color schemes when using experimental.

Can you open a new issue with reproduction? Feel free to tag me.

[Rafcin]

@siriwatknp Just saw this, will do! Let me create a minimal reproduction first and I'll make a post!