From 6767e98e0080b528b3bd9ffb3ed484c7b4703670 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 13 Mar 2025 11:18:40 -0400 Subject: [PATCH] ui: Color cleanup (#26673) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR cleans up some color & elevation misc. ### Don't allow deriving Color from Hsla The point of the [ui::Color] enum is to encourage consistent color usage, and the the Color::Custom case is really only meant for cases where we have no other choice. `impl From for Color` encourages blindly passing colors into `Color::Custom` – with this in place we might as well remove the entire `Color` enum. The usages that were updated due to this removal were for colors that already exist in the Color enum, making it even more clear that it didn't make sense to have this. ### `ElevationIndex` -> `Elevation` This name would make more sense if we had an `Elevation` in the first place. The new name is more clear. #### `Button::elevation` As part of this change I also updated button's `layer` method to `elevation`, since it takes an elevation. This method still has the following issue: You want to use `Button::elevation` when it's default colors are invisible on the layer you are rendering the button on. However, current this method uses the elevation's `bg` color, rather than it's `on_elevation_bg`. Ideally when you use `Button::elevation` you want to pass the elevation you are _on_, not choosing one that will show up the elevation you are on. This change will be in a separate PR, as it likely will have widespread visual impact across the app. Release Notes: - N/A --- .../assistant/src/assistant_configuration.rs | 4 +- .../assistant2/src/assistant_configuration.rs | 6 +- .../src/context_editor.rs | 10 ++-- crates/editor/src/editor.rs | 6 +- crates/git_ui/src/git_panel.rs | 9 ++- crates/git_ui/src/git_ui.rs | 12 ++-- crates/panel/src/panel.rs | 4 +- .../src/disconnected_overlay.rs | 6 +- crates/repl/src/repl_sessions_ui.rs | 4 +- crates/ui/src/components/button/button.rs | 8 +-- .../ui/src/components/button/button_like.rs | 34 ++++------- .../ui/src/components/button/icon_button.rs | 38 ++++++------- .../ui/src/components/button/toggle_button.rs | 30 +++++----- crates/ui/src/components/toggle.rs | 10 ++-- crates/ui/src/styles/color.rs | 6 -- crates/ui/src/styles/elevation.rs | 56 +++++++++---------- crates/ui/src/traits/styled_ext.rs | 24 ++++---- crates/welcome/src/welcome.rs | 8 +-- crates/workspace/src/theme_preview.rs | 18 +++--- crates/zed/src/zed/linux_prompts.rs | 7 +-- 20 files changed, 139 insertions(+), 161 deletions(-) diff --git a/crates/assistant/src/assistant_configuration.rs b/crates/assistant/src/assistant_configuration.rs index 711f4d98b898f4471b0a42f0f70fd5591488f8c2..6af5bcc1691b61ea1f572191405f88245ff4a691 100644 --- a/crates/assistant/src/assistant_configuration.rs +++ b/crates/assistant/src/assistant_configuration.rs @@ -3,7 +3,7 @@ use std::sync::Arc; use collections::HashMap; use gpui::{canvas, AnyView, App, EventEmitter, FocusHandle, Focusable, Subscription}; use language_model::{LanguageModelProvider, LanguageModelProviderId, LanguageModelRegistry}; -use ui::{prelude::*, ElevationIndex}; +use ui::{prelude::*, Elevation}; use workspace::Item; pub struct ConfigurationView { @@ -98,7 +98,7 @@ impl ConfigurationView { .icon_position(IconPosition::Start) .icon(IconName::Plus) .style(ButtonStyle::Filled) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .on_click(open_new_context), ), ) diff --git a/crates/assistant2/src/assistant_configuration.rs b/crates/assistant2/src/assistant_configuration.rs index 8e906ad66d16190a2d05ad15e7ac66947b766916..77741661e1c6671c67a6c76ca740c58ff99bf45c 100644 --- a/crates/assistant2/src/assistant_configuration.rs +++ b/crates/assistant2/src/assistant_configuration.rs @@ -3,7 +3,7 @@ use std::sync::Arc; use collections::HashMap; use gpui::{Action, AnyView, App, EventEmitter, FocusHandle, Focusable, Subscription}; use language_model::{LanguageModelProvider, LanguageModelProviderId, LanguageModelRegistry}; -use ui::{prelude::*, Divider, DividerColor, ElevationIndex}; +use ui::{prelude::*, Divider, DividerColor, Elevation}; use zed_actions::assistant::DeployPromptLibrary; pub struct AssistantConfiguration { @@ -115,7 +115,7 @@ impl AssistantConfiguration { .icon(IconName::Plus) .icon_size(IconSize::Small) .style(ButtonStyle::Filled) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .label_size(LabelSize::Small) .on_click(cx.listener({ let provider = provider.clone(); @@ -171,7 +171,7 @@ impl Render for AssistantConfiguration { .child( Button::new("open-prompt-library", "Open Prompt Library") .style(ButtonStyle::Filled) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .full_width() .icon(IconName::Book) .icon_size(IconSize::Small) diff --git a/crates/assistant_context_editor/src/context_editor.rs b/crates/assistant_context_editor/src/context_editor.rs index 72b4467015f1aacbcd1e47b4977d734b4af6589d..27dba066dcbcfcf3fb4d8f363cd0937ea0bd46ce 100644 --- a/crates/assistant_context_editor/src/context_editor.rs +++ b/crates/assistant_context_editor/src/context_editor.rs @@ -50,7 +50,7 @@ use settings::{update_settings_file, Settings, SettingsStore}; use std::{any::TypeId, borrow::Cow, cmp, ops::Range, path::PathBuf, sync::Arc, time::Duration}; use text::SelectionGoal; use ui::{ - prelude::*, ButtonLike, Disclosure, ElevationIndex, KeyBinding, PopoverMenuHandle, TintColor, + prelude::*, ButtonLike, Disclosure, Elevation, KeyBinding, PopoverMenuHandle, TintColor, Tooltip, }; use util::{maybe, ResultExt}; @@ -2298,7 +2298,7 @@ impl ContextEditor { .when_some(tooltip, |button, tooltip| { button.tooltip(move |_, _| tooltip.clone()) }) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .child(Label::new( if AssistantSettings::get_global(cx).are_live_diffs_enabled(cx) { "Chat" @@ -2357,7 +2357,7 @@ impl ContextEditor { .when_some(tooltip, |button, tooltip| { button.tooltip(move |_, _| tooltip.clone()) }) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .child(Label::new("Suggest Edits")) .children( KeyBinding::for_action_in(&Edit, &focus_handle, window, cx) @@ -2661,7 +2661,7 @@ fn render_fold_icon_button( let editor = editor.clone(); ButtonLike::new(fold_id) .style(ButtonStyle::Filled) - .layer(ElevationIndex::ElevatedSurface) + .elevation(Elevation::ElevatedSurface) .child(Icon::new(icon)) .child(Label::new(label.clone()).single_line()) .on_click(move |_, window, cx| { @@ -2721,7 +2721,7 @@ fn quote_selection_fold_placeholder(title: String, editor: WeakEntity) - let editor = editor.clone(); ButtonLike::new(fold_id) .style(ButtonStyle::Filled) - .layer(ElevationIndex::ElevatedSurface) + .elevation(Elevation::ElevatedSurface) .child(Icon::new(IconName::TextSnippet)) .child(Label::new(title.clone()).single_line()) .on_click(move |_, window, cx| { diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs index 0e767404cb1c464668b3141debd5aee104d701b5..1604330ea10d67c6899a5814d968765bf83e8d35 100644 --- a/crates/editor/src/editor.rs +++ b/crates/editor/src/editor.rs @@ -6664,16 +6664,14 @@ impl Editor { .child( Label::new(label) .size(LabelSize::Small) - .when(!has_keybind, |el| { - el.color(cx.theme().status().error.into()).strikethrough() - }), + .when(!has_keybind, |el| el.color(Color::Error).strikethrough()), ) .when(!has_keybind, |el| { el.child( h_flex().ml_1().child( Icon::new(IconName::Info) .size(IconSize::Small) - .color(cx.theme().status().error.into()), + .color(Color::Error), ), ) }) diff --git a/crates/git_ui/src/git_panel.rs b/crates/git_ui/src/git_panel.rs index f42b085480c404ed057bb863329e1a20f5e37692..ebd55b9dffd94e4705311af010334ea21cabb9af 100644 --- a/crates/git_ui/src/git_panel.rs +++ b/crates/git_ui/src/git_panel.rs @@ -59,8 +59,7 @@ use std::{collections::HashSet, sync::Arc, time::Duration, usize}; use strum::{IntoEnumIterator, VariantNames}; use time::OffsetDateTime; use ui::{ - prelude::*, Checkbox, ContextMenu, ElevationIndex, PopoverMenu, Scrollbar, ScrollbarState, - Tooltip, + prelude::*, Checkbox, ContextMenu, Elevation, PopoverMenu, Scrollbar, ScrollbarState, Tooltip, }; use util::{maybe, post_inc, ResultExt, TryFutureExt}; use workspace::{AppState, OpenOptions, OpenVisible}; @@ -3190,7 +3189,7 @@ impl GitPanel { let checkbox = Checkbox::new("stage-file", entry_staging.as_bool().into()) .disabled(!self.has_write_access(cx)) .fill() - .elevation(ElevationIndex::Surface) + .elevation(Elevation::Surface) .on_click({ let entry = entry.clone(); let git_panel = entity.downgrade(); @@ -3639,7 +3638,7 @@ impl GitPanel { && !self.has_conflicts() && !entry.status.is_created(), ) - .elevation(ElevationIndex::Surface) + .elevation(Elevation::Surface) .on_click({ let entry = entry.clone(); cx.listener(move |this, _, window, cx| { @@ -3782,7 +3781,7 @@ impl Render for GitPanel { })) .size_full() .overflow_hidden() - .bg(ElevationIndex::Surface.bg(cx)) + .bg(Elevation::Surface.bg(cx)) .child( v_flex() .size_full() diff --git a/crates/git_ui/src/git_ui.rs b/crates/git_ui/src/git_ui.rs index 27499edeea7fb789774cef14d239353b0c301ce1..0262008993b0c78c31420a2cbefafaa5a39dd492 100644 --- a/crates/git_ui/src/git_ui.rs +++ b/crates/git_ui/src/git_ui.rs @@ -168,9 +168,9 @@ mod remote_button { use gpui::{hsla, point, Action, AnyView, BoxShadow, ClickEvent, Corner, FocusHandle}; use ui::{ div, h_flex, px, rems, ActiveTheme, AnyElement, App, ButtonCommon, ButtonLike, Clickable, - ContextMenu, ElementId, ElevationIndex, FluentBuilder, Icon, IconName, IconSize, - IntoElement, Label, LabelCommon, LabelSize, LineHeightStyle, ParentElement, PopoverMenu, - RenderOnce, SharedString, Styled, Tooltip, Window, + ContextMenu, ElementId, Elevation, FluentBuilder, Icon, IconName, IconSize, IntoElement, + Label, LabelCommon, LabelSize, LineHeightStyle, ParentElement, PopoverMenu, RenderOnce, + SharedString, Styled, Tooltip, Window, }; pub fn render_fetch_button( @@ -343,7 +343,7 @@ mod remote_button { PopoverMenu::new(id.into()) .trigger( ui::ButtonLike::new_rounded_right("split-button-right") - .layer(ui::ElevationIndex::ModalSurface) + .elevation(ui::Elevation::ModalSurface) .size(ui::ButtonSize::None) .child( div() @@ -406,7 +406,7 @@ mod remote_button { let left = ui::ButtonLike::new_rounded_left(ElementId::Name( format!("split-button-left-{}", id).into(), )) - .layer(ui::ElevationIndex::ModalSurface) + .elevation(ui::Elevation::ModalSurface) .size(ui::ButtonSize::Compact) .when(should_render_counts, |this| { this.child( @@ -463,7 +463,7 @@ mod remote_button { .bg(cx.theme().colors().text_muted.alpha(0.16)), ) .child(self.right) - .bg(ElevationIndex::Surface.on_elevation_bg(cx)) + .bg(Elevation::Surface.on_elevation_bg(cx)) .shadow(smallvec::smallvec![BoxShadow { color: hsla(0.0, 0.0, 0.0, 0.16), offset: point(px(0.), px(1.)), diff --git a/crates/panel/src/panel.rs b/crates/panel/src/panel.rs index b1c55777c7e0f114c76f693deb9da109550c058b..0c6153b9e6075a5b268467d59b8372faf88e2457 100644 --- a/crates/panel/src/panel.rs +++ b/crates/panel/src/panel.rs @@ -49,7 +49,7 @@ pub fn panel_button(label: impl Into) -> ui::Button { .label_size(ui::LabelSize::Small) .icon_size(ui::IconSize::Small) // TODO: Change this once we use on_surface_bg in button_like - .layer(ui::ElevationIndex::ModalSurface) + .elevation(ui::Elevation::ModalSurface) .size(ui::ButtonSize::Compact) } @@ -61,7 +61,7 @@ pub fn panel_icon_button(id: impl Into, icon: IconName) -> ui::Ico let id = ElementId::Name(id.into()); ui::IconButton::new(id, icon) // TODO: Change this once we use on_surface_bg in button_like - .layer(ui::ElevationIndex::ModalSurface) + .elevation(ui::Elevation::ModalSurface) .size(ui::ButtonSize::Compact) } diff --git a/crates/recent_projects/src/disconnected_overlay.rs b/crates/recent_projects/src/disconnected_overlay.rs index ecc303fc193ac078b22ae88ea35bb75daa1a538e..cd60971304ce9cf411df2616272aa47046cec110 100644 --- a/crates/recent_projects/src/disconnected_overlay.rs +++ b/crates/recent_projects/src/disconnected_overlay.rs @@ -5,7 +5,7 @@ use project::project_settings::ProjectSettings; use remote::SshConnectionOptions; use settings::Settings; use ui::{ - div, h_flex, rems, Button, ButtonCommon, ButtonStyle, Clickable, Context, ElevationIndex, + div, h_flex, rems, Button, ButtonCommon, ButtonStyle, Clickable, Context, Elevation, FluentBuilder, Headline, HeadlineSize, IconName, IconPosition, InteractiveElement, IntoElement, Label, Modal, ModalFooter, ModalHeader, ParentElement, Section, Styled, StyledExt, Window, }; @@ -187,7 +187,7 @@ impl Render for DisconnectedOverlay { .child( Button::new("close-window", "Close Window") .style(ButtonStyle::Filled) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .on_click(cx.listener(move |_, _, window, _| { window.remove_window(); })), @@ -196,7 +196,7 @@ impl Render for DisconnectedOverlay { el.child( Button::new("reconnect", "Reconnect") .style(ButtonStyle::Filled) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .icon(IconName::ArrowCircle) .icon_position(IconPosition::Start) .on_click(cx.listener(Self::handle_reconnect)), diff --git a/crates/repl/src/repl_sessions_ui.rs b/crates/repl/src/repl_sessions_ui.rs index 3655ed01363ab6529d63c690fc1f27f8f8de7089..cb5454b98f3e4666d9ac9dafc1fa86dd11eca9bb 100644 --- a/crates/repl/src/repl_sessions_ui.rs +++ b/crates/repl/src/repl_sessions_ui.rs @@ -4,7 +4,7 @@ use gpui::{ Subscription, }; use project::ProjectItem as _; -use ui::{prelude::*, ButtonLike, ElevationIndex, KeyBinding}; +use ui::{prelude::*, ButtonLike, Elevation, KeyBinding}; use util::ResultExt as _; use workspace::item::ItemEvent; use workspace::WorkspaceId; @@ -231,7 +231,7 @@ impl Render for ReplSessionsPage { ButtonLike::new("install-kernels") .style(ButtonStyle::Filled) .size(ButtonSize::Large) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .child(Label::new("Install Kernels")) .on_click(move |_, _, cx| { cx.open_url( diff --git a/crates/ui/src/components/button/button.rs b/crates/ui/src/components/button/button.rs index 7317d05f734f85bba6c85a4a6fbb0b582c5895c2..e80a17de836d2a36f20e319c3361bb655c0f8aef 100644 --- a/crates/ui/src/components/button/button.rs +++ b/crates/ui/src/components/button/button.rs @@ -3,8 +3,8 @@ use gpui::{AnyElement, AnyView, DefiniteLength}; use ui_macros::IntoComponent; use crate::{ - prelude::*, Color, DynamicSpacing, ElevationIndex, IconPosition, KeyBinding, - KeybindingPosition, TintColor, + prelude::*, Color, DynamicSpacing, Elevation, IconPosition, KeyBinding, KeybindingPosition, + TintColor, }; use crate::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, IconName, IconSize, Label}; @@ -394,8 +394,8 @@ impl ButtonCommon for Button { self } - fn layer(mut self, elevation: ElevationIndex) -> Self { - self.base = self.base.layer(elevation); + fn elevation(mut self, elevation: Elevation) -> Self { + self.base = self.base.elevation(elevation); self } } diff --git a/crates/ui/src/components/button/button_like.rs b/crates/ui/src/components/button/button_like.rs index bb7ed025e12c75adf6a8e0967837cdc9845c442f..9da7646808ddf4fd0c336391af8ec30bbe02baf7 100644 --- a/crates/ui/src/components/button/button_like.rs +++ b/crates/ui/src/components/button/button_like.rs @@ -2,7 +2,7 @@ use gpui::{relative, CursorStyle, DefiniteLength, MouseButton}; use gpui::{transparent_black, AnyElement, AnyView, ClickEvent, Hsla, Rems}; use smallvec::SmallVec; -use crate::{prelude::*, DynamicSpacing, ElevationIndex}; +use crate::{prelude::*, DynamicSpacing, Elevation}; /// A trait for buttons that can be Selected. Enables setting the [`ButtonStyle`] of a button when it is selected. pub trait SelectableButton: Toggleable { @@ -34,7 +34,7 @@ pub trait ButtonCommon: Clickable + Disableable { /// exceptions might a scroll bar, or a slider. fn tooltip(self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self; - fn layer(self, elevation: ElevationIndex) -> Self; + fn elevation(self, elevation: Elevation) -> Self; } #[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)] @@ -152,23 +152,18 @@ pub(crate) struct ButtonLikeStyles { pub icon_color: Hsla, } -fn element_bg_from_elevation(elevation: Option, cx: &mut App) -> Hsla { +fn element_bg_from_elevation(elevation: Option, cx: &mut App) -> Hsla { match elevation { - Some(ElevationIndex::Background) => cx.theme().colors().element_background, - Some(ElevationIndex::ElevatedSurface) => cx.theme().colors().elevated_surface_background, - Some(ElevationIndex::Surface) => cx.theme().colors().surface_background, - Some(ElevationIndex::ModalSurface) => cx.theme().colors().background, + Some(Elevation::Background) => cx.theme().colors().element_background, + Some(Elevation::ElevatedSurface) => cx.theme().colors().elevated_surface_background, + Some(Elevation::Surface) => cx.theme().colors().surface_background, + Some(Elevation::ModalSurface) => cx.theme().colors().background, _ => cx.theme().colors().element_background, } } impl ButtonStyle { - pub(crate) fn enabled( - self, - elevation: Option, - - cx: &mut App, - ) -> ButtonLikeStyles { + pub(crate) fn enabled(self, elevation: Option, cx: &mut App) -> ButtonLikeStyles { match self { ButtonStyle::Filled => ButtonLikeStyles { background: element_bg_from_elevation(elevation, cx), @@ -192,12 +187,7 @@ impl ButtonStyle { } } - pub(crate) fn hovered( - self, - elevation: Option, - - cx: &mut App, - ) -> ButtonLikeStyles { + pub(crate) fn hovered(self, elevation: Option, cx: &mut App) -> ButtonLikeStyles { match self { ButtonStyle::Filled => { let mut filled_background = element_bg_from_elevation(elevation, cx); @@ -287,7 +277,7 @@ impl ButtonStyle { #[allow(unused)] pub(crate) fn disabled( self, - elevation: Option, + elevation: Option, window: &mut Window, cx: &mut App, ) -> ButtonLikeStyles { @@ -353,7 +343,7 @@ pub struct ButtonLike { pub(super) selected_style: Option, pub(super) width: Option, pub(super) height: Option, - pub(super) layer: Option, + pub(super) layer: Option, size: ButtonSize, rounding: Option, tooltip: Option AnyView>>, @@ -472,7 +462,7 @@ impl ButtonCommon for ButtonLike { self } - fn layer(mut self, elevation: ElevationIndex) -> Self { + fn elevation(mut self, elevation: Elevation) -> Self { self.layer = Some(elevation); self } diff --git a/crates/ui/src/components/button/icon_button.rs b/crates/ui/src/components/button/icon_button.rs index 8adda25042b4e2e11da7de057360ed7daa777e45..75fde0d8e64285a03d0940d06b4f4e32e497a1d2 100644 --- a/crates/ui/src/components/button/icon_button.rs +++ b/crates/ui/src/components/button/icon_button.rs @@ -1,7 +1,7 @@ use gpui::{AnyView, DefiniteLength, Hsla}; use super::button_like::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle}; -use crate::{prelude::*, ElevationIndex, Indicator, SelectableButton, TintColor}; +use crate::{prelude::*, Elevation, Indicator, SelectableButton, TintColor}; use crate::{IconName, IconSize}; use super::button_icon::ButtonIcon; @@ -156,8 +156,8 @@ impl ButtonCommon for IconButton { self } - fn layer(mut self, elevation: ElevationIndex) -> Self { - self.base = self.base.layer(elevation); + fn elevation(mut self, elevation: Elevation) -> Self { + self.base = self.base.elevation(elevation); self } } @@ -212,34 +212,34 @@ impl ComponentPreview for IconButton { single_example( "Default", IconButton::new("default", IconName::Check) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), single_example( "Filled", IconButton::new("filled", IconName::Check) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .into_any_element(), ), single_example( "Subtle", IconButton::new("subtle", IconName::Check) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Subtle) .into_any_element(), ), single_example( "Tinted", IconButton::new("tinted", IconName::Check) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Tinted(TintColor::Accent)) .into_any_element(), ), single_example( "Transparent", IconButton::new("transparent", IconName::Check) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Transparent) .into_any_element(), ), @@ -253,7 +253,7 @@ impl ComponentPreview for IconButton { IconButton::new("square", IconName::Check) .shape(IconButtonShape::Square) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), single_example( @@ -261,7 +261,7 @@ impl ComponentPreview for IconButton { IconButton::new("wide", IconName::Check) .shape(IconButtonShape::Wide) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), ], @@ -274,7 +274,7 @@ impl ComponentPreview for IconButton { IconButton::new("small", IconName::Check) .icon_size(IconSize::XSmall) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), single_example( @@ -282,7 +282,7 @@ impl ComponentPreview for IconButton { IconButton::new("small", IconName::Check) .icon_size(IconSize::Small) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), single_example( @@ -290,7 +290,7 @@ impl ComponentPreview for IconButton { IconButton::new("medium", IconName::Check) .icon_size(IconSize::Medium) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), single_example( @@ -298,7 +298,7 @@ impl ComponentPreview for IconButton { IconButton::new("xlarge", IconName::Check) .icon_size(IconSize::XLarge) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), ], @@ -311,7 +311,7 @@ impl ComponentPreview for IconButton { IconButton::new("disabled", IconName::Check) .disabled(true) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), single_example( @@ -319,7 +319,7 @@ impl ComponentPreview for IconButton { IconButton::new("selected", IconName::Check) .toggle_state(true) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), single_example( @@ -327,7 +327,7 @@ impl ComponentPreview for IconButton { IconButton::new("indicator", IconName::Check) .indicator(Indicator::dot().color(Color::Success)) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), ], @@ -340,7 +340,7 @@ impl ComponentPreview for IconButton { IconButton::new("custom_color", IconName::Check) .icon_color(Color::Accent) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), single_example( @@ -348,7 +348,7 @@ impl ComponentPreview for IconButton { IconButton::new("alpha", IconName::Check) .alpha(0.5) .style(ButtonStyle::Filled) - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .into_any_element(), ), ], diff --git a/crates/ui/src/components/button/toggle_button.rs b/crates/ui/src/components/button/toggle_button.rs index 7e114b989cc68e3e5f7e5c2a2cfa4ce75319ddf6..676f279f10de2946c421449473bf8ad73432d0b6 100644 --- a/crates/ui/src/components/button/toggle_button.rs +++ b/crates/ui/src/components/button/toggle_button.rs @@ -1,6 +1,6 @@ use gpui::{AnyView, ClickEvent}; -use crate::{prelude::*, ButtonLike, ButtonLikeRounding, ElevationIndex}; +use crate::{prelude::*, ButtonLike, ButtonLikeRounding, Elevation}; /// The position of a [`ToggleButton`] within a group of buttons. #[derive(Debug, PartialEq, Eq, Clone, Copy)] @@ -110,8 +110,8 @@ impl ButtonCommon for ToggleButton { self } - fn layer(mut self, elevation: ElevationIndex) -> Self { - self.base = self.base.layer(elevation); + fn elevation(mut self, elevation: Elevation) -> Self { + self.base = self.base.elevation(elevation); self } } @@ -154,14 +154,14 @@ impl ComponentPreview for ToggleButton { single_example( "Off", ToggleButton::new("off", "Off") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .into_any_element(), ), single_example( "On", ToggleButton::new("on", "On") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .toggle_state(true) .style(ButtonStyle::Filled) .into_any_element(), @@ -169,7 +169,7 @@ impl ComponentPreview for ToggleButton { single_example( "Off – Disabled", ToggleButton::new("disabled_off", "Disabled Off") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .disabled(true) .style(ButtonStyle::Filled) .into_any_element(), @@ -177,7 +177,7 @@ impl ComponentPreview for ToggleButton { single_example( "On – Disabled", ToggleButton::new("disabled_on", "Disabled On") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .disabled(true) .toggle_state(true) .style(ButtonStyle::Filled) @@ -193,14 +193,14 @@ impl ComponentPreview for ToggleButton { h_flex() .child( ToggleButton::new("three_btn_first", "First") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .first() .into_any_element(), ) .child( ToggleButton::new("three_btn_middle", "Middle") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .middle() .toggle_state(true) @@ -208,7 +208,7 @@ impl ComponentPreview for ToggleButton { ) .child( ToggleButton::new("three_btn_last", "Last") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .last() .into_any_element(), @@ -220,14 +220,14 @@ impl ComponentPreview for ToggleButton { h_flex() .child( ToggleButton::new("two_btn_first", "First") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .first() .into_any_element(), ) .child( ToggleButton::new("two_btn_last", "Last") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .last() .into_any_element(), @@ -242,7 +242,7 @@ impl ComponentPreview for ToggleButton { single_example( "None", ToggleButton::new("none", "None") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .size(ButtonSize::None) .into_any_element(), @@ -250,7 +250,7 @@ impl ComponentPreview for ToggleButton { single_example( "Compact", ToggleButton::new("compact", "Compact") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .size(ButtonSize::Compact) .into_any_element(), @@ -258,7 +258,7 @@ impl ComponentPreview for ToggleButton { single_example( "Large", ToggleButton::new("large", "Large") - .layer(ElevationIndex::Background) + .elevation(Elevation::Background) .style(ButtonStyle::Filled) .size(ButtonSize::Large) .into_any_element(), diff --git a/crates/ui/src/components/toggle.rs b/crates/ui/src/components/toggle.rs index 666bff99fec55427cfaef948402dcd5e7d8dbd95..747ac8e122bb44917c5693a3cb09e22f242fff34 100644 --- a/crates/ui/src/components/toggle.rs +++ b/crates/ui/src/components/toggle.rs @@ -4,7 +4,7 @@ use gpui::{ use std::sync::Arc; use crate::utils::is_light; -use crate::{prelude::*, ElevationIndex, KeyBinding}; +use crate::{prelude::*, Elevation, KeyBinding}; use crate::{Color, Icon, IconName, ToggleState}; // TODO: Checkbox, CheckboxWithLabel, and Switch could all be @@ -28,7 +28,7 @@ pub enum ToggleStyle { Ghost, /// Toggle has a filled background based on the /// elevation index of the parent container - ElevationBased(ElevationIndex), + ElevationBased(Elevation), /// A custom style using a color to tint the toggle Custom(Hsla), } @@ -102,7 +102,7 @@ impl Checkbox { } /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`]. - pub fn elevation(mut self, elevation: ElevationIndex) -> Self { + pub fn elevation(mut self, elevation: Elevation) -> Self { self.style = ToggleStyle::ElevationBased(elevation); self } @@ -281,7 +281,7 @@ impl CheckboxWithLabel { } /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`]. - pub fn elevation(mut self, elevation: ElevationIndex) -> Self { + pub fn elevation(mut self, elevation: Elevation) -> Self { self.style = ToggleStyle::ElevationBased(elevation); self } @@ -562,7 +562,7 @@ impl ComponentPreview for Checkbox { single_example( "ElevationBased", Checkbox::new("checkbox_elevation", ToggleState::Selected) - .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)) + .style(ToggleStyle::ElevationBased(Elevation::EditorSurface)) .into_any_element(), ), single_example( diff --git a/crates/ui/src/styles/color.rs b/crates/ui/src/styles/color.rs index 0d234ad50d9bcd6f1a39f1f052d8a361479664f7..a8cf1d51e50adf8d9733fb77ace01791300e6903 100644 --- a/crates/ui/src/styles/color.rs +++ b/crates/ui/src/styles/color.rs @@ -86,9 +86,3 @@ impl Color { } } } - -impl From for Color { - fn from(color: Hsla) -> Self { - Color::Custom(color) - } -} diff --git a/crates/ui/src/styles/elevation.rs b/crates/ui/src/styles/elevation.rs index aea91c8d5fd749ac8e112890efff318a3c0a179c..8e5b2a1a65de4fea6ebcf247a16f4b3c29c43f15 100644 --- a/crates/ui/src/styles/elevation.rs +++ b/crates/ui/src/styles/elevation.rs @@ -12,7 +12,7 @@ use theme::{ActiveTheme, Appearance}; /// /// In the future, a more complete approach to elevation may be added. #[derive(Debug, Clone, Copy, PartialEq, Eq)] -pub enum ElevationIndex { +pub enum Elevation { /// On the layer of the app background. This is under panels, panes, and /// other surfaces. Background, @@ -22,32 +22,32 @@ pub enum ElevationIndex { EditorSurface, /// A surface that is elevated above the primary surface. but below washes, models, and dragged elements. ElevatedSurface, - /// A surface above the [ElevationIndex::ElevatedSurface] that is used for dialogs, alerts, modals, etc. + /// A surface above the [Elevation::ElevatedSurface] that is used for dialogs, alerts, modals, etc. ModalSurface, } -impl Display for ElevationIndex { +impl Display for Elevation { fn fmt(&self, f: &mut Formatter) -> fmt::Result { match self { - ElevationIndex::Background => write!(f, "Background"), - ElevationIndex::Surface => write!(f, "Surface"), - ElevationIndex::EditorSurface => write!(f, "Editor Surface"), - ElevationIndex::ElevatedSurface => write!(f, "Elevated Surface"), - ElevationIndex::ModalSurface => write!(f, "Modal Surface"), + Elevation::Background => write!(f, "Background"), + Elevation::Surface => write!(f, "Surface"), + Elevation::EditorSurface => write!(f, "Editor Surface"), + Elevation::ElevatedSurface => write!(f, "Elevated Surface"), + Elevation::ModalSurface => write!(f, "Modal Surface"), } } } -impl ElevationIndex { +impl Elevation { /// Returns an appropriate shadow for the given elevation index. pub fn shadow(self, cx: &App) -> SmallVec<[BoxShadow; 2]> { let is_light = cx.theme().appearance() == Appearance::Light; match self { - ElevationIndex::Surface => smallvec![], - ElevationIndex::EditorSurface => smallvec![], + Elevation::Surface => smallvec![], + Elevation::EditorSurface => smallvec![], - ElevationIndex::ElevatedSurface => smallvec![ + Elevation::ElevatedSurface => smallvec![ BoxShadow { color: hsla(0., 0., 0., 0.12), offset: point(px(0.), px(2.)), @@ -62,7 +62,7 @@ impl ElevationIndex { } ], - ElevationIndex::ModalSurface => smallvec![ + Elevation::ModalSurface => smallvec![ BoxShadow { color: hsla(0., 0., 0., if is_light { 0.06 } else { 0.12 }), offset: point(px(0.), px(2.)), @@ -96,22 +96,22 @@ impl ElevationIndex { /// Returns the background color for the given elevation index. pub fn bg(&self, cx: &mut App) -> Hsla { match self { - ElevationIndex::Background => cx.theme().colors().background, - ElevationIndex::Surface => cx.theme().colors().surface_background, - ElevationIndex::EditorSurface => cx.theme().colors().editor_background, - ElevationIndex::ElevatedSurface => cx.theme().colors().elevated_surface_background, - ElevationIndex::ModalSurface => cx.theme().colors().elevated_surface_background, + Elevation::Background => cx.theme().colors().background, + Elevation::Surface => cx.theme().colors().surface_background, + Elevation::EditorSurface => cx.theme().colors().editor_background, + Elevation::ElevatedSurface => cx.theme().colors().elevated_surface_background, + Elevation::ModalSurface => cx.theme().colors().elevated_surface_background, } } /// Returns a color that is appropriate a filled element on this elevation pub fn on_elevation_bg(&self, cx: &App) -> Hsla { match self { - ElevationIndex::Background => cx.theme().colors().surface_background, - ElevationIndex::Surface => cx.theme().colors().background, - ElevationIndex::EditorSurface => cx.theme().colors().surface_background, - ElevationIndex::ElevatedSurface => cx.theme().colors().background, - ElevationIndex::ModalSurface => cx.theme().colors().background, + Elevation::Background => cx.theme().colors().surface_background, + Elevation::Surface => cx.theme().colors().background, + Elevation::EditorSurface => cx.theme().colors().surface_background, + Elevation::ElevatedSurface => cx.theme().colors().background, + Elevation::ModalSurface => cx.theme().colors().background, } } @@ -120,11 +120,11 @@ impl ElevationIndex { /// If the current background color is already dark, it will return a lighter color instead. pub fn darker_bg(&self, cx: &App) -> Hsla { match self { - ElevationIndex::Background => cx.theme().colors().surface_background, - ElevationIndex::Surface => cx.theme().colors().editor_background, - ElevationIndex::EditorSurface => cx.theme().colors().surface_background, - ElevationIndex::ElevatedSurface => cx.theme().colors().editor_background, - ElevationIndex::ModalSurface => cx.theme().colors().editor_background, + Elevation::Background => cx.theme().colors().surface_background, + Elevation::Surface => cx.theme().colors().editor_background, + Elevation::EditorSurface => cx.theme().colors().surface_background, + Elevation::ElevatedSurface => cx.theme().colors().editor_background, + Elevation::ModalSurface => cx.theme().colors().editor_background, } } } diff --git a/crates/ui/src/traits/styled_ext.rs b/crates/ui/src/traits/styled_ext.rs index 76da92d0046bf0dded64540ae4440f541bb0f3c2..3e6fa0de14bff13d602acf49c96392eb2b3ecf51 100644 --- a/crates/ui/src/traits/styled_ext.rs +++ b/crates/ui/src/traits/styled_ext.rs @@ -1,9 +1,9 @@ use gpui::{hsla, App, Styled}; use crate::prelude::*; -use crate::ElevationIndex; +use crate::Elevation; -fn elevated(this: E, cx: &App, index: ElevationIndex) -> E { +fn elevated(this: E, cx: &App, index: Elevation) -> E { this.bg(cx.theme().colors().elevated_surface_background) .rounded_lg() .border_1() @@ -11,7 +11,7 @@ fn elevated(this: E, cx: &App, index: ElevationIndex) -> E { .shadow(index.shadow(cx)) } -fn elevated_borderless(this: E, cx: &mut App, index: ElevationIndex) -> E { +fn elevated_borderless(this: E, cx: &mut App, index: Elevation) -> E { this.bg(cx.theme().colors().elevated_surface_background) .rounded_lg() .shadow(index.shadow(cx)) @@ -33,56 +33,56 @@ pub trait StyledExt: Styled + Sized { self.flex().flex_col() } - /// The [`Surface`](ElevationIndex::Surface) elevation level, located above the app background, is the standard level for all elements + /// The [`Surface`](Elevation::Surface) elevation level, located above the app background, is the standard level for all elements /// /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()` /// /// Example Elements: Title Bar, Panel, Tab Bar, Editor fn elevation_1(self, cx: &mut App) -> Self { - elevated(self, cx, ElevationIndex::Surface) + elevated(self, cx, Elevation::Surface) } /// See [`elevation_1`](Self::elevation_1). /// /// Renders a borderless version [`elevation_1`](Self::elevation_1). fn elevation_1_borderless(self, cx: &mut App) -> Self { - elevated_borderless(self, cx, ElevationIndex::Surface) + elevated_borderless(self, cx, Elevation::Surface) } - /// Non-Modal Elevated Surfaces appear above the [`Surface`](ElevationIndex::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. + /// Non-Modal Elevated Surfaces appear above the [`Surface`](Elevation::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. /// /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()` /// /// Examples: Notifications, Palettes, Detached/Floating Windows, Detached/Floating Panels fn elevation_2(self, cx: &App) -> Self { - elevated(self, cx, ElevationIndex::ElevatedSurface) + elevated(self, cx, Elevation::ElevatedSurface) } /// See [`elevation_2`](Self::elevation_2). /// /// Renders a borderless version [`elevation_2`](Self::elevation_2). fn elevation_2_borderless(self, cx: &mut App) -> Self { - elevated_borderless(self, cx, ElevationIndex::ElevatedSurface) + elevated_borderless(self, cx, Elevation::ElevatedSurface) } /// 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. /// - /// If the element does not have this behavior, it should be rendered at the [`Elevated Surface`](ElevationIndex::ElevatedSurface) layer. + /// If the element does not have this behavior, it should be rendered at the [`Elevated Surface`](Elevation::ElevatedSurface) layer. /// /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()` /// /// Examples: Settings Modal, Channel Management, Wizards/Setup UI, Dialogs fn elevation_3(self, cx: &mut App) -> Self { - elevated(self, cx, ElevationIndex::ModalSurface) + elevated(self, cx, Elevation::ModalSurface) } /// See [`elevation_3`](Self::elevation_3). /// /// Renders a borderless version [`elevation_3`](Self::elevation_3). fn elevation_3_borderless(self, cx: &mut App) -> Self { - elevated_borderless(self, cx, ElevationIndex::ModalSurface) + elevated_borderless(self, cx, Elevation::ModalSurface) } /// The theme's primary border color. diff --git a/crates/welcome/src/welcome.rs b/crates/welcome/src/welcome.rs index c95dccb2f7820f3b55d81e121051394654d3c912..d02b7bc1bd9a5cf7d7d0e2b89245a4d8d9979430 100644 --- a/crates/welcome/src/welcome.rs +++ b/crates/welcome/src/welcome.rs @@ -11,7 +11,7 @@ use gpui::{ use language::language_settings::{all_language_settings, EditPredictionProvider}; use settings::{Settings, SettingsStore}; use std::sync::Arc; -use ui::{prelude::*, CheckboxWithLabel, ElevationIndex, Tooltip}; +use ui::{prelude::*, CheckboxWithLabel, Elevation, Tooltip}; use vim_mode_setting::VimModeSetting; use workspace::{ dock::DockPosition, @@ -289,7 +289,7 @@ impl Render for WelcomePage { }), ) .fill() - .elevation(ElevationIndex::ElevatedSurface), + .elevation(Elevation::ElevatedSurface), ) .child( IconButton::new("vim-mode", IconName::Info) @@ -325,7 +325,7 @@ impl Render for WelcomePage { }), ) .fill() - .elevation(ElevationIndex::ElevatedSurface), + .elevation(Elevation::ElevatedSurface), ) .child( CheckboxWithLabel::new( @@ -351,7 +351,7 @@ impl Render for WelcomePage { }), ) .fill() - .elevation(ElevationIndex::ElevatedSurface), + .elevation(Elevation::ElevatedSurface), ), ), ) diff --git a/crates/workspace/src/theme_preview.rs b/crates/workspace/src/theme_preview.rs index d3a6e7f90d055eeb1ffc8c09f19cbc3ada2a7bf4..5a150943f36bdbefec375730182f8083a78459e7 100644 --- a/crates/workspace/src/theme_preview.rs +++ b/crates/workspace/src/theme_preview.rs @@ -5,8 +5,8 @@ use theme::all_theme_colors; use ui::{ element_cell, prelude::*, string_cell, utils::calculate_contrast_ratio, AudioStatus, Avatar, AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike, Checkbox, - CheckboxWithLabel, CollaboratorAvailability, ContentGroup, DecoratedIcon, ElevationIndex, - Facepile, IconDecoration, Indicator, KeybindingHint, Switch, Table, TintColor, Tooltip, + CheckboxWithLabel, CollaboratorAvailability, ContentGroup, DecoratedIcon, Elevation, Facepile, + IconDecoration, Indicator, KeybindingHint, Switch, Table, TintColor, Tooltip, }; use crate::{Item, Workspace}; @@ -111,7 +111,7 @@ impl ThemePreview { fn render_text( &self, - layer: ElevationIndex, + layer: Elevation, window: &mut Window, cx: &mut Context, ) -> impl IntoElement { @@ -277,7 +277,7 @@ impl ThemePreview { fn render_colors( &self, - layer: ElevationIndex, + layer: Elevation, window: &mut Window, cx: &mut Context, ) -> impl IntoElement { @@ -327,7 +327,7 @@ impl ThemePreview { fn render_theme_layer( &self, - layer: ElevationIndex, + layer: Elevation, window: &mut Window, cx: &mut Context, ) -> impl IntoElement { @@ -355,10 +355,10 @@ impl ThemePreview { .child(Headline::new("Theme Preview").size(HeadlineSize::Large)) .child(div().w_full().text_color(cx.theme().colors().text_muted).child("This view lets you preview a range of UI elements across a theme. Use it for testing out changes to the theme.")) ) - .child(self.render_theme_layer(ElevationIndex::Background, window, cx)) - .child(self.render_theme_layer(ElevationIndex::Surface, window, cx)) - .child(self.render_theme_layer(ElevationIndex::EditorSurface, window, cx)) - .child(self.render_theme_layer(ElevationIndex::ElevatedSurface, window, cx)) + .child(self.render_theme_layer(Elevation::Background, window, cx)) + .child(self.render_theme_layer(Elevation::Surface, window, cx)) + .child(self.render_theme_layer(Elevation::EditorSurface, window, cx)) + .child(self.render_theme_layer(Elevation::ElevatedSurface, window, cx)) } fn render_typography_page( diff --git a/crates/zed/src/zed/linux_prompts.rs b/crates/zed/src/zed/linux_prompts.rs index 20cd14c4444778d86716c5263505f6711460570e..790f7dbae3fff4aed4038e6b3a42d1eb30f27434 100644 --- a/crates/zed/src/zed/linux_prompts.rs +++ b/crates/zed/src/zed/linux_prompts.rs @@ -6,10 +6,7 @@ use gpui::{ use markdown::{Markdown, MarkdownStyle}; use settings::Settings; use theme::ThemeSettings; -use ui::{ - h_flex, v_flex, ActiveTheme, ButtonCommon, ButtonStyle, Clickable, ElevationIndex, - FluentBuilder, LabelSize, TintColor, -}; +use ui::prelude::*; use workspace::ui::StyledExt; pub fn init(cx: &mut App) { @@ -153,7 +150,7 @@ impl Render for FallbackPromptRenderer { .when(ix == self.active_action_id, |el| { el.style(ButtonStyle::Tinted(TintColor::Accent)) }) - .layer(ElevationIndex::ModalSurface) + .elevation(Elevation::ModalSurface) .on_click(cx.listener(move |_, _, _window, cx| { cx.emit(PromptResponse(ix)); }))