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
The problem
Hard-coded surface levels collapse the moment a component nests inside something at the same level. Inside a substrate-5 dialog, a popover that hard-codesbg-surface-5literally disappears into the dialog.
The system
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.
Examples
Color picker
The format dropdown sits one level above the picker panel.
Invite dialog
Dialog at surface 5, role picker at surface 7 — no props passed between them.