fix(form-elements): improve focus style to meet WCAG 2.2 AA

[dancormier]

STACKS-553

This PR update the focus styles for any input/textarea-based elements including:

• s-input
• s-textarea
• s-checkbox
• s-radio
• s-select
• s-uploader

.focus-styles() mixin

I took this opportunity to add the --focus-neutral and --focus-theme color custom properties and generalize some common focus styles with the .focus-styles() mixin. This will allow us to set focus styles for a given component using just the mixin and modify the colors of the focus styles contextually when needed (particularly useful for the .s-topbar__light and .s-topbar__dark variants).

Note This PR incidentally addresses a minor bug in the s-btn and s-pagination components. Previously, the themed focus ring rendered as 3px and this PR updates that so it renders 2px as expected.

[netlify[bot]]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	acc29780e03bbba126c83ab49b4b420d5e8068a0
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/65c2611fd904710008d218cc
😎 Deploy Preview	https://deploy-preview-1629--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dancormier]

Ah, good catch @CGuindon! Your assumption is correct, the changing border color is a remnant from the previous focus style. As of https://github.com/StackExchange/Stacks/pull/1629/commits/acc29780e03bbba126c83ab49b4b420d5e8068a0, the border color stays the same color in the focused and non-focused states in both HC and non-HC modes.