[ @sdxc/u/color ]

ring

Applies a focus ring already scoped to &:focus-visible, so it shows for keyboard and assistive-tech focus and a component can apply it directly.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { ring } from "@sdxc/u/color";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.ring()`	`css({ "&:focus-visible": { outlineWidth: "2px", outlineStyle: "solid", outlineOffset: "2px", outlineColor: "var(--ui-ring, Highlight)" } })`
`u.ring("danger")`	`css({ "&:focus-visible": { outlineColor: "var(--ui-danger-ring)" } })`

Examples

Basic example

Use ring() to draw a focus ring that shows only for keyboard focus. Tab through the controls to see it:

<div mix={[...]}>
	<button type="button" mix={[ring(), ...]}>
		Save
	</button>
	<input type="text" placeholder="Search" aria-label="Search" mix={[ring(), ...]} />
</div>

Tones

Pass a tone, like danger, to color the ring. Tab through the buttons to see each one:

<div mix={[...]}>
	<button type="button" mix={[ring("brand"), ...]}>
		ring("brand")
	</button>
	<button type="button" mix={[ring("success"), ...]}>
		ring("success")
	</button>
	<button type="button" mix={[ring("danger"), ...]}>
		ring("danger")
	</button>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.ring())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.ring())

Customizing your theme

Customizing colors

Define a palette as --ui-color-{name}-{50..950} and map a tone onto it with the --ui-{tone}-* variables, the way theme.css maps the built-in ones:

:root {
	--ui-color-info-50: oklch(0.97 0.02 230);
	--ui-color-info-200: oklch(0.88 0.06 230);
	--ui-color-info-500: oklch(0.62 0.16 230);
	--ui-color-info-600: oklch(0.52 0.18 230);
	--ui-color-info-900: oklch(0.3 0.1 230);

	--ui-info-bg-tint: var(--ui-color-info-50);
	--ui-info-bg-solid: var(--ui-color-info-600);
	--ui-info-fg: var(--ui-color-info-600);
	--ui-info-fg-muted: var(--ui-color-info-500);
	--ui-info-fg-emphasis: var(--ui-color-info-900);
	--ui-info-fg-on-solid: white;
	--ui-info-border: var(--ui-color-info-200);
	--ui-info-border-strong: var(--ui-color-info-600);
	--ui-info-ring: var(--ui-color-info-500);
}

declare module "@sdxc/u" {
	interface ColorPalettes {
		info: true;
	}
	interface SemanticTones {
		info: true;
	}
}

The new name is then accepted wherever the scale is:

ring("info")

Signature

u.ring(value?: ColorValue | (string & {}))