Tokens
Shadows
Elevation is theme-specific and reserved for overlays only (dialogs, popovers, dropdowns, toasts) — never for cards or structure, which use a hairline border. The Accessibility theme has no shadows at all. The samples below use the current theme's values.
sm
md
lg
Per-theme values
| Token | Light | Dark | Accessibility |
|---|---|---|---|
--shadow-sm | 0 1px 3px rgba(0, 0, 0, 0.1) | 0 1px 3px rgba(0, 0, 0, 0.6) | none |
--shadow-md | 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) | 0 4px 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.4) | none |
--shadow-lg | 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04) | 0 12px 24px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.4) | none |