Foundation

Sizing

Dimension tokens for controls, icons, tracks, media, viewports, and measures.

Use sizing tokens for intrinsic dimensions. Use spacing tokens for rhythm and layout tokens for composition.
foundation
DOM renderImage render
SizingDefault
Sizing rolesControls / tracks / measures
controlfield-controlvar(--concrete-size-field-control)
controlcontrol-compactvar(--concrete-size-control-compact)
controlcontrolvar(--concrete-size-control)
controlcontrol-comfortablevar(--concrete-size-control-comfortable)
controlcontrol-leadingvar(--concrete-size-control-leading)
controlcontrol-actionvar(--concrete-size-control-action)
controlbutton-mediumvar(--concrete-size-button-medium)
controlcontrol-strip-actionvar(--concrete-size-control-strip-action)
measuresurface-padding-compactvar(--concrete-size-surface-padding-compact)
measuresurface-paddingvar(--concrete-size-surface-padding)
measuresurface-padding-editorialvar(--concrete-size-surface-padding-editorial)
measurefeedback-paddingvar(--concrete-size-feedback-padding)
measuredata-surface-paddingvar(--concrete-size-data-surface-padding)
measuredata-surface-padding-compactvar(--concrete-size-data-surface-padding-compact)
measurelayout-grid-minvar(--concrete-size-layout-grid-min)
measurelayout-sidebarvar(--concrete-measure-layout-sidebar)
measurecontainer-contentvar(--concrete-measure-container-content)
measurecontainer-widevar(--concrete-measure-container-wide)
viewportscroll-area-mediumvar(--concrete-size-scroll-area-medium)
iconicon-mediumvar(--concrete-size-icon-medium)
iconspinner-compactvar(--concrete-size-spinner-compact)
iconspinner-comfortablevar(--concrete-size-spinner-comfortable)
iconspinner-editorialvar(--concrete-size-spinner-editorial)
avataravatar-mediumvar(--concrete-size-avatar-medium)
trackprogress-trackvar(--concrete-size-progress-track)
trackprogress-ring-compactvar(--concrete-size-progress-ring-compact)
trackprogress-ringvar(--concrete-size-progress-ring)
trackprogress-ring-editorialvar(--concrete-size-progress-ring-editorial)
trackslider-hitvar(--concrete-size-slider-hit)
measuredialog-surfacevar(--concrete-measure-dialog-surface)
measuretrace-panelvar(--concrete-measure-trace-panel)
viewportdiagramvar(--concrete-size-diagram-height)
datachart-heightvar(--concrete-size-chart-height)
mediathumbnailvar(--concrete-size-media-thumb)
mediamedia-fieldvar(--concrete-measure-media-field)

Playground

Foundation examples are token specimens. The route stays registry-led so every foundation can be rendered, linked, and screenshotted through the same catalog surface.

Loading playground

Rendered matrix

Every state maps to the same foundation render route through the state query param.

Default

Sizing owns dimensions, measures, tracks, and viewport constraints.
Sizing rolesControls / tracks / measures
controlfield-controlvar(--concrete-size-field-control)
controlcontrol-compactvar(--concrete-size-control-compact)
controlcontrolvar(--concrete-size-control)
controlcontrol-comfortablevar(--concrete-size-control-comfortable)
controlcontrol-leadingvar(--concrete-size-control-leading)
controlcontrol-actionvar(--concrete-size-control-action)
controlbutton-mediumvar(--concrete-size-button-medium)
controlcontrol-strip-actionvar(--concrete-size-control-strip-action)
measuresurface-padding-compactvar(--concrete-size-surface-padding-compact)
measuresurface-paddingvar(--concrete-size-surface-padding)
measuresurface-padding-editorialvar(--concrete-size-surface-padding-editorial)
measurefeedback-paddingvar(--concrete-size-feedback-padding)
measuredata-surface-paddingvar(--concrete-size-data-surface-padding)
measuredata-surface-padding-compactvar(--concrete-size-data-surface-padding-compact)
measurelayout-grid-minvar(--concrete-size-layout-grid-min)
measurelayout-sidebarvar(--concrete-measure-layout-sidebar)
measurecontainer-contentvar(--concrete-measure-container-content)
measurecontainer-widevar(--concrete-measure-container-wide)
viewportscroll-area-mediumvar(--concrete-size-scroll-area-medium)
iconicon-mediumvar(--concrete-size-icon-medium)
iconspinner-compactvar(--concrete-size-spinner-compact)
iconspinner-comfortablevar(--concrete-size-spinner-comfortable)
iconspinner-editorialvar(--concrete-size-spinner-editorial)
avataravatar-mediumvar(--concrete-size-avatar-medium)
trackprogress-trackvar(--concrete-size-progress-track)
trackprogress-ring-compactvar(--concrete-size-progress-ring-compact)
trackprogress-ringvar(--concrete-size-progress-ring)
trackprogress-ring-editorialvar(--concrete-size-progress-ring-editorial)
trackslider-hitvar(--concrete-size-slider-hit)
measuredialog-surfacevar(--concrete-measure-dialog-surface)
measuretrace-panelvar(--concrete-measure-trace-panel)
viewportdiagramvar(--concrete-size-diagram-height)
datachart-heightvar(--concrete-size-chart-height)
mediathumbnailvar(--concrete-size-media-thumb)
mediamedia-fieldvar(--concrete-measure-media-field)
Render state

Controls

Control and icon dimensions are shared across buttons, fields, control strips, and menus.
Control sizingShared control heights
field-control
var(--concrete-size-field-control)
button-medium
var(--concrete-size-button-medium)
control-strip-action
var(--concrete-size-control-strip-action)
icon-medium
var(--concrete-size-icon-medium)
Render state

Measures

Measures cap readable and interactive surfaces without creating local widths.
MeasuresDialogs / panels / charts
dialog-surfacevar(--concrete-measure-dialog-surface)
trace-panelvar(--concrete-measure-trace-panel)
diagramvar(--concrete-size-diagram-height)
chart-heightvar(--concrete-size-chart-height)
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription