Prepared Docs

Elevation communicates stacking order in dark chrome. CSS exposes --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.

React mapping

Enum	Intended surface
`Elevation.Low`	Raised cards, inline summaries
`Elevation.Medium`	Hovering menus, tooltip frames
`Elevation.High`	Modal shells and blocking flows

Guidance

Shadows already encode transparency tuned for dark gray backgrounds—avoid stacking extra opaque fills.
Pair elevation jumps with z-index tokens (--z-index-modal, --z-index-popover, etc.) when managing portals.
Band order for portaled chrome (bottom → top): overlay → modal → popover → tooltip. .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.

Spacing

Semantics

React mapping

Guidance

Elevation communicates stacking order in dark chrome. CSS exposes --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.

React mapping

Enum	Intended surface
`Elevation.Low`	Raised cards, inline summaries
`Elevation.Medium`	Hovering menus, tooltip frames
`Elevation.High`	Modal shells and blocking flows

Guidance

Shadows already encode transparency tuned for dark gray backgrounds—avoid stacking extra opaque fills.
Pair elevation jumps with z-index tokens (--z-index-modal, --z-index-popover, etc.) when managing portals.
Band order for portaled chrome (bottom → top): overlay → modal → popover → tooltip. .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.

Spacing

Semantics

React mapping

Guidance