Add CSS variables support for Material UI components #32835

siriwatknp · 2022-05-20T02:36:38Z

✅ #32868 is merged.

A part of #32049 as described in #32049 (comment)

The new tokens are added to experimental_extendTheme.js. I decided not to go with palette.grey.contrast{number} as described in the proposal because it is not practical when I tried to apply it to the components (the main problem is the Chip component).

Instead, I extract the color manipulation into the component tokens which is easier to read and customize.

Why new tokens are necessary?

We intend to ship CSS variables support as a feature in v5 (no breaking change) so when developers opt-in to this feature, they should have the SSR flashing issue fixed (that's what we will advertise). However, some components' implementation contains runtime calculations to switch values between modes, so the new tokens are needed to preserve the same behavior.

Naming

I think the token should have the shortest name possible because it makes the DevTool and usage cleaner. Also, the palette already implies that the tokens are color-related so I don't think bgColor or borderColor is necessary. Lastly, the common customization flow would start from seeing the variable from DevTool and then specify the variable in the theme, so I don't think using bg (the abbreviation of background) will cause confusion.

--mui-palette-AppBar-defaultBg
// is better than --mui-palette-AppBar-defaultBackgroundColor

Here are the new tokens:

theme.palette.AppBar.defaultBg
theme.palette.Chip.defaultBorder
theme.palette.Chip.defaultAvatarColor
theme.palette.Chip.defaultIconColor
theme.palette.FilledInput.bg
theme.palette.FilledInput.hoverBg
theme.palette.FilledInput.disabledBg
theme.palette.LinearProgress.primaryBg
theme.palette.LinearProgress.secondaryBg
theme.palette.LinearProgress.errorBg
theme.palette.LinearProgress.infoBg
theme.palette.LinearProgress.successBg
theme.palette.LinearProgress.warningBg
theme.palette.Skeleton.bg
theme.palette.Slider.primaryTrack
theme.palette.Slider.secondaryTrack
theme.palette.Slider.errorTrack
theme.palette.Slider.infoTrack
theme.palette.Slider.successTrack
theme.palette.Slider.warningTrack
theme.palette.SnackbarContent.bg
theme.palette.StepConnector.border
theme.palette.StepContent.border
theme.palette.Switch.defaultColor
theme.palette.Switch.defaultDisabledColor
theme.palette.Switch.primaryDisabledColor
theme.palette.Switch.secondaryDisabledColor
theme.palette.Switch.errorDisabledColor
theme.palette.Switch.infoDisabledColor
theme.palette.Switch.successDisabledColor
theme.palette.Switch.warningDisabledColor
theme.palette.TableCell.border
theme.palette.Tooltip.bg

The next step is to use this pattern in the existing PRs.

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2022-05-20T02:39:56Z

Details of bundle changes

@material-ui/core: parsed: +1.78% , gzip: +1.05%
@material-ui/lab: parsed: +0.35% , gzip: +0.15%

Generated by 🚫 dangerJS against 44d1e3c

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

mnajdova

I decided not to go with palette.grey.contrast{number} as described in the #32049 (comment) because it is not practical when I tried to apply it to the components (the main problem is the Chip component).

I can still see usage of contrast4 in the Chip I guess we need to update it?

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

…rial-ui/css-vars

siriwatknp · 2022-06-15T05:31:16Z

@mnajdova Can you take a look at the PR again?

Renamed some variables to make them shorter (the idea behind is in the description)
Use --mui as a prefix to refer to Material UI (I think --md does not make sense since we have Mui all over the places)

danilo-leal

This is great, excellent work, Jun! Way better to read colors like this, so refreshing!
Let me know if you need my help with anything else for this one.

Side note: I wish we had a different prefix other than mui but 🤷 that's life at this moment! 😅

mnajdova

One instance where TypeScript would have caught some issues :)

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

mnajdova · 2022-06-15T12:17:58Z

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

