Variables in Effects: shadows, blurs

It would be nice to be able to use variables in the shadow color effect. Right now I can only pick a color from a variable and then the value is copied but this doesn’t work when I have modes selected.

I’m hoping this is part of the “and more” mentioned on this page.

This feels like a bug. I’m using color variables for theming for multiple customers (e.g. light and dark mode base primitives with subset/brand; subset/brand varied per customer, with functional names cued across modes to primitives). I had to ditch drop shadows on some component states because the tool can’t include its color value for different modes. I think this needs to be there for theming to feel fully usable.

Thanks for the feedback!

We’l pass this onto our Variables team for future consideration.

I have seen workarounds where you would make an object behind your surface with a blur effect. This method allows you to use a semantic color for the shadow. However, I personally would wait until an update comes out. They are coming out with ANOTHER 21+ “little updates” that I hope tackle things like this.

How frustrating! 🤦‍♂️t3:

Now I have to create duplicate variants for my component showing a light gradient, and another dark for dark mode support.

We are unable to refactor our design system to use variables instead of multiple style libraries because variables are missing in Effects.

Until then it makes no sense to migrate colors to variables, but keep effects as styles, because those effects force us to still hang on to multiple style library landscape.

😔

This has been fixed!

I’m able to use Number and Color variables in Effects.

We need this for our multi-brand design system i.e. when creating states for buttons: some brands have a drop shadow with various properties, others have drop shadows with different properties, and some brands have no drop shadow at all. I feel like this needs to be included for theming to work properly, and we are in desperate need of it

Hey there-- we still aren’t able to convert effect (Drop shadow ) to variables and apply them to other components like buttons, snackbars etc yet correct ? Or did I miss an update. LMK please thank you.

You can’t save the Effects as Variables, only as Styles. So that’s not going to work like you’d want.

You CAN use variables in the effect number fields (e.g., Position, Blur, Spread), so they can be standardized or altered with modes.

You can select colors in the Color field that you’ve defined in the variables but they don’t operate as a variable in the effect, just as like a copied in hex value.

Thanks-- so the styles are acting as containers-- just like with Typography-- it is a style-- within Type style , line height, type name etc can be variables. Great. Makes sense. 🙏