Toolbar style update

How would the blue active state from #118 📌 Toolbar style update Needs work work with the green focus ring, since the green and blue don't have sufficient contrast with each other?

I can think of two solutions...

1. Have the focus ring for the active blue button be a lighter color. But it seems confusing to have the focus ring be a different color depending on the button.

2. Go back to the active state proposed here: https://www.drupal.org/project/drupal/issues/3097907#comment-13792895 🐛 Active toolbar tray has weak affordance and fails WCAG color criteria Needs work (White background, black text). Then, the same green focus state will work everywhere.

@Camille Davis the focus ring we use in Claro has a 2px white inset/offset so it passes the contrast.

Cross-posted from slack:

Camille Davis: Is there somewhere I can grab that css from?

@saschaeggi: https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/clar...

Note:
/**
* Default focus styles for focused elements.
*
* This is applied globally to all interactive elements except Toolbar and
* Settings Tray since they have their own styles.
*/

so that’s maybe what we want to change cc @ckrina

Camille Davis: thanks! So if that was applied to the toolbar it could go two ways, not sure which is best. Inside, you could see the whole focus ring. Outside, it would match the other focus styles.

Opened an MR for the focus ring on 9.5.x on this issue 3270230 - Toolbar focus styles are not sufficiently obvious to know where your focus is 🐛 Toolbar focus styles are not sufficiently obvious to know where your focus is Needs work

Would it be preferable to map the enhanced focus ring to the :focus-visible selector rather than :focus? This might "leak" into mouse interactions.

@itmaybejj I would like to avoid introducing an inconsistency here. As we use :focus for all other focus states in the UI (for Claro at least).

Adding reference to Windows High Contrast Mode.