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
94.1k stars 32.35k forks source link

[colorManipulator] Support the `oklch` color notation #41728

Open danilo-leal opened 8 months ago

danilo-leal commented 8 months ago
Screenshot 2024-03-31 at 13 50 16

I was experimenting with converting the branding theme palette from HEX codes to the oklch() notation, but the current version of the MUI System doesn't support it, even though it does already support color(display-p3...).

I'm also a bit unsure whether this is System or Pigment CSS scope, so I'll leave that open for now.

Ultimately, this seems like the best color notation to use at the moment^1, providing the same great readability that HSL has, but supporting the p3 and other color spaces. I'm super interested in converting the website & documentation to use it (and, of course, Material UI v7 should potentially use it as well). I think in the meantime I'll use color(display-3).

Search keywords: oklch, color notation, p3, wide-gamut

brijeshb42 commented 8 months ago

It mainly lies in system. When fixed there, it'll automatically get fixed in Pigment.

wouter-leistra commented 2 weeks ago

Is there already any news on when this will be added. I started hopeful today that this issue was resolved and setup my css :root design tokens using oklch and now i see the same error.

image image