Focus
Focus tokens create a consistent, recognizable outline that lets keyboard users track where they are on the page. Together with --cs-color-focus, these tokens assemble the focus ring applied to all interactive Cornerstone components.
| Custom Property | Description |
|---|---|
--cs-focus-ring-style |
Line style for the focus outline |
--cs-focus-ring-width |
Thickness of the focus outline |
--cs-focus-ring |
Shorthand combining style, width, and color into a complete focus outline value |
--cs-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: