Fixes #820

Changes

• selects, radio inputs, and checkboxes now use design-tokens/focus for focus-visible styles

📸 Looks like

Providing gifs because the style changes include a transition.

Select

Radio

Checkbox

How to QA

👀 Visual changes

Insert a detailed list explaining exactly how to QA your changes from a designer’s PoV

• git fetch
• git checkout <pr-branch-name>
• yarn
• yarn storybook
• navigate to Base / Checkbox, Base / Radio, and Base / Select

Check:

• The appearance matches the design in Zeplin
• The Zeplin component is correctly linked in storybook
• The documentation for this component is correct, understandable, and up-to-date.

👾 Code changes

Check:

• The documentation for this component is correct, understandable, and up-to-date.
• The component makes good use of CSS custom properties to simplify creating variants (or doesn’t have variants).
• Everything that should be a variable, is.

Preflight checks

PR author to check, and delete if not applicable

• Storybook documentation has been updated
• Fixtures in test/scss/ have been updated
• Your changes have been added to the unreleased section of CHANGELOG.md