Semantic radius tokens
Five-step semantic ladder; near-flat by design.
| Name | Light | Dark | Description | Tailwind utility |
|---|---|---|---|---|
--vueda-control-radius | 2px | slab radius shared by buttons, toggles, and most chrome controls. | radius: vueda-control | |
--vueda-field-radius | 0px | editable field corner: text inputs, textareas, selects, date and time fields, tags inputs, and combobox triggers. Square so a field reads as a different kind of control from the 2px button slab; focus rings follow this corner, so a focused field's ring is square too. | radius: vueda-field | |
--vueda-checkbox-radius | 4px | softer than --vueda-control-radius by design; the 4px corner reads as "chit / chiclet" at 16×16, differentiating the checkbox body from the slab inputs and buttons beside it. | radius: vueda-checkbox | |
--vueda-card-radius | 4px | card and panel corner radius. | radius: vueda-card | |
--vueda-modal-radius | 2px | dialog and sheet corner radius; matches --vueda-control-radius so modal chrome reads as a slab. | radius: vueda-modal | |
--vueda-pill-radius | 9999px | fully round — avatars and user-manipulated tag / chip objects (TagsInput chips, attachment chips), plus inline running-text state markers. | radius: vueda-pill |
Tokens
--vueda-control-radius
| Field | Value |
|---|---|
| Light | 2px |
| Tailwind utility | radius: vueda-control |
| Source | client/lib/theme/vueda-tailwind/base.css:489 |
slab radius shared by buttons, toggles, and most chrome controls.
--vueda-field-radius
| Field | Value |
|---|---|
| Light | 0px |
| Tailwind utility | radius: vueda-field |
| Source | client/lib/theme/vueda-tailwind/base.css:490 |
editable field corner: text inputs, textareas, selects, date and time fields, tags inputs, and combobox triggers. Square so a field reads as a different kind of control from the 2px button slab; focus rings follow this corner, so a focused field's ring is square too.
--vueda-checkbox-radius
| Field | Value |
|---|---|
| Light | 4px |
| Tailwind utility | radius: vueda-checkbox |
| Source | client/lib/theme/vueda-tailwind/base.css:491 |
softer than --vueda-control-radius by design; the 4px corner reads as "chit / chiclet" at 16×16, differentiating the checkbox body from the slab inputs and buttons beside it.
--vueda-card-radius
| Field | Value |
|---|---|
| Light | 4px |
| Tailwind utility | radius: vueda-card |
| Source | client/lib/theme/vueda-tailwind/base.css:492 |
card and panel corner radius.
--vueda-modal-radius
| Field | Value |
|---|---|
| Light | 2px |
| Tailwind utility | radius: vueda-modal |
| Source | client/lib/theme/vueda-tailwind/base.css:493 |
dialog and sheet corner radius; matches --vueda-control-radius so modal chrome reads as a slab.
--vueda-pill-radius
| Field | Value |
|---|---|
| Light | 9999px |
| Tailwind utility | radius: vueda-pill |
| Source | client/lib/theme/vueda-tailwind/base.css:494 |
fully round — avatars and user-manipulated tag / chip objects (TagsInput chips, attachment chips), plus inline running-text state markers.