[theme] Improve default `primary`, `secondary` and `error` theme palette #26555

siriwatknp · 2021-06-02T07:49:24Z

follow up from #26541

close #18378: dark mode following the spec
close #18776: dark mode color contrast
closes #26288: error color contrast in light mode

https://deploy-preview-26555--material-ui.netlify.app/

The goal of this PR is to have default color palette that pass AA standard for both light & dark theme. From the outcome of #26541, it is not possible to have one color that pass AA standard for both light & dark theme. So the color must be different between mode (same shade but different lightness)

https://material.io/design/color/dark-theme.html#ui-application

Primary color

V4 ❗️

indigo[500] in default theme does not pass standard in dark mode

V5 ✅

use custom color in the docs blue[700] so that the docs does not change much and the logo looks consistent.
adjust primary.dark and primary.light close to the docs

Secondary color

V4 ❗️

pink.A400 in default theme does not pass standard in light & dark mode

V5 ✅

change to purple[500] because the docs used pink.A400 which does not pass AA standard and the color is too close to error. As far as I tried, I feel purple sit very well with the primary (blue) color.
use purple[200] in dark mode similar to primary color

Error color

V4 ❗️

red[500] does not pass standard in light mode

V5 ✅

increase the number to red[700] in light mode

Info color

change to cyan[500] (it was blue[500] in v4) to not use the same color as v5 primary color and still informative color.

warning and success remains the same.

Preview of some components

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

mui-pr-bot · 2021-06-02T07:51:49Z

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against ffa7c77

…ial-ui into new-default-theme-color

oliviertassinari · 2021-06-03T00:17:12Z

Is it closing #18776 too?

siriwatknp · 2021-06-03T01:33:46Z

Is it closing #18776 too?

Great, 👍

…ial-ui into new-default-theme-color

siriwatknp · 2021-06-03T03:12:55Z

packages/material-ui/src/FormLabel/FormLabel.test.js

@@ -4,6 +4,8 @@ import { expect } from 'chai';
 import { createMount, describeConformanceV5, act, createClientRender } from 'test/utils';
 import FormLabel, { formLabelClasses as classes } from '@material-ui/core/FormLabel';
 import FormControl, { useFormControl } from '@material-ui/core/FormControl';
+import { hexToRgb } from '@material-ui/core/styles';
+import defaultTheme from '../styles/defaultTheme';


use defaultTheme here to remove hard coded color in the test below.

I wonder should defaultTheme be exported as defaultLightTheme from @material-ui/core/styles also?

In my side project I use defaultTheme a lot and it is quite annoying to call createTheme() everytime.

eps1lon

The goal of this PR is to have default color palette that pass AA standard for both light & dark theme.

Was this not the case before? Listing these instances in a single place might be interesting for people that manually patched them for this purpose. Sounds like they can now remove code only targetted at patching AA ratio.

which will close #18378, #18776

Github will only close one of them. Each referenced issue/pr needs to have its own magic keyword associated

eps1lon · 2021-06-03T07:56:45Z

packages/material-ui/src/styles/createPalette.test.js

+        'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', // warning palette
+        'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', // info palette
+        'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', // success palette


Do we include the color in the warning? If not then we can follow-up. Otherwise I'd make sure the color is included in the assertion which means we can get rid of the (potentially wrong) code comments.

