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.