Mercurial

comparison design_system/wiki/TOKENS_AND_SIZING.md @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
1 # Tokens and sizing
2
3 ## Three layers
4
5 ```text
6 --zenbu-ref-* available context-free values
7 --zenbu-sys-* theme/density-aware semantic intent
8 --zenbu-<component>-* local component aliases
9 ```
10
11 Application CSS consumes semantic roles. Component CSS may define local aliases
12 that fall back to semantic roles. Reference colors are restricted to token and
13 theme definitions.
14
15 ## Five-step scale
16
17 Controls, text, icons, gaps, and padding use:
18
19 ```text
20 xs sm md lg xl
21 ```
22
23 Every sized control host exposes:
24
25 ```css
26 --zenbu-control-height
27 --zenbu-control-padding-block
28 --zenbu-control-padding-inline
29 --zenbu-control-gap
30 --zenbu-control-font-size
31 --zenbu-control-line-height
32 --zenbu-control-icon-size
33 ```
34
35 Styled components consume these automatically. Plain components expose them to
36 application CSS.
37
38 ## Density
39
40 Set density once at the application root:
41
42 ```html
43 <html data-zen-density="compact">
44 ```
45
46 Density remaps semantic control sizes and padding. It does not require
47 component-specific selectors.
48
49 ## Typography roles
50
51 Prefer semantic type roles for page CSS and use `zen-text` / `zen-heading`
52 where a reusable type contract is useful. Font sizes remain in `rem`; line
53 heights remain unitless.