Shadows
Elevation tokens for cards, modals, drawers and popovers.
Visual reference
Each card renders the shadow live via inline boxShadow so you can compare depths side by side. Click any token to copy its CSS custom property name.
Click any token to copy it.
Dark-mode elevation halo
In dark mode, every shadow swaps to a heavier recipe: the outer drop-shadow alpha rises (+0.35 to +0.55) and a 1px white inset halo (rgba 255,255,255,0.04–0.08) is added along the top edge. Dark surfaces absorb flat black shadows, so the halo restores the perception of elevation. This is the EX-QA-PASS-7a design decision — all 5 shadows are swap-in-dark, none are theme-stable.
Usage
Reach for the shadow that matches the role, not the raw value. Higher elevation = greater visual weight and stricter accessibility rules.
shadow-ep-md → resting list card
shadow-ep-lg → hovered card, dropdown, popover
shadow-ep-overlay → modal, drawer, CommandMenu (highest elevation)
shadow-ep-card and shadow-ep-elevated are semantic aliases (3.1.6 plugin) rarely used. Prefer the direct levels (shadow-ep-md / -lg / -overlay) in new code.