---
url: "https://vueda.dev/v3/reference/theming/tokens/specialized-control-sizes.md"
title: "Specialized control sizes tokens"
---

# 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

<a id="css-token-vueda-chip-height"></a>

### --vueda-chip-height

| Field | Value |
| --- | --- |
| Light | `20px` |
| Source | `client/lib/theme/vueda-tailwind/base.css:623` |

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.

<a id="css-token-vueda-cmd-input-height"></a>

### --vueda-cmd-input-height

| Field | Value |
| --- | --- |
| Light | `40px` |
| Source | `client/lib/theme/vueda-tailwind/base.css:628` |

Command search-input wrapper height; lg tier so the search field reads as the dominant surface of the dialog.

<a id="css-token-vueda-cmd-footer-height"></a>

### --vueda-cmd-footer-height

| Field | Value |
| --- | --- |
| Light | `32px` |
| Source | `client/lib/theme/vueda-tailwind/base.css:629` |

Command footer chin height; default tier so the action-hint row sits one step below the input.

<a id="css-token-vueda-cal-cell"></a>

### --vueda-cal-cell

| Field | Value |
| --- | --- |
| Light | `32px` |
| Source | `client/lib/theme/vueda-tailwind/base.css:635` |

Calendar grid slot; the outer 32px square that the 30px day button sits inside.

<a id="css-token-vueda-cal-day"></a>

### --vueda-cal-day

| Field | Value |
| --- | --- |
| Light | `30px` |
| Source | `client/lib/theme/vueda-tailwind/base.css:636` |

Calendar inner day button; 30px so the 32px slot reserves 1px of breathing room around the button on each axis.

<a id="css-token-vueda-cal-day-radius"></a>

### --vueda-cal-day-radius

| Field | Value |
| --- | --- |
| Light | `2px` |
| Tailwind utility | `radius: vueda-cal-day` |
| Source | `client/lib/theme/vueda-tailwind/base.css:637` |

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.