Problem with using $background tokens in components

[aagonzales]

The existing problem

When working with components that have transparent backgrounds and show through the layer below is causing problems with interactive states. The current $background states inside of components do not work across layers and does not match the layering model structure. This is especially noticeable in the dark themes. Here in the example the ghost button is use $background-hover

Layering tokens don't work

Naturally, thinking the layering tokens and layer component should fix the problem but it doesn’t. It actually creates a mismatch in hover styles since the layering token and layer component does not account for the background layer. So the first hover color used is one step off (for example, $layer-01 is visually getting a $layer-02-hover state).

This is how the tokens and values should match up but the layering tokens and component doesn't account for that first background level and therefor this method of implementation is not currently possible.

Proposed solution

I think the best solution is to continue to use the $background-state tokens instead of the layering tokens in these instances. However, I propose we update the values of those background tokens to use percent opacity with the color so that the one token works across all layer colors including the background and transparent colors.

New values

Color comparison

The hard values compared to the opacity values isn't exactly 1:1 but it is close and sometime more subtle like on top of white in the light themes.

Process note: I tested various opacity levels and base color combination to figure out the nearest matching visuals to the original hard values. We can review those further if people think they don't match closely enough.

Dark themes

Light themes

Components effected