Tokens
Shadow
Elevation shadows for light and dark surfaces. The same utility switches ink with the mode.
Light mode uses a soft cool ink. Dark surfaces need a stronger neutral ink plus a faint light hairline, or the edge disappears. Components use one utility, such as shadow-md; the mode decides which value it gets.
| Light | Dark | Token | Value | Use |
|---|---|---|---|---|
| shadow/xsshadow-dark/xs | Light0 1px 2px 0 rgb(16 24 40 / 0.05)Dark0 1px 2px 0 rgb(0 0 0 / 0.40) | shadow-xs | ||
| shadow/smshadow-dark/sm | Light0 1px 3px 0 rgb(16 24 40 / 0.10), 0 1px 2px 0 rgb(16 24 40 / 0.06)Dark0 1px 3px 0 rgb(0 0 0 / 0.50), 0 0 0 1px rgb(255 255 255 / 0.04) | shadow-sm | ||
| shadow/mdshadow-dark/md | Light0 4px 8px -2px rgb(16 24 40 / 0.10), 0 2px 4px -2px rgb(16 24 40 / 0.06)Dark0 4px 8px -2px rgb(0 0 0 / 0.50), 0 0 0 1px rgb(255 255 255 / 0.05) | shadow-md | ||
| shadow/lgshadow-dark/lg | Light0 12px 16px -4px rgb(16 24 40 / 0.08), 0 4px 6px -2px rgb(16 24 40 / 0.03)Dark0 12px 16px -4px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.05) | shadow-lg | ||
| shadow/xlshadow-dark/xl | Light0 20px 24px -4px rgb(16 24 40 / 0.08), 0 8px 8px -4px rgb(16 24 40 / 0.03)Dark0 20px 24px -4px rgb(0 0 0 / 0.60), 0 0 0 1px rgb(255 255 255 / 0.06) | shadow-xl | ||
| shadow/2xlshadow-dark/2xl | Light0 24px 48px -12px rgb(16 24 40 / 0.18)Dark0 24px 48px -12px rgb(0 0 0 / 0.70), 0 0 0 1px rgb(255 255 255 / 0.06) | shadow-2xl |