Shadow
Shadow tokens express depth for cards, modals, dropdowns, and other layered elements.
Overview
Pine provides 6 foundation shadow tokens from none to xl. These map to semantic tokens (xsmall, small, medium, large, xlarge) that components use for elevation. Shadows are defined with slate-toned semi-transparent rgba values, so they work in both light and dark modes.
Foundation Shadow Tokens
| Token | Preview | Value |
|---|---|---|
| none | none | |
| xs | 0 1px 2px rgba(15, 23, 42, 0.08) | |
| sm | 0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, ... | |
| md | 0 4px 6px -1px rgba(15, 23, 42, 0.12), 0 2px 4px -2px... | |
| lg | 0 10px 15px -3px rgba(15, 23, 42, 0.18), 0 4px 6px -4... | |
| xl | 0 20px 25px -5px rgba(15, 23, 42, 0.2), 0 10px 10px -... |
Theme Adapters
Standard shadow tokens map identically across all themes:
| Theme | xsmall | small | medium | large | xlarge |
|---|---|---|---|---|---|
| basic | xs | sm | md | lg | xl |
| game | xs | sm | md | lg | xl |
| crayon | xs | sm | md | lg | xl |
The game theme adds two extra tokens for a pixel-art outline effect:
- pixelBox — 4px black/white outline drawn via
box-shadow(used on Button, Badge, Checkbox, Switch, Tab, Dialog, Dropdown) - pixelBoxMargin — Layout offset for the outline (typically
0)
basic and crayon themes set both to none and 0.
Guidelines
- Visual hierarchy: Use larger shadow tokens for higher layers (modals, popovers) to create clear elevation.
- Consistency: Use the same shadow token for components at the same layer (e.g. cards, dropdowns).
- Game theme: The pixelBox token replaces standard shadows on many components to match the pixel-art style.
- Accessibility: Avoid heavy shadows on small elements; they can reduce perceived contrast and readability.
Last updated on