# Elevation and materials

Names the elevation levels, the materials and the stacking layers, and says when a surface may use glass.

* Kind: foundation
* Page: https://design.werklist.com/foundations/elevation
* Version: 2.1.2

## Rules

* Each surface sits at one level. A shadow appears only when a surface floats over the content or lifts under the pointer.
* Content surfaces sit at --elevation-0 and separate by fill. No shadow on a card at rest.
* Menus, popovers, dialogs, sheets and toasts sit at --elevation-3 with the raised material.
* In the light theme the shadow carries the height. Light shadows take the navy of the ink, never black, which turns a white page gray.
* In the dark theme a higher surface is a lighter one: --bg, then --surface-1, then --glass-fill-raised.
* Frosted glass only for bars that float over content scrolling beneath them.
* Glass sits on the outermost surface only. Glass inside glass blurs only its parent and turns gray.
* No contrast added to a blur. It crushes the content beneath into gray.
* A scrim dims the page under a dialog or a sheet, and the page is out of reach until it closes.
* Layers stack in a fixed order, from sticky headers at the bottom to toasts at the top.
* z-index only from --layer-sticky, --layer-header, --layer-popover, --layer-dialog, --layer-toast. Never a value such as 1000 or 9999.
* A layer opened from inside another opens within it. A menu opened in a dialog shows above the dialog and closes first.

## Anatomy

* Level 0: the page, resting cards, wells, tables. No shadow (--elevation-0)
* Level 1: a clickable card under the pointer. Shadow 8 px down, 24 px blur (--elevation-1)
* Level 2: the navigation rail, the bottom bar on a phone. Shadow 12 px down, 32 px blur, fill --glass-fill (--elevation-2)
* Level 3: menus, popovers, dialogs, sheets, toasts. Shadow 24 px down, 64 px blur, fill --glass-fill-raised (--elevation-3)
* Solid material: opaque (--surface-1)
* Frosted material: blur 48 px with strong saturation, text with a soft halo in the color of the surface (--glass-blur-nav)
* Raised material: nearly opaque, blur 28 px, fully opaque on a phone (--glass-fill-raised)
* Scrim: navy at 44 percent in light, 66 percent in dark, under dialogs and sheets (--overlay)
* Layers: sticky 20, header 40, popover 65, dialog 60, toast 70 (--layer-popover)

## States

* Hover lift: a clickable card moves from level 0 to level 1 (--elevation-1)
* Reduced transparency, or no blur in the browser: glass falls back to its solid fill (--surface-1, --glass-fill-raised)
* Forced colors: glass takes the system background and a 1 px edge

## Keyboard

* Escape: Closes the top layer only and returns focus to the control that opened it.

## Tokens

* --elevation-0
* --elevation-1
* --elevation-2
* --elevation-3
* --glass-shadow-card
* --glass-shadow-panel
* --glass-shadow-raised
* --glass-fill
* --glass-fill-raised
* --glass-blur-nav
* --glass-blur-raised
* --overlay
* --surface-1
* --bg
* --layer-sticky
* --layer-header
* --layer-popover
* --layer-dialog
* --layer-toast