From 8947438510a056da7281183f496aff65ac9e35e4 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 21 Nov 2023 01:23:47 -0500 Subject: [PATCH] Update elevation --- crates/ui2/src/styled_ext.rs | 4 +-- crates/ui2/src/styles/docs/elevation.md | 43 +------------------------ crates/ui2/src/styles/elevation.rs | 6 ++-- 3 files changed, 5 insertions(+), 48 deletions(-) diff --git a/crates/ui2/src/styled_ext.rs b/crates/ui2/src/styled_ext.rs index ffbe4bedeeae049c4bae2be36630f4a8e9f7d7b9..9e81ab19ee37b4bebb4ba6845a27b8c28498a47d 100644 --- a/crates/ui2/src/styled_ext.rs +++ b/crates/ui2/src/styled_ext.rs @@ -78,8 +78,6 @@ pub trait StyledExt: Styled + Sized { elevated(self, cx, ElevationIndex::ElevatedSurface) } - // There is no elevation 3, as the third elevation level is reserved for wash layers. See [`Elevation`](ui2::Elevation). - /// Modal 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 in their default state. /// /// Elements rendered at this layer should 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. @@ -89,7 +87,7 @@ pub trait StyledExt: Styled + Sized { /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()` /// /// Examples: Settings Modal, Channel Management, Wizards/Setup UI, Dialogs - fn elevation_4(self, cx: &mut WindowContext) -> Self { + fn elevation_3(self, cx: &mut WindowContext) -> Self { elevated(self, cx, ElevationIndex::ModalSurface) } } diff --git a/crates/ui2/src/styles/docs/elevation.md b/crates/ui2/src/styles/docs/elevation.md index 3960adb599c56d8babadcaec98723c9f1070039f..677fd030fd9ba14ff968f7338fe8924d554564dc 100644 --- a/crates/ui2/src/styles/docs/elevation.md +++ b/crates/ui2/src/styles/docs/elevation.md @@ -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 🚧 diff --git a/crates/ui2/src/styles/elevation.rs b/crates/ui2/src/styles/elevation.rs index f61eafb312db32ce412231d90003312b5ec78f99..198d41e6b8857826d82e8b46a3582aebe8cf9efc 100644 --- a/crates/ui2/src/styles/elevation.rs +++ b/crates/ui2/src/styles/elevation.rs @@ -25,8 +25,8 @@ impl ElevationIndex { ElevationIndex::Background => 0, ElevationIndex::Surface => 100, ElevationIndex::ElevatedSurface => 200, - ElevationIndex::Wash => 300, - ElevationIndex::ModalSurface => 400, + ElevationIndex::Wash => 250, + ElevationIndex::ModalSurface => 300, ElevationIndex::DraggedElement => 900, } } @@ -50,7 +50,7 @@ impl ElevationIndex { spread_radius: px(0.), }, BoxShadow { - color: hsla(0., 0., 0., 0.16), + color: hsla(0., 0., 0., 0.20), offset: point(px(3.), px(1.)), blur_radius: px(12.), spread_radius: px(0.),