[colorManipulator] lighten/darken a CSS var() color

[kiddliu]

Summary

Hi, I'm working on my own design system implementation with MUI v6 (base + system). Previously, with utilities in colorManipulator I can easily lighten/darken a color defined in palette. With CSS variables, now it's difficult and I have to augment the palette a lot. For alpha the solution is with pure CSS function rgba, probably for lighten/darken I should go with the same way? Or, by getComputedStyle I can run the same function just as before?

Examples

-      color: darken(theme.palette.primary.main),
+      color: darken(theme.vars.palette.primary.main),

Motivation

No response

Search keywords: colorManipulator lighten darken var CSS color

[oliviertassinari]

Almost the same as #43180 no?

[kiddliu]

You save my day @oliviertassinari ...any plan when to update the colorManipulator implementation?

[oliviertassinari]

I'm working on my own design system implementation with MUI v6 (base + system).

@kiddliu Do you mean that you are using Base UI + MUI System and skipping Material UI?

[kiddliu]

Yes...I did start with Material UI and later because of several design differences it seems that building the library with headless Base UI is a better solution. Now most of the components are still of Material, and some unique ones are created with Base UI and System