Better contrast for current item in light dropdown

[distantnative]

Description

Summary of changes

• Improve color contrast for current item in light theme dropdown

Reasoning

Using color-blue-700 is actually not fully compliant with WCAG AA, only achieving 4.43:1 contrast ratio.
However the next available color step color-blue-800 is way too dark to be a noticeable difference:

How do we want to deal with such situations. Break out of our color system? #2A78C6 would be conforming and close to color-blue-700.

[bastianallgeier]

With the dark theme on the horizon, I start to wonder if we should move to certain purpose-driven variables instead of those color values.

[distantnative]

Like another layer in between: blue-on-dark, blue-on-light?

[bastianallgeier]

Probably even less color dependent. I'm not sure how verbose we need to be, but if we think about variables that could stick around with any design change, we would probably need something like

--color-primary-dropdown-link-active
--color-primary-dropdown-link

--color-secondary-dropdown-link-active
--color-secondary-dropdown-link

Super unsure about primary and secondary, but we need some sort of description for the dark/white dropdowns that are also independent from the current theme.

[distantnative]

What would primary and what would secondary be?

[bastianallgeier]

The naming really isn't great. Dark & light make a lot more sense in general, but when we flip it in the dark theme, we can't also flip the wording. That's where it gets messy. I think "primary" would probably be the dark ones, because they are the common ones and light would be "secondary". But maybe it could also be something like:

--color-dropdown-link-active
--color-dropdown-link

--color-dropdown-inverted-link-active
--color-dropdown-inverted-link

[distantnative]

@bastianallgeier I get your approach but we have that in so many places (e.g. --color-white, --color-black are semantical nonsense in dark mode). I'd rather approach that with one common strategy in a separate PR then just start here in this PR.

[bastianallgeier]

You are right. To change the variable system would be way too much for this PR.

What about going for the darker color, which is also our default link color, but at the same time we introduce some active icon for dropdowns? I think @nilshoerrmann suggested this somewhere and it would definitely be the most accessible solution – independent from our color choice and the independent from the theme.

[nilshoerrmann]

Anything that makes the current state obvious without relying on colours would be great. Either a different font weight or a selected state icon would be great 👍

I think I'd prefer the icon because it's a common thing people know and because it doesn't have side effects like changing text widths.

[nilshoerrmann]

Having a something like a checkmark would also help distinguish the focus from the selected state. I personally always think the focussed element is selected, even while seeing the colours.

[bastianallgeier]

I've built a quick version that could work. I think unlike on macOS, we can't properly put it in front of the dropdown item icon without really changing the overall design of the dropdown items. Putting it at the end seems to work really well though.

[distantnative]

@bastianallgeier I think this is great, approved :)

[nilshoerrmann]

Just to get that right: develop-minor, is that going to be 4.5.x?

[distantnative]

4.5.0 yes