[material][CssVarsProvider] Fix HSL breaking button styles

[gitstart]

Descriptions

Fixes color breaks when HSL colors is used.

closes #37400

---

This code was written and reviewed by GitStart Community. Growing great engineers, one PR at a time.

[gitstart]

@mnajdova @brijeshb42 @siriwatknp this PR is ready for review

[mui-bot]

Netlify deploy preview

https://deploy-preview-39869--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 95e163f

[mnajdova]

The logic looks good to me 👍 However, I wonder if this won't break some apps that depend on the previous logic of the color utils. @siriwatknp what do you think? Maybe tobe safe we can create a new decompose function that we would use in the CssVarsProvider only.

[siriwatknp]

The logic looks good to me 👍 However, I wonder if this won't break some apps that depend on the previous logic of the color utils. @siriwatknp what do you think? Maybe tobe safe we can create a new decompose function that we would use in the CssVarsProvider only.

I think the proper fix is to convert hsl to rgb for all the channel colors.

We could improve this in the future by replacing all channel tokens with color-mix().

[siriwatknp]

👍 Thanks for initiating the fix!

[mnajdova]

@siriwatknp this is what I meant, I haven't expressed myself clearly :D