Mercurial
diff design_system/wiki/TOKENS_AND_SIZING.md @ 258:60a876c4587a
[ui] Add semantic primitive ownership
Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Wed, 05 Aug 2026 05:25:40 -0700 |
| parents | |
| children | 667156fcd3e3 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/design_system/wiki/TOKENS_AND_SIZING.md Wed Aug 05 05:25:40 2026 -0700 @@ -0,0 +1,53 @@ +# 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. + +## 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.