Focus ring
Utility classes that allows you to add and modify custom focus ring styles to elements and components.
The .focus-ring helper removes the default outline on :focus, replacing it with a box-shadow that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the :root level, that can be modified for any element or component.
Example
Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.
<a href="#" class="d-inline-flex focus-ring py-2xsmall px-xsmall text-decoration-none border rounded">
Custom focus ring
</a>Customize
Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles.
CSS variables
Modify the --cx-focus-ring-* CSS variables as needed to change the default appearance.
<a href="#" class="d-inline-flex focus-ring py-2xsmall px-xsmall text-decoration-none border rounded" style="--cx-focus-ring-color: oklch(from var(--cx-success) l c h / .25)">
Green focus ring
</a>.focus-ring sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts.
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
By default, there is no --cx-focus-ring-x, --cx-focus-ring-y, or --cx-focus-ring-blur, but we provide CSS variables with fallbacks to initial 0 values. Modify them to change the default appearance.
<a href="#" class="d-inline-flex focus-ring py-2xsmall px-xsmall text-decoration-none border rounded" style="--cx-focus-ring-x: 10px; --cx-focus-ring-y: 10px; --cx-focus-ring-blur: 4px">
Blurry offset focus ring
</a>Sass variables
Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Chassis-powered project.
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: #{to-opacity($cue-main, $focus-ring-opacity)};
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
Sass utilities API
In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our context colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.
<p><a href="#" class="d-inline-flex focus-ring focus-ring-default py-2xsmall px-xsmall text-decoration-none border rounded">Default focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-alternate py-2xsmall px-xsmall text-decoration-none border rounded">Alternate focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-2xsmall px-xsmall text-decoration-none border rounded">Primary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-2xsmall px-xsmall text-decoration-none border rounded">Secondary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-neutral py-2xsmall px-xsmall text-decoration-none border rounded">Neutral focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-2xsmall px-xsmall text-decoration-none border rounded">Danger focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-2xsmall px-xsmall text-decoration-none border rounded">Success focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-2xsmall px-xsmall text-decoration-none border rounded">Warning focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-2xsmall px-xsmall text-decoration-none border rounded">Info focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-black py-2xsmall px-xsmall text-decoration-none border rounded">Black focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-white py-2xsmall px-xsmall text-decoration-none border rounded">White focus</a></p>Focus ring utilities are declared in our utilities API in scss/utilities/_index.scss. Learn how to use the utilities API.
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($context-colors, opacity-var, "$key", "focus-ring")
),