open_gpui/
styled.rs

1use crate::{
2    AbsoluteLength, AlignContent, AlignItems, AlignSelf, BorderStyle, CursorStyle, DefiniteLength,
3    Display, Fill, FlexDirection, FlexWrap, Font, FontFeatures, FontStyle, FontWeight,
4    GridPlacement, GridTemplate, Hsla, JustifyContent, Length, SharedString, StrikethroughStyle,
5    StyleRefinement, TemplateColumnMinSize, TextAlign, TextOverflow, TextStyleRefinement,
6    UnderlineStyle, WhiteSpace, px, relative, rems,
7};
8pub use open_gpui_macros::{
9    border_style_methods, box_shadow_style_methods, cursor_style_methods, margin_style_methods,
10    overflow_style_methods, padding_style_methods, position_style_methods,
11    visibility_style_methods,
12};
13const ELLIPSIS: SharedString = SharedString::new_static("…");
14
15/// A trait for elements that can be styled.
16/// Use this to opt-in to a utility CSS-like styling API.
17// gate on rust-analyzer so rust-analyzer never needs to expand this macro, it takes up to 10 seconds to expand due to inefficiencies in rust-analyzers proc-macro srv
18#[cfg_attr(
19    all(any(feature = "inspector", debug_assertions), not(rust_analyzer)),
20    open_gpui_macros::derive_inspector_reflection
21)]
22pub trait Styled: Sized {
23    /// Returns a reference to the style memory of this element.
24    fn style(&mut self) -> &mut StyleRefinement;
25
26    open_gpui_macros::style_helpers!();
27    open_gpui_macros::visibility_style_methods!();
28    open_gpui_macros::margin_style_methods!();
29    open_gpui_macros::padding_style_methods!();
30    open_gpui_macros::position_style_methods!();
31    open_gpui_macros::overflow_style_methods!();
32    open_gpui_macros::cursor_style_methods!();
33    open_gpui_macros::border_style_methods!();
34    open_gpui_macros::box_shadow_style_methods!();
35
36    /// Sets the display type of the element to `block`.
37    /// [Docs](https://tailwindcss.com/docs/display)
38    fn block(mut self) -> Self {
39        self.style().display = Some(Display::Block);
40        self
41    }
42
43    /// Sets the display type of the element to `flex`.
44    /// [Docs](https://tailwindcss.com/docs/display)
45    fn flex(mut self) -> Self {
46        self.style().display = Some(Display::Flex);
47        self
48    }
49
50    /// Sets the display type of the element to `grid`.
51    /// [Docs](https://tailwindcss.com/docs/display)
52    fn grid(mut self) -> Self {
53        self.style().display = Some(Display::Grid);
54        self
55    }
56
57    /// Sets the display type of the element to `none`.
58    /// [Docs](https://tailwindcss.com/docs/display)
59    fn hidden(mut self) -> Self {
60        self.style().display = Some(Display::None);
61        self
62    }
63
64    /// Set the space to be reserved for rendering the scrollbar.
65    ///
66    /// This will only affect the layout of the element when overflow for this element is set to
67    /// `Overflow::Scroll`.
68    fn scrollbar_width(mut self, width: impl Into<AbsoluteLength>) -> Self {
69        self.style().scrollbar_width = Some(width.into());
70        self
71    }
72
73    /// Sets the whitespace of the element to `normal`.
74    /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
75    fn whitespace_normal(mut self) -> Self {
76        self.text_style().white_space = Some(WhiteSpace::Normal);
77        self
78    }
79
80    /// Sets the whitespace of the element to `nowrap`.
81    /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
82    fn whitespace_nowrap(mut self) -> Self {
83        self.text_style().white_space = Some(WhiteSpace::Nowrap);
84        self
85    }
86
87    /// Sets the truncate overflowing text with an ellipsis (…) at the end if needed.
88    /// [Docs](https://tailwindcss.com/docs/text-overflow#ellipsis)
89    fn text_ellipsis(mut self) -> Self {
90        self.text_style().text_overflow = Some(TextOverflow::Truncate(ELLIPSIS));
91        self
92    }
93
94    /// Sets the truncate overflowing text with an ellipsis (…) at the start if needed.
95    /// Typically more adequate for file paths where the end is more important than the beginning.
96    /// Note: This doesn't exist in Tailwind CSS.
97    fn text_ellipsis_start(mut self) -> Self {
98        self.text_style().text_overflow = Some(TextOverflow::TruncateStart(ELLIPSIS));
99        self
100    }
101
102    /// Sets the text overflow behavior of the element.
103    fn text_overflow(mut self, overflow: TextOverflow) -> Self {
104        self.text_style().text_overflow = Some(overflow);
105        self
106    }
107
108    /// Set the text alignment of the element.
109    fn text_align(mut self, align: TextAlign) -> Self {
110        self.text_style().text_align = Some(align);
111        self
112    }
113
114    /// Sets the text alignment to left
115    fn text_left(mut self) -> Self {
116        self.text_align(TextAlign::Left)
117    }
118
119    /// Sets the text alignment to center
120    fn text_center(mut self) -> Self {
121        self.text_align(TextAlign::Center)
122    }
123
124    /// Sets the text alignment to right
125    fn text_right(mut self) -> Self {
126        self.text_align(TextAlign::Right)
127    }
128
129    /// Sets the truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed.
130    /// [Docs](https://tailwindcss.com/docs/text-overflow#truncate)
131    fn truncate(mut self) -> Self {
132        self.overflow_hidden().whitespace_nowrap().text_ellipsis()
133    }
134
135    /// Sets number of lines to show before truncating the text.
136    /// [Docs](https://tailwindcss.com/docs/line-clamp)
137    fn line_clamp(mut self, lines: usize) -> Self {
138        let mut text_style = self.text_style();
139        text_style.line_clamp = Some(lines);
140        self.overflow_hidden()
141    }
142
143    /// Sets the flex direction of the element to `column`.
144    /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
145    fn flex_col(mut self) -> Self {
146        self.style().flex_direction = Some(FlexDirection::Column);
147        self
148    }
149
150    /// Sets the flex direction of the element to `column-reverse`.
151    /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
152    fn flex_col_reverse(mut self) -> Self {
153        self.style().flex_direction = Some(FlexDirection::ColumnReverse);
154        self
155    }
156
157    /// Sets the flex direction of the element to `row`.
158    /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
159    fn flex_row(mut self) -> Self {
160        self.style().flex_direction = Some(FlexDirection::Row);
161        self
162    }
163
164    /// Sets the flex direction of the element to `row-reverse`.
165    /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
166    fn flex_row_reverse(mut self) -> Self {
167        self.style().flex_direction = Some(FlexDirection::RowReverse);
168        self
169    }
170
171    /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
172    /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
173    fn flex_1(mut self) -> Self {
174        self.style().flex_grow = Some(1.);
175        self.style().flex_shrink = Some(1.);
176        self.style().flex_basis = Some(relative(0.).into());
177        self
178    }
179
180    /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
181    /// [Docs](https://tailwindcss.com/docs/flex#auto)
182    fn flex_auto(mut self) -> Self {
183        self.style().flex_grow = Some(1.);
184        self.style().flex_shrink = Some(1.);
185        self.style().flex_basis = Some(Length::Auto);
186        self
187    }
188
189    /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
190    /// [Docs](https://tailwindcss.com/docs/flex#initial)
191    fn flex_initial(mut self) -> Self {
192        self.style().flex_grow = Some(0.);
193        self.style().flex_shrink = Some(1.);
194        self.style().flex_basis = Some(Length::Auto);
195        self
196    }
197
198    /// Sets the element to prevent a flex item from growing or shrinking.
199    /// [Docs](https://tailwindcss.com/docs/flex#none)
200    fn flex_none(mut self) -> Self {
201        self.style().flex_grow = Some(0.);
202        self.style().flex_shrink = Some(0.);
203        self.style().flex_basis = Some(Length::Auto);
204        self
205    }
206
207    /// Sets the initial size of flex items for this element.
208    /// [Docs](https://tailwindcss.com/docs/flex-basis)
209    fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
210        self.style().flex_basis = Some(basis.into());
211        self
212    }
213
214    /// Sets the flex item's grow factor.
215    /// [Docs](https://tailwindcss.com/docs/flex-grow)
216    fn flex_grow(mut self, grow: f32) -> Self {
217        self.style().flex_grow = Some(grow);
218        self
219    }
220
221    /// Disables flex item growth (flex-grow: 0).
222    /// [Docs](https://tailwindcss.com/docs/flex-grow#dont-grow)
223    fn flex_grow_0(mut self) -> Self {
224        self.style().flex_grow = Some(0.);
225        self
226    }
227
228    /// Enables flex item growth (flex-grow: 1).
229    /// [Docs](https://tailwindcss.com/docs/flex-grow#grow-1)
230    fn flex_grow_1(mut self) -> Self {
231        self.style().flex_grow = Some(1.);
232        self
233    }
234
235    /// Sets the flex item's shrink factor.
236    /// [Docs](https://tailwindcss.com/docs/flex-shrink)
237    fn flex_shrink(mut self, shrink: f32) -> Self {
238        self.style().flex_shrink = Some(shrink);
239        self
240    }
241
242    /// Disables flex item shrinking (flex-shrink: 0).
243    /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
244    fn flex_shrink_0(mut self) -> Self {
245        self.style().flex_shrink = Some(0.);
246        self
247    }
248
249    /// Enables flex item shrinking (flex-shrink: 1).
250    /// [Docs](https://tailwindcss.com/docs/flex-shrink#shrink-1)
251    fn flex_shrink_1(mut self) -> Self {
252        self.style().flex_shrink = Some(1.);
253        self
254    }
255
256    /// Sets the element to allow flex items to wrap.
257    /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
258    fn flex_wrap(mut self) -> Self {
259        self.style().flex_wrap = Some(FlexWrap::Wrap);
260        self
261    }
262
263    /// Sets the element wrap flex items in the reverse direction.
264    /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
265    fn flex_wrap_reverse(mut self) -> Self {
266        self.style().flex_wrap = Some(FlexWrap::WrapReverse);
267        self
268    }
269
270    /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
271    /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
272    fn flex_nowrap(mut self) -> Self {
273        self.style().flex_wrap = Some(FlexWrap::NoWrap);
274        self
275    }
276
277    /// Sets the element to align flex items to the start of the container's cross axis.
278    /// [Docs](https://tailwindcss.com/docs/align-items#start)
279    fn items_start(mut self) -> Self {
280        self.style().align_items = Some(AlignItems::FlexStart);
281        self
282    }
283
284    /// Sets the element to align flex items to the end of the container's cross axis.
285    /// [Docs](https://tailwindcss.com/docs/align-items#end)
286    fn items_end(mut self) -> Self {
287        self.style().align_items = Some(AlignItems::FlexEnd);
288        self
289    }
290
291    /// Sets the element to align flex items along the center of the container's cross axis.
292    /// [Docs](https://tailwindcss.com/docs/align-items#center)
293    fn items_center(mut self) -> Self {
294        self.style().align_items = Some(AlignItems::Center);
295        self
296    }
297
298    /// Sets the element to align flex items along the baseline of the container's cross axis.
299    /// [Docs](https://tailwindcss.com/docs/align-items#baseline)
300    fn items_baseline(mut self) -> Self {
301        self.style().align_items = Some(AlignItems::Baseline);
302        self
303    }
304
305    /// Sets the element to stretch flex items to fill the available space along the container's cross axis.
306    /// [Docs](https://tailwindcss.com/docs/align-items#stretch)
307    fn items_stretch(mut self) -> Self {
308        self.style().align_items = Some(AlignItems::Stretch);
309        self
310    }
311
312    /// Sets how this specific element is aligned along the container's cross axis.
313    /// [Docs](https://tailwindcss.com/docs/align-self#start)
314    fn self_start(mut self) -> Self {
315        self.style().align_self = Some(AlignSelf::Start);
316        self
317    }
318
319    /// Sets this element to align against the end of the container's cross axis.
320    /// [Docs](https://tailwindcss.com/docs/align-self#end)
321    fn self_end(mut self) -> Self {
322        self.style().align_self = Some(AlignSelf::End);
323        self
324    }
325
326    /// Sets this element to align against the start of the container's cross axis.
327    /// [Docs](https://tailwindcss.com/docs/align-self#start)
328    fn self_flex_start(mut self) -> Self {
329        self.style().align_self = Some(AlignSelf::FlexStart);
330        self
331    }
332
333    /// Sets this element to align against the end of the container's cross axis.
334    /// [Docs](https://tailwindcss.com/docs/align-self#end)
335    fn self_flex_end(mut self) -> Self {
336        self.style().align_self = Some(AlignSelf::FlexEnd);
337        self
338    }
339
340    /// Sets this element to align along the center of the container's cross axis.
341    /// [Docs](https://tailwindcss.com/docs/align-self#center)
342    fn self_center(mut self) -> Self {
343        self.style().align_self = Some(AlignSelf::Center);
344        self
345    }
346
347    /// Sets this element to align along the baseline of the container's cross axis.
348    /// [Docs](https://tailwindcss.com/docs/align-self#baseline)
349    fn self_baseline(mut self) -> Self {
350        self.style().align_self = Some(AlignSelf::Baseline);
351        self
352    }
353
354    /// Sets this element to stretch to fill the available space along the container's cross axis.
355    /// [Docs](https://tailwindcss.com/docs/align-self#stretch)
356    fn self_stretch(mut self) -> Self {
357        self.style().align_self = Some(AlignSelf::Stretch);
358        self
359    }
360
361    /// Sets the element to justify flex items against the start of the container's main axis.
362    /// [Docs](https://tailwindcss.com/docs/justify-content#start)
363    fn justify_start(mut self) -> Self {
364        self.style().justify_content = Some(JustifyContent::Start);
365        self
366    }
367
368    /// Sets the element to justify flex items against the end of the container's main axis.
369    /// [Docs](https://tailwindcss.com/docs/justify-content#end)
370    fn justify_end(mut self) -> Self {
371        self.style().justify_content = Some(JustifyContent::End);
372        self
373    }
374
375    /// Sets the element to justify flex items along the center of the container's main axis.
376    /// [Docs](https://tailwindcss.com/docs/justify-content#center)
377    fn justify_center(mut self) -> Self {
378        self.style().justify_content = Some(JustifyContent::Center);
379        self
380    }
381
382    /// Sets the element to justify flex items along the container's main axis
383    /// such that there is an equal amount of space between each item.
384    /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
385    fn justify_between(mut self) -> Self {
386        self.style().justify_content = Some(JustifyContent::SpaceBetween);
387        self
388    }
389
390    /// Sets the element to justify items along the container's main axis such
391    /// that there is an equal amount of space on each side of each item.
392    /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
393    fn justify_around(mut self) -> Self {
394        self.style().justify_content = Some(JustifyContent::SpaceAround);
395        self
396    }
397
398    /// Sets the element to justify items along the container's main axis such
399    /// that there is an equal amount of space around each item, but also
400    /// accounting for the doubling of space you would normally see between
401    /// each item when using justify-around.
402    /// [Docs](https://tailwindcss.com/docs/justify-content#space-evenly)
403    fn justify_evenly(mut self) -> Self {
404        self.style().justify_content = Some(JustifyContent::SpaceEvenly);
405        self
406    }
407
408    /// Sets the element to pack content items in their default position as if no align-content value was set.
409    /// [Docs](https://tailwindcss.com/docs/align-content#normal)
410    fn content_normal(mut self) -> Self {
411        self.style().align_content = None;
412        self
413    }
414
415    /// Sets the element to pack content items in the center of the container's cross axis.
416    /// [Docs](https://tailwindcss.com/docs/align-content#center)
417    fn content_center(mut self) -> Self {
418        self.style().align_content = Some(AlignContent::Center);
419        self
420    }
421
422    /// Sets the element to pack content items against the start of the container's cross axis.
423    /// [Docs](https://tailwindcss.com/docs/align-content#start)
424    fn content_start(mut self) -> Self {
425        self.style().align_content = Some(AlignContent::FlexStart);
426        self
427    }
428
429    /// Sets the element to pack content items against the end of the container's cross axis.
430    /// [Docs](https://tailwindcss.com/docs/align-content#end)
431    fn content_end(mut self) -> Self {
432        self.style().align_content = Some(AlignContent::FlexEnd);
433        self
434    }
435
436    /// Sets the element to pack content items along the container's cross axis
437    /// such that there is an equal amount of space between each item.
438    /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
439    fn content_between(mut self) -> Self {
440        self.style().align_content = Some(AlignContent::SpaceBetween);
441        self
442    }
443
444    /// Sets the element to pack content items along the container's cross axis
445    /// such that there is an equal amount of space on each side of each item.
446    /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
447    fn content_around(mut self) -> Self {
448        self.style().align_content = Some(AlignContent::SpaceAround);
449        self
450    }
451
452    /// Sets the element to pack content items along the container's cross axis
453    /// such that there is an equal amount of space between each item.
454    /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
455    fn content_evenly(mut self) -> Self {
456        self.style().align_content = Some(AlignContent::SpaceEvenly);
457        self
458    }
459
460    /// Sets the element to allow content items to fill the available space along the container's cross axis.
461    /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
462    fn content_stretch(mut self) -> Self {
463        self.style().align_content = Some(AlignContent::Stretch);
464        self
465    }
466
467    /// Sets the aspect ratio of the element.
468    /// [Docs](https://tailwindcss.com/docs/aspect-ratio)
469    fn aspect_ratio(mut self, ratio: f32) -> Self {
470        self.style().aspect_ratio = Some(ratio);
471        self
472    }
473
474    /// Sets the aspect ratio of the element to 1/1 – equal width and height.
475    /// [Docs](https://tailwindcss.com/docs/aspect-ratio)
476    fn aspect_square(mut self) -> Self {
477        self.style().aspect_ratio = Some(1.0);
478        self
479    }
480
481    /// Sets the background color of the element.
482    fn bg<F>(mut self, fill: F) -> Self
483    where
484        F: Into<Fill>,
485        Self: Sized,
486    {
487        self.style().background = Some(fill.into());
488        self
489    }
490
491    /// Sets the border style of the element.
492    fn border_dashed(mut self) -> Self {
493        self.style().border_style = Some(BorderStyle::Dashed);
494        self
495    }
496
497    /// Returns a mutable reference to the text style that has been configured on this element.
498    fn text_style(&mut self) -> &mut TextStyleRefinement {
499        let style: &mut StyleRefinement = self.style();
500        &mut style.text
501    }
502
503    /// Sets the text color of this element.
504    ///
505    /// This value cascades to its child elements.
506    fn text_color(mut self, color: impl Into<Hsla>) -> Self {
507        self.text_style().color = Some(color.into());
508        self
509    }
510
511    /// Sets the font weight of this element
512    ///
513    /// This value cascades to its child elements.
514    fn font_weight(mut self, weight: FontWeight) -> Self {
515        self.text_style().font_weight = Some(weight);
516        self
517    }
518
519    /// Sets the background color of this element.
520    ///
521    /// This value cascades to its child elements.
522    fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
523        self.text_style().background_color = Some(bg.into());
524        self
525    }
526
527    /// Sets the text size of this element.
528    ///
529    /// This value cascades to its child elements.
530    fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
531        self.text_style().font_size = Some(size.into());
532        self
533    }
534
535    /// Sets the text size to 'extra small'.
536    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
537    fn text_xs(mut self) -> Self {
538        self.text_style().font_size = Some(rems(0.75).into());
539        self
540    }
541
542    /// Sets the text size to 'small'.
543    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
544    fn text_sm(mut self) -> Self {
545        self.text_style().font_size = Some(rems(0.875).into());
546        self
547    }
548
549    /// Sets the text size to 'base'.
550    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
551    fn text_base(mut self) -> Self {
552        self.text_style().font_size = Some(rems(1.0).into());
553        self
554    }
555
556    /// Sets the text size to 'large'.
557    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
558    fn text_lg(mut self) -> Self {
559        self.text_style().font_size = Some(rems(1.125).into());
560        self
561    }
562
563    /// Sets the text size to 'extra large'.
564    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
565    fn text_xl(mut self) -> Self {
566        self.text_style().font_size = Some(rems(1.25).into());
567        self
568    }
569
570    /// Sets the text size to 'extra extra large'.
571    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
572    fn text_2xl(mut self) -> Self {
573        self.text_style().font_size = Some(rems(1.5).into());
574        self
575    }
576
577    /// Sets the text size to 'extra extra extra large'.
578    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
579    fn text_3xl(mut self) -> Self {
580        self.text_style().font_size = Some(rems(1.875).into());
581        self
582    }
583
584    /// Sets the font style of the element to italic.
585    /// [Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
586    fn italic(mut self) -> Self {
587        self.text_style().font_style = Some(FontStyle::Italic);
588        self
589    }
590
591    /// Sets the font style of the element to normal (not italic).
592    /// [Docs](https://tailwindcss.com/docs/font-style#displaying-text-normally)
593    fn not_italic(mut self) -> Self {
594        self.text_style().font_style = Some(FontStyle::Normal);
595        self
596    }
597
598    /// Sets the text decoration to underline.
599    /// [Docs](https://tailwindcss.com/docs/text-decoration-line#underling-text)
600    fn underline(mut self) -> Self {
601        let style = self.text_style();
602        style.underline = Some(UnderlineStyle {
603            thickness: px(1.),
604            ..Default::default()
605        });
606        self
607    }
608
609    /// Sets the decoration of the text to have a line through it.
610    /// [Docs](https://tailwindcss.com/docs/text-decoration-line#adding-a-line-through-text)
611    fn line_through(mut self) -> Self {
612        let style = self.text_style();
613        style.strikethrough = Some(StrikethroughStyle {
614            thickness: px(1.),
615            ..Default::default()
616        });
617        self
618    }
619
620    /// Removes the text decoration on this element.
621    ///
622    /// This value cascades to its child elements.
623    fn text_decoration_none(mut self) -> Self {
624        self.text_style().underline = None;
625        self
626    }
627
628    /// Sets the color for the underline on this element
629    fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
630        let style = self.text_style();
631        let underline = style.underline.get_or_insert_with(Default::default);
632        underline.color = Some(color.into());
633        self
634    }
635
636    /// Sets the text decoration style to a solid line.
637    /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
638    fn text_decoration_solid(mut self) -> Self {
639        let style = self.text_style();
640        let underline = style.underline.get_or_insert_with(Default::default);
641        underline.wavy = false;
642        self
643    }
644
645    /// Sets the text decoration style to a wavy line.
646    /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
647    fn text_decoration_wavy(mut self) -> Self {
648        let style = self.text_style();
649        let underline = style.underline.get_or_insert_with(Default::default);
650        underline.wavy = true;
651        self
652    }
653
654    /// Sets the text decoration to be 0px thick.
655    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
656    fn text_decoration_0(mut self) -> Self {
657        let style = self.text_style();
658        let underline = style.underline.get_or_insert_with(Default::default);
659        underline.thickness = px(0.);
660        self
661    }
662
663    /// Sets the text decoration to be 1px thick.
664    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
665    fn text_decoration_1(mut self) -> Self {
666        let style = self.text_style();
667        let underline = style.underline.get_or_insert_with(Default::default);
668        underline.thickness = px(1.);
669        self
670    }
671
672    /// Sets the text decoration to be 2px thick.
673    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
674    fn text_decoration_2(mut self) -> Self {
675        let style = self.text_style();
676        let underline = style.underline.get_or_insert_with(Default::default);
677        underline.thickness = px(2.);
678        self
679    }
680
681    /// Sets the text decoration to be 4px thick.
682    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
683    fn text_decoration_4(mut self) -> Self {
684        let style = self.text_style();
685        let underline = style.underline.get_or_insert_with(Default::default);
686        underline.thickness = px(4.);
687        self
688    }
689
690    /// Sets the text decoration to be 8px thick.
691    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
692    fn text_decoration_8(mut self) -> Self {
693        let style = self.text_style();
694        let underline = style.underline.get_or_insert_with(Default::default);
695        underline.thickness = px(8.);
696        self
697    }
698
699    /// Sets the font family of this element and its children.
700    fn font_family(mut self, family_name: impl Into<SharedString>) -> Self {
701        self.text_style().font_family = Some(family_name.into());
702        self
703    }
704
705    /// Sets the font features of this element and its children.
706    fn font_features(mut self, features: FontFeatures) -> Self {
707        self.text_style().font_features = Some(features);
708        self
709    }
710
711    /// Sets the font of this element and its children.
712    fn font(mut self, font: Font) -> Self {
713        let Font {
714            family,
715            features,
716            fallbacks,
717            weight,
718            style,
719        } = font;
720
721        let text_style = self.text_style();
722        text_style.font_family = Some(family);
723        text_style.font_features = Some(features);
724        text_style.font_weight = Some(weight);
725        text_style.font_style = Some(style);
726        text_style.font_fallbacks = fallbacks;
727
728        self
729    }
730
731    /// Sets the line height of this element and its children.
732    fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
733        self.text_style().line_height = Some(line_height.into());
734        self
735    }
736
737    /// Sets the opacity of this element and its children.
738    fn opacity(mut self, opacity: f32) -> Self {
739        self.style().opacity = Some(opacity);
740        self
741    }
742
743    /// Sets the grid columns of this element.
744    fn grid_cols(mut self, cols: u16) -> Self {
745        self.style().grid_cols = Some(GridTemplate {
746            repeat: cols,
747            min_size: TemplateColumnMinSize::Zero,
748        });
749        self
750    }
751
752    /// Sets the grid columns with min-content minimum sizing.
753    /// Unlike grid_cols, it won't shrink to width 0 in AvailableSpace::MinContent constraints.
754    fn grid_cols_min_content(mut self, cols: u16) -> Self {
755        self.style().grid_cols = Some(GridTemplate {
756            repeat: cols,
757            min_size: TemplateColumnMinSize::MinContent,
758        });
759        self
760    }
761
762    /// Sets the grid columns with max-content maximum sizing for content-based column widths.
763    fn grid_cols_max_content(mut self, cols: u16) -> Self {
764        self.style().grid_cols = Some(GridTemplate {
765            repeat: cols,
766            min_size: TemplateColumnMinSize::MaxContent,
767        });
768        self
769    }
770
771    /// Sets the grid rows of this element.
772    fn grid_rows(mut self, rows: u16) -> Self {
773        self.style().grid_rows = Some(GridTemplate {
774            repeat: rows,
775            min_size: TemplateColumnMinSize::Zero,
776        });
777        self
778    }
779
780    /// Sets the column start of this element.
781    fn col_start(mut self, start: i16) -> Self {
782        let grid_location = self.style().grid_location_mut();
783        grid_location.column.start = GridPlacement::Line(start);
784        self
785    }
786
787    /// Sets the column start of this element to auto.
788    fn col_start_auto(mut self) -> Self {
789        let grid_location = self.style().grid_location_mut();
790        grid_location.column.start = GridPlacement::Auto;
791        self
792    }
793
794    /// Sets the column end of this element.
795    fn col_end(mut self, end: i16) -> Self {
796        let grid_location = self.style().grid_location_mut();
797        grid_location.column.end = GridPlacement::Line(end);
798        self
799    }
800
801    /// Sets the column end of this element to auto.
802    fn col_end_auto(mut self) -> Self {
803        let grid_location = self.style().grid_location_mut();
804        grid_location.column.end = GridPlacement::Auto;
805        self
806    }
807
808    /// Sets the column span of this element.
809    fn col_span(mut self, span: u16) -> Self {
810        let grid_location = self.style().grid_location_mut();
811        grid_location.column = GridPlacement::Span(span)..GridPlacement::Span(span);
812        self
813    }
814
815    /// Sets the row span of this element.
816    fn col_span_full(mut self) -> Self {
817        let grid_location = self.style().grid_location_mut();
818        grid_location.column = GridPlacement::Line(1)..GridPlacement::Line(-1);
819        self
820    }
821
822    /// Sets the row start of this element.
823    fn row_start(mut self, start: i16) -> Self {
824        let grid_location = self.style().grid_location_mut();
825        grid_location.row.start = GridPlacement::Line(start);
826        self
827    }
828
829    /// Sets the row start of this element to "auto"
830    fn row_start_auto(mut self) -> Self {
831        let grid_location = self.style().grid_location_mut();
832        grid_location.row.start = GridPlacement::Auto;
833        self
834    }
835
836    /// Sets the row end of this element.
837    fn row_end(mut self, end: i16) -> Self {
838        let grid_location = self.style().grid_location_mut();
839        grid_location.row.end = GridPlacement::Line(end);
840        self
841    }
842
843    /// Sets the row end of this element to "auto"
844    fn row_end_auto(mut self) -> Self {
845        let grid_location = self.style().grid_location_mut();
846        grid_location.row.end = GridPlacement::Auto;
847        self
848    }
849
850    /// Sets the row span of this element.
851    fn row_span(mut self, span: u16) -> Self {
852        let grid_location = self.style().grid_location_mut();
853        grid_location.row = GridPlacement::Span(span)..GridPlacement::Span(span);
854        self
855    }
856
857    /// Sets the row span of this element.
858    fn row_span_full(mut self) -> Self {
859        let grid_location = self.style().grid_location_mut();
860        grid_location.row = GridPlacement::Line(1)..GridPlacement::Line(-1);
861        self
862    }
863
864    /// Draws a debug border around this element.
865    #[cfg(debug_assertions)]
866    fn debug(mut self) -> Self {
867        self.style().debug = Some(true);
868        self
869    }
870
871    /// Draws a debug border on all conforming elements below this element.
872    #[cfg(debug_assertions)]
873    fn debug_below(mut self) -> Self {
874        self.style().debug_below = Some(true);
875        self
876    }
877}
open_gpui/styled.rs

open_gpui/
styled.rs
