Skip to main content

When aliasing a color variable to another (img 1), or using it directly on an element (img 2), we should be able to override the opacity without the need to create a variable for each transparency variation:


Cant override opacity in the alias:


CleanShot 2023-06-22 at 10.09.00


Example 2


Cant override the fill opacity:


Or even better, allow modification of any values based on the original variable.

For example, changing Hue in HSL or Alpha in CSS.
 

With LAB+LCH/OKLCH color systems supporting updates, it will be HUGE!

It can change the way people think about color.

For other variables, it will also be beneficial; for example, to dynamically align inner and outer border radii.


+1 Also needing this feature


Does anyone have any sort of workaround? Most of my components use a background color on the base frame. I would have to rebuild my entire design system, or 10x the number of variables I have while losing the ability to reference the root color. How is this not addressed or supported?


+1 - Would love to have tokens for opacity independent of tokens for color


+1. It would allow for so much more flexibility. Would be amazing to be able to pair set opacity tokens WITH color tokens


+1 

 

Need this ASAP.


Reply