feat(Focus): Add global focus state

What does this MR do?

Some of our elements have custom focus styles, while others get browser defaults. This fixes it by:

• Modify focus stategl-focus mixin and related variables.
• Ensure the the mixin is applied for all components and elements that can receive focus.

✏ Note: All updates are visual only, and not functional.

---

Example focused components	Specs

Before	After	Notes
		The focus ring is actually removed on the parent anchor, and moved to the image within so that the focus ring can wrap the avatar shape.
		Badges still use the lighter inner ring to better offset the pastel colors.
		Not able to move keyboard focus into the calendar panel. Focus also seems to disappear when moving between two inputs in the Daterange picker. #1103 created to investigate.
		Panel has overflow-y set to auto, so that means that overflow-x is automatically auto as well and the focus ring of the menu item gets clipped on the sides. See #1102 (closed) for proposed solution.
		Not updated to use custom controls yet. #862 (closed)
		Not updated to use custom controls yet. #862 (closed)
		Valid and invalid states will now appear just like the other variants, although invalid could be updated to have the red inner border in the future. #1105 (closed) created to update the border color.
		The CSS variable is able to be used for all of the labels so that the inner border (box-shadow) can still match the user generated color.
		The underline for the scoped text isn’t visible and should be in a future update. #1106 (closed) created to make the underline visible.
		The × button isn’t using the gl-button so right now it doesn’t get those focus styles but will once the component is updated to use the new button. #1104 (closed) created to update the button.
		Pagination styles updated to match the design specs.
		Focus styles applied, but overflow hidden on both the li and ul prevents it from really being seen. I think this is one that could use a separate declaration since it also has the ::after element to create the point. See #1102 (closed) for proposed solution.
		Hover, focus, and active styles need updated to look more like their button counterparts, but this will be handled in a separate MR. Issue #1000 (closed) exists to address.
		The focus ring here is animated because @include gl-transition-slow is used which animates all properties. This could be changed in the future to make the focus state more instant and noticeable. #1101 created to address.

Out of scope

• Dark UI
• Markdown links
• Items with default Bootstrap or third-party styles, like the Carousel or Nav and Navbar

Relates to gitlab-org/gitlab-services/design.gitlab.com#607 (closed)

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • CustomersDot: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.

Security

N/A

Closes #1035 (closed)