Themes & density
The playground below is a single container with
data-theme and data-density attributes. Setting
data-theme flips color-scheme, which drives the
light-dark() tokens; data-density resizes controls
via the control tokens. No JavaScript is needed in the framework — the
toggles here just change two attributes.
Live preview
This whole panel uses --pl-color-bg,
--pl-color-text, and --pl-color-border. The
control below uses --pl-control-block-size — change density
to see it resize.
Palette
- bg
--pl-color-bg - surface
--pl-color-surface - surface-2
--pl-color-surface-2 - border
--pl-color-border - text
--pl-color-text - text-muted
--pl-color-text-muted - accent
--pl-color-accent - accent-hover
--pl-color-accent-hover - danger
--pl-color-danger - success
--pl-color-success - warning
--pl-color-warning
Reduced motion, contrast & forced colors
prefers-reduced-motion zeroes --pl-motion-scale.
prefers-contrast: more strengthens structural boundaries and
focus affordances.
forced-colors (Windows High Contrast) remaps the semantic
tokens to system colors. Toggle these in your OS or DevTools rendering pane
to verify.