Radii
Primitive radii and control / panel / indicator roles
Primitives (2xs–4xl, full) are the raw scale. Recipes should use role
radii so Theme factors have an effect.
radii.control = radii.sm × --scale-factor × --radius-factor × --radius-control-factor
| Role | Default primitive | Used for |
|---|---|---|
control / control.sm|md|lg | xs–md | Button, input, select |
panel / panel.sm|md|lg | sm–lg | Card, dialog, popover |
indicator / indicator.sm|md|lg | xs–md | Badge, tag, avatar |
l1, l2, and l3 still exist as aliases of xs / sm / md. Prefer the
roles.
Set --radius-factor and --radius-*-factor through Theme
(controlRadius, panelRadius, indicatorRadius). 0 squares the role,
large values pill it.
primitives
2xs
0.15rem
xs
0.2rem
sm
0.25rem
md
0.375rem
lg
0.5rem
xl
0.75rem
2xl
1rem
3xl
1.5rem
4xl
2rem
full
9999px
roles
control
calc({radii.sm} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-control-factor, 1))control.sm
calc({radii.xs} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-control-factor, 1))control.md
calc({radii.sm} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-control-factor, 1))control.lg
calc({radii.md} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-control-factor, 1))panel
calc({radii.md} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-panel-factor, 1))panel.sm
calc({radii.sm} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-panel-factor, 1))panel.md
calc({radii.md} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-panel-factor, 1))panel.lg
calc({radii.lg} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-panel-factor, 1))indicator
calc({radii.sm} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-indicator-factor, 1))indicator.sm
calc({radii.xs} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-indicator-factor, 1))indicator.md
calc({radii.sm} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-indicator-factor, 1))indicator.lg
calc({radii.md} * var(--scale-factor, 1) * var(--radius-factor, 1) * var(--radius-indicator-factor, 1))