Zenbu: Tokens and sizing

Three layers

--zenbu-ref-*          available context-free values
--zenbu-sys-*          theme/density-aware semantic intent
--zenbu-<component>-*  local component aliases

Application CSS consumes semantic roles. Component CSS may define local aliases that fall back to semantic roles. Reference colors are restricted to token and theme definitions.

Themes remap the standard semantic roles rather than creating parallel application palettes. Paper, Ink, Playful, and Cyberpunk all provide the same surface, text, border, action, status, and focus contracts, so components remain theme-agnostic.

Five-step scale

Controls, text, icons, gaps, and padding use:

xs  sm  md  lg  xl

Every sized control host exposes:

--zenbu-control-height
--zenbu-control-padding-block
--zenbu-control-padding-inline
--zenbu-control-gap
--zenbu-control-font-size
--zenbu-control-line-height
--zenbu-control-icon-size

Styled components consume these automatically. Plain components expose them to application CSS.

Density

Set density once at the application root:

<html data-zen-density="compact">

Density remaps semantic control sizes and padding. It does not require component-specific selectors.

Typography roles

Prefer semantic type roles for page CSS and use zen-text / zen-heading where a reusable type contract is useful. Font sizes remain in rem; line heights remain unitless.