color

background-color

Applies background-color, or the full set of background properties when given an options object, of which only the given keys are set.

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.bg()`	`css({ backgroundColor: "var(--ui-bg, Canvas)" })`
`u.bg("brand.tint")`	`css({ backgroundColor: "var(--ui-brand-bg-tint)" })`
`u.bg({ image: "url(/hero.jpg)", size: "cover", position: "center" })`	`css({ backgroundImage: "url(/hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" })`
`u.bg({ color: "brand.solid", clip: "content-box" })`	`css({ backgroundColor: "var(--ui-brand-bg-solid)", backgroundClip: "content-box" })`

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

u.bg()

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

u.hover(u.bg())

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

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

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

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