2 lines was there at the beginning (1 more is added because info is changed to cyan[500], it's sound intentional that we expect the colors to falls below contrast ratio. I was confused at first about this test so I added comments at the end. Any suggestion?

siriwatknp · 2021-06-03T08:37:13Z

Was this not the case before?

If you mean #26541, it is related but different. This PR fix the default color from the theme where as #26541 remove custom color in the docs.

Listing these instances in a single place might be interesting for people that manually patched them for this purpose

You mean add to documentation?

eps1lon · 2021-06-03T09:14:35Z

Was this not the case before?

If you mean #26541, it is related but different.

No, I mean the direct thing I responded to:

The goal of this PR is to have default color palette that pass AA standard

In which instances did we not pass AA?

You mean add to documentation?

In the PR in a prominent spot so that you don't have to read through unrelated conversations to figure out what changed.

siriwatknp · 2021-06-03T10:05:03Z

In which instances did we not pass AA?

Updated the description

primary color indigo[500] in dark mode
secondary color pink.A400 in light & dark mode
error color red[500] in light mode

oliviertassinari

I'm updating the PR's description, it fixes #26288 too. Regarding the contrast issue with error. See below, top down:

Colors used in MD guidelines videos
Colors used in the previous version on material design web components
Our new color

michaldudak · 2021-06-04T08:15:22Z

Could we also change the background color of code? The current greenish-brown seems a bit out of place as it doesn't match anything else on page. IMO it doesn't play well with with the cyan when there's an a inside code (even though the contrast ratio is OK, it just doesn't feel right):

I propose we use the same background as in pre:

or something a bit lighter, like #333944:

siriwatknp · 2021-06-04T13:16:49Z

@michaldudak updated! 👍

docs/src/modules/components/MarkdownElement.js

in mui/material-ui#21514 pseudo classes were moved from root to content, so we no longer need nested selectors and rules need to go on content directly use Mui-focused instead of :focus also restore muiv4 treeitem label color rule to get a different color right after a click on an item. It was also removed in treeitem in mui/material-ui#21514 Note: in v5 primary.main was changed from indigo to blue in mui/material-ui#26555) but let's go with the new primary colors Note2: fade renamed to alpha

After a quick look, we didn' customize TreeViewFinder which also uses TreeView/TreeItem so it shouldn't need the same fixing as ReportViewer. in mui/material-ui#21514 pseudo classes were moved from root to content, so we no longer need nested selectors and rules need to go on content directly use Mui-focused instead of :focus also restore muiv4 treeitem label color rule to get a different color right after a click on an item. It was also removed in treeitem in mui/material-ui#21514 Note: in v5 primary.main was changed from indigo to blue in mui/material-ui#26555) but let's go with the new primary colors Note2: fade renamed to alpha

After a quick look, we didn' customize TreeViewFinder which also uses TreeView/TreeItem so it shouldn't need the same fixing as ReportViewer. in mui/material-ui#21514 pseudo classes were moved from root to content, so we no longer need nested selectors and rules need to go on content directly use Mui-focused instead of :focus also restore muiv4 treeitem label color rule to get a different color right after a click on an item. It was also removed in treeitem in mui/material-ui#21514 Note: in v5 primary.main was changed from indigo to blue in mui/material-ui#26555) but let's go with the new primary colors Note2: fade renamed to alpha Co-authored-by: Sylvain Bouzols <sylvain.bouzols@gmail.com>

siriwatknp added 2 commits June 2, 2021 11:22

wip

c4769db

new default color

cc49082

siriwatknp added accessibility a11y breaking change labels Jun 2, 2021

remove hard coded color test

67ad326

github-actions bot mentioned this pull request Jun 2, 2021

Update snapshots for pr/26555 eps1lon/mui-scripts-incubator#2506

Closed

siriwatknp added 6 commits June 2, 2021 15:32

add one more error log expect

ab584bc

Merge branch 'mui-org:next' into new-default-theme-color

576fc04

update primary dark mode

56c106d

Merge branch 'new-default-theme-color' of github.com:siriwatknp/mater…

0c90ea0

…ial-ui into new-default-theme-color

revert change

7b279ab

Merge branch 'mui-org:next' into new-default-theme-color

4057597

oliviertassinari mentioned this pull request Jun 3, 2021

[docs] Remove custom primary & secondary color #26541

Merged

1 task

siriwatknp requested review from eps1lon, oliviertassinari, mnajdova and michaldudak June 3, 2021 01:33

