Themes & density
The playground below is a single container withdata-pl-theme and data-pl-density attributes. Settingdata-pl-theme flips color-scheme, which drives thelight-dark() tokens; data-pl-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.
A control-height bar
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.