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

Revert "ui: Color cleanup (#26673)" (#26681)

Browse source 
This reverts commit 6767e98e00.

Somehow that PR automerged itself even with failed CI checks.

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2025-03-13 11:40:57 -04:00 • committed by GitHub
parent 87cdb68cca
commit b75964a636
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 161 additions and 139 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::*, 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),
),
)

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

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

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

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

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

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

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

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
.elevation(ui::Elevation::ModalSurface)
.layer(ui::ElevationIndex::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
.elevation(ui::Elevation::ModalSurface)
.layer(ui::ElevationIndex::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, 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)),

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

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

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

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

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

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

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::*, 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(

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

@ -86,3 +86,9 @@ 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 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,
}
}
}

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

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

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

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

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

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