[Material You] Add theme structure & Button component by mnajdova · Pull Request #34650 · mui/material-ui

mnajdova · 2022-10-07T10:21:52Z

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 · 2022-10-07T10:24:40Z

	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

…() util for material-next

Refactor to depend on CSS vars provider only

mnajdova · 2022-10-21T07:16:42Z

packages/mui-material/src/styles/experimental_extendTheme.d.ts

 export interface Opacity {
  inputPlaceholder: number;
  inputUnderline: number;
+  switchTrackDisabled: number;


TypeScript found this missing keys.

mnajdova · 2022-10-21T07:17:08Z

packages/mui-material/src/Paper/Paper.js

 import { getPaperUtilityClass } from './paperClasses';

-// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
-export const getOverlayAlpha = (elevation) => {


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

siriwatknp · 2022-10-25T04:15:27Z

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!

packages/mui-material-next/src/styles/styleFunctionSx.ts

michaldudak

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

packages/mui-material-next/src/Button/Button.tsx

…master

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.

packages/mui-material-next/src/styles/typescale.ts

Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: Marija Najdova <[email protected]>

mnajdova · 2022-11-21T11:36:27Z

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.

…master

[POC] Add createMD3Theme creator v2

5f1c550

mnajdova added design: material This is about Material Design, please involve a visual or UX designer in the process proof of concept labels Oct 7, 2022

More styles

81fd0cf

mnajdova changed the title ~~[POC] Add createMD3Theme creator v2~~ [POC] Add support for Material You (add new component) Oct 12, 2022

mnajdova added 3 commits October 18, 2022 14:25

More progress

4be5c86

vars fixes

9be7ed0

Make sizes work

eb71487

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 19, 2022

mnajdova added 15 commits October 19, 2022 16:12

Convert component to ts

995e5c0

fix import

dca1c60

Fix lint & prettier

61ebd28

Fix tsx issues

e81a363

Fix regression tests

545b646

Refactor to only use CSS vars, added default theme, add custom styled…

1a45e91

…() util for material-next

Merge pull request #35 from mnajdova/poc/support-css-vars-provider-only

f916db3

Refactor to depend on CSS vars provider only

Fix some CI issues

9fd9092

Fix build

c70d8dc

Cleanup docs experiments page

72b7375

Make it able to coexist with MD2

1ea8e95

Fix defaultTheme

755bb6f

lint fix

775bd0c

Use imports from @mui/material-next

fb1e07c

SxProps type

4c03b3b

mnajdova commented Oct 21, 2022

View reviewed changes

Don't export types just yet

2ea93a3

Remove component's CSS vars

5c16e1f

mnajdova added 2 commits November 16, 2022 13:31

Jun's reviewmerge

909f466

lint fix

5ffb6cf

mnajdova requested a review from siriwatknp November 16, 2022 13:00

siriwatknp approved these changes Nov 16, 2022

View reviewed changes

siriwatknp reviewed Nov 16, 2022

View reviewed changes

packages/mui-material-next/src/styles/styleFunctionSx.ts Outdated Show resolved Hide resolved

mnajdova added 3 commits November 16, 2022 19:18

Fix the sx palette mappings

2812dea

Fix lint issue

62c80e3

Fix ts issues

d418b4a

michaldudak reviewed Nov 18, 2022

View reviewed changes

packages/mui-material-next/src/Button/Button.tsx Outdated Show resolved Hide resolved

mnajdova added 4 commits November 18, 2022 14:40

Merge branch 'master' of https://github.com/mui-org/material-ui into …

1bb3f11

…master

Merge branch 'master' into poc/material-you-new-component

02fb061

Resolve Michal's review

4aef1c6

Fix lint issues

702bf5e

danilo-leal approved these changes Nov 21, 2022

View reviewed changes

packages/mui-material-next/src/styles/typescale.ts Show resolved Hide resolved

packages/mui-material-next/src/styles/typescale.ts Show resolved Hide resolved

packages/mui-material-next/src/styles/typescale.ts Show resolved Hide resolved

Apply suggestions from code review

0c1f512

Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: Marija Najdova <[email protected]>

mnajdova added 2 commits November 21, 2022 14:39

Merge branch 'master' of https://github.com/mui-org/material-ui into …

bcf632c

…master

Merge branch 'master' into poc/material-you-new-component

b9dd876

mnajdova changed the title ~~[POC] Add support for Material You (add new component)~~ [Material You] Add theme structure & Button component Nov 21, 2022

mnajdova mentioned this pull request Nov 21, 2022

5.10.15 #35221

Merged

1 task

mnajdova merged commit fe3dc18 into mui:master Nov 21, 2022

alexfauquette pushed a commit to alexfauquette/material-ui that referenced this pull request Nov 22, 2022

[Material You] Add theme structure & Button component (mui#34650)

12d631a

siriwatknp mentioned this pull request Nov 24, 2022

[system] Remove unnecessary parsed theme #35239

Merged

1 task

daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022

[Material You] Add theme structure & Button component (mui#34650)

17aa650

mnajdova added design: material you and removed design: material This is about Material Design, please involve a visual or UX designer in the process labels Nov 30, 2022

feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022

[Material You] Add theme structure & Button component (mui#34650)

4095b25

DiegoAndai mentioned this pull request Jul 3, 2023

Adopt Material Design 3 / Material You #29345

Open

37 tasks

mj12albert mentioned this pull request Oct 18, 2023

[material-next] Improve typography handling #38804

Open

6 tasks

lhilgert9 mentioned this pull request Dec 6, 2023

[Button][material-next] Apply new OwnerState type to Button #40125

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Material You] Add theme structure & Button component#34650

[Material You] Add theme structure & Button component#34650
mnajdova merged 66 commits intomui:masterfrom
mnajdova:poc/material-you-new-component

mnajdova commented Oct 7, 2022 •

edited

Loading

Uh oh!

mui-bot commented Oct 7, 2022 •

edited

Loading

Uh oh!

mnajdova Oct 21, 2022

Uh oh!

mnajdova Oct 21, 2022

Uh oh!

siriwatknp commented Oct 25, 2022 •

edited

Loading

Uh oh!

siriwatknp left a comment

Uh oh!

Uh oh!

michaldudak left a comment

Uh oh!

Uh oh!

danilo-leal left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mnajdova commented Nov 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Comments

Uh oh!

Conversation

mnajdova commented Oct 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's the PR about

Implementation details

Usage

Uh oh!

mui-bot commented Oct 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mnajdova Oct 21, 2022

Choose a reason for hiding this comment

Uh oh!

mnajdova Oct 21, 2022

Choose a reason for hiding this comment

Uh oh!

siriwatknp commented Oct 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

michaldudak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

danilo-leal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mnajdova commented Nov 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Comments

mnajdova commented Oct 7, 2022 •

edited

Loading

mui-bot commented Oct 7, 2022 •

edited

Loading

siriwatknp commented Oct 25, 2022 •

edited

Loading