1use gpui::{hsla, px, Styled, WindowContext};
2use settings::Settings;
3use theme::ThemeSettings;
4
5use crate::prelude::*;
6use crate::{ElevationIndex, UiTextSize};
7
8fn elevated<E: Styled>(this: E, cx: &mut WindowContext, index: ElevationIndex) -> E {
9 this.bg(cx.theme().colors().elevated_surface_background)
10 .z_index(index.z_index())
11 .rounded(px(8.))
12 .border()
13 .border_color(cx.theme().colors().border_variant)
14 .shadow(index.shadow())
15}
16
17/// Extends [`gpui::Styled`] with Zed-specific styling methods.
18pub trait StyledExt: Styled + Sized {
19 /// Horizontally stacks elements.
20 ///
21 /// Sets `flex()`, `flex_row()`, `items_center()`
22 fn h_flex(self) -> Self {
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 self.flex().flex_col()
31 }
32
33 /// Sets the text size using a [`UiTextSize`].
34 fn text_ui_size(self, size: UiTextSize) -> Self {
35 self.text_size(size.rems())
36 }
37
38 /// The large size for UI text.
39 ///
40 /// `1rem` or `16px` at the default scale of `1rem` = `16px`.
41 ///
42 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
43 ///
44 /// Use `text_ui` for regular-sized text.
45 fn text_ui_lg(self) -> Self {
46 self.text_size(UiTextSize::Large.rems())
47 }
48
49 /// The default size for UI text.
50 ///
51 /// `0.825rem` or `14px` at the default scale of `1rem` = `16px`.
52 ///
53 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
54 ///
55 /// Use `text_ui_sm` for smaller text.
56 fn text_ui(self) -> Self {
57 self.text_size(UiTextSize::default().rems())
58 }
59
60 /// The small size for UI text.
61 ///
62 /// `0.75rem` or `12px` at the default scale of `1rem` = `16px`.
63 ///
64 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
65 ///
66 /// Use `text_ui` for regular-sized text.
67 fn text_ui_sm(self) -> Self {
68 self.text_size(UiTextSize::Small.rems())
69 }
70
71 /// The extra small size for UI text.
72 ///
73 /// `0.625rem` or `10px` at the default scale of `1rem` = `16px`.
74 ///
75 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
76 ///
77 /// Use `text_ui` for regular-sized text.
78 fn text_ui_xs(self) -> Self {
79 self.text_size(UiTextSize::XSmall.rems())
80 }
81
82 /// The font size for buffer text.
83 ///
84 /// Retrieves the default font size, or the user's custom font size if set.
85 ///
86 /// This should only be used for text that is displayed in a buffer,
87 /// or other places that text needs to match the user's buffer font size.
88 fn text_buffer(self, cx: &mut WindowContext) -> Self {
89 let settings = ThemeSettings::get_global(cx);
90 self.text_size(settings.buffer_font_size(cx))
91 }
92
93 /// The [`Surface`](ElevationIndex::Surface) elevation level, located above the app background, is the standard level for all elements
94 ///
95 /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
96 ///
97 /// Example Elements: Title Bar, Panel, Tab Bar, Editor
98 fn elevation_1(self, cx: &mut WindowContext) -> Self {
99 elevated(self, cx, ElevationIndex::Surface)
100 }
101
102 /// 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.
103 ///
104 /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
105 ///
106 /// Examples: Notifications, Palettes, Detached/Floating Windows, Detached/Floating Panels
107 fn elevation_2(self, cx: &mut WindowContext) -> Self {
108 elevated(self, cx, ElevationIndex::ElevatedSurface)
109 }
110
111 /// 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.
112 ///
113 /// 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.
114 ///
115 /// If the element does not have this behavior, it should be rendered at the [`Elevated Surface`](ElevationIndex::ElevatedSurface) layer.
116 ///
117 /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
118 ///
119 /// Examples: Settings Modal, Channel Management, Wizards/Setup UI, Dialogs
120 fn elevation_3(self, cx: &mut WindowContext) -> Self {
121 elevated(self, cx, ElevationIndex::ModalSurface)
122 }
123
124 /// The theme's primary border color.
125 fn border_primary(self, cx: &mut WindowContext) -> Self {
126 self.border_color(cx.theme().colors().border)
127 }
128
129 /// The theme's secondary or muted border color.
130 fn border_muted(self, cx: &mut WindowContext) -> Self {
131 self.border_color(cx.theme().colors().border_variant)
132 }
133
134 /// Sets the background color to red for debugging when building UI.
135 fn debug_bg_red(self) -> Self {
136 self.bg(hsla(0. / 360., 1., 0.5, 1.))
137 }
138
139 /// Sets the background color to green for debugging when building UI.
140 fn debug_bg_green(self) -> Self {
141 self.bg(hsla(120. / 360., 1., 0.5, 1.))
142 }
143
144 /// Sets the background color to blue for debugging when building UI.
145 fn debug_bg_blue(self) -> Self {
146 self.bg(hsla(240. / 360., 1., 0.5, 1.))
147 }
148
149 /// Sets the background color to yellow for debugging when building UI.
150 fn debug_bg_yellow(self) -> Self {
151 self.bg(hsla(60. / 360., 1., 0.5, 1.))
152 }
153
154 /// Sets the background color to cyan for debugging when building UI.
155 fn debug_bg_cyan(self) -> Self {
156 self.bg(hsla(160. / 360., 1., 0.5, 1.))
157 }
158
159 /// Sets the background color to magenta for debugging when building UI.
160 fn debug_bg_magenta(self) -> Self {
161 self.bg(hsla(300. / 360., 1., 0.5, 1.))
162 }
163}
164
165impl<E: Styled> StyledExt for E {}