Open aaronadamsCA opened 2 years ago
I did find a syntax that works, but it's not the nicest: bg: (t) => alpha(lightness("muted", 0.95)(t), 0.95)(t)
Interesting, thanks for the well-written issue. To clarify, is this an issue only with our types, or with the functions themselves as well?
@lachlanjc I’d say this is a feature request for new function.
I’d probably try to build on top of getColor
from @theme-ui/color
and hsla
from polished
.
Yep, I filed this as a feature request. It may just be a limitation of the chosen syntax, but I'm increasingly finding I'd like to have easy control of both the L and A values in an HSLA value.
It's more or less the way Material You works in Android 12, for instance. It's a very powerful way to accept any input colour and make it appropriate to a given UI context.
Maybe a chained syntax would be preferable, like getColor("muted").lightness(0.95).alpha(0.95)
.
Is your feature request related to a problem? Please describe. I'd like to be able to easily set both lightness and alpha values for the same color value using the
@theme-ui/color
utilities.Describe the solution you'd like
bg: alpha(lightness("muted", 0.95), 0.95)
or similar.Describe alternatives you've considered Not sure. Current TS error:
There might be a way around it, but I can't figure it out right now.
Additional context Selecting both lightness and alpha is important for building themes with adaptive colour schemes.