Radius

All radius values derive from $radius-base in config. Changing the base value scales the entire radius system proportionally.

radius

Base mixin — apply any named radius size directly:

@include radius;          // md — default
@include radius(sm);
@include radius(lg);
@include radius(xl);
@include radius(2xl);
@include radius(none);    // 0

Scale

Size	Value
`none`	`0`
`sm`	`$radius-base × 0.5`
`md`	`$radius-base`
`lg`	`$radius-base × 1.5`
`xl`	`$radius-base × 2`
`2xl`	`$radius-base × 3`

Default $radius-base is 6px — override in config/_config.scss.

Semantic mixins

Each element type has a mixin with a considered default radius:

radius-input

@include radius-input;    // md

radius-button

@include radius-button;   // md

radius-card

@include radius-card;     // lg

@include radius-modal;    // xl

@include radius-tooltip;  // sm

radius-badge

@include radius-badge;    // sm