Set alpha value for color variable aliases

When I use a color variable (e.g. ref/brand) as a value of another color variable (e.g. sys/tableRow-hover) I would like to be able to specify the opacity value. This would allow me to achieve functionality of color modifiers which is very useful when creating interactive states when color on hover/press is generated based on the primary color being lightened/darkened or mixed with another color. Once the primary color is changed all interactive states colors would also change automatically preserving their amount of opacity.


Agreed. Opacity needs to be supported for color variables in several ways to be fully effective.

plus 1 here - Basically I was expecting to be able to set a colour variable, then use that a reference for 4 or 5 derivative styles where I can change the opacity. Right now I have to replicate in variables and then set up the styles, kind of defeating the usefulness of colour variables.


+1 here. It’s a totally essential features. For example, MUI React library use opacity modifiers constantly.

I am also using MUI and need opacity modifiers.

Yup, I’m on this train, too. +1(00)

Need to be able to use semantic-/component- level variables that reference a primitive @ 90%, for example.

I’m sure this is coming…just hope it’s sooner than later. Untethered values in the semantic-/component- level feel like detached components. :frowning:

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.