Borders

Border radius tokens for corners and semantic border color tokens for dividers and outlines.

Radius

Token Value Sample
--source-radius-sm 4px
--source-radius-md 8px
--source-radius-lg 12px
--source-radius-xl 16px
--source-radius-2xl 24px
--source-radius-full 9999px

Border colors

Token Value Use for
--source-color-border var(--source-neutral-200) Default dividers, card outlines, form field edges
--source-color-border-strong var(--source-neutral-300) Active states, focus rings, emphasis borders
--source-color-border-default var(--source-color-border)

Status border colors

Token Value Use for
--source-color-success var(--source-success-600) Alert and feedback outlines with semantic meaning.
--source-color-warning var(--source-warning-600) Alert and feedback outlines with semantic meaning.
--source-color-info var(--source-info-600) Alert and feedback outlines with semantic meaning.
--source-color-danger var(--source-danger-500) Alert and feedback outlines with semantic meaning.

Accent border

Token Value Use for
--source-color-accent theme-dependent Active tab indicator, accent link underline, and emphasized borders that should follow the current theme.