[ @sdxc/u/general ]

vars

Sets custom properties on the host element, with the leading -- omitted from each key so call sites read as plain option names.

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

import { vars } from "@sdxc/u/general";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.vars({ "sidebar-width": "18rem" })`	`css({ "--sidebar-width": "18rem" })`

Examples

Basic example

Use vars({...}) to set custom properties on an element, written without the leading --, for its children to read with u.var():

<div mix={[maxIs(96), ...]}>
	<div mix={[u.vars({ progress: "35%" }), bs(2), rounded("full"), bg("neutral.border")]}>
		<div mix={[is(u.var("progress")), bs(2), rounded("full"), bg("brand.solid")]} />
	</div>
	<div mix={[u.vars({ progress: "80%" }), bs(2), rounded("full"), bg("neutral.border")]}>
		<div mix={[is(u.var("progress")), bs(2), rounded("full"), bg("brand.solid")]} />
	</div>
</div>

Re-theming a section

Theme tokens are custom properties too, so vars() can point them elsewhere for everything inside an element:

<div mix={[...]}>
	<div>
		<button
			mix={[p(2, 4), rounded("md"), weight("medium"), bg("brand.solid"), fg("brand.onSolid")]}
		>
			Continue
		</button>
	</div>
	<div
		mix={[
			u.vars({
				"ui-brand-bg-solid": u.var("ui-success-bg-solid"),
				"ui-brand-fg-on-solid": u.var("ui-success-fg-on-solid"),
			}),
		]}
	>
		<button
			mix={[p(2, 4), rounded("md"), weight("medium"), bg("brand.solid"), fg("brand.onSolid")]}
		>
			Continue
		</button>
	</div>
</div>

Applying on a state

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

u.hover(u.vars({ "sidebar-width": "18rem" }))

Responsive design

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

u.at("md", u.vars({ "sidebar-width": "18rem" }))

Signature

u.vars(values: Record<string, string | number>)