Mercurial
view design_system/wiki/TOKENS_AND_SIZING.md @ 272:41a49c29a28f
polish JRPG conversation experience
Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Fri, 07 Aug 2026 16:05:29 -0700 |
| parents | 667156fcd3e3 |
| children |
line wrap: on
line source
# 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.