-  },
+  ...(!theme.vars && {
+    '&:-webkit-autofill': {
+      WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',


Maybe few more use-cases for the unset CSS var :)

I think we should not put them in theme tokens yet. These are not directly palette tokens. There are only 2 components that contain this logic FilledInput and OutlinedInput, so I think let's wait for feedback from the community first.

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

siriwatknp · 2022-06-16T08:21:14Z

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

+  ...(theme.vars && {
+    '&:-webkit-autofill': {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit',
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff',
+      },
+    },
+  }),


@mnajdova This is the logic when CSS variables exist which uses CSS selector when the mode is dark. I think we can move forward with this (it does not cause dark mode flicker) instead of creating 3 new tokens (the more tokens the bigger CSS output).

Ah that makes sense 👍

siriwatknp · 2022-06-16T12:56:33Z

@vicasas Would you mind taking a look if the naming makes sense to you?

vicasas · 2022-06-16T14:17:56Z

Hi! @siriwatknp I find it incredible! What a great job with Css Vars 👏.

I have the following doubts:

Regarding token names, I'm having trouble differentiating between [Component].bg and [Component].defaultBg, same for [Component].border and [Component].defaultBorder. There is a difference (apart from the color that each one contains)? just to understand
Do I not see the tokens for the Alert, Avatar and SpeedDialAction components in the change or will we build them as those components are taken?

Everything else looks good (:

siriwatknp · 2022-06-16T16:02:44Z

Regarding token names, I'm having trouble differentiating between [Component].bg and [Component].defaultBg, same for [Component].border and [Component].defaultBorder. There is a difference (apart from the color that each one contains)? just to understand

The default refers to the background when <AppBar color="default"> . Noted that we need to document this one.

Do I not see the tokens for the Alert, Avatar and SpeedDialAction components in the change or will we build them as those components are taken?

Good point. I will update those components in their PRs (which already existed) after this one is merged.

siriwatknp · 2022-06-16T16:04:07Z

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

-      !ownerState.enableColorOnDark && {
-        backgroundColor: null,
-        color: null,
+    ...(theme.vars && {


Preview: https://deploy-preview-32835--material-ui.netlify.app/experiments/material-ui/app-bar/

siriwatknp · 2022-06-16T16:13:06Z

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

+      ...(ownerState.color === 'default' && {
+        '--AppBar-background': ownerState.enableColorOnDark
+          ? theme.vars.palette.AppBar.defaultBg
+          : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
+        '--AppBar-color': ownerState.enableColorOnDark
+          ? theme.vars.palette.text.primary
+          : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary),


@mnajdova the case of AppBar is tricky but I managed to make it works.

To prevent dark mode flickers, we need to make sure that the stylesheet does not change between modes. That's why I have to introduce:

// component variables inside AppBar --AppBar-background --AppBar-color // and use it as usual backgroundColor: 'var(--AppBar-background)', color: 'var(--AppBar-color)',

and then at the global theme tokens, create --mui-palette-AppBar-darkBg only for dark mode.

This will allow the AppBar to use the fallback value when it is on light mode without changing the component stylesheet.

...(ownerState.color === 'default' && { '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg), // The result is '--AppBar-background': 'var(--mui-palette-AppBar-darkBg, var(--mui-palette-AppBar-defaultBg))

This is closer to what I had in mind, the only difference that I was thinking about is setting the value of unset, but not generating the CSS vars is even better 👍

setting the value of unset

Setting the variable to unset would not work because the variable exists so it won't use the fallback value.

// the background will be transparent --variable-1: unset; background-color: var(--variable-1, #fff);

// the background will be white background-color: var(--variable-1, #fff);

mnajdova

I could find one final bug, the rest looks good

packages/mui-material/src/styles/experimental_extendTheme.js

Co-authored-by: Marija Najdova <mnajdova@gmail.com>

siriwatknp added 15 commits May 19, 2022 17:20

AppBar

878e107

Chip

0f876ce

FilledInput

fd5022b

LinearProgress

6ce82c9

OutlinedInput

b64dcf6

Skeleton

e4d1ec7

Slider

8eb3c25

SnackbarContent

df07e92

StepConnector

328d2bf

StepContent

4f05cce

Switch

2da19e4

TableCell

14b38da

fix Chip

626edc0

check table cell

621f8d5

add component tokens

f7f5a99

siriwatknp added the new feature New feature or request label May 20, 2022

siriwatknp commented May 20, 2022

View reviewed changes

packages/mui-material/src/FilledInput/FilledInput.js Outdated Show resolved Hide resolved

siriwatknp mentioned this pull request May 20, 2022

Migrate Material UI components to support theme CSS variables #32049

Closed

65 tasks

siriwatknp changed the title ~~Add support for CSS variables for Material UI~~ Add CSS variables support for Material UI components May 20, 2022

fix tests

82286e5

siriwatknp force-pushed the material-ui/css-vars branch from e4eceab to 82286e5 Compare May 20, 2022 04:02

siriwatknp requested review from mnajdova, oliviertassinari and danilo-leal May 23, 2022 03:04

mnajdova reviewed May 23, 2022

View reviewed changes

packages/mui-material/src/Chip/Chip.js Outdated Show resolved Hide resolved

packages/mui-material/src/Chip/Chip.js Outdated Show resolved Hide resolved

packages/mui-material/src/Chip/Chip.js Outdated Show resolved Hide resolved

siriwatknp added 4 commits May 24, 2022 07:31

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

8e335f4

…rial-ui/css-vars

fix Chip

dd910d8

remove optional chaining

1c4216b

move skeleton var to palette

0b2e29b

siriwatknp added 11 commits June 15, 2022 12:00

fix Chip naming

309414f

fix FilledInput nameing

a2a3ba5

fix LinearProgress naming

9c853ed

fix Skeleton naming

f28084d

fix SnackbarContent naming

6ae67ea

fix Step naming

7aa8424

fix table cell naming

95bf84b

fix Tooltip naming

e5f7592

fix opacity placholder naming

9f2d7cf

fix tests

af6c851

rename --md to --mui

989d1ca

siriwatknp force-pushed the material-ui/css-vars branch from 93fb139 to 989d1ca Compare June 15, 2022 05:27

danilo-leal approved these changes Jun 15, 2022

View reviewed changes

mnajdova reviewed Jun 15, 2022

View reviewed changes

siriwatknp added 2 commits June 16, 2022 14:59

fix AppBar enableColorOnDark

78093c1

fix types

aca5718

siriwatknp requested a review from mnajdova June 16, 2022 08:17

siriwatknp commented Jun 16, 2022

View reviewed changes

siriwatknp requested a review from vicasas June 16, 2022 12:55

siriwatknp commented Jun 16, 2022

View reviewed changes

mnajdova reviewed Jun 17, 2022

View reviewed changes

packages/mui-material/src/styles/experimental_extendTheme.js Outdated Show resolved Hide resolved

mnajdova reviewed Jun 17, 2022

View reviewed changes

packages/mui-material/src/styles/experimental_extendTheme.js Outdated Show resolved Hide resolved

Apply suggestions from code review

44d1e3c

Co-authored-by: Marija Najdova <mnajdova@gmail.com>

siriwatknp merged commit d14be1c into mui:master Jun 17, 2022

siriwatknp mentioned this pull request Jun 19, 2022

[Alert] Add support for CSS vars #32624

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add CSS variables support for Material UI components #32835

Add CSS variables support for Material UI components #32835

siriwatknp commented May 20, 2022 •

edited

mui-bot commented May 20, 2022 •

edited

mnajdova left a comment

siriwatknp commented Jun 15, 2022

danilo-leal left a comment

mnajdova left a comment

mnajdova Jun 15, 2022

siriwatknp Jun 16, 2022

siriwatknp Jun 16, 2022

mnajdova Jun 16, 2022

siriwatknp commented Jun 16, 2022

vicasas commented Jun 16, 2022 •

edited

siriwatknp commented Jun 16, 2022

siriwatknp Jun 16, 2022

siriwatknp Jun 16, 2022 •

edited

mnajdova Jun 17, 2022

siriwatknp Jun 17, 2022 •

edited

mnajdova left a comment

Add CSS variables support for Material UI components #32835

Add CSS variables support for Material UI components #32835

Conversation

siriwatknp commented May 20, 2022 • edited

Why new tokens are necessary?

Naming

mui-bot commented May 20, 2022 • edited

mnajdova left a comment

Choose a reason for hiding this comment

siriwatknp commented Jun 15, 2022

danilo-leal left a comment

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

mnajdova Jun 15, 2022

Choose a reason for hiding this comment

siriwatknp Jun 16, 2022

Choose a reason for hiding this comment

siriwatknp Jun 16, 2022

Choose a reason for hiding this comment

mnajdova Jun 16, 2022

Choose a reason for hiding this comment

siriwatknp commented Jun 16, 2022

vicasas commented Jun 16, 2022 • edited

siriwatknp commented Jun 16, 2022

siriwatknp Jun 16, 2022

Choose a reason for hiding this comment

siriwatknp Jun 16, 2022 • edited

Choose a reason for hiding this comment

mnajdova Jun 17, 2022

Choose a reason for hiding this comment

siriwatknp Jun 17, 2022 • edited

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

siriwatknp commented May 20, 2022 •

edited

mui-bot commented May 20, 2022 •

edited

vicasas commented Jun 16, 2022 •

edited

siriwatknp Jun 16, 2022 •

edited

siriwatknp Jun 17, 2022 •

edited