effects

ringShadow

Draws a selection ring that stays visible for as long as a component applies it, for persistently-selected swatches, chips, and thumbnails.

import { ringShadow } from "@sdxc/u/effects";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.ringShadow("brand")`	`css({ "--ui-box-shadow-ring": "0 0 0 2px var(--ui-brand-bg-solid)", boxShadow: "var(--ui-box-shadow-ring, 0 0 #0000), var(--ui-box-shadow-elevation, 0 0 #0000)" })`
`u.ringShadow("danger", 3)`	`css({ "--ui-box-shadow-ring": "0 0 0 3px var(--ui-danger-bg-solid)", boxShadow: "var(--ui-box-shadow-ring, 0 0 #0000), var(--ui-box-shadow-elevation, 0 0 #0000)" })`

Every scale argument also takes a raw CSS value, which passes through untouched.

u.ringShadow("brand")

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

u.hover(u.ringShadow("brand"))

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

u.at("md", u.ringShadow("brand"))

The custom properties this utility reads, which a theme redefines.

u.ringShadow(value: ColorValue | (string & {}), width?: number | (string & {}))