Focus
Focus tokens create a consistent, recognizable outline that lets keyboard users track where they are on the page. Together with --wa-color-focus, these tokens assemble the focus ring applied to all interactive Web Awesome components.
| Custom Property | Description |
|---|---|
--wa-focus-ring-style |
Line style for the focus outline |
--wa-focus-ring-width |
Thickness of the focus outline |
--wa-focus-ring |
Shorthand combining style, width, and color into a complete focus outline value |
--wa-focus-ring-offset |
Gap between the element's edge and the focus outline |
See your theme's focus ring by navigating this form with your keyboard: