search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.3k stars 32.12k forks source link

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

Open kiddliu opened 4 weeks ago

kiddliu commented 4 weeks ago

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 commented 4 weeks ago

Almost the same as #43180 no?

kiddliu commented 3 weeks ago

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

oliviertassinari commented 3 weeks ago

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 commented 3 weeks ago

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