[Amsterdam] Unify focus states

[cchaos]

This PR attempts to unify and increase the visibility of the focus ring, but only during keyboard use.

Safari and Firefox already strictly use the :focus pseudo-class to show focus rings (outlines) when tabbing and not when using the mouse. However, to restrict to keyboard navigation in Chrome, we have to use the new-ish :focus-visible pseudo-class.

Chrome's auto style of outline is much different than Firefox and Safari and allows for coloring of the outline while keeping the "rounded" corners/white outer line for contrast. But Firefox and Safari do no, so they'll visibly show just the straight corner version.

Buttons example:

---

Reset file

I first had to duplicate the _reset.scss file for Amsterdam and then I undid the blanket removal of the browser's outline attribute and only removed it IF the focus is not visible. I also set the outline-color to be the same as the element's text so that it should always have the same contrast level as the text. And changed the position (offset) so it is centered on the elements edge.

*:focus {
  // 👉 Safari and Firefox innately respect only showing the outline with keyboard only
  // 💔 But they don't allow coloring of the 'auto'/default outline, so contrast is no good in dark mode.
  // 👉 For these browsers we use the solid type in order to match with `currentColor`.
  // 😦 Which does means the outline will be square
  outline: $euiFocusRingSize solid currentColor; 
  outline-offset: -($euiFocusRingSize / 2);

  // 👀 Chrome respects :focus-visible and allows coloring the `auto` style
  &:focus-visible {
    outline-style: auto;
  }

  //🙅‍♀️ But Chrome also needs to have the outline forcefully removed from regular `:focus` state
  &:not(:focus-visible) {
    outline: none;
  }
}

Focus ring tokens / mixins

Then I changed the euiFocusRing() mixin to align more towards using the browser's outline property. I had to add a couple extra parameters that are strictly for use in Amsterdam for this new functionality. I also removed the faux (box-shadow) version and leaned into the fact that we can't control the border-radius of the outline. I think this is an ok compromise since the focus ring will now only show on keyboard navigation.

I also created a couple generic interactive state mixins like euiFocusState(), euiHoverState() and euiInteractiveStates() to add all of them. I haven't applied them everywhere, but this gives a a starting point to convert some of the manual styles so we have better consistency.

Components

There are still a few components that aren't working quite well and will need follow up but I didn't want to wait on getting this initial set in.

Checklist

• Check against all themes for compatibility in both light and dark modes
• [ ] Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs
• [ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs examples
• [ ] Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4242/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4242/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4242/

[cchaos]

This just got moved to the _states.scss file

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4242/

[miukimiu]

Tested in Chrome, Safari, Edge, and Firefox and it looks good. 🎉

[miukimiu]

For Edge and Chrome where the outline gest by default a border-radius, do you think we should add a border-radius to the focused tab? So we wouldn't see the corners outside of the outline?

[cchaos]

Yeah I'll agree that will be a good tweak. But I'd like to push that off to when the Tabs are specifically tackled for Amsterdam. Since right now that would require a new Amsterdam specific overrides file.