Tonal (surface) elevation engine

Generated from mcp/patterns.registry.json — do not edit by hand; change the registry and run bun run patterns:build.

Index card — the docs below are the canonical explanation; deep-tier pattern pages additionally carry invariants and emulation notes.

Category: UI Components & Design System · Tier: light · Risk: low — frontend only, no runtime side effects

A pure, SSR-safe TypeScript engine that computes each surface's relative depth (parent level + 1) via Svelte context and stamps it as a data-elevation attribute, decoupled from z-index.

When to use: Use when a new stacked surface (menu, dialog, panel) needs a consistent tonal depth cue that survives Bits UI portals.

Docs

• docs/blueprint/design/tokens.md (GitHub · GitLab)

Code

• src/lib/styles/elevation.ts (GitHub · GitLab)
• src/lib/components/layout/ (GitHub · GitLab)

Proof

• /showcases/ui/layouts

Machine-readable record: ui-tonal-elevation in mcp/patterns.registry.json.