1use gpui::{Div, ElementFocus, ElementInteractivity, Styled, UniformList, ViewContext};
  2use theme2::ActiveTheme;
  3
  4use crate::{ElevationIndex, UITextSize};
  5
  6fn elevated<E: Styled, V: 'static>(this: E, cx: &mut ViewContext<V>, index: ElevationIndex) -> E {
  7    this.bg(cx.theme().colors().elevated_surface_background)
  8        .rounded_lg()
  9        .border()
 10        .border_color(cx.theme().colors().border_variant)
 11        .shadow(index.shadow())
 12}
 13
 14/// Extends [`Styled`](gpui::Styled) with Zed specific styling methods.
 15pub trait StyledExt: Styled {
 16    /// Horizontally stacks elements.
 17    ///
 18    /// Sets `flex()`, `flex_row()`, `items_center()`
 19    fn h_flex(self) -> Self
 20    where
 21        Self: Sized,
 22    {
 23        self.flex().flex_row().items_center()
 24    }
 25
 26    /// Vertically stacks elements.
 27    ///
 28    /// Sets `flex()`, `flex_col()`
 29    fn v_flex(self) -> Self
 30    where
 31        Self: Sized,
 32    {
 33        self.flex().flex_col()
 34    }
 35
 36    fn text_ui_size(self, size: UITextSize) -> Self
 37    where
 38        Self: Sized,
 39    {
 40        let size = size.rems();
 41
 42        self.text_size(size)
 43    }
 44
 45    /// The default size for UI text.
 46    ///
 47    /// `0.825rem` or `14px` at the default scale of `1rem` = `16px`.
 48    ///
 49    /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
 50    ///
 51    /// Use [`text_ui_sm`] for regular-sized text.
 52    fn text_ui(self) -> Self
 53    where
 54        Self: Sized,
 55    {
 56        let size = UITextSize::default().rems();
 57
 58        self.text_size(size)
 59    }
 60
 61    /// The small size for UI text.
 62    ///
 63    /// `0.75rem` or `12px` at the default scale of `1rem` = `16px`.
 64    ///
 65    /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
 66    ///
 67    /// Use [`text_ui`] for regular-sized text.
 68    fn text_ui_sm(self) -> Self
 69    where
 70        Self: Sized,
 71    {
 72        let size = UITextSize::Small.rems();
 73
 74        self.text_size(size)
 75    }
 76
 77    /// The [`Surface`](ui2::ElevationIndex::Surface) elevation level, located above the app background, is the standard level for all elements
 78    ///
 79    /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
 80    ///
 81    /// Example Elements: Title Bar, Panel, Tab Bar, Editor
 82    fn elevation_1<V: 'static>(self, cx: &mut ViewContext<V>) -> Self
 83    where
 84        Self: Styled + Sized,
 85    {
 86        elevated(self, cx, ElevationIndex::Surface)
 87    }
 88
 89    /// Non-Modal Elevated Surfaces appear above the [`Surface`](ui2::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.
 90    ///
 91    /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
 92    ///
 93    /// Examples: Notifications, Palettes, Detached/Floating Windows, Detached/Floating Panels
 94    fn elevation_2<V: 'static>(self, cx: &mut ViewContext<V>) -> Self
 95    where
 96        Self: Styled + Sized,
 97    {
 98        elevated(self, cx, ElevationIndex::ElevatedSurface)
 99    }
100
101    // There is no elevation 3, as the third elevation level is reserved for wash layers. See [`Elevation`](ui2::Elevation).
102
103    /// 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.
104    ///
105    /// 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.
106    ///
107    /// If the element does not have this behavior, it should be rendered at the [`Elevated Surface`](ui2::ElevationIndex::ElevatedSurface) layer.
108    ///
109    /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
110    ///
111    /// Examples: Settings Modal, Channel Management, Wizards/Setup UI, Dialogs
112    fn elevation_4<V: 'static>(self, cx: &mut ViewContext<V>) -> Self
113    where
114        Self: Styled + Sized,
115    {
116        elevated(self, cx, ElevationIndex::ModalSurface)
117    }
118}
119
120impl<V, I, F> StyledExt for Div<V, I, F>
121where
122    I: ElementInteractivity<V>,
123    F: ElementFocus<V>,
124{
125}
126
127impl<V> StyledExt for UniformList<V> {}