siriwatknp marked this pull request as ready for review June 3, 2021 01:35

siriwatknp added 2 commits June 3, 2021 10:04

use value from theme

0fbddad

Merge branch 'new-default-theme-color' of github.com:siriwatknp/mater…

8916d2c

…ial-ui into new-default-theme-color

siriwatknp commented Jun 3, 2021

View reviewed changes

eps1lon reviewed Jun 3, 2021

View reviewed changes

oliviertassinari changed the title ~~Update default primary, secondary and error theme palette~~ [theme] Update default primary, secondary and error theme palette Jun 3, 2021

oliviertassinari approved these changes Jun 3, 2021

View reviewed changes

oliviertassinari changed the title ~~[theme] Update default primary, secondary and error theme palette~~ [theme] Improve default primary, secondary and error theme palette Jun 3, 2021

This comment has been minimized.

Sign in to view

fix code color

d723254

This comment has been minimized.

Sign in to view

oliviertassinari reviewed Jun 5, 2021

View reviewed changes

docs/src/modules/components/MarkdownElement.js Outdated Show resolved Hide resolved

target only a code

ffa7c77

siriwatknp merged commit e35bef1 into mui:next Jun 7, 2021

siriwatknp deleted the new-default-theme-color branch June 7, 2021 10:31

jonenst mentioned this pull request May 23, 2023

Fix ReportViewer report-item treeitem css after mui v5 migration gridsuite/commons-ui#262

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[theme] Improve default `primary`, `secondary` and `error` theme palette #26555

[theme] Improve default `primary`, `secondary` and `error` theme palette #26555

siriwatknp commented Jun 2, 2021 •

edited by oliviertassinari

mui-pr-bot commented Jun 2, 2021 •

edited

oliviertassinari commented Jun 3, 2021

siriwatknp commented Jun 3, 2021

siriwatknp Jun 3, 2021

eps1lon left a comment

eps1lon Jun 3, 2021

siriwatknp Jun 3, 2021 •

edited

siriwatknp commented Jun 3, 2021

eps1lon commented Jun 3, 2021

siriwatknp commented Jun 3, 2021

oliviertassinari left a comment •

edited

michaldudak commented Jun 4, 2021

siriwatknp commented Jun 4, 2021

This comment has been minimized.

This comment has been minimized.

[theme] Improve default primary, secondary and error theme palette #26555

[theme] Improve default primary, secondary and error theme palette #26555

Conversation

siriwatknp commented Jun 2, 2021 • edited by oliviertassinari

Primary color

V4 ❗️

V5 ✅

Secondary color

V4 ❗️

V5 ✅

Error color

V4 ❗️

V5 ✅

Info color

Preview of some components

mui-pr-bot commented Jun 2, 2021 • edited

oliviertassinari commented Jun 3, 2021

siriwatknp commented Jun 3, 2021

siriwatknp Jun 3, 2021

Choose a reason for hiding this comment

eps1lon left a comment

Choose a reason for hiding this comment

eps1lon Jun 3, 2021

Choose a reason for hiding this comment

siriwatknp Jun 3, 2021 • edited

Choose a reason for hiding this comment

siriwatknp commented Jun 3, 2021

eps1lon commented Jun 3, 2021

siriwatknp commented Jun 3, 2021

oliviertassinari left a comment • edited

Choose a reason for hiding this comment

michaldudak commented Jun 4, 2021

siriwatknp commented Jun 4, 2021

This comment has been minimized.

This comment has been minimized.

[theme] Improve default `primary`, `secondary` and `error` theme palette #26555

[theme] Improve default `primary`, `secondary` and `error` theme palette #26555

siriwatknp commented Jun 2, 2021 •

edited by oliviertassinari

mui-pr-bot commented Jun 2, 2021 •

edited

siriwatknp Jun 3, 2021 •

edited

oliviertassinari left a comment •

edited