[CssVarsProvider] Add CssVarsProvider in @mui/material

[mnajdova]

Preview - https://deploy-preview-31138--material-ui.netlify.app/experiments/material-ui/css-variables/

TODOs:

• Figure out why for light theme the same CSS vars are added two times
• Test out custom themes with multiple color schemes
• What should we do with values depending on JS transformations? - resolved for the color transofrmations
• Add tests
• Revert the changes in the DemoSandboxed

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: +2.26% , gzip: +2.44%
@material-ui/lab: parsed: +0.16% , gzip: +0.09%

Generated by 🚫 dangerJS against fe370af

[siriwatknp]

Suggested change

	resolveTheme: (theme) => {
	const newTheme = {
	...theme,
	typography: createTypography(theme.palette, theme.typography),
	};
	return newTheme;
	},

From what I checked in createTypography, there is no need to recalculate here. Developer can customize the typography via experimental_extendTheme.

[mnajdova]

I don't think we can, as the typography is being generated by the palette, which based on the colorScheme set on the CssVarsProvider is being calculated.

[siriwatknp]

Okay, let's keep it like this but I think we should be able to remove it in the future. In createTypography.js, I don't see any usage of the palette internally. With the CSS variables, I don't see a need to accept typography as a function because developers can use the palette via CSS variables.

extendTheme({
  typography: {
    h1: {
      color: 'var(--joy-palette-text-primary)',
    }
  }
})

[siriwatknp]

👍 Left a few comments. I'm excited!

[mnajdova]

@siriwatknp @danilo-leal I've created this PR for adding documentation around the CSS variables - mnajdova#32
I thought it would be easier to be reviewed in isolation from the implementation, but if you think that's not the best way, I will merge it on top of this PR.
Here is the preview: https://mnajdova-material-ui-zrzlejic1-mnajdova.vercel.app/experimental-api/css-variables/

[siriwatknp]

I suggest to merge the implementation first because I feel that the doc would require some time to be finished.

[danilo-leal]

Yup, agree with that! Pretty cool experimentation here though, curious to see how we're going to evolve with this in Material UI.

[siriwatknp]

Yup, agree with that! Pretty cool experimentation here though, curious to see how we're going to evolve with this in Material UI.

I think the next step could be asking the community to help us update each component to support CSS variables (similar to the v5 transition #24405). Write some announcement blog post, docs.

[mnajdova]

Alright then, I will revert the changes in the DemoSandbox and merge this one

[singerbj]

Question on css theme variables for MUI - this issue notes the feature as experimental. Are there plans documented anywhere for the feature to become....not....experimental? :)

[siriwatknp]

Question on css theme variables for MUI - this issue notes the feature as experimental. Are there plans documented anywhere for the feature to become....not....experimental? :)

We are in the process of stabilizing the API in #40225