Surfaces
Eight surface levels that nest. Components read their substrate from context and lift relative to it, so popovers, dropdowns, and dialogs stay visible at any depth — in both and mode.
Installation
Installs the Elevated primitive plus the surface-context and surface-classes libs — the elevation ladder as code.
The problem
In light mode, we use shadow behind white surfaces to signify elevation. In dark mode, we use progressively lighter backgrounds instead.
But traditional components have a fixed background — a dropdown often ends up the same color as the dialog it sits in. That makes your interface look like this:
The solution
Three pieces: tokens, substrate context, and the primitive.
Tokens
Eight bg/shadow pairs. Light mode flattens to white after step 2 (shadow alone carries elevation). Dark mode keeps adding white-opacity plus a layered shadow recipe.
Substrate
Each container knows its own level and tells whatever opens inside. A popover on the page and the same popover inside a dialog both end up at the right depth, without anything passed between them.
Elevated
Wrap a panel and the background settles at the level it belongs to. The shadow doesn't change, so a popover still reads as a popover three layers down.
Move through levels
Drag both knobs to choose which slice of the ladder to nest. Each layer lifts a single step off the one it sits in — whether you span two levels or all eight.
Examples
Invite dialog
Dialog at surface 5, role picker at surface 7 — no props passed between them.
Color picker
The format dropdown sits one level above the picker panel.