[Material You] Add theme structure & Button component

[mnajdova]

What's the PR about

This is a proof of concept of how we can add support for Material You incrementally without introducing breaking changes (see #29345) and at the same time allow the new components to co-exist in an environment where @mui/material is used. 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.

👉 Playground link (inspired by #29345 (comment))
👉 Default theme showcase link - it should work without using CssVarsProvider
👉 Showcase of coexisting with @mui/material (Material Design 2) link

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, and all other tokens are under the md3 key so that we can avoid conflicts with the existing theme).

Usage

import * as React from 'react';
import { extendTheme, CssVarsProvider } from '@mui/material-next/styles';
import Button from '@mui/material-next/Button';

// Default MD3 theme
const theme= extendTheme();

// Or with custom palette
const theme= extendTheme({
    colorSchemes: {
      light: {
        ref: { 
          palette: { md3: palette }
        },
      },
      dark: {
        ref: { 
          palette: { md3: palette }
        },
      }
    }
  });

function App() {
  return (
    <CssVarsProvider  theme={theme}>
      <Button variant="filledTonal">MD 3 button</Button>
    </CssVarsProvider>
  );
}

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-34650--material-ui.netlify.app/

@material-ui/core: parsed: +0.05% , gzip: +0.05%
@mui/material-next: parsed: -17.13% 😍, gzip: -14.97% 😍

Details of bundle changes

Generated by 🚫 dangerJS against b9dd876

[mnajdova]

TypeScript found this missing keys.

[mnajdova]

Needed to be used in the extendTheme in @mui/material-next so it was extracted and exported.

[siriwatknp]

how do we specify components css vars

I would not add all of the variables defined in the specs yet until we see them useful.

is the theme structured fine?

In long term, I'd say no. We should follow the m3 design specs to leverage their design tools, e.g. the Material Theme Builder (figma plugin) that generates tokens. If we have the theme structure close to their spec, I think we will have less unknown work from our side.

in general any other suggestions you may have

I am writing my thought in the discussion. I will post the link here when it is done.

[siriwatknp]

🤩 I'm pumped!

[michaldudak]

I don't have any remarks about Base usage. Just a tiny optimization/readability opportunity.

[danilo-leal]

Sweet, this is looking great⎯awesome work! Aside from the missing letter spacing declarations in a few of the text styles, there's nothing really standing out for me. I do wish though that the Playground demo would follow the same layout as in the Material 3 Figma file, just for the sake of ease of comparison as I think a bunch of folks will do the back & forth.

[mnajdova]

Sweet, this is looking great⎯awesome work! Aside from the missing letter spacing declarations in a few of the text styles, there's nothing really standing out for me. I do wish though that the Playground demo would follow the same layout as in the Material 3 Figma file, just for the sake of ease of comparison as I think a bunch of folks will do the back & forth.

The main reason why I didn't structure it like this, is because most of the items in figma are dependent on some interactions, like hover, focused etc. I guess we can think a bit more about how we want to document these components in a follow-up PR. We need to somehow fit them with the rest of the docs.