Focus
Links and other focusable elements display a focus ring when navigated to with a keyboard.
Under-the-hood, Kelp uses the :focus-visible pseudo-class to achieve this.
You can adjust the focus ring size, color, style, and spacing in the kelp.theme cascade layer.
@layer kelp.theme {
/* Default Light Theme */
:where(:root),
.kelp-theme-light {
--focus-ring-color: var(--color-blue-50);
--focus-ring-style: solid;
--focus-ring-width: var(--size-6xs);
--focus-ring-offset: var(--size-6xs);
}
/* Dark Theme */
.kelp-theme-dark {
--focus-ring-color: var(--color-blue-60);
}
}