Design System Tokens - Sizing

You can adjust any of the defaults in the src/_config/values file of your design system.

• baseHeightMultiplier: this value, multiplied by designUnit, sets the base height of most controls. Works with adaptive density values.
• baseHorizontalSpacingMultiplier: this value, multiplied by designUnit, sets the internal horizontal padding of most controls. Works with adaptive density values.
• controlCornerRadius: sets the corner radius used by controls with backgrounds.
• density: an adjustment to sizing tokens baseHeightMultiplier and baseHorizontalSpacingMultiplier.
• 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/alpha-design-system';

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