color
border-color
Applies border-color, or the full set of border properties when given an options object, of which only the given keys are set.
import { border } from "@sdxc/u/color";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.border() | css({ borderColor: "var(--ui-border, color-mix(in oklab, CanvasText 16%, transparent))" }) |
u.border("brand.strong") | css({ borderColor: "var(--ui-brand-border-strong)" }) |
u.border({ color: "brand", width: 2 }) | css({ borderColor: "var(--ui-brand-border)", borderWidth: "2px", borderStyle: "solid" }) |
u.border({ width: 2, noStyleDefault: true }) | css({ borderWidth: "2px" }) |
u.border("none") | css({ border: "none" }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.border()Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.border())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.border())Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-border |
--ui-brand-border |
--ui-brand-border-strong |
Signature
u.border(value?: ColorValue | (string & {}))