---
url: "https://vueda.dev/v3/reference/theming/tokens/semantic-shadow-tokens.md"
title: "Semantic shadow tokens"
---

# Semantic shadow tokens

Controls and cards carry zero shadow; borders do the work. Elevation
is reserved for surfaces that overlay other surfaces.

| Name | Light | Dark | Description | Tailwind utility |
| --- | --- | --- | --- | --- |
| `--vueda-shadow-control` | `0 0 oklch(0 0 0 / 0)` |  | zero elevation; controls carry definition through painted edges, not shadow. | `shadow: vueda-control` |
| `--vueda-shadow-card` | `0 0 oklch(0 0 0 / 0)` |  | zero elevation; cards carry definition through a 1px border, not shadow. | `shadow: vueda-card` |
| `--vueda-shadow-popover` | `0 0 0 1px oklch(0.2 0.01 250 / 0.08), 0 4px 12px -2px oklch(0.15 0.02 250 / 0.12)` | `0 0 0 1px oklch(1 0 0 / 0.08), 0 4px 12px -2px oklch(0 0 0 / 0.5)` | 1px ring plus a 12px ambient drop — applied to popover, dropdown, context menu, and combobox list surfaces. | `shadow: vueda-popover` |
| `--vueda-shadow-overlay` | `0 0 0 1px oklch(0.2 0.01 250 / 0.12), 0 16px 40px -8px oklch(0.1 0.02 250 / 0.28),         0 2px 8px -2px oklch(0.1 0.02 250 / 0.16)` | `0 0 0 1px oklch(1 0 0 / 0.1), 0 16px 40px -8px oklch(0 0 0 / 0.7), 0 2px 8px -2px oklch(0 0 0 / 0.5)` | heavier drop for surfaces that overlay the full viewport — dialog, sheet, drawer. | `shadow: vueda-overlay` |

## Tokens

<a id="css-token-vueda-shadow-control"></a>

### --vueda-shadow-control

| Field | Value |
| --- | --- |
| Light | `0 0 oklch(0 0 0 / 0)` |
| Tailwind utility | `shadow: vueda-control` |
| Source | `client/lib/theme/vueda-tailwind/base.css:582` |

zero elevation; controls carry definition through painted edges, not shadow.

<a id="css-token-vueda-shadow-card"></a>

### --vueda-shadow-card

| Field | Value |
| --- | --- |
| Light | `0 0 oklch(0 0 0 / 0)` |
| Tailwind utility | `shadow: vueda-card` |
| Source | `client/lib/theme/vueda-tailwind/base.css:583` |

zero elevation; cards carry definition through a 1px border, not shadow.

<a id="css-token-vueda-shadow-popover"></a>

### --vueda-shadow-popover

| Field | Value |
| --- | --- |
| Light | `0 0 0 1px oklch(0.2 0.01 250 / 0.08), 0 4px 12px -2px oklch(0.15 0.02 250 / 0.12)` |
| Dark | `0 0 0 1px oklch(1 0 0 / 0.08), 0 4px 12px -2px oklch(0 0 0 / 0.5)` |
| Tailwind utility | `shadow: vueda-popover` |
| Source | `client/lib/theme/vueda-tailwind/base.css:584` |

1px ring plus a 12px ambient drop — applied to popover, dropdown, context menu, and combobox list surfaces.

<a id="css-token-vueda-shadow-overlay"></a>

### --vueda-shadow-overlay

| Field | Value |
| --- | --- |
| Light | `0 0 0 1px oklch(0.2 0.01 250 / 0.12), 0 16px 40px -8px oklch(0.1 0.02 250 / 0.28),         0 2px 8px -2px oklch(0.1 0.02 250 / 0.16)` |
| Dark | `0 0 0 1px oklch(1 0 0 / 0.1), 0 16px 40px -8px oklch(0 0 0 / 0.7), 0 2px 8px -2px oklch(0 0 0 / 0.5)` |
| Tailwind utility | `shadow: vueda-overlay` |
| Source | `client/lib/theme/vueda-tailwind/base.css:586` |

heavier drop for surfaces that overlay the full viewport — dialog, sheet, drawer.