# vars

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

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

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

## 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()`:

```tsx
<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:

```tsx
<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.

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

## Responsive design

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

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

## Signature

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