color

fill

Applies the SVG fill paint property, resolving semantic tones the same way color does.

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.fill()`	`css({ fill: "var(--ui-fg, CanvasText)" })`
`u.fill("neutral.tint")`	`css({ fill: "var(--ui-neutral-bg-tint)" })`
`u.fill("brand")`	`css({ fill: "var(--ui-brand-fg)" })`
`u.fill("none")`	`css({ fill: "none" })`

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

u.fill()

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

u.hover(u.fill())

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

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

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

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