Specialized control sizes tokens
Chip / tag tier — fourth step below --vueda-control-height-lg. 4-step ladder: 40 (lg) · 32 (default) · 28 (sm) · 20 (chip).
| Name | Light | Dark | Description | Tailwind utility |
|---|---|---|---|---|
--vueda-chip-height | 20px | chip / tag tier; fourth step below --vueda-control-height-lg on the 40 / 32 / 28 / 20 ladder. Used by TagsInput chips and inline Badges in tables. | ||
--vueda-cmd-input-height | 40px | Command search-input wrapper height; lg tier so the search field reads as the dominant surface of the dialog. | ||
--vueda-cmd-footer-height | 32px | Command footer chin height; default tier so the action-hint row sits one step below the input. | ||
--vueda-cal-cell | 32px | Calendar grid slot; the outer 32px square that the 30px day button sits inside. | ||
--vueda-cal-day | 30px | Calendar inner day button; 30px so the 32px slot reserves 1px of breathing room around the button on each axis. | ||
--vueda-cal-day-radius | 2px | Calendar day corner. Kept distinct from --vueda-control-radius so range-fill compositions can override the corner independently without disturbing the family-wide control corner. | radius: vueda-cal-day |
Tokens
--vueda-chip-height
| Field | Value |
|---|---|
| Light | 20px |
| Source | client/lib/theme/vueda-tailwind/base.css:540 |
chip / tag tier; fourth step below --vueda-control-height-lg on the 40 / 32 / 28 / 20 ladder. Used by TagsInput chips and inline Badges in tables.
--vueda-cmd-input-height
| Field | Value |
|---|---|
| Light | 40px |
| Source | client/lib/theme/vueda-tailwind/base.css:545 |
Command search-input wrapper height; lg tier so the search field reads as the dominant surface of the dialog.
--vueda-cmd-footer-height
| Field | Value |
|---|---|
| Light | 32px |
| Source | client/lib/theme/vueda-tailwind/base.css:546 |
Command footer chin height; default tier so the action-hint row sits one step below the input.
--vueda-cal-cell
| Field | Value |
|---|---|
| Light | 32px |
| Source | client/lib/theme/vueda-tailwind/base.css:552 |
Calendar grid slot; the outer 32px square that the 30px day button sits inside.
--vueda-cal-day
| Field | Value |
|---|---|
| Light | 30px |
| Source | client/lib/theme/vueda-tailwind/base.css:553 |
Calendar inner day button; 30px so the 32px slot reserves 1px of breathing room around the button on each axis.
--vueda-cal-day-radius
| Field | Value |
|---|---|
| Light | 2px |
| Tailwind utility | radius: vueda-cal-day |
| Source | client/lib/theme/vueda-tailwind/base.css:554 |
Calendar day corner. Kept distinct from --vueda-control-radius so range-fill compositions can override the corner independently without disturbing the family-wide control corner.