Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[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 this issue Aug 20, 2024 · 2 comments
Assignees
Labels
customization: css Design CSS customizability enhancement This is not a bug, nor a new feature package: system Specific to @mui/system

Comments

@kgrhartlage
Copy link

kgrhartlage commented Aug 20, 2024

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

@kgrhartlage kgrhartlage added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 20, 2024
@zannager zannager added package: system Specific to @mui/system customization: theme Centered around the theming features labels Aug 20, 2024
@oliviertassinari oliviertassinari changed the title Theme colors in the new syntax without comma (rgb(106 27 154)) fail to generate correct contrast color for buttons [colorManipulator] Theme colors in the new syntax without comma (rgb(106 27 154)) fail to generate correct contrast color for buttons Aug 20, 2024
@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 20, 2024

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

@oliviertassinari oliviertassinari added customization: css Design CSS customizability enhancement This is not a bug, nor a new feature and removed customization: theme Centered around the theming features labels Aug 20, 2024
@siriwatknp siriwatknp removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 21, 2024
@siriwatknp
Copy link
Member

Let me check if #43289 fixes this issue or not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
customization: css Design CSS customizability enhancement This is not a bug, nor a new feature package: system Specific to @mui/system
Projects
None yet
Development

No branches or pull requests

4 participants