1use gpui::{
2 div, rems, App, IntoElement, ParentElement, Rems, RenderOnce, SharedString, Styled, Window,
3};
4use settings::Settings;
5use theme::{ActiveTheme, ThemeSettings};
6
7use crate::{rems_from_px, Color};
8
9/// Extends [`gpui::Styled`] with typography-related styling methods.
10pub trait StyledTypography: Styled + Sized {
11 /// Sets the font family to the buffer font.
12 fn font_buffer(self, cx: &App) -> Self {
13 let settings = ThemeSettings::get_global(cx);
14 let buffer_font_family = settings.buffer_font.family.clone();
15
16 self.font_family(buffer_font_family)
17 }
18
19 /// Sets the font family to the UI font.
20 fn font_ui(self, cx: &App) -> Self {
21 let settings = ThemeSettings::get_global(cx);
22 let ui_font_family = settings.ui_font.family.clone();
23
24 self.font_family(ui_font_family)
25 }
26
27 /// Sets the text size using a [`TextSize`].
28 fn text_ui_size(self, size: TextSize, cx: &App) -> Self {
29 self.text_size(size.rems(cx))
30 }
31
32 /// The large size for UI text.
33 ///
34 /// `1rem` or `16px` at the default scale of `1rem` = `16px`.
35 ///
36 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
37 ///
38 /// Use `text_ui` for regular-sized text.
39 fn text_ui_lg(self, cx: &App) -> Self {
40 self.text_size(TextSize::Large.rems(cx))
41 }
42
43 /// The default size for UI text.
44 ///
45 /// `0.825rem` or `14px` at the default scale of `1rem` = `16px`.
46 ///
47 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
48 ///
49 /// Use `text_ui_sm` for smaller text.
50 fn text_ui(self, cx: &App) -> Self {
51 self.text_size(TextSize::default().rems(cx))
52 }
53
54 /// The small size for UI text.
55 ///
56 /// `0.75rem` or `12px` at the default scale of `1rem` = `16px`.
57 ///
58 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
59 ///
60 /// Use `text_ui` for regular-sized text.
61 fn text_ui_sm(self, cx: &App) -> Self {
62 self.text_size(TextSize::Small.rems(cx))
63 }
64
65 /// The extra small size for UI text.
66 ///
67 /// `0.625rem` or `10px` at the default scale of `1rem` = `16px`.
68 ///
69 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
70 ///
71 /// Use `text_ui` for regular-sized text.
72 fn text_ui_xs(self, cx: &App) -> Self {
73 self.text_size(TextSize::XSmall.rems(cx))
74 }
75
76 /// The font size for buffer text.
77 ///
78 /// Retrieves the default font size, or the user's custom font size if set.
79 ///
80 /// This should only be used for text that is displayed in a buffer,
81 /// or other places that text needs to match the user's buffer font size.
82 fn text_buffer(self, cx: &App) -> Self {
83 let settings = ThemeSettings::get_global(cx);
84 self.text_size(settings.buffer_font_size())
85 }
86}
87
88impl<E: Styled> StyledTypography for E {}
89
90/// A utility for getting the size of various semantic text sizes.
91#[derive(Debug, Default, Clone)]
92pub enum TextSize {
93 /// The default size for UI text.
94 ///
95 /// `0.825rem` or `14px` at the default scale of `1rem` = `16px`.
96 ///
97 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
98 #[default]
99 Default,
100 /// The large size for UI text.
101 ///
102 /// `1rem` or `16px` at the default scale of `1rem` = `16px`.
103 ///
104 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
105 Large,
106
107 /// The small size for UI text.
108 ///
109 /// `0.75rem` or `12px` at the default scale of `1rem` = `16px`.
110 ///
111 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
112 Small,
113
114 /// The extra small size for UI text.
115 ///
116 /// `0.625rem` or `10px` at the default scale of `1rem` = `16px`.
117 ///
118 /// Note: The absolute size of this text will change based on a user's `ui_scale` setting.
119 XSmall,
120
121 /// The `ui_font_size` set by the user.
122 Ui,
123 /// The `buffer_font_size` set by the user.
124 Editor,
125 // TODO: The terminal settings will need to be passed to
126 // ThemeSettings before we can enable this.
127 //// The `terminal.font_size` set by the user.
128 // Terminal,
129}
130
131impl TextSize {
132 /// Returns the text size in rems.
133 pub fn rems(self, cx: &App) -> Rems {
134 let theme_settings = ThemeSettings::get_global(cx);
135
136 match self {
137 Self::Large => rems_from_px(16.),
138 Self::Default => rems_from_px(14.),
139 Self::Small => rems_from_px(12.),
140 Self::XSmall => rems_from_px(10.),
141 Self::Ui => rems_from_px(theme_settings.ui_font_size.into()),
142 Self::Editor => rems_from_px(theme_settings.buffer_font_size.into()),
143 }
144 }
145}
146
147/// The size of a [`Headline`] element
148///
149/// Defaults to a Major Second scale.
150#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
151pub enum HeadlineSize {
152 /// An extra small headline - `~14px` @16px/rem
153 XSmall,
154 /// A small headline - `16px` @16px/rem
155 Small,
156 #[default]
157 /// A medium headline - `~18px` @16px/rem
158 Medium,
159 /// A large headline - `~20px` @16px/rem
160 Large,
161 /// An extra large headline - `~22px` @16px/rem
162 XLarge,
163}
164
165impl HeadlineSize {
166 /// Returns the headline size in rems.
167 pub fn rems(self) -> Rems {
168 match self {
169 Self::XSmall => rems(0.88),
170 Self::Small => rems(1.0),
171 Self::Medium => rems(1.125),
172 Self::Large => rems(1.27),
173 Self::XLarge => rems(1.43),
174 }
175 }
176
177 /// Returns the line height for the headline size.
178 pub fn line_height(self) -> Rems {
179 match self {
180 Self::XSmall => rems(1.6),
181 Self::Small => rems(1.6),
182 Self::Medium => rems(1.6),
183 Self::Large => rems(1.6),
184 Self::XLarge => rems(1.6),
185 }
186 }
187}
188
189/// A headline element, used to emphasize some text and
190/// create a visual hierarchy.
191#[derive(IntoElement)]
192pub struct Headline {
193 size: HeadlineSize,
194 text: SharedString,
195 color: Color,
196}
197
198impl RenderOnce for Headline {
199 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
200 let ui_font = ThemeSettings::get_global(cx).ui_font.clone();
201
202 div()
203 .font(ui_font)
204 .line_height(self.size.line_height())
205 .text_size(self.size.rems())
206 .text_color(cx.theme().colors().text)
207 .child(self.text)
208 }
209}
210
211impl Headline {
212 /// Create a new headline element.
213 pub fn new(text: impl Into<SharedString>) -> Self {
214 Self {
215 size: HeadlineSize::default(),
216 text: text.into(),
217 color: Color::default(),
218 }
219 }
220
221 /// Set the size of the headline.
222 pub fn size(mut self, size: HeadlineSize) -> Self {
223 self.size = size;
224 self
225 }
226
227 /// Set the color of the headline.
228 pub fn color(mut self, color: Color) -> Self {
229 self.color = color;
230 self
231 }
232}