Tonal (surface) elevation engine

Generated from pattern-library/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 · Maturity: proven (verified 2026-08-20 @ 1a130d67) · 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 pattern-library/registry.json.