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

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.