Problem with interactive colors when Gray60 is used

[aagonzales]

The problems

In the IDL color model, Color from 100-70 lighten for interactive states and colors 60-10 darken for states; it is like this in order to pass accessibility contrast. However, in the dark themes (mostly just in the G90 theme) when Gray 60 is used, it causes problems because it will switch from lightening to darkening causing inconsistency in the layering model. (instances signified by red arrows:darkens, green arrows: lighten)

In the G90 theme, the third level also calls for G50 to be used in selected states and this fails color contrast. (instances that fail signified as a red circle, green circle :passes)

NOTE: this problem is only about value changes, no token names will be changing, just their assigned values.

Change the scale

If we mix the scale a little bit and re-arrage the the colors in a gradient order but out of squence we can get a few more usable layers. For example, both Gray60 hover and Gray70 hover are darken than Gray60.

With this trick we can get the tokens to all lighten nicely, however things are still failing accessibility contrast. So there's still a problem.

Accessibility scale

Proposed solutions

Option 1

Using the mixed scale, we can have the layer-03 and field-03 continue to lighten and match the layering model. However all the interactive states related to the 03 layer would darken instead of lighten. This will keep the text accessible but break with the layering model on the third nest layer for the G90 theme.

Option 2

This option will used the core and hover colors correctly in their intended order. However, this means that the 03 layer will darken instead of lighten from the top level (field-03 and layer-03), which is a break from the layering model, does top level break does make its interactive states able to follow the model though.

Option 3

We could also do this third options that just completely breaks the layering model of having a pure gradient but it would use the true IDL color scale. However, the states would start to darken at a certain level and we'd have of mix of lightening and darkening in the same components/layering set.

So in the dark themes color order would go: G100 - G90 - G70 - G60 - G70
(back up to 70 instead of down to 50 which is inaccessible)

In-context examples

Here are the two examples in context for comparison.

[tay1orjones]

Interesting problem for sure, thanks for outlining this so clearly! Subjective opinion - Option 1 looks more natural to me.

Though if I understand correctly, we'll need to target interactive states 3+ deep and provide different values. I'm not sure on the technical side how we'd accomplish that.

[aagonzales]

We just need to update some token values. This is what those updates would look like. Purple are what would need to be updated for option 1.

[joshblack]

Thanks for laying it out like this, I'd be down to try out either approach. It'd be great to follow the swatch order as intended (like in option 2) but if it's not working for the style that we want in the layering model then totally get changing things up in option 1 👍

[laurenmrice]

Thanks for writing all of this up, Anna!

I am in favor of Option 1. Option 1 seems like the most natural visual approach for this in the dark themes, especially when seeing it in context of how it will appear in a UI example next to other components. Option 2 is a little bit harder on the eyes and seems to be higher contrast in comparison with all the other elements and components on the page.

[kingtraceyj]

I agree with this. I think option 1 feels more consistent with the rest of the way the UI works. Although I like the way option 2 looks, it feels a little too different for me.

[aagonzales]

I think we should go with option 3 for now and see how it plays out with teams. Since its just token values it will be easy to update later if needed. I think option 3 "works" because it at least keeps the IDL base and hover colors correctly assigned. I think if it becomes a larger issue for people we should look at updating the IDL palette instead of hacking the colors together like I did with option 1 (I think Mike A also mentioned this at one point too).

Option 3 also only requires updating two tokens in the G90 theme.

• $layer-selected-03: Gray 70 / #525252
• $layer-selected-hover-03: Gray 70 Hover / #636363