Theme

Layout and density

Page widths, the viewport breakpoints and container sizes, and how tightly controls are packed.

Widths

Token	Value	Use
`layout.page`	`64rem`	The width of a page's content.
`layout.narrow`	`40rem`	A single column of reading.
`layout.wide`	`80rem`	A wide working surface: tables, dashboards.
`layout.gutter`	`clamp(1rem, 4vw, 2rem)`	The space between the content and the viewport edge.
`layout.sidebar`	`15rem`	The width of a sidebar: the app shell's, and the Sidebar layout's.
`layout.rail`	`3.5rem`	The sidebar collapsed to a rail of icons.
`layout.topbar`	`3rem`	An app page's top bar.
`layout.header`	`4.25rem`	The site header from the md breakpoint up.
`layout.headerCompact`	`3.25rem`	The site header below the md breakpoint.
`layout.panel`	`22rem`	A record page's attribute panel.

Breakpoints and containers

Compiled to StyleX constants (breakpoint.md, container.sm) over ranges that never overlap: overlapping min-width conditions in compiled styles can apply out of order, so a style meant from md up names md and lg. Components prefer container queries, so they respond to the space they are given.

Token	Value	Use
`breakpoint.base`	`@media (width < 40rem)`
`breakpoint.sm`	`@media (40rem <= width < 64rem)`
`breakpoint.md`	`@media (64rem <= width < 80rem)`
`breakpoint.lg`	`@media (width >= 80rem)`

Token	Value	Use
`container.base`	`@container (width < 24rem)`
`container.sm`	`@container (24rem <= width < 40rem)`
`container.md`	`@container (40rem <= width < 64rem)`
`container.lg`	`@container (width >= 64rem)`

Density

Comfortable by default; the compact theme (Theme density="compact") tightens controls and table rows.

Token	Value	Use
`density.control`	`2.25rem`	Height of a control.
`density.controlInline`	`0.75rem`	Inline padding inside a control.
`density.row`	`0.5rem`	Block padding of a table row or list item.
`density.gap`	`0.75rem`	The gap between related controls.