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
--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.
--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.
--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.
--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.