diff --git a/crates/assistant/src/assistant_configuration.rs b/crates/assistant/src/assistant_configuration.rs index 6af5bcc169..711f4d98b8 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::*, Elevation}; +use ui::{prelude::*, ElevationIndex}; use workspace::Item; pub struct ConfigurationView { @@ -98,7 +98,7 @@ impl ConfigurationView { .icon_position(IconPosition::Start) .icon(IconName::Plus) .style(ButtonStyle::Filled) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::ModalSurface) .on_click(open_new_context), ), ) diff --git a/crates/assistant2/src/assistant_configuration.rs b/crates/assistant2/src/assistant_configuration.rs index 77741661e1..8e906ad66d 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, Elevation}; +use ui::{prelude::*, Divider, DividerColor, ElevationIndex}; use zed_actions::assistant::DeployPromptLibrary; pub struct AssistantConfiguration { @@ -115,7 +115,7 @@ impl AssistantConfiguration { .icon(IconName::Plus) .icon_size(IconSize::Small) .style(ButtonStyle::Filled) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::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) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::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 27dba066dc..72b4467015 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, Elevation, KeyBinding, PopoverMenuHandle, TintColor, + prelude::*, ButtonLike, Disclosure, ElevationIndex, KeyBinding, PopoverMenuHandle, TintColor, Tooltip, }; use util::{maybe, ResultExt}; @@ -2298,7 +2298,7 @@ impl ContextEditor { .when_some(tooltip, |button, tooltip| { button.tooltip(move |_, _| tooltip.clone()) }) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::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()) }) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::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) - .elevation(Elevation::ElevatedSurface) + .layer(ElevationIndex::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) - .elevation(Elevation::ElevatedSurface) + .layer(ElevationIndex::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 47826797f2..998955b4ba 100644 --- a/crates/editor/src/editor.rs +++ b/crates/editor/src/editor.rs @@ -6667,14 +6667,16 @@ impl Editor { .child( Label::new(label) .size(LabelSize::Small) - .when(!has_keybind, |el| el.color(Color::Error).strikethrough()), + .when(!has_keybind, |el| { + el.color(cx.theme().status().error.into()).strikethrough() + }), ) .when(!has_keybind, |el| { el.child( h_flex().ml_1().child( Icon::new(IconName::Info) .size(IconSize::Small) - .color(Color::Error), + .color(cx.theme().status().error.into()), ), ) }) diff --git a/crates/git_ui/src/git_panel.rs b/crates/git_ui/src/git_panel.rs index ebd55b9dff..f42b085480 100644 --- a/crates/git_ui/src/git_panel.rs +++ b/crates/git_ui/src/git_panel.rs @@ -59,7 +59,8 @@ use std::{collections::HashSet, sync::Arc, time::Duration, usize}; use strum::{IntoEnumIterator, VariantNames}; use time::OffsetDateTime; use ui::{ - prelude::*, Checkbox, ContextMenu, Elevation, PopoverMenu, Scrollbar, ScrollbarState, Tooltip, + prelude::*, Checkbox, ContextMenu, ElevationIndex, PopoverMenu, Scrollbar, ScrollbarState, + Tooltip, }; use util::{maybe, post_inc, ResultExt, TryFutureExt}; use workspace::{AppState, OpenOptions, OpenVisible}; @@ -3189,7 +3190,7 @@ impl GitPanel { let checkbox = Checkbox::new("stage-file", entry_staging.as_bool().into()) .disabled(!self.has_write_access(cx)) .fill() - .elevation(Elevation::Surface) + .elevation(ElevationIndex::Surface) .on_click({ let entry = entry.clone(); let git_panel = entity.downgrade(); @@ -3638,7 +3639,7 @@ impl GitPanel { && !self.has_conflicts() && !entry.status.is_created(), ) - .elevation(Elevation::Surface) + .elevation(ElevationIndex::Surface) .on_click({ let entry = entry.clone(); cx.listener(move |this, _, window, cx| { @@ -3781,7 +3782,7 @@ impl Render for GitPanel { })) .size_full() .overflow_hidden() - .bg(Elevation::Surface.bg(cx)) + .bg(ElevationIndex::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 0262008993..27499edeea 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, Elevation, FluentBuilder, Icon, IconName, IconSize, IntoElement, - Label, LabelCommon, LabelSize, LineHeightStyle, ParentElement, PopoverMenu, RenderOnce, - SharedString, Styled, Tooltip, Window, + ContextMenu, ElementId, ElevationIndex, 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") - .elevation(ui::Elevation::ModalSurface) + .layer(ui::ElevationIndex::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(), )) - .elevation(ui::Elevation::ModalSurface) + .layer(ui::ElevationIndex::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(Elevation::Surface.on_elevation_bg(cx)) + .bg(ElevationIndex::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 0c6153b9e6..b1c55777c7 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 - .elevation(ui::Elevation::ModalSurface) + .layer(ui::ElevationIndex::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 - .elevation(ui::Elevation::ModalSurface) + .layer(ui::ElevationIndex::ModalSurface) .size(ui::ButtonSize::Compact) } diff --git a/crates/recent_projects/src/disconnected_overlay.rs b/crates/recent_projects/src/disconnected_overlay.rs index cd60971304..ecc303fc19 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, Elevation, + div, h_flex, rems, Button, ButtonCommon, ButtonStyle, Clickable, Context, ElevationIndex, 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) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::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) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::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 cb5454b98f..3655ed0136 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, Elevation, KeyBinding}; +use ui::{prelude::*, ButtonLike, ElevationIndex, 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) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::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 e80a17de83..7317d05f73 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, Elevation, IconPosition, KeyBinding, KeybindingPosition, - TintColor, + prelude::*, Color, DynamicSpacing, ElevationIndex, IconPosition, KeyBinding, + KeybindingPosition, TintColor, }; use crate::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, IconName, IconSize, Label}; @@ -394,8 +394,8 @@ impl ButtonCommon for Button { self } - fn elevation(mut self, elevation: Elevation) -> Self { - self.base = self.base.elevation(elevation); + fn layer(mut self, elevation: ElevationIndex) -> Self { + self.base = self.base.layer(elevation); self } } diff --git a/crates/ui/src/components/button/button_like.rs b/crates/ui/src/components/button/button_like.rs index 9da7646808..bb7ed025e1 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, Elevation}; +use crate::{prelude::*, DynamicSpacing, ElevationIndex}; /// 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 elevation(self, elevation: Elevation) -> Self; + fn layer(self, elevation: ElevationIndex) -> Self; } #[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)] @@ -152,18 +152,23 @@ 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(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, + 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, _ => 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), @@ -187,7 +192,12 @@ 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); @@ -277,7 +287,7 @@ impl ButtonStyle { #[allow(unused)] pub(crate) fn disabled( self, - elevation: Option, + elevation: Option, window: &mut Window, cx: &mut App, ) -> ButtonLikeStyles { @@ -343,7 +353,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>>, @@ -462,7 +472,7 @@ impl ButtonCommon for ButtonLike { self } - fn elevation(mut self, elevation: Elevation) -> Self { + fn layer(mut self, elevation: ElevationIndex) -> 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 75fde0d8e6..8adda25042 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::*, Elevation, Indicator, SelectableButton, TintColor}; +use crate::{prelude::*, ElevationIndex, Indicator, SelectableButton, TintColor}; use crate::{IconName, IconSize}; use super::button_icon::ButtonIcon; @@ -156,8 +156,8 @@ impl ButtonCommon for IconButton { self } - fn elevation(mut self, elevation: Elevation) -> Self { - self.base = self.base.elevation(elevation); + fn layer(mut self, elevation: ElevationIndex) -> Self { + self.base = self.base.layer(elevation); self } } @@ -212,34 +212,34 @@ impl ComponentPreview for IconButton { single_example( "Default", IconButton::new("default", IconName::Check) - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .into_any_element(), ), single_example( "Filled", IconButton::new("filled", IconName::Check) - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .style(ButtonStyle::Filled) .into_any_element(), ), single_example( "Subtle", IconButton::new("subtle", IconName::Check) - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .style(ButtonStyle::Subtle) .into_any_element(), ), single_example( "Tinted", IconButton::new("tinted", IconName::Check) - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .style(ButtonStyle::Tinted(TintColor::Accent)) .into_any_element(), ), single_example( "Transparent", IconButton::new("transparent", IconName::Check) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .into_any_element(), ), ], @@ -274,7 +274,7 @@ impl ComponentPreview for IconButton { IconButton::new("small", IconName::Check) .icon_size(IconSize::XSmall) .style(ButtonStyle::Filled) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .into_any_element(), ), ], @@ -311,7 +311,7 @@ impl ComponentPreview for IconButton { IconButton::new("disabled", IconName::Check) .disabled(true) .style(ButtonStyle::Filled) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::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) - .elevation(Elevation::Background) + .layer(ElevationIndex::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 676f279f10..7e114b989c 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, Elevation}; +use crate::{prelude::*, ButtonLike, ButtonLikeRounding, ElevationIndex}; /// 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 elevation(mut self, elevation: Elevation) -> Self { - self.base = self.base.elevation(elevation); + fn layer(mut self, elevation: ElevationIndex) -> Self { + self.base = self.base.layer(elevation); self } } @@ -154,14 +154,14 @@ impl ComponentPreview for ToggleButton { single_example( "Off", ToggleButton::new("off", "Off") - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .style(ButtonStyle::Filled) .into_any_element(), ), single_example( "On", ToggleButton::new("on", "On") - .elevation(Elevation::Background) + .layer(ElevationIndex::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") - .elevation(Elevation::Background) + .layer(ElevationIndex::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") - .elevation(Elevation::Background) + .layer(ElevationIndex::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") - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .style(ButtonStyle::Filled) .first() .into_any_element(), ) .child( ToggleButton::new("three_btn_middle", "Middle") - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .style(ButtonStyle::Filled) .middle() .toggle_state(true) @@ -208,7 +208,7 @@ impl ComponentPreview for ToggleButton { ) .child( ToggleButton::new("three_btn_last", "Last") - .elevation(Elevation::Background) + .layer(ElevationIndex::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") - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .style(ButtonStyle::Filled) .first() .into_any_element(), ) .child( ToggleButton::new("two_btn_last", "Last") - .elevation(Elevation::Background) + .layer(ElevationIndex::Background) .style(ButtonStyle::Filled) .last() .into_any_element(), @@ -242,7 +242,7 @@ impl ComponentPreview for ToggleButton { single_example( "None", ToggleButton::new("none", "None") - .elevation(Elevation::Background) + .layer(ElevationIndex::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") - .elevation(Elevation::Background) + .layer(ElevationIndex::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") - .elevation(Elevation::Background) + .layer(ElevationIndex::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 747ac8e122..666bff99fe 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::*, Elevation, KeyBinding}; +use crate::{prelude::*, ElevationIndex, 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(Elevation), + ElevationBased(ElevationIndex), /// 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: Elevation) -> Self { + pub fn elevation(mut self, elevation: ElevationIndex) -> 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: Elevation) -> Self { + pub fn elevation(mut self, elevation: ElevationIndex) -> 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(Elevation::EditorSurface)) + .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)) .into_any_element(), ), single_example( diff --git a/crates/ui/src/styles/color.rs b/crates/ui/src/styles/color.rs index a8cf1d51e5..0d234ad50d 100644 --- a/crates/ui/src/styles/color.rs +++ b/crates/ui/src/styles/color.rs @@ -86,3 +86,9 @@ 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 8e5b2a1a65..aea91c8d5f 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 Elevation { +pub enum ElevationIndex { /// On the layer of the app background. This is under panels, panes, and /// other surfaces. Background, @@ -22,32 +22,32 @@ pub enum Elevation { EditorSurface, /// A surface that is elevated above the primary surface. but below washes, models, and dragged elements. ElevatedSurface, - /// A surface above the [Elevation::ElevatedSurface] that is used for dialogs, alerts, modals, etc. + /// A surface above the [ElevationIndex::ElevatedSurface] that is used for dialogs, alerts, modals, etc. ModalSurface, } -impl Display for Elevation { +impl Display for ElevationIndex { fn fmt(&self, f: &mut Formatter) -> fmt::Result { match self { - 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"), + 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"), } } } -impl Elevation { +impl ElevationIndex { /// 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 { - Elevation::Surface => smallvec![], - Elevation::EditorSurface => smallvec![], + ElevationIndex::Surface => smallvec![], + ElevationIndex::EditorSurface => smallvec![], - Elevation::ElevatedSurface => smallvec![ + ElevationIndex::ElevatedSurface => smallvec![ BoxShadow { color: hsla(0., 0., 0., 0.12), offset: point(px(0.), px(2.)), @@ -62,7 +62,7 @@ impl Elevation { } ], - Elevation::ModalSurface => smallvec![ + ElevationIndex::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 Elevation { /// Returns the background color for the given elevation index. pub fn bg(&self, cx: &mut App) -> Hsla { match self { - 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, + 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, } } /// Returns a color that is appropriate a filled element on this elevation pub fn on_elevation_bg(&self, cx: &App) -> Hsla { match self { - 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, + 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, } } @@ -120,11 +120,11 @@ impl Elevation { /// 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 { - 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, + 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, } } } diff --git a/crates/ui/src/traits/styled_ext.rs b/crates/ui/src/traits/styled_ext.rs index 3e6fa0de14..76da92d004 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::Elevation; +use crate::ElevationIndex; -fn elevated(this: E, cx: &App, index: Elevation) -> E { +fn elevated(this: E, cx: &App, index: ElevationIndex) -> E { this.bg(cx.theme().colors().elevated_surface_background) .rounded_lg() .border_1() @@ -11,7 +11,7 @@ fn elevated(this: E, cx: &App, index: Elevation) -> E { .shadow(index.shadow(cx)) } -fn elevated_borderless(this: E, cx: &mut App, index: Elevation) -> E { +fn elevated_borderless(this: E, cx: &mut App, index: ElevationIndex) -> 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`](Elevation::Surface) elevation level, located above the app background, is the standard level for all elements + /// The [`Surface`](ElevationIndex::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, Elevation::Surface) + elevated(self, cx, ElevationIndex::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, Elevation::Surface) + elevated_borderless(self, cx, ElevationIndex::Surface) } - /// 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. + /// 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. /// /// 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, Elevation::ElevatedSurface) + elevated(self, cx, ElevationIndex::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, Elevation::ElevatedSurface) + elevated_borderless(self, cx, ElevationIndex::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`](Elevation::ElevatedSurface) layer. + /// If the element does not have this behavior, it should be rendered at the [`Elevated Surface`](ElevationIndex::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, Elevation::ModalSurface) + elevated(self, cx, ElevationIndex::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, Elevation::ModalSurface) + elevated_borderless(self, cx, ElevationIndex::ModalSurface) } /// The theme's primary border color. diff --git a/crates/welcome/src/welcome.rs b/crates/welcome/src/welcome.rs index d02b7bc1bd..c95dccb2f7 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, Elevation, Tooltip}; +use ui::{prelude::*, CheckboxWithLabel, ElevationIndex, Tooltip}; use vim_mode_setting::VimModeSetting; use workspace::{ dock::DockPosition, @@ -289,7 +289,7 @@ impl Render for WelcomePage { }), ) .fill() - .elevation(Elevation::ElevatedSurface), + .elevation(ElevationIndex::ElevatedSurface), ) .child( IconButton::new("vim-mode", IconName::Info) @@ -325,7 +325,7 @@ impl Render for WelcomePage { }), ) .fill() - .elevation(Elevation::ElevatedSurface), + .elevation(ElevationIndex::ElevatedSurface), ) .child( CheckboxWithLabel::new( @@ -351,7 +351,7 @@ impl Render for WelcomePage { }), ) .fill() - .elevation(Elevation::ElevatedSurface), + .elevation(ElevationIndex::ElevatedSurface), ), ), ) diff --git a/crates/workspace/src/theme_preview.rs b/crates/workspace/src/theme_preview.rs index 5a150943f3..d3a6e7f90d 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, Elevation, Facepile, - IconDecoration, Indicator, KeybindingHint, Switch, Table, TintColor, Tooltip, + CheckboxWithLabel, CollaboratorAvailability, ContentGroup, DecoratedIcon, ElevationIndex, + Facepile, IconDecoration, Indicator, KeybindingHint, Switch, Table, TintColor, Tooltip, }; use crate::{Item, Workspace}; @@ -111,7 +111,7 @@ impl ThemePreview { fn render_text( &self, - layer: Elevation, + layer: ElevationIndex, window: &mut Window, cx: &mut Context, ) -> impl IntoElement { @@ -277,7 +277,7 @@ impl ThemePreview { fn render_colors( &self, - layer: Elevation, + layer: ElevationIndex, window: &mut Window, cx: &mut Context, ) -> impl IntoElement { @@ -327,7 +327,7 @@ impl ThemePreview { fn render_theme_layer( &self, - layer: Elevation, + layer: ElevationIndex, 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(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)) + .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)) } fn render_typography_page( diff --git a/crates/zed/src/zed/linux_prompts.rs b/crates/zed/src/zed/linux_prompts.rs index 790f7dbae3..20cd14c444 100644 --- a/crates/zed/src/zed/linux_prompts.rs +++ b/crates/zed/src/zed/linux_prompts.rs @@ -6,7 +6,10 @@ use gpui::{ use markdown::{Markdown, MarkdownStyle}; use settings::Settings; use theme::ThemeSettings; -use ui::prelude::*; +use ui::{ + h_flex, v_flex, ActiveTheme, ButtonCommon, ButtonStyle, Clickable, ElevationIndex, + FluentBuilder, LabelSize, TintColor, +}; use workspace::ui::StyledExt; pub fn init(cx: &mut App) { @@ -150,7 +153,7 @@ impl Render for FallbackPromptRenderer { .when(ix == self.active_action_id, |el| { el.style(ButtonStyle::Tinted(TintColor::Accent)) }) - .elevation(Elevation::ModalSurface) + .layer(ElevationIndex::ModalSurface) .on_click(cx.listener(move |_, _, _window, cx| { cx.emit(PromptResponse(ix)); }))