[POC] Add support for Material You (alter the existing components)

[mnajdova]

What's the PR about

This PR is a proof of concept of how we can add support for Material You incrementally without introducing breaking changes (see #29345). This would mean that we would support both Material Design 2 and Material Design 3 in parallel. In a future major release, we can then drop the support for MD2. The implementation is inspired by flutter/flutter#103537

👉 Playground link (inspired by #29345 (comment))

Implementation details

This POC uses a new factory for creating a Material Design 3 theme. It adds behind the scenes a new useMaterialYou flag, and adds the necessary design tokens for the new design systems (the palette values are added under under palette.md3 so that we can avoid conflicts with the existing theme).

The new useMaterialYou flag is then used in the component's styles generation. If the flag is set then the MD3 styles are being added on the component, otherwise the default MD2 styles are added. I've decided for this implementation so that we can make the components customization easier.

The new design tokens is available in both the standard theme usage, as well as the new CSS variables approach.

Usage

ThemeProvider

import { experimental_createMD3Theme as createMD3Theme } from '@mui/material/styles';

// light theme 
const lightTheme = createMD3Theme();
// dark theme
const darkTheme = createMD3Theme({
  palette: { mode: "dark" }
});

// Or with custom palette
const customTonalPalette = { ... };

const lightTheme = createMD3Theme({
  palette: { md3: customTonalPallette }
});

const darkTheme = createMD3Theme({
  palette: { mode: "dark", md3: customTonalPalette }
});

CssVarsProvider

import { experimental_extendMD3Theme as extendMD3Theme } from '@mui/material/styles';
const cssVarsTheme = extendMD3Theme();

// Or with custom palette

const cssVarsTheme = extendMD3Theme({
    colorSchemes: {
      light: {
        palette: { md3: palette }
      },
      dark: {
        palette: { md3: palette }
      }
    }
  });

---

TODOs:

• Prepare TypeScript module augmentation file that can be imported
• Implement all states for the different button variants
• Add Button CSS vars based on https://m3.material.io/components/buttons/specs

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: +4.11% , gzip: +2.65%
@material-ui/lab: parsed: +2.71% , gzip: +1.53%

Generated by 🚫 dangerJS against 9e436c0

[mnajdova]

Closing based on #34738 & https://twitter.com/MUI_hq/status/1582250101468270592?s=20&t=NUOS5JDE2x22BLLhIzj9cA