Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: Color cleanup (#26673)

Browse source 
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<Hsla> 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
This commit is contained in:
Nate Butler 2025-03-13 11:18:40 -04:00 • committed by GitHub
parent 8cf5af1a84
commit 6767e98e00
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 139 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

4
crates/assistant/src/assistant_configuration.rs
View file

@ -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),
),
)

6
crates/assistant2/src/assistant_configuration.rs
View file

@ -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)

10
crates/assistant_context_editor/src/context_editor.rs
View file

@ -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<Editor>) -
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| {

6
crates/editor/src/editor.rs
View file

@ -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),
),
)
})

9
crates/git_ui/src/git_panel.rs
View file

@ -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()

12
crates/git_ui/src/git_ui.rs
View file

@ -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.)),

4
crates/panel/src/panel.rs
View file

@ -49,7 +49,7 @@ pub fn panel_button(label: impl Into<SharedString>) -> 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<SharedString>, 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)
}

6
crates/recent_projects/src/disconnected_overlay.rs
View file

@ -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)),

4
crates/repl/src/repl_sessions_ui.rs
View file

@ -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(

8
crates/ui/src/components/button/button.rs
View file

@ -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
}
}

34
crates/ui/src/components/button/button_like.rs
View file

@ -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<ElevationIndex>, cx: &mut App) -> Hsla {
fn element_bg_from_elevation(elevation: Option<Elevation>, 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<ElevationIndex>,
cx: &mut App,
) -> ButtonLikeStyles {
pub(crate) fn enabled(self, elevation: Option<Elevation>, 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<ElevationIndex>,
cx: &mut App,
) -> ButtonLikeStyles {
pub(crate) fn hovered(self, elevation: Option<Elevation>, 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<ElevationIndex>,
elevation: Option<Elevation>,
window: &mut Window,
cx: &mut App,
) -> ButtonLikeStyles {
@ -353,7 +343,7 @@ pub struct ButtonLike {
pub(super) selected_style: Option<ButtonStyle>,
pub(super) width: Option<DefiniteLength>,
pub(super) height: Option<DefiniteLength>,
pub(super) layer: Option<ElevationIndex>,
pub(super) layer: Option<Elevation>,
size: ButtonSize,
rounding: Option<ButtonLikeRounding>,
tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> 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
}

38
crates/ui/src/components/button/icon_button.rs
View file

@ -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(),
),
],

30
crates/ui/src/components/button/toggle_button.rs
View file

@ -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(),

10
crates/ui/src/components/toggle.rs
View file

@ -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(

6
crates/ui/src/styles/color.rs
View file

@ -86,9 +86,3 @@ impl Color {
}
}
}
impl From<Hsla> for Color {
fn from(color: Hsla) -> Self {
Color::Custom(color)
}
}

56
crates/ui/src/styles/elevation.rs
View file

@ -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,
}
}
}

24
crates/ui/src/traits/styled_ext.rs
View file

@ -1,9 +1,9 @@
use gpui::{hsla, App, Styled};
use crate::prelude::*;
use crate::ElevationIndex;
use crate::Elevation;
fn elevated<E: Styled>(this: E, cx: &App, index: ElevationIndex) -> E {
fn elevated<E: Styled>(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<E: Styled>(this: E, cx: &App, index: ElevationIndex) -> E {
.shadow(index.shadow(cx))
}
fn elevated_borderless<E: Styled>(this: E, cx: &mut App, index: ElevationIndex) -> E {
fn elevated_borderless<E: Styled>(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.

8
crates/welcome/src/welcome.rs
View file

@ -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),
),
),
)

18
crates/workspace/src/theme_preview.rs
View file

@ -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<Self>,
) -> impl IntoElement {
@ -277,7 +277,7 @@ impl ThemePreview {
fn render_colors(
&self,
layer: ElevationIndex,
layer: Elevation,
window: &mut Window,
cx: &mut Context<Self>,
) -> impl IntoElement {
@ -327,7 +327,7 @@ impl ThemePreview {
fn render_theme_layer(
&self,
layer: ElevationIndex,
layer: Elevation,
window: &mut Window,
cx: &mut Context<Self>,
) -> 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(

7
crates/zed/src/zed/linux_prompts.rs
View file

@ -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));
}))