Open danilo-leal opened 5 months ago
Update here—it seems it could only be a syntax matter:
hsl(212 19 15)
doesn't workhsl(212 19% 15%)
doesn't workhsl(212, 19%, 15%)
works! ✅ Even though this solves my immediate problem for now, I think it might still be worth keeping the issue up, as all of these syntaxes are valid CSS (I'm just not 100% sure about the second option, though, with units and not commas—MDN doesn't mention it) and should be supported.
This is a valid issue but to properly solve it, it seems like we might have to use a proper color string parser (that might be used in libraries like lightningcss) instead of relying on simple regex patterns, which we are doing right now. This will increase the bundle size when using @mui/system
but will definitely help with Pigment CSS. I'll see if there is something that can be done for both.
Edit: This is in lightningcss that only handles color related features. Whole file might not be doing it but it's still a lot of cases to handle something that is not the core functionality of what we provide.
Steps to reproduce
StackBlitz repro: https://stackblitz.com/edit/react-ue9j7k-o6j3ve?file=Demo.js (inspect the Checkbox)
Current behavior
The theme file can receive colors in many formats, including
hsl()
andhsla()
, and the System'salpha()
function should be able to modify the alpha channel for all of them. That doesn't seem to be the case withhsl()
at the moment. If my color shade is defined like this in the theme:And I use the
alpha()
function like so:I see this on the dev tools:
Expected behavior
I would expect the
alpha()
function to work the same as it does with HEX color values or evencolor(display-p3)
.Context
I want to define all of the branding theme colors in HSL, a much easier to read/manipulate color notation, instead of HEX codes.
Search keywords: color manipulator, alpha function, hsl