You can simplify the code by using transparent as starting color so you don’t have to do the calculation:

/* Return a 70% transparent red */
color: color-mix(in oklab, transparent, red 70%)

Also this is basically useless since we can’t set opacity for the shadow color once you set the variable…🤦

Agreeing with @Equinusocio, this does not work for me.

Curious how in the video these variables are accessed. I‘m clicking where the person in the video clicks, but I don‘t get the option to bind it to a variable.

+1 to this! I’ve been struggling with this a lot. The layer workaround in the Tweet is enough for me for now, but directly applying the opacity to a variable referenced by a token would be much better. Hope to see it soon 🙂

Right click on the field. Really subtle. Sometime there is the icon, sometime you have to right click (on textfields). Really bad UI decisions lately.

Oh, I see. I hope this is a temporary solution because variables are in beta, and they‘ll make it more intuitive after the official launch.

You can also shift + left click the field to go straight to the variables, this works on other variable fields too such as border radius, height etc. Not intuitive but a handy shortcut

Replying because I CANNOT believe this is still not possible… How hard is it to implement this much needed feature?

Oversights like this make using variables awkward and lead to bad practice when time is tight.

It’s a similar issue to not being able to just apply “bold” or another formatting override to a text style (especially inside a text block!)

It’s adding blockers to a system that’s meant to make everyone’s job easier.

Having to add a seperate variable for every 10 opacity is working harder, not smarter.