typography
letter-spacing
Applies letter-spacing from the named tracking scale, resolving through var(--ui-tracking-{name}, fallback) so the scale works before an app defines the variable; any other string is treated as a raw letter-spacing value.
import { tracking } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.tracking("wide") | css({ letterSpacing: "var(--ui-tracking-wide, 0.025em)" }) |
u.tracking("0.18em") | css({ letterSpacing: "0.18em" }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.tracking("wide")Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.tracking("wide"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.tracking("wide"))Customizing the theme
The custom properties this utility reads, which a theme redefines.
| Variable |
|---|
--ui-tracking- |
--ui-tracking-wide |
Signature
u.tracking(value?: TrackingValue)