Tokens · Token families
Layout and breakpoints
How wide content gets, and where the layout changes. Widths ship with @luz-ds/core, breakpoints with @luz-ds/tokens.
Files: settings/_settings.css, tokens.json → breakpoint
Widths
--luz-sidebar-width256pxSidebar and app-shell column--luz-content-max1100pxMaximum content width--luz-bar-h53pxA one-row bar of 44px controls (control, two 4px paddings, 1px divider): the sticky scroll padding and the navbar panel read it--luz-scrollbar-size4pxScrollbar thickness
Breakpoints
--luz-mq-sm640pxMobile--luz-mq-md768pxTablet, sidebar collapse--luz-mq-lg1024pxNarrow desktop--luz-mq-xl1280pxStandard desktop--luz-mq-xxl1536pxWide screen--luz-mq-xxxl1920pxFull HD
The widths ship with core; the breakpoints ship with tokens.
- Breakpoints are reference values: media queries cannot read custom properties, so write the number, such as
@media (max-width: 768px). - Safari on a Mac with always-visible scrollbars does not count the scrollbar in width media queries (WebKit bug 52653), so a breakpoint is crossed when the window is up to about 15 px wider than its value.