1TODO: Originally sourced from Material Design 3, Rewrite to be more Zed specific
 2
 3# Elevation
 4
 5Zed applies elevation to all surfaces and components, which are categorized into levels.
 6
 7Elevation accomplishes the following:
 8- Allows surfaces to move in front of or behind others, such as content scrolling beneath app top bars.
 9- Reflects spatial relationships, for instance, how a floating action button’s shadow intimates its disconnection from a collection of cards.
10- Directs attention to structures at the highest elevation, like a temporary dialog arising in front of other surfaces.
11
12Elevations are the initial elevation values assigned to components by default.
13
14Components may transition to a higher elevation in some cases, like user interations.
15
16On such occasions, components transition to predetermined dynamic elevation offsets. These are the typical elevations to which components move when they are not at rest.
17
18## Understanding Elevation
19
20Elevation can be thought of as the physical closeness of an element to the user. Elements with lower elevations are physically further away from the user on the z-axis and appear to be underneath elements with higher elevations.
21
22Material Design 3 has a some great visualizations of elevation that may be helpful to understanding the mental modal of elevation. [Material Design – Elevation](https://m3.material.io/styles/elevation/overview)
23
24## Elevation
25
261. App Background (e.x.: Workspace, system window)
271. UI Surface (e.x.: Title Bar, Panel, Tab Bar)
281. Elevated Surface (e.x.: Palette, Notification, Floating Window)
291. Wash
301. Modal Surfaces (e.x.: Modal)
311. Dragged Element (This is a special case, see Layer section below)
32
33### App Background
34
35The app background constitutes the lowest elevation layer, appearing behind all other surfaces and components. It is predominantly used for the background color of the app.
36
37### Surface
38
39The Surface elevation level, located above the app background, is the standard level for all elements
40
41Example Elements: Title Bar, Panel, Tab Bar, Editor
42
43### Elevated Surface
44
45Non-Modal Elevated Surfaces appear above the UI surface layer and is used for things that should appear above most UI elements like an editor or panel, but not elements like popovers, context menus, modals, etc.
46
47Examples: Notifications, Palettes, Detached/Floating Windows, Detached/Floating Panels
48
49You could imagine a variant of the assistant that floats in a window above the editor on this elevation, or a floating terminal window that becomes less opaque when not focused.
50
51### Wash
52
53Wash denotes a distinct elevation reserved to isolate app UI layers from high elevation components such as modals, notifications, and overlaid panels. The wash may not consistently be visible when these components are active. This layer is often referred to as a scrim or overlay and the background color of the wash is typically deployed in its design.
54
55### Modal Surfaces
56
57Modal Surfaces are used for elements that should appear above all other UI elements and are located above the wash layer. This is the maximum elevation at which UI elements can be rendered
58
59Elements rendered at this layer have an enforced behavior: Any interaction outside of the modal will either dismiss the modal or prompt an action (Save your progress, etc) then dismiss the modal.
60
61If the element does not have this behavior, it should be rendered at the Elevated Surface layer.
62
63## Layer
64Each elevation that can contain elements has its own set of layers that are nested within the elevations.
65
661. TBD (Z -1 layer)
671. Element (Text, button, surface, etc)
681. Elevated Element (Popover, Context Menu, Tooltip)
69999. Dragged Element -> Highest Elevation
70
71Dragged elements jump to the highest elevation the app can render. An active drag should _always_ be the most foreground element in the app at any time.
72
73🚧 Work in Progress 🚧
74
75## Element
76Each elevation that can contain elements has it's own set of layers:
77
781. Effects
791. Background
801. Tint
811. Highlight
821. Content
831. Overlay
84
85🚧 Work in Progress 🚧