Shadow tokens and Box elevation enums for depth.
--shadow-1 through --shadow-5; React exposes Elevation.None | Low | Medium | High on Box.
| Name | Type | Default | Description |
|---|---|---|---|
--shadow-1 | shadow | — | Closest to the canvas; cards and inset panels. |
--shadow-2 | shadow | — | Popovers, menus, and transient surfaces. |
--shadow-3 | shadow | — | Dialogs and focus layers. |
--shadow-4 | shadow | — | Large overlays spanning multiple regions. |
--shadow-5 | shadow | — | Maximum separation for critical modals. |
| Enum | Intended surface |
|---|---|
Elevation.Low | Raised cards, inline summaries |
Elevation.Medium | Hovering menus, tooltip frames |
Elevation.High | Dialog shells and blocking flows |
z-index tokens (--z-index-modal, --z-index-popover, etc.) when managing portals..pr-tooltip sits at calc(var(--z-index-tooltip) + 100) so tooltips paint above popovers even though the two tokens share the same numeric value.