1use crate::TextStyleRefinement;
2use crate::{
3 self as gpui, px, relative, rems, AbsoluteLength, AlignItems, CursorStyle, DefiniteLength,
4 Fill, FlexDirection, FlexWrap, Font, FontStyle, FontWeight, Hsla, JustifyContent, Length,
5 SharedString, StyleRefinement, WhiteSpace,
6};
7pub use gpui_macros::{
8 box_shadow_style_methods, cursor_style_methods, margin_style_methods, overflow_style_methods,
9 padding_style_methods, position_style_methods, visibility_style_methods,
10};
11use taffy::style::{AlignContent, Display};
12
13/// A trait for elements that can be styled.
14/// Use this to opt-in to a CSS-like styling API.
15pub trait Styled: Sized {
16 /// Returns a reference to the style memory of this element.
17 fn style(&mut self) -> &mut StyleRefinement;
18
19 gpui_macros::style_helpers!();
20 gpui_macros::visibility_style_methods!();
21 gpui_macros::margin_style_methods!();
22 gpui_macros::padding_style_methods!();
23 gpui_macros::position_style_methods!();
24 gpui_macros::overflow_style_methods!();
25 gpui_macros::cursor_style_methods!();
26 gpui_macros::box_shadow_style_methods!();
27
28 /// Sets the display type of the element to `block`.
29 /// [Docs](https://tailwindcss.com/docs/display)
30 fn block(mut self) -> Self {
31 self.style().display = Some(Display::Block);
32 self
33 }
34
35 /// Sets the display type of the element to `flex`.
36 /// [Docs](https://tailwindcss.com/docs/display)
37 fn flex(mut self) -> Self {
38 self.style().display = Some(Display::Flex);
39 self
40 }
41
42 /// Sets the whitespace of the element to `normal`.
43 /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
44 fn whitespace_normal(mut self) -> Self {
45 self.text_style()
46 .get_or_insert_with(Default::default)
47 .white_space = Some(WhiteSpace::Normal);
48 self
49 }
50
51 /// Sets the whitespace of the element to `nowrap`.
52 /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
53 fn whitespace_nowrap(mut self) -> Self {
54 self.text_style()
55 .get_or_insert_with(Default::default)
56 .white_space = Some(WhiteSpace::Nowrap);
57 self
58 }
59
60 /// Sets the flex direction of the element to `column`.
61 /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
62 fn flex_col(mut self) -> Self {
63 self.style().flex_direction = Some(FlexDirection::Column);
64 self
65 }
66
67 /// Sets the flex direction of the element to `column-reverse`.
68 /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
69 fn flex_col_reverse(mut self) -> Self {
70 self.style().flex_direction = Some(FlexDirection::ColumnReverse);
71 self
72 }
73
74 /// Sets the flex direction of the element to `row`.
75 /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
76 fn flex_row(mut self) -> Self {
77 self.style().flex_direction = Some(FlexDirection::Row);
78 self
79 }
80
81 /// Sets the flex direction of the element to `row-reverse`.
82 /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
83 fn flex_row_reverse(mut self) -> Self {
84 self.style().flex_direction = Some(FlexDirection::RowReverse);
85 self
86 }
87
88 /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
89 /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
90 fn flex_1(mut self) -> Self {
91 self.style().flex_grow = Some(1.);
92 self.style().flex_shrink = Some(1.);
93 self.style().flex_basis = Some(relative(0.).into());
94 self
95 }
96
97 /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
98 /// [Docs](https://tailwindcss.com/docs/flex#auto)
99 fn flex_auto(mut self) -> Self {
100 self.style().flex_grow = Some(1.);
101 self.style().flex_shrink = Some(1.);
102 self.style().flex_basis = Some(Length::Auto);
103 self
104 }
105
106 /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
107 /// [Docs](https://tailwindcss.com/docs/flex#initial)
108 fn flex_initial(mut self) -> Self {
109 self.style().flex_grow = Some(0.);
110 self.style().flex_shrink = Some(1.);
111 self.style().flex_basis = Some(Length::Auto);
112 self
113 }
114
115 /// Sets the element to prevent a flex item from growing or shrinking.
116 /// [Docs](https://tailwindcss.com/docs/flex#none)
117 fn flex_none(mut self) -> Self {
118 self.style().flex_grow = Some(0.);
119 self.style().flex_shrink = Some(0.);
120 self
121 }
122
123 /// Sets the initial size of flex items for this element.
124 /// [Docs](https://tailwindcss.com/docs/flex-basis)
125 fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
126 self.style().flex_basis = Some(basis.into());
127 self
128 }
129
130 /// Sets the element to allow a flex item to grow to fill any available space.
131 /// [Docs](https://tailwindcss.com/docs/flex-grow)
132 fn flex_grow(mut self) -> Self {
133 self.style().flex_grow = Some(1.);
134 self
135 }
136
137 /// Sets the element to allow a flex item to shrink if needed.
138 /// [Docs](https://tailwindcss.com/docs/flex-shrink)
139 fn flex_shrink(mut self) -> Self {
140 self.style().flex_shrink = Some(1.);
141 self
142 }
143
144 /// Sets the element to prevent a flex item from shrinking.
145 /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
146 fn flex_shrink_0(mut self) -> Self {
147 self.style().flex_shrink = Some(0.);
148 self
149 }
150
151 /// Sets the element to allow flex items to wrap.
152 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
153 fn flex_wrap(mut self) -> Self {
154 self.style().flex_wrap = Some(FlexWrap::Wrap);
155 self
156 }
157
158 /// Sets the element wrap flex items in the reverse direction.
159 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
160 fn flex_wrap_reverse(mut self) -> Self {
161 self.style().flex_wrap = Some(FlexWrap::WrapReverse);
162 self
163 }
164
165 /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
166 /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
167 fn flex_nowrap(mut self) -> Self {
168 self.style().flex_wrap = Some(FlexWrap::NoWrap);
169 self
170 }
171
172 /// Sets the element to align flex items to the start of the container's cross axis.
173 /// [Docs](https://tailwindcss.com/docs/align-items#start)
174 fn items_start(mut self) -> Self {
175 self.style().align_items = Some(AlignItems::FlexStart);
176 self
177 }
178
179 /// Sets the element to align flex items to the end of the container's cross axis.
180 /// [Docs](https://tailwindcss.com/docs/align-items#end)
181 fn items_end(mut self) -> Self {
182 self.style().align_items = Some(AlignItems::FlexEnd);
183 self
184 }
185
186 /// Sets the element to align flex items along the center of the container's cross axis.
187 /// [Docs](https://tailwindcss.com/docs/align-items#center)
188 fn items_center(mut self) -> Self {
189 self.style().align_items = Some(AlignItems::Center);
190 self
191 }
192
193 /// Sets the element to justify flex items along the container's main axis
194 /// such that there is an equal amount of space between each item.
195 /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
196 fn justify_between(mut self) -> Self {
197 self.style().justify_content = Some(JustifyContent::SpaceBetween);
198 self
199 }
200
201 /// Sets the element to justify flex items along the center of the container's main axis.
202 /// [Docs](https://tailwindcss.com/docs/justify-content#center)
203 fn justify_center(mut self) -> Self {
204 self.style().justify_content = Some(JustifyContent::Center);
205 self
206 }
207
208 /// Sets the element to justify flex items against the start of the container's main axis.
209 /// [Docs](https://tailwindcss.com/docs/justify-content#start)
210 fn justify_start(mut self) -> Self {
211 self.style().justify_content = Some(JustifyContent::Start);
212 self
213 }
214
215 /// Sets the element to justify flex items against the end of the container's main axis.
216 /// [Docs](https://tailwindcss.com/docs/justify-content#end)
217 fn justify_end(mut self) -> Self {
218 self.style().justify_content = Some(JustifyContent::End);
219 self
220 }
221
222 /// Sets the element to justify items along the container's main axis such
223 /// that there is an equal amount of space on each side of each item.
224 /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
225 fn justify_around(mut self) -> Self {
226 self.style().justify_content = Some(JustifyContent::SpaceAround);
227 self
228 }
229
230 /// Sets the element to pack content items in their default position as if no align-content value was set.
231 /// [Docs](https://tailwindcss.com/docs/align-content#normal)
232 fn content_normal(mut self) -> Self {
233 self.style().align_content = None;
234 self
235 }
236
237 /// Sets the element to pack content items in the center of the container's cross axis.
238 /// [Docs](https://tailwindcss.com/docs/align-content#center)
239 fn content_center(mut self) -> Self {
240 self.style().align_content = Some(AlignContent::Center);
241 self
242 }
243
244 /// Sets the element to pack content items against the start of the container's cross axis.
245 /// [Docs](https://tailwindcss.com/docs/align-content#start)
246 fn content_start(mut self) -> Self {
247 self.style().align_content = Some(AlignContent::FlexStart);
248 self
249 }
250
251 /// Sets the element to pack content items against the end of the container's cross axis.
252 /// [Docs](https://tailwindcss.com/docs/align-content#end)
253 fn content_end(mut self) -> Self {
254 self.style().align_content = Some(AlignContent::FlexEnd);
255 self
256 }
257
258 /// Sets the element to pack content items along the container's cross axis
259 /// such that there is an equal amount of space between each item.
260 /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
261 fn content_between(mut self) -> Self {
262 self.style().align_content = Some(AlignContent::SpaceBetween);
263 self
264 }
265
266 /// Sets the element to pack content items along the container's cross axis
267 /// such that there is an equal amount of space on each side of each item.
268 /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
269 fn content_around(mut self) -> Self {
270 self.style().align_content = Some(AlignContent::SpaceAround);
271 self
272 }
273
274 /// Sets the element to pack content items along the container's cross axis
275 /// such that there is an equal amount of space between each item.
276 /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
277 fn content_evenly(mut self) -> Self {
278 self.style().align_content = Some(AlignContent::SpaceEvenly);
279 self
280 }
281
282 /// Sets the element to allow content items to fill the available space along the container's cross axis.
283 /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
284 fn content_stretch(mut self) -> Self {
285 self.style().align_content = Some(AlignContent::Stretch);
286 self
287 }
288
289 /// Sets the background color of the element.
290 fn bg<F>(mut self, fill: F) -> Self
291 where
292 F: Into<Fill>,
293 Self: Sized,
294 {
295 self.style().background = Some(fill.into());
296 self
297 }
298
299 /// Sets the border color of the element.
300 fn border_color<C>(mut self, border_color: C) -> Self
301 where
302 C: Into<Hsla>,
303 Self: Sized,
304 {
305 self.style().border_color = Some(border_color.into());
306 self
307 }
308
309 /// Get the text style that has been configured on this element.
310 fn text_style(&mut self) -> &mut Option<TextStyleRefinement> {
311 let style: &mut StyleRefinement = self.style();
312 &mut style.text
313 }
314
315 /// Set the text color of this element, this value cascades to its child elements.
316 fn text_color(mut self, color: impl Into<Hsla>) -> Self {
317 self.text_style().get_or_insert_with(Default::default).color = Some(color.into());
318 self
319 }
320
321 /// Set the font weight of this element, this value cascades to its child elements.
322 fn font_weight(mut self, weight: FontWeight) -> Self {
323 self.text_style()
324 .get_or_insert_with(Default::default)
325 .font_weight = Some(weight);
326 self
327 }
328
329 /// Set the background color of this element, this value cascades to its child elements.
330 fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
331 self.text_style()
332 .get_or_insert_with(Default::default)
333 .background_color = Some(bg.into());
334 self
335 }
336
337 /// Set the text size of this element, this value cascades to its child elements.
338 fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
339 self.text_style()
340 .get_or_insert_with(Default::default)
341 .font_size = Some(size.into());
342 self
343 }
344
345 /// Set the text size to 'extra small',
346 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
347 fn text_xs(mut self) -> Self {
348 self.text_style()
349 .get_or_insert_with(Default::default)
350 .font_size = Some(rems(0.75).into());
351 self
352 }
353
354 /// Set the text size to 'small',
355 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
356 fn text_sm(mut self) -> Self {
357 self.text_style()
358 .get_or_insert_with(Default::default)
359 .font_size = Some(rems(0.875).into());
360 self
361 }
362
363 /// Reset the text styling for this element and its children.
364 fn text_base(mut self) -> Self {
365 self.text_style()
366 .get_or_insert_with(Default::default)
367 .font_size = Some(rems(1.0).into());
368 self
369 }
370
371 /// Set the text size to 'large',
372 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
373 fn text_lg(mut self) -> Self {
374 self.text_style()
375 .get_or_insert_with(Default::default)
376 .font_size = Some(rems(1.125).into());
377 self
378 }
379
380 /// Set the text size to 'extra large',
381 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
382 fn text_xl(mut self) -> Self {
383 self.text_style()
384 .get_or_insert_with(Default::default)
385 .font_size = Some(rems(1.25).into());
386 self
387 }
388
389 /// Set the text size to 'extra-extra large',
390 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
391 fn text_2xl(mut self) -> Self {
392 self.text_style()
393 .get_or_insert_with(Default::default)
394 .font_size = Some(rems(1.5).into());
395 self
396 }
397
398 /// Set the text size to 'extra-extra-extra large',
399 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
400 fn text_3xl(mut self) -> Self {
401 self.text_style()
402 .get_or_insert_with(Default::default)
403 .font_size = Some(rems(1.875).into());
404 self
405 }
406
407 /// Set the font style to 'non-italic',
408 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
409 fn non_italic(mut self) -> Self {
410 self.text_style()
411 .get_or_insert_with(Default::default)
412 .font_style = Some(FontStyle::Normal);
413 self
414 }
415
416 /// Set the font style to 'italic',
417 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
418 fn italic(mut self) -> Self {
419 self.text_style()
420 .get_or_insert_with(Default::default)
421 .font_style = Some(FontStyle::Italic);
422 self
423 }
424
425 /// Remove the text decoration on this element, this value cascades to its child elements.
426 fn text_decoration_none(mut self) -> Self {
427 self.text_style()
428 .get_or_insert_with(Default::default)
429 .underline = None;
430 self
431 }
432
433 /// Set the color for the underline on this element
434 fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
435 let style = self.text_style().get_or_insert_with(Default::default);
436 let underline = style.underline.get_or_insert_with(Default::default);
437 underline.color = Some(color.into());
438 self
439 }
440
441 /// Set the underline to a solid line
442 fn text_decoration_solid(mut self) -> Self {
443 let style = self.text_style().get_or_insert_with(Default::default);
444 let underline = style.underline.get_or_insert_with(Default::default);
445 underline.wavy = false;
446 self
447 }
448
449 /// Set the underline to a wavy line
450 fn text_decoration_wavy(mut self) -> Self {
451 let style = self.text_style().get_or_insert_with(Default::default);
452 let underline = style.underline.get_or_insert_with(Default::default);
453 underline.wavy = true;
454 self
455 }
456
457 /// Set the underline to be 0 thickness, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
458 fn text_decoration_0(mut self) -> Self {
459 let style = self.text_style().get_or_insert_with(Default::default);
460 let underline = style.underline.get_or_insert_with(Default::default);
461 underline.thickness = px(0.);
462 self
463 }
464
465 /// Set the underline to be 1px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
466 fn text_decoration_1(mut self) -> Self {
467 let style = self.text_style().get_or_insert_with(Default::default);
468 let underline = style.underline.get_or_insert_with(Default::default);
469 underline.thickness = px(1.);
470 self
471 }
472
473 /// Set the underline to be 2px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
474 fn text_decoration_2(mut self) -> Self {
475 let style = self.text_style().get_or_insert_with(Default::default);
476 let underline = style.underline.get_or_insert_with(Default::default);
477 underline.thickness = px(2.);
478 self
479 }
480
481 /// Set the underline to be 4px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
482 fn text_decoration_4(mut self) -> Self {
483 let style = self.text_style().get_or_insert_with(Default::default);
484 let underline = style.underline.get_or_insert_with(Default::default);
485 underline.thickness = px(4.);
486 self
487 }
488
489 /// Set the underline to be 8px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
490 fn text_decoration_8(mut self) -> Self {
491 let style = self.text_style().get_or_insert_with(Default::default);
492 let underline = style.underline.get_or_insert_with(Default::default);
493 underline.thickness = px(8.);
494 self
495 }
496
497 /// Change the font family on this element and its children.
498 fn font_family(mut self, family_name: impl Into<SharedString>) -> Self {
499 self.text_style()
500 .get_or_insert_with(Default::default)
501 .font_family = Some(family_name.into());
502 self
503 }
504
505 /// Change the font of this element and its children.
506 fn font(mut self, font: Font) -> Self {
507 let Font {
508 family,
509 features,
510 weight,
511 style,
512 } = font;
513
514 let text_style = self.text_style().get_or_insert_with(Default::default);
515 text_style.font_family = Some(family);
516 text_style.font_features = Some(features);
517 text_style.font_weight = Some(weight);
518 text_style.font_style = Some(style);
519
520 self
521 }
522
523 /// Set the line height on this element and its children.
524 fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
525 self.text_style()
526 .get_or_insert_with(Default::default)
527 .line_height = Some(line_height.into());
528 self
529 }
530
531 /// Draw a debug border around this element.
532 #[cfg(debug_assertions)]
533 fn debug(mut self) -> Self {
534 self.style().debug = Some(true);
535 self
536 }
537
538 /// Draw a debug border on all conforming elements below this element.
539 #[cfg(debug_assertions)]
540 fn debug_below(mut self) -> Self {
541 self.style().debug_below = Some(true);
542 self
543 }
544}