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 [`Styled`](gpui::Styled) with Zed specific styling methods.
18pub trait StyledExt: Styled + Sized {
19 /// Sets the width of the element as a percentage of the viewport's width.
20 ///
21 /// `percent` should be a value between `0.0` and `1.0`.
22 fn w_vw(self, percent: f32, cx: &mut WindowContext) -> Self {
23 self.w(cx.viewport_size().width * percent)
24 }
25
26 /// Sets the height of the element as a percentage of the viewport's height.
27 ///
28 /// `percent` should be a value between `0.0` and `1.0`.
29 fn h_vh(self, percent: f32, cx: &mut WindowContext) -> Self {
30 self.h(cx.viewport_size().height * percent)
31 }
32
33 /// Horizontally stacks elements.
34 ///
35 /// Sets `flex()`, `flex_row()`, `items_center()`
36 fn h_flex(self) -> Self {
37 self.flex().flex_row().items_center()
38 }
39
40 /// Vertically stacks elements.
41 ///
42 /// Sets `flex()`, `flex_col()`
43 fn v_flex(self) -> Self {
44 self.flex().flex_col()
45 }
46
47 fn text_ui_size(self, size: UITextSize) -> Self {
48 let size = size.rems();
49
50 self.text_size(size)
51 }
52
53 /// The default size for UI text.
54 ///
55 /// `0.825rem` or `14px` at the default scale of `1rem` = `16px`.
56 ///
57 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
58 ///
59 /// Use [`text_ui_sm`] for regular-sized text.
60 fn text_ui(self) -> Self {
61 let size = UITextSize::default().rems();
62
63 self.text_size(size)
64 }
65
66 /// The small size for UI text.
67 ///
68 /// `0.75rem` or `12px` at the default scale of `1rem` = `16px`.
69 ///
70 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
71 ///
72 /// Use [`text_ui`] for regular-sized text.
73 fn text_ui_sm(self) -> Self {
74 let size = UITextSize::Small.rems();
75
76 self.text_size(size)
77 }
78
79 /// The font size for buffer text.
80 ///
81 /// Retrieves the default font size, or the user's custom font size if set.
82 ///
83 /// This should only be used for text that is displayed in a buffer,
84 /// or other places that text needs to match the user's buffer font size.
85 fn text_buffer(self, cx: &mut WindowContext) -> Self {
86 let settings = ThemeSettings::get_global(cx);
87 self.text_size(settings.buffer_font_size(cx))
88 }
89
90 /// The [`Surface`](ui2::ElevationIndex::Surface) elevation level, located above the app background, is the standard level for all elements
91 ///
92 /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
93 ///
94 /// Example Elements: Title Bar, Panel, Tab Bar, Editor
95 fn elevation_1(self, cx: &mut WindowContext) -> Self {
96 elevated(self, cx, ElevationIndex::Surface)
97 }
98
99 /// 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.
100 ///
101 /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
102 ///
103 /// Examples: Notifications, Palettes, Detached/Floating Windows, Detached/Floating Panels
104 fn elevation_2(self, cx: &mut WindowContext) -> Self {
105 elevated(self, cx, ElevationIndex::ElevatedSurface)
106 }
107
108 /// 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.
109 ///
110 /// 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.
111 ///
112 /// If the element does not have this behavior, it should be rendered at the [`Elevated Surface`](ui2::ElevationIndex::ElevatedSurface) layer.
113 ///
114 /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
115 ///
116 /// Examples: Settings Modal, Channel Management, Wizards/Setup UI, Dialogs
117 fn elevation_3(self, cx: &mut WindowContext) -> Self {
118 elevated(self, cx, ElevationIndex::ModalSurface)
119 }
120
121 fn debug_bg_red(self) -> Self {
122 self.bg(gpui::red())
123 }
124
125 fn debug_bg_green(self) -> Self {
126 self.bg(gpui::green())
127 }
128
129 fn debug_bg_blue(self) -> Self {
130 self.bg(gpui::blue())
131 }
132
133 fn debug_bg_yellow(self) -> Self {
134 self.bg(hsla(60. / 360., 1., 0.5, 1.))
135 }
136
137 fn debug_bg_cyan(self) -> Self {
138 self.bg(hsla(160. / 360., 1., 0.5, 1.))
139 }
140
141 fn debug_bg_magenta(self) -> Self {
142 self.bg(hsla(300. / 360., 1., 0.5, 1.))
143 }
144}
145
146impl<E: Styled> StyledExt for E {}