Tokens

Semantic tokens owned by the foundation (tokens in packages/components/specs/foundations/shape.spec.json). They live in packages/tokens/src/semantic/ (recreated from the Figma library) or tokens/additions/semantic/ (added by the design system), with their other values in tokens/modes/, tokens/additions/modes/ and tokens/platforms/.

Token	Type	Value	Resolved	CSS
`corner-radius.none`	dimension	`{"value":0,"unit":"px"}`	`0px`	`--corner-radius-none`
`corner-radius.3xs`	dimension	`{"value":1,"unit":"px"}`	`1px`	`--corner-radius-3xs`
`corner-radius.2xs`	dimension	`{"value":2,"unit":"px"}`	`2px`	`--corner-radius-2xs`
`corner-radius.xs`	dimension	`{"value":4,"unit":"px"}`	`4px`	`--corner-radius-xs`
`corner-radius.sm`	dimension	`{"value":8,"unit":"px"}`	`8px`	`--corner-radius-sm`
`corner-radius.md`	dimension	`{"value":12,"unit":"px"}`	`12px`	`--corner-radius-md`
`corner-radius.lg`	dimension	`{"value":16,"unit":"px"}`	`16px`	`--corner-radius-lg`
`corner-radius.xl`	dimension	`{"value":20,"unit":"px"}`	`20px`	`--corner-radius-xl`
`corner-radius.2xl`	dimension	`{"value":24,"unit":"px"}`	`24px`	`--corner-radius-2xl`
`corner-radius.full`	dimension	`{"value":9999,"unit":"px"}`	`9999px`	`--corner-radius-full`
`stroke-width.none`	dimension	`{"value":0,"unit":"px"}`	`0px`	`--stroke-width-none`
`stroke-width.sm`	dimension	`{"value":0.6,"unit":"px"}`	`0.6px`	`--stroke-width-sm`
`stroke-width.md`	dimension	`{"value":1.2,"unit":"px"}`	`1.2px`	`--stroke-width-md`
`stroke-width.lg`	dimension	`{"value":2.4,"unit":"px"}`	`2.4px`	`--stroke-width-lg`

Components following it

Derived from the component tokens aliasing the foundation's tokens.

Component	Component tokens aliasing the foundation
Accordion	`accordion.item.border-width` → `{stroke-width.sm}` `accordion.trigger.border-radius` → `{corner-radius.xs}`
Alert	`alert.container.border-width` → `{stroke-width.sm}` `alert.container.border-radius` → `{corner-radius.sm}`
Avatar	`avatar.container.border-radius.circle` → `{corner-radius.full}` `avatar.container.border-radius.square` → `{corner-radius.xs}` `avatar.container.border-width` → `{stroke-width.sm}`
Badge	`badge.container.border-width` → `{stroke-width.sm}` `badge.container.border-radius` → `{corner-radius.full}`
Breadcrumb	`breadcrumb.link.border-radius` → `{corner-radius.2xs}`
Button	`button.container.border-width` → `{stroke-width.sm}` `button.container.border-radius.xsmall` → `{corner-radius.2xs}` `button.container.border-radius.small` → `{corner-radius.2xs}` `button.container.border-radius.medium` → `{corner-radius.xs}` `button.container.border-radius.large` → `{corner-radius.xs}`
Card	`card.container.border-width` → `{stroke-width.sm}` `card.container.border-radius` → `{corner-radius.sm}`
Checkbox group	`checkbox-group.control.border-radius.small` → `{corner-radius.2xs}` `checkbox-group.control.border-radius.medium` → `{corner-radius.xs}` `checkbox-group.control.border-width` → `{stroke-width.md}`
Checkbox	`checkbox.control.border-radius.small` → `{corner-radius.2xs}` `checkbox.control.border-radius.medium` → `{corner-radius.xs}` `checkbox.control.border-width` → `{stroke-width.md}`
Divider	`divider.container.border-width` → `{stroke-width.sm}`
Dropdown	`dropdown.menu.border-width` → `{stroke-width.sm}` `dropdown.menu.border-radius` → `{corner-radius.sm}` `dropdown.separator.width` → `{stroke-width.sm}` `dropdown.item.border-radius` → `{corner-radius.2xs}`
Icon button	`icon-button.container.border-width` → `{stroke-width.sm}` `icon-button.container.border-radius.xsmall` → `{corner-radius.2xs}` `icon-button.container.border-radius.small` → `{corner-radius.2xs}` `icon-button.container.border-radius.medium` → `{corner-radius.xs}` `icon-button.container.border-radius.large` → `{corner-radius.xs}`
Number field	`number-field.control.border-radius` → `{corner-radius.xs}` `number-field.control.border-width` → `{stroke-width.sm}`
Pagination	`pagination.link.border-radius` → `{corner-radius.xs}`
Progress bar	`progress-bar.track.border-radius` → `{corner-radius.full}` `progress-bar.indicator.border-radius` → `{corner-radius.full}`
Radio group	`radio-group.control.border-radius` → `{corner-radius.full}` `radio-group.control.border-width` → `{stroke-width.md}`
Search field	`search-field.control.border-radius` → `{corner-radius.xs}` `search-field.control.border-width` → `{stroke-width.sm}`
Select	`select.control.border-radius` → `{corner-radius.xs}` `select.control.border-width` → `{stroke-width.sm}`
Skeleton	`skeleton.container.border-radius.text` → `{corner-radius.2xs}` `skeleton.container.border-radius.rectangle` → `{corner-radius.sm}` `skeleton.container.border-radius.circle` → `{corner-radius.full}`
Slider	`slider.control.border-radius` → `{corner-radius.full}` `slider.thumb.border-radius` → `{corner-radius.full}` `slider.thumb.border-width` → `{stroke-width.md}`
Spinner	`spinner.ring.border-width.small` → `{stroke-width.md}` `spinner.ring.border-width.medium` → `{stroke-width.lg}` `spinner.ring.border-width.large` → `{stroke-width.lg}`
Switch	`switch.control.border-radius` → `{corner-radius.full}` `switch.control.border-width` → `{stroke-width.md}`
Text field	`text-field.control.border-radius` → `{corner-radius.xs}` `text-field.control.border-width` → `{stroke-width.sm}`
Textarea	`textarea.control.border-radius` → `{corner-radius.xs}` `textarea.control.border-width` → `{stroke-width.sm}`