Add way to change opacity for color variables alias, fills, strokes, etc

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:

22 Likes

+1 i need this

3 Likes

We need this as well! Hopefully, we can have this opacity-changing feature on top of aliasing variables when the variable feature is officially released (non-beta) version! thanks

3 Likes

I thought we were doing something wrong, now I see it’s not possible which is a bummer :frowning:

2 Likes

This is indeed needed :crossed_fingers:

+1, we need this

+1 for this. With the power of variables now, this would be amazing

Yes we need this! I basically want the token equivalent to:
opacity: .65

That you can apply to a component or colour.

2 Likes

+1,000! I have never voted for a feature or commented for a feature but here I am today. Would use this all day everyday.

4 Likes

Yes, +1 for this. I tried to figure it out for almost an hour until I saw this post and realized that it’s not possible at the moment… :smiley:

1 Like

We definitely need this asap :slight_smile:

Need this!

+1 we need this

+1 Badly need this!

+1 Need this badly

It’s virtually impossible to have a solid emphasis-level management for colors right now since it doesn’t make sense to add opacity to your “first tier tokens” and palettes in order to have variations on your aliased ones. Hopefully it gets added.

+1 Miss this feature too

Hey all! PM for the variables stream here. Would love to understand more as we’ve seen this request a lot. In the example above where @Equinusocio has brand/40 as a variable, if it were set to 50% opacity, how would you represent that in code? What would the equivalent of this be in css or on whatever platform you’re outputting to?

I want to make sure we’re approaching this in the right way, so any info here would help.

1 Like

We’re hitting this same issue. We’re setting semantic usage of Primary, secondary and tertiary labels which are percentages of solid at the primitive level.

We can set a layer percentage fill transparency but that is a very messy workaround.

1 Like