search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.76k stars 32.25k forks source link

[colorManipulator] Theme colors in the new syntax without comma (`rgb(106 27 154)`) fail to generate correct contrast color for buttons #43382

Open kgrhartlage opened 2 months ago

kgrhartlage commented 2 months ago

Steps to reproduce

Link to live example: codesandbox

Steps:

  1. Assign a dark theme color in the newer syntax using the rgb color function, for example rgb(106 27 154)
  2. Render a contained button that uses this theme color as its background: <Button variant="contained">click me</Button>
  3. Observe the text color being dark as well
  4. Change the theme color to the legacy syntax with commas: rgb(106, 27, 154)
  5. Observe the button now having a white contrast text color

Current behavior

A dark rgb theme color in the new color syntax results in the wrong contrast text being applied:

CleanShot 2024-08-20 at 15 01 32@2x

I reckon this might affect other areas as well, but I have only identified this behavior for the Button component

Expected behavior

I expect a button with a dark theme color background to have white contrast text:

CleanShot 2024-08-20 at 15 03 31@2x

Context

No response

Your environment

Chrome Version 127.0.6533.120 (Official Build) (arm64)

npx @mui/envinfo ``` System: OS: macOS 12.4 Binaries: Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm pnpm: Not Found Browsers: Chrome: 127.0.6533.120 Edge: Not Found Safari: 15.5 npmPackages: @emotion/react: 11.13.0 @emotion/styled: 11.13.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.6 @mui/icons-material: 5.16.6 @mui/lab: 5.0.0-alpha.173 @mui/material: 5.16.6 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.6 @mui/types: 7.2.15 @mui/utils: 5.16.6 @mui/x-date-pickers: 7.12.0 @types/react: 18.3.3 react: 18.3.1 react-dom: 18.3.1 styled-components: 6.1.12 typescript: ^5.5.4 => 5.5.4 ```

Search keywords: contrast, comma, rgb

oliviertassinari commented 2 months ago

~It's the same thing as https://lea.verou.me/blog/2024/contrast-color/#does-this-mythical-l-threshold-actually-exist%3F no? actual color contrast is not the same thing as WAI-ARIA color contrast compliance. https://webaim.org/resources/contrastchecker/?fcolor=6A1B9A&bcolor=FFFFFF~

Ah no, it's: related to #20492

siriwatknp commented 2 months ago

Let me check if https://github.com/mui/material-ui/pull/43289 fixes this issue or not.