Density
Sets the density tokens for everything inside it: Compact, Default or Comfortable spacing, control and icon sizes, and font sizes, like the BP Foundations density modes.
Master
Switch the value: spacing, control heights, icons and text inside follow the Compact, Default or Comfortable tokens. Controls keep their own size.
Usage
Wrap the app content (or one area) in Density and pass the person's choice, usually from the AppHeader account menu. Density sets data-density on a wrapper with no box of its own (display: contents), and the kit tokens inside take that mode: space, control heights, icon sizes and font sizes. Controls keep their own size (md when not set); a medium Input is 32 / 36 / 36px tall and its text 14 / 16 / 18px in Compact / Default / Comfortable. Component sizes follow too (table and tree rows, tabs, avatars, badges, checkboxes, switches). Radius, border widths and the 24px minimum click target do not change. Menus, date pickers, modals and other popups opened from inside keep the same density. AppHeader keeps its own density sizes (its density prop, else the surrounding Density). See contracts/density.json for the full contract.
Do's
- Applying the person's Density & text size choice to the whole app.
- Making one area denser, like a data-heavy table toolbar.
Don'ts
- Do not set size on every control to fake a density. Wrap them in Density.
- Do not invent DensityProvider, SizeProvider or a local size context.
- Do not set data-density by hand on screens. Use Density.
- Do not size the AppHeader by hand. It follows its density prop, or the surrounding Density.
<Density value="default" > <App /> </Density>