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.
• 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.

Usage

CSS

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

JavaScript

import {controlCornerRadius} from '@genesislcap/rapid-design-system';

const styles = css`
  :host {
    border-radius: ${controlCornerRadius};
}`;