Skip to main content

Sizing tokens

You can adjust any of the defaults in the design-tokens.json file of your design system.

  • density: an adjustment to sizing tokens baseHeightMultiplier and baseHorizontalSpacingMultiplier.
  • baseHeightMultiplier: works with density and designUnit to scale vertical chrome. Layout tab strips and layout header height use ((baseHeightMultiplier + density) * designUnit) - 4 pixels once configureDesignSystem has applied the design tokens (CSS uses the same relationship via --base-height-multiplier, --density, and --design-unit). If the layout is already on screen when tokens are first applied, it reapplies its configuration so those dimensions pick up the new values.
  • borderRadius: radius applied to borders, for example the border on a button or a checkbox.
  • strokeWidth: changes the width of the outline (stroke) of SVG elements or text. It determines how thick the lines, borders, or outlines appear.
  • designUnit: the unit size of the design grid. Used to calculate height and spacing sizes for controls.

For rapid-grid-pro with a Rapid grid theme, if you do not set row-height or header-height, default pixel heights are derived from the same baseHeightMultiplier, density, and designUnit values, falling back to 32 if the design system has not been configured yet. See Grid Pro for the attributes that override those defaults.

Usage​

border-radius: var(--control-corner-radius);