Semantic color tokens from @prepared911/ui. Light on :where(:root), dark under data-theme.
@prepared911/ui is a set of semantic custom properties shipped in @prepared911/ui/styles.css. Light values are declared on :where(:root). Dark values are declared under [data-theme='dark']. Components use these names. They do not use a public 12-step ramp.
--color-status-<intent>-<slot>.
--color-state-hover and --color-state-pressed. They compose over the control's own fill. Disabled text is --color-fg-disabled. Disabled surfaces use --color-state-disabled.
State washes signal block-level status (for example a live or ringing call card). They are diagonal gradients, not control hover fills.
| Token | Role |
|---|---|
--gradient-wash-accent, --gradient-wash-destructive, --gradient-wash-informative | Composite linear-gradient paints (135deg in oklab) |
--gradient-wash-<id>-rtl | Mirrored angle (225deg) for right-to-left layout |
--color-wash-accent, --color-wash-destructive, --color-wash-informative | Strong stops; each has a -clear twin at 0% alpha for the fade |
--color-wash-base | Layer under the wash: transparent on the page in Dark, bg-transient in Light |
--color-fg-on-wash-default, --color-fg-on-wash-subtle, --color-fg-on-wash-muted | Text and icons on a wash; alias the light-on-dark ladder per appearance |
gradient={GradientPaint.*} prop, which mounts only the generated paint_wash_<id> recipe. That class stacks the gradient over --color-wash-base, re-points every descendant's ordinary fg-* and icon-* tokens to the fg-on-wash-* aliases, mirrors under :dir(rtl), and drops the decoration under prefers-contrast: more and forced-colors: active. Pair a wash with a label or icon; do not rely on color alone. A border on a Light wash uses border-transient; washes do not remap border tokens.
--color-* token. Do not read a ramp step.--color-palette-<name>-solid, -bg, -border, and -fg. Those marks are not status colors.data-theme="dark" on the region. It does not use a separate brand class.