Support for blend modes with variables

Our design system leverages mix blend modes for hover states so our icon buttons appear on any background color and remain accessible, without needing separate hover–on-primary, hover–on-secondary, etc tokens. We use multiply for light theme, and screen for dark theme. It would be really awesome if we could apply blend modes directly to the color variables, OR support blend modes as variables in general.

Our current work around is to apply the blend mode directly on each component variant, but this requires us to define separate light and dark theme variants. would be great if we could use variables here to have it automatically switch between light/dark.

3 Likes

Thanks for the feedback!

We’ll pass this onto our Variables team for consideration

2 Likes

thank you!!

+1 to this! It’s essential to implement apple’s official documentation for Material blurs using variables

please please please get this out next update. our team really need this.

Our team needs this as well! We are using “multiply” for our hover states to gain accessibility no matter what color the button background is, but need to turn this off in dark mode.