[colorManipulator] Alpha function not working with the `hsl()` notation

[danilo-leal]

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() and hsla(), and the System's alpha() function should be able to modify the alpha channel for all of them. That doesn't seem to be the case with hsl() at the moment. If my color shade is defined like this in the theme:

const blue = {
  main: 'hsl(210 20 10)',
};

And I use the alpha() function like so:

bgcolor: alpha(theme.palette.primary.main, 0.2)

I see this on the dev tools:

background-color: hsla(210, undefined%, undefined%, 0.2)

Expected behavior

I would expect the alpha() function to work the same as it does with HEX color values or even color(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

[danilo-leal]

Update here—it seems it could only be a syntax matter:

• hsl(212 19 15) doesn't work
• hsl(212 19% 15%) doesn't work
• hsl(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.

[brijeshb42]

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.

[siriwatknp]

@danilo-leal Check this out! https://stackblitz.com/edit/vcqrkmgw?file=src%2FDemo.tsx

New color functions alpha, lighten and darken are added to the theme object. It can handle any CSS valid color (even a CSS variable) if native color syntax is enabled.

It's currently a WIP PR: #43942, you can participate by giving it a like to pushing to the finishing line.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.