Mercurial
comparison design_system/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 |
comparison
equal
deleted
inserted
replaced
| 257:609d3c6aff4e | 258:60a876c4587a |
|---|---|
| 1 # Zenbu UI sizing | |
| 2 | |
| 3 Zenbu UI uses one five-step scale everywhere: | |
| 4 | |
| 5 | Size | Intended use | | |
| 6 | --- | --- | | |
| 7 | `xs` | dense metadata and compact actions | | |
| 8 | `sm` | secondary controls and toolbars | | |
| 9 | `md` | default body text and controls | | |
| 10 | `lg` | prominent actions and lead text | | |
| 11 | `xl` | touch-forward actions and display text | | |
| 12 | |
| 13 ## Tokens | |
| 14 | |
| 15 Each step defines: | |
| 16 | |
| 17 - `--zenbu-sys-font-size-*` and `--zenbu-sys-line-height-*`; | |
| 18 - `--zenbu-sys-control-height-*`; | |
| 19 - `--zenbu-sys-control-padding-block-*` and | |
| 20 `--zenbu-sys-control-padding-inline-*`; | |
| 21 - `--zenbu-sys-control-gap-*`; | |
| 22 - `--zenbu-sys-icon-size-*`; | |
| 23 - `--zenbu-sys-padding-*` for containers. | |
| 24 | |
| 25 Component hosts expose the selected values through inherited variables: | |
| 26 | |
| 27 ```css | |
| 28 --zenbu-control-height | |
| 29 --zenbu-control-padding-block | |
| 30 --zenbu-control-padding-inline | |
| 31 --zenbu-control-gap | |
| 32 --zenbu-control-font-size | |
| 33 --zenbu-control-line-height | |
| 34 --zenbu-control-icon-size | |
| 35 ``` | |
| 36 | |
| 37 Styled components consume these automatically: | |
| 38 | |
| 39 ```html | |
| 40 <zen-button size="lg"><button type="button">Publish</button></zen-button> | |
| 41 <zen-input size="sm"><input aria-label="Filter" /></zen-input> | |
| 42 ``` | |
| 43 | |
| 44 Plain components expose the same variables without styling the native control. | |
| 45 Applications can preserve their visual identity while sharing the scale: | |
| 46 | |
| 47 ```css | |
| 48 zen-button[appearance="plain"] > button { | |
| 49 min-height: var(--zenbu-control-height); | |
| 50 padding: | |
| 51 var(--zenbu-control-padding-block) | |
| 52 var(--zenbu-control-padding-inline); | |
| 53 font-size: var(--zenbu-control-font-size); | |
| 54 } | |
| 55 ``` | |
| 56 | |
| 57 ## Typography and containers | |
| 58 | |
| 59 Use native semantics inside the primitives: | |
| 60 | |
| 61 ```html | |
| 62 <zen-heading size="xl"><h2>Repository activity</h2></zen-heading> | |
| 63 <zen-text size="sm"><p>Updated two minutes ago.</p></zen-text> | |
| 64 <zen-box padding="lg">...</zen-box> | |
| 65 ``` |