Update elevation
This commit is contained in:
@@ -1,27 +1,10 @@
|
||||
TODO: Originally sourced from Material Design 3, Rewrite to be more Zed specific
|
||||
|
||||
# Elevation
|
||||
|
||||
Zed applies elevation to all surfaces and components, which are categorized into levels.
|
||||
|
||||
Elevation accomplishes the following:
|
||||
- Allows surfaces to move in front of or behind others, such as content scrolling beneath app top bars.
|
||||
- Reflects spatial relationships, for instance, how a floating action button’s shadow intimates its disconnection from a collection of cards.
|
||||
- Directs attention to structures at the highest elevation, like a temporary dialog arising in front of other surfaces.
|
||||
|
||||
Elevations are the initial elevation values assigned to components by default.
|
||||
|
||||
Components may transition to a higher elevation in some cases, like user interations.
|
||||
|
||||
On such occasions, components transition to predetermined dynamic elevation offsets. These are the typical elevations to which components move when they are not at rest.
|
||||
|
||||
## Understanding Elevation
|
||||
|
||||
Elevation 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.
|
||||
|
||||
Material 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)
|
||||
|
||||
## Elevation
|
||||
## Elevation Levels
|
||||
|
||||
1. App Background (e.x.: Workspace, system window)
|
||||
1. UI Surface (e.x.: Title Bar, Panel, Tab Bar)
|
||||
@@ -59,27 +42,3 @@ Modal Surfaces are used for elements that should appear above all other UI eleme
|
||||
Elements 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.
|
||||
|
||||
If the element does not have this behavior, it should be rendered at the Elevated Surface layer.
|
||||
|
||||
## Layer
|
||||
Each elevation that can contain elements has its own set of layers that are nested within the elevations.
|
||||
|
||||
1. TBD (Z -1 layer)
|
||||
1. Element (Text, button, surface, etc)
|
||||
1. Elevated Element (Popover, Context Menu, Tooltip)
|
||||
999. Dragged Element -> Highest Elevation
|
||||
|
||||
Dragged 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.
|
||||
|
||||
🚧 Work in Progress 🚧
|
||||
|
||||
## Element
|
||||
Each elevation that can contain elements has it's own set of layers:
|
||||
|
||||
1. Effects
|
||||
1. Background
|
||||
1. Tint
|
||||
1. Highlight
|
||||
1. Content
|
||||
1. Overlay
|
||||
|
||||
🚧 Work in Progress 🚧
|
||||
|
||||
Reference in New Issue
Block a user