Semantic color tokens from @prepared911/ui. Light on :where(:root), dark under data-theme.
Color in @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.
Surfaces and text
Background--color-bg-default
Surface--color-bg-surface
Raised--color-bg-raised
Overlay--color-bg-overlay
Foreground--color-fg-default
Subtle--color-fg-subtle
Muted--color-fg-muted
Border--color-border-default
Accent
Accent--color-accent-default
Accent hover--color-accent-hover
Accent text--color-accent-fg
Link--color-fg-link
Status
Destructive, warning, success, and informative each expose background, border, foreground, and solid slots. The names follow --color-status-<intent>-<slot>.
Destructive bg--color-status-destructive-bg
Destructive text--color-status-destructive-fg
Warning bg--color-status-warning-bg
Warning text--color-status-warning-fg
Success bg--color-status-success-bg
Success text--color-status-success-fg
Informative bg--color-status-informative-bg
Informative text--color-status-informative-fg
Interaction
Hover and pressed washes are --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.
Usage
Use a semantic --color-* token. Do not read a ramp step.
Pair a status background with the same intent's foreground.
Data series use --color-palette-<name>-solid, -bg, -border, and -fg. Those marks are not status colors.
Always-dark chrome sets data-theme="dark" on the region. It does not use a separate brand class.