Mercurial

# Tokens and sizing

## Three layers

```text
--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:

```text
xs  sm  md  lg  xl
```

Every sized control host exposes:

```css
--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
<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.
author	MrJuneJune <me@mrjunejune.com>
date	Fri, 07 Aug 2026 07:34:12 -0700
parents	667156fcd3e3
children