[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

[RickyRoller]

You can use color-mix
Darken

color: ${({ theme }) => darken(theme.palette.primary.default, 0.5)}
color: ${({ theme }) => `color-mix(in srgb, ${theme.vars.palette.primary.default} 50%, black)`};

Lighten

color: ${({ theme }) => lighten(theme.palette.primary.default, 0.5)};
color: ${({ theme }) => `color-mix(in srgb, ${theme.vars.palette.primary.default} 50%, white)`};

https://caniuse.com/?search=color-%20mix

[kiddliu]

I think the tricky part is that you have no idea in what color space the actual color is defined in a CSS variable from the library perspective

[siriwatknp]

I think the tricky part is that you have no idea in what color space the actual color is defined in a CSS variable from the library perspective

I am working on #43942 to let you define a color space you want to use.
The color space will be used in color-mix(in ${colorSpace}, …).