Sizing
Two axes size every component: density (control heights, paddings, gaps, icons, card and dialog padding) and radius (every radius role). A sizing theme picks one of each, adds its own values and, on a phone (below 768px), its touch values; sizingThemeCss renders it for :root or a subtree. The hit area, the 16px field text on a phone, hairlines and layout widths never scale.
Styles
Named sizing themes: a density, a radius and their own values. Each sample below is scoped with sizingThemeCss(SIZING_STYLES.name, '[data-sizing=…]'). Pick one for every page in Customize.
Density × radius
The two axes alone, without a style’s own values. Density moves heights and room; radius moves shape.
Painted height
A control paints exactly its box: fill, border and rings stay between the dashed guides, on any surface, so a 36px button looks 36px at every emphasis and in every state. Measured live in this page’s theme and mode; a red reading is a regression. Edges are borders inside the box (--edge on raised, --intent-border on outline), never a ring outside it.
Token reference
Every token a sizing theme sets, by family, with the components that read it. A density of your own is any of these: scaleDensity(0.9), or a map of token to px.
Density
What each density sets; a dash keeps the default. Type, page and section spacing stay.
| Token | default | compact | comfortable |
|---|---|---|---|
| --spacing-part | 12 | 10 | 14 |
| --spacing-group | 16 | 12 | 20 |
| --spacing-card | 20 | 16 | 24 |
| --spacing-control-2xs | 20 | 18 | 22 |
| --spacing-control-xs | 24 | 20 | 28 |
| --spacing-control-sm | 32 | 28 | 36 |
| --spacing-control | 36 | 32 | 40 |
| --spacing-control-lg | 40 | 36 | 44 |
| --spacing-control-pad-xs | 8 | 6 | 10 |
| --spacing-control-pad-sm | 12 | 10 | 14 |
| --spacing-control-pad | 16 | 12 | 18 |
| --spacing-control-gap-sm | 4 | – | 6 |
| --spacing-control-gap | 6 | – | 8 |
| --spacing-icon-xs | 12 | – | 14 |
| --spacing-icon-sm | 14 | – | 16 |
| --spacing-icon | 16 | – | 18 |
| --spacing-field-pad | 12 | 10 | 14 |
| --spacing-field-pad-y | 8 | 6 | 10 |
| --spacing-menu-item | 36 | 32 | 40 |
| --spacing-menu-item-pad | 10 | 8 | 12 |
| --spacing-row-pad-x | 12 | 10 | 14 |
| --spacing-row-pad-y | 10 | 8 | 12 |
| --spacing-row-gap | 8 | – | 10 |
| --spacing-modal | 24 | 20 | 28 |
| --spacing-popup | 10 | 8 | 12 |
| --spacing-picker | 12 | 10 | 14 |
| --spacing-popup-inset | 4 | – | 6 |
| --spacing-list-inset | 8 | 6 | – |
| --badge-height | 24 | 20 | 28 |
| --badge-height-sm | 20 | 18 | 22 |
| --badge-pad-x | 8 | 6 | 10 |
| --badge-pad-x-sm | 6 | 4 | 8 |
| --kbd-pad-x | 4 | – | 6 |
| --field-chip-pad-x | 8 | 6 | 10 |
| --field-button-pad-x | 6 | 4 | 8 |
| --textarea-min-height | 60 | 52 | 72 |
| --file-drop-zone-pad-x | 24 | 20 | 28 |
| --file-drop-zone-pad-y | 28 | 24 | 32 |
| --item-gap | 10 | 8 | 12 |
| --sidebar-sub-height | 28 | 24 | 32 |
| --table-head-height | 40 | 36 | 44 |
| --table-foot-pad-y | 12 | 10 | 14 |
| --table-group-height | 36 | 32 | 40 |
| --command-input-height | 48 | 44 | 52 |
| --command-footer-height | 44 | 40 | 48 |
| --alert-pad-x | 20 | 16 | 24 |
| --alert-pad-y | 10 | 8 | 12 |
| --tooltip-pad-x | 8 | – | 10 |
| --tooltip-pad-y | 4 | – | 6 |
| --toast-pad-x | 14 | 12 | 16 |
| --toast-pad-y | 12 | 10 | 14 |
| --empty-pad-x | 24 | 20 | 28 |
| --empty-pad-y | 40 | 32 | 48 |
| --empty-pad-x-sm | 16 | 12 | – |
| --empty-pad-y-sm | 24 | 20 | – |
| --prose-pre-pad | 12 | 10 | 14 |
| --checkbox-size | 16 | – | 18 |
| --radio-dot-size | 6 | – | 8 |
| --choice-card-height | 48 | 44 | 52 |
| --choice-card-pad-y | 12 | 10 | 14 |
| --switch-width | 36 | 32 | 40 |
| --switch-width-sm | 28 | 24 | 32 |
| --switch-thumb | 16 | 14 | 18 |
| --switch-thumb-sm | 12 | 10 | 14 |
| --slider-thumb | 12 | – | 16 |
| --stepper-indicator-size | 20 | 18 | 24 |
Radius
What each radius sets. Pill rounds single-line controls fully and caps surfaces, multi-line fields, blocks, tooltips and the checkbox; sharp squares the fixed steps too.
| Token | default | sharp | soft | pill |
|---|---|---|---|---|
| --radius-control-xs | 4 | 0 | 5 | full |
| --radius-control-sm | 8 | 0 | 10 | full |
| --radius-control | 10 | 0 | 12 | full |
| --radius-control-lg | 12 | 0 | 14 | full |
| --radius-popup | 16 | 0 | 20 | 20 |
| --radius-card | 20 | 0 | 24 | 24 |
| --radius-dialog | 20 | 0 | 24 | 24 |
| --radius-panel | 20 | 0 | 24 | 24 |
| --radius-checkbox | 4 | 2 | 5 | 6 |
| --radius-tooltip | 8 | 0 | 10 | 12 |
| --radius-area | 10 | 0 | 12 | 16 |
| --radius-block | 12 | 0 | 14 | 16 |
| --radius-track | full | 2 | – | – |
| --radius-xs | 2 | 0 | – | – |
| --radius-sm | 4 | 0 | – | – |
| --radius-md | 6 | 0 | – | – |
| --radius-lg | 8 | 0 | – | – |
| --radius-xl | 10 | 0 | – | – |
| --radius-2xl | 12 | 0 | – | – |
| --radius-3xl | 16 | 0 | – | – |
| --radius-4xl | 20 | 0 | – | – |
| --radius-5xl | 24 | 0 | – | – |
| --tabs-radius | 10 | 0 | 12 | full |
| --alert-radius | 20 | 0 | 24 | 24 |
| --bottom-nav-radius | 16 | 0 | 20 | full |
| --drawer-radius | 32 | 0 | 38 | – |
| --drawer-menu-item-radius | 14 | 0 | 17 | – |
| --drawer-option-radius | 16 | 0 | 19 | – |
Style values
Each style’s values on top of its density and radius, then its touch values on a phone, below 768px.
| Token | Coss | Coss touch | Dense | Dense touch | Soft |
|---|---|---|---|---|---|
| --spacing-part | 8 | – | 8 | – | 14 |
| --spacing-group | 16 | – | 12 | – | 20 |
| --spacing-card | 24 | – | 12 | – | 24 |
| --spacing-control-2xs | 20 | – | 16 | 18 | 22 |
| --spacing-control-xs | 20 | 24 | 20 | 20 | 28 |
| --spacing-control-sm | 28 | 32 | 24 | 28 | 36 |
| --spacing-control | 32 | 36 | 28 | 32 | 40 |
| --spacing-control-lg | 36 | 40 | 32 | 36 | 44 |
| --spacing-control-pad-xs | 6 | – | 6 | – | 10 |
| --spacing-control-pad-sm | 10 | – | 8 | – | 14 |
| --spacing-control-pad | 12 | – | 10 | – | 18 |
| --spacing-control-gap-sm | – | – | – | – | 6 |
| --spacing-control-gap | 8 | – | 4 | – | 8 |
| --spacing-icon-xs | – | 14 | 10 | – | 14 |
| --spacing-icon-sm | – | 16 | 12 | 14 | 16 |
| --spacing-icon | – | 18 | 14 | 16 | 18 |
| --spacing-icon-lg | – | – | 16 | – | – |
| --spacing-field-pad | 12 | – | 8 | 10 | 14 |
| --spacing-field-pad-y | 6 | – | 4 | – | 10 |
| --spacing-menu-item | 28 | 32 | 28 | 32 | 40 |
| --spacing-menu-item-pad | 8 | – | 8 | – | 12 |
| --spacing-row-pad-x | 10 | – | 10 | – | 14 |
| --spacing-row-pad-y | 8 | – | 6 | – | 12 |
| --spacing-row-gap | – | – | 6 | – | 10 |
| --spacing-modal | 24 | – | 16 | – | 28 |
| --spacing-popup | 16 | – | 8 | – | 12 |
| --spacing-picker | 10 | – | 10 | – | 14 |
| --spacing-popup-inset | – | – | – | – | 6 |
| --spacing-list-inset | 6 | – | 6 | – | – |
| --radius-control-xs | – | – | – | – | full |
| --radius-control-sm | 6 | – | 6 | – | full |
| --radius-control | – | – | 8 | – | full |
| --radius-control-lg | 10 | – | 8 | – | full |
| --radius-popup | 10 | – | 10 | – | 24 |
| --radius-card | 18 | – | 12 | – | 28 |
| --radius-dialog | 18 | – | 14 | – | 28 |
| --radius-panel | 14 | – | 12 | – | 28 |
| --radius-checkbox | – | – | – | – | 6 |
| --radius-tooltip | – | – | 6 | – | 12 |
| --radius-area | – | – | 8 | – | 16 |
| --radius-block | 10 | – | 8 | – | 16 |
| --text-control | – | – | 13 | 14 | – |
| --text-control--line-height | – | – | 18 | 20 | – |
| --badge-height | 18 | 22 | 20 | – | 28 |
| --badge-height-sm | 16 | 20 | 16 | – | 22 |
| --badge-pad-x | 4 | – | 4 | – | 10 |
| --badge-pad-x-sm | 4 | – | 4 | – | 8 |
| --kbd-pad-x | – | – | 3 | – | 6 |
| --tabs-radius | 8 | – | 8 | – | full |
| --tabs-inset | 2 | – | 2 | – | – |
| --field-chip-pad-x | 6 | – | 6 | – | 10 |
| --field-button-pad-x | 4 | – | 4 | – | 8 |
| --textarea-min-height | 72 | 84 | 48 | – | 72 |
| --file-drop-zone-pad-x | 20 | – | 16 | – | 28 |
| --file-drop-zone-pad-y | 24 | – | 20 | – | 32 |
| --item-gap | 8 | – | 8 | – | 12 |
| --sidebar-sub-height | 24 | – | 24 | – | 32 |
| --table-head-height | 40 | – | 32 | – | 44 |
| --table-foot-pad-y | 10 | – | 8 | – | 14 |
| --table-group-height | 32 | 40 | 32 | 40 | 40 |
| --command-input-height | 44 | – | 40 | – | 52 |
| --command-footer-height | 40 | – | 36 | – | 48 |
| --alert-pad-x | 14 | – | 12 | – | 24 |
| --alert-pad-y | 12 | – | 6 | – | 12 |
| --alert-radius | 14 | – | 12 | – | 28 |
| --bottom-nav-radius | – | – | – | – | full |
| --tooltip-pad-x | – | – | 6 | – | 10 |
| --tooltip-pad-y | – | – | 2 | – | 6 |
| --toast-pad-x | 14 | – | 12 | – | 16 |
| --toast-pad-y | 12 | – | 8 | – | 14 |
| --empty-pad-x | 20 | – | 16 | – | 28 |
| --empty-pad-y | 32 | – | 24 | – | 48 |
| --empty-pad-x-sm | 12 | – | 12 | – | – |
| --empty-pad-y-sm | 20 | – | 16 | – | – |
| --prose-pre-pad | 10 | – | 8 | – | 14 |
| --checkbox-size | – | 18 | 14 | 16 | 18 |
| --radio-dot-size | – | 8 | – | – | 8 |
| --choice-card-height | 44 | – | 40 | – | 52 |
| --choice-card-pad-y | 10 | – | 8 | – | 14 |
| --switch-width | 30 | 38 | 28 | 32 | 40 |
| --switch-width-sm | 22 | 30 | 24 | – | 32 |
| --switch-thumb | 16 | 20 | 12 | 14 | 18 |
| --switch-thumb-sm | 12 | 16 | 10 | – | 14 |
| --switch-inset | 1 | – | – | – | – |
| --slider-thumb | 16 | 20 | – | – | 16 |
| --stepper-indicator-size | 18 | – | 16 | – | 24 |