gpui_core/
styled.rs

1use crate::{
2    self as gpui, AbsoluteLength, AlignContent, AlignItems, AlignSelf, BlendMode, BorderStyle,
3    CursorStyle, DefiniteLength, Display, Fill, FlexDirection, FlexWrap, Font, FontStyle,
4    FontWeight, GridPlacement, GridTemplate, Hsla, JustifyContent, Length, Pixels, SharedString,
5    StrikethroughStyle, StyleRefinement, TemplateColumnMinSize, TextAlign, TextOverflow,
6    TextShadow, TextStyleRefinement, UnderlineStyle, WhiteSpace, point, px, relative, rems,
7};
8pub use 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};
13
14const ELLIPSIS: SharedString = SharedString::new_static("…");
15
16/// A trait for elements that can be styled.
17/// Use this to opt-in to a utility CSS-like styling API.
18#[cfg_attr(
19    any(feature = "inspector", debug_assertions),
20    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    gpui_macros::style_helpers!();
27    gpui_macros::visibility_style_methods!();
28    gpui_macros::margin_style_methods!();
29    gpui_macros::padding_style_methods!();
30    gpui_macros::position_style_methods!();
31    gpui_macros::overflow_style_methods!();
32    gpui_macros::cursor_style_methods!();
33    gpui_macros::border_style_methods!();
34    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 whitespace of the element to `normal`.
58    /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
59    fn whitespace_normal(mut self) -> Self {
60        self.text_style()
61            .get_or_insert_with(Default::default)
62            .white_space = Some(WhiteSpace::Normal);
63        self
64    }
65
66    /// Sets the whitespace of the element to `nowrap`.
67    /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
68    fn whitespace_nowrap(mut self) -> Self {
69        self.text_style()
70            .get_or_insert_with(Default::default)
71            .white_space = Some(WhiteSpace::Nowrap);
72        self
73    }
74
75    /// Sets the truncate overflowing text with an ellipsis (…) if needed.
76    /// [Docs](https://tailwindcss.com/docs/text-overflow#ellipsis)
77    fn text_ellipsis(mut self) -> Self {
78        self.text_style()
79            .get_or_insert_with(Default::default)
80            .text_overflow = Some(TextOverflow::Truncate(ELLIPSIS));
81        self
82    }
83
84    /// Sets the text overflow behavior of the element.
85    fn text_overflow(mut self, overflow: TextOverflow) -> Self {
86        self.text_style()
87            .get_or_insert_with(Default::default)
88            .text_overflow = Some(overflow);
89        self
90    }
91
92    /// Set the text alignment of the element.
93    fn text_align(mut self, align: TextAlign) -> Self {
94        self.text_style()
95            .get_or_insert_with(Default::default)
96            .text_align = Some(align);
97        self
98    }
99
100    /// Sets the text alignment to left
101    fn text_left(mut self) -> Self {
102        self.text_align(TextAlign::Left)
103    }
104
105    /// Sets the text alignment to center
106    fn text_center(mut self) -> Self {
107        self.text_align(TextAlign::Center)
108    }
109
110    /// Sets the text alignment to right
111    fn text_right(mut self) -> Self {
112        self.text_align(TextAlign::Right)
113    }
114
115    /// Sets the truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed.
116    /// [Docs](https://tailwindcss.com/docs/text-overflow#truncate)
117    fn truncate(mut self) -> Self {
118        self.overflow_hidden().whitespace_nowrap().text_ellipsis()
119    }
120
121    /// Sets number of lines to show before truncating the text.
122    /// [Docs](https://tailwindcss.com/docs/line-clamp)
123    fn line_clamp(mut self, lines: usize) -> Self {
124        let mut text_style = self.text_style().get_or_insert_with(Default::default);
125        text_style.line_clamp = Some(lines);
126        self.overflow_hidden()
127    }
128
129    /// Sets the letter spacing (tracking) for text.
130    /// [Docs](https://tailwindcss.com/docs/letter-spacing)
131    fn letter_spacing(mut self, spacing: impl Into<Pixels>) -> Self {
132        self.text_style()
133            .get_or_insert_with(Default::default)
134            .letter_spacing = Some(spacing.into());
135        self
136    }
137
138    /// Sets letter spacing to -0.5px (tighter tracking).
139    fn tracking_tighter(self) -> Self {
140        self.letter_spacing(px(-0.5))
141    }
142
143    /// Sets letter spacing to -0.25px (tight tracking).
144    fn tracking_tight(self) -> Self {
145        self.letter_spacing(px(-0.25))
146    }
147
148    /// Resets letter spacing to 0px (normal tracking).
149    fn tracking_normal(self) -> Self {
150        self.letter_spacing(px(0.0))
151    }
152
153    /// Sets letter spacing to 0.5px (wide tracking).
154    fn tracking_wide(self) -> Self {
155        self.letter_spacing(px(0.5))
156    }
157
158    /// Sets letter spacing to 1.0px (wider tracking).
159    fn tracking_wider(self) -> Self {
160        self.letter_spacing(px(1.0))
161    }
162
163    /// Sets letter spacing to 2.0px (widest tracking).
164    fn tracking_widest(self) -> Self {
165        self.letter_spacing(px(2.0))
166    }
167
168    /// Enables continuous (squircle) corner rounding instead of circular.
169    /// This produces smooth Apple-style corners matching SwiftUI's continuous corner style.
170    fn continuous_corners(mut self) -> Self {
171        self.style().continuous_corners = Some(true);
172        self
173    }
174
175    /// Sets the blend mode for this element's background rendering.
176    fn blend_mode(mut self, mode: BlendMode) -> Self {
177        self.style().blend_mode = Some(mode);
178        self
179    }
180
181    /// Applies a text shadow with custom parameters.
182    fn text_shadow(mut self, shadow: TextShadow) -> Self {
183        self.text_style()
184            .get_or_insert_with(Default::default)
185            .text_shadow = Some(shadow);
186        self
187    }
188
189    /// Applies a small text shadow (1px offset, 2px blur).
190    fn text_shadow_sm(mut self) -> Self {
191        self.text_style()
192            .get_or_insert_with(Default::default)
193            .text_shadow = Some(TextShadow {
194            color: Hsla {
195                h: 0.0,
196                s: 0.0,
197                l: 0.0,
198                a: 0.2,
199            },
200            offset: point(px(0.0), px(1.0)),
201            blur_radius: px(2.0),
202        });
203        self
204    }
205
206    /// Applies a medium text shadow (2px offset, 4px blur).
207    fn text_shadow_md(mut self) -> Self {
208        self.text_style()
209            .get_or_insert_with(Default::default)
210            .text_shadow = Some(TextShadow {
211            color: Hsla {
212                h: 0.0,
213                s: 0.0,
214                l: 0.0,
215                a: 0.25,
216            },
217            offset: point(px(0.0), px(2.0)),
218            blur_radius: px(4.0),
219        });
220        self
221    }
222
223    /// Applies a large text shadow (3px offset, 6px blur).
224    fn text_shadow_lg(mut self) -> Self {
225        self.text_style()
226            .get_or_insert_with(Default::default)
227            .text_shadow = Some(TextShadow {
228            color: Hsla {
229                h: 0.0,
230                s: 0.0,
231                l: 0.0,
232                a: 0.3,
233            },
234            offset: point(px(0.0), px(3.0)),
235            blur_radius: px(6.0),
236        });
237        self
238    }
239
240    /// Sets the flex direction of the element to `column`.
241    /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
242    fn flex_col(mut self) -> Self {
243        self.style().flex_direction = Some(FlexDirection::Column);
244        self
245    }
246
247    /// Sets the flex direction of the element to `column-reverse`.
248    /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
249    fn flex_col_reverse(mut self) -> Self {
250        self.style().flex_direction = Some(FlexDirection::ColumnReverse);
251        self
252    }
253
254    /// Sets the flex direction of the element to `row`.
255    /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
256    fn flex_row(mut self) -> Self {
257        self.style().flex_direction = Some(FlexDirection::Row);
258        self
259    }
260
261    /// Sets the flex direction of the element to `row-reverse`.
262    /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
263    fn flex_row_reverse(mut self) -> Self {
264        self.style().flex_direction = Some(FlexDirection::RowReverse);
265        self
266    }
267
268    /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
269    /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
270    fn flex_1(mut self) -> Self {
271        self.style().flex_grow = Some(1.);
272        self.style().flex_shrink = Some(1.);
273        self.style().flex_basis = Some(relative(0.).into());
274        self
275    }
276
277    /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
278    /// [Docs](https://tailwindcss.com/docs/flex#auto)
279    fn flex_auto(mut self) -> Self {
280        self.style().flex_grow = Some(1.);
281        self.style().flex_shrink = Some(1.);
282        self.style().flex_basis = Some(Length::Auto);
283        self
284    }
285
286    /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
287    /// [Docs](https://tailwindcss.com/docs/flex#initial)
288    fn flex_initial(mut self) -> Self {
289        self.style().flex_grow = Some(0.);
290        self.style().flex_shrink = Some(1.);
291        self.style().flex_basis = Some(Length::Auto);
292        self
293    }
294
295    /// Sets the element to prevent a flex item from growing or shrinking.
296    /// [Docs](https://tailwindcss.com/docs/flex#none)
297    fn flex_none(mut self) -> Self {
298        self.style().flex_grow = Some(0.);
299        self.style().flex_shrink = Some(0.);
300        self
301    }
302
303    /// Sets the initial size of flex items for this element.
304    /// [Docs](https://tailwindcss.com/docs/flex-basis)
305    fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
306        self.style().flex_basis = Some(basis.into());
307        self
308    }
309
310    /// Sets the element to allow a flex item to grow to fill any available space.
311    /// [Docs](https://tailwindcss.com/docs/flex-grow)
312    fn flex_grow(mut self) -> Self {
313        self.style().flex_grow = Some(1.);
314        self
315    }
316
317    /// Sets the element to allow a flex item to shrink if needed.
318    /// [Docs](https://tailwindcss.com/docs/flex-shrink)
319    fn flex_shrink(mut self) -> Self {
320        self.style().flex_shrink = Some(1.);
321        self
322    }
323
324    /// Sets the element to prevent a flex item from shrinking.
325    /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
326    fn flex_shrink_0(mut self) -> Self {
327        self.style().flex_shrink = Some(0.);
328        self
329    }
330
331    /// Sets the element to allow flex items to wrap.
332    /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
333    fn flex_wrap(mut self) -> Self {
334        self.style().flex_wrap = Some(FlexWrap::Wrap);
335        self
336    }
337
338    /// Sets the element wrap flex items in the reverse direction.
339    /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
340    fn flex_wrap_reverse(mut self) -> Self {
341        self.style().flex_wrap = Some(FlexWrap::WrapReverse);
342        self
343    }
344
345    /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
346    /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
347    fn flex_nowrap(mut self) -> Self {
348        self.style().flex_wrap = Some(FlexWrap::NoWrap);
349        self
350    }
351
352    /// Sets the element to align flex items to the start of the container's cross axis.
353    /// [Docs](https://tailwindcss.com/docs/align-items#start)
354    fn items_start(mut self) -> Self {
355        self.style().align_items = Some(AlignItems::FlexStart);
356        self
357    }
358
359    /// Sets the element to align flex items to the end of the container's cross axis.
360    /// [Docs](https://tailwindcss.com/docs/align-items#end)
361    fn items_end(mut self) -> Self {
362        self.style().align_items = Some(AlignItems::FlexEnd);
363        self
364    }
365
366    /// Sets the element to align flex items along the center of the container's cross axis.
367    /// [Docs](https://tailwindcss.com/docs/align-items#center)
368    fn items_center(mut self) -> Self {
369        self.style().align_items = Some(AlignItems::Center);
370        self
371    }
372
373    /// Sets the element to align flex items along the baseline of the container's cross axis.
374    /// [Docs](https://tailwindcss.com/docs/align-items#baseline)
375    fn items_baseline(mut self) -> Self {
376        self.style().align_items = Some(AlignItems::Baseline);
377        self
378    }
379
380    /// Sets how this specific element is aligned along the container's cross axis.
381    fn self_start(mut self) -> Self {
382        self.style().align_self = Some(AlignSelf::Start);
383        self
384    }
385
386    /// Sets this element to align against the end of the container's cross axis.
387    fn self_end(mut self) -> Self {
388        self.style().align_self = Some(AlignSelf::End);
389        self
390    }
391
392    /// Sets this element to align against the flex start of the container's cross axis.
393    fn self_flex_start(mut self) -> Self {
394        self.style().align_self = Some(AlignSelf::FlexStart);
395        self
396    }
397
398    /// Sets this element to align against the flex end of the container's cross axis.
399    fn self_flex_end(mut self) -> Self {
400        self.style().align_self = Some(AlignSelf::FlexEnd);
401        self
402    }
403
404    /// Sets this element to align along the center of the container's cross axis.
405    fn self_center(mut self) -> Self {
406        self.style().align_self = Some(AlignSelf::Center);
407        self
408    }
409
410    /// Sets this element to align along the baseline of the container's cross axis.
411    fn self_baseline(mut self) -> Self {
412        self.style().align_self = Some(AlignSelf::Baseline);
413        self
414    }
415
416    /// Sets this element to stretch to fill available space along the container's cross axis.
417    fn self_stretch(mut self) -> Self {
418        self.style().align_self = Some(AlignSelf::Stretch);
419        self
420    }
421
422    /// Sets the element to justify flex items against the start of the container's main axis.
423    /// [Docs](https://tailwindcss.com/docs/justify-content#start)
424    fn justify_start(mut self) -> Self {
425        self.style().justify_content = Some(JustifyContent::Start);
426        self
427    }
428
429    /// Sets the element to justify flex items against the end of the container's main axis.
430    /// [Docs](https://tailwindcss.com/docs/justify-content#end)
431    fn justify_end(mut self) -> Self {
432        self.style().justify_content = Some(JustifyContent::End);
433        self
434    }
435
436    /// Sets the element to justify flex items along the center of the container's main axis.
437    /// [Docs](https://tailwindcss.com/docs/justify-content#center)
438    fn justify_center(mut self) -> Self {
439        self.style().justify_content = Some(JustifyContent::Center);
440        self
441    }
442
443    /// Sets the element to justify flex items along the container's main axis
444    /// such that there is an equal amount of space between each item.
445    /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
446    fn justify_between(mut self) -> Self {
447        self.style().justify_content = Some(JustifyContent::SpaceBetween);
448        self
449    }
450
451    /// Sets the element to justify items along the container's main axis such
452    /// that there is an equal amount of space on each side of each item.
453    /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
454    fn justify_around(mut self) -> Self {
455        self.style().justify_content = Some(JustifyContent::SpaceAround);
456        self
457    }
458
459    /// Sets the element to pack content items in their default position as if no align-content value was set.
460    /// [Docs](https://tailwindcss.com/docs/align-content#normal)
461    fn content_normal(mut self) -> Self {
462        self.style().align_content = None;
463        self
464    }
465
466    /// Sets the element to pack content items in the center of the container's cross axis.
467    /// [Docs](https://tailwindcss.com/docs/align-content#center)
468    fn content_center(mut self) -> Self {
469        self.style().align_content = Some(AlignContent::Center);
470        self
471    }
472
473    /// Sets the element to pack content items against the start of the container's cross axis.
474    /// [Docs](https://tailwindcss.com/docs/align-content#start)
475    fn content_start(mut self) -> Self {
476        self.style().align_content = Some(AlignContent::FlexStart);
477        self
478    }
479
480    /// Sets the element to pack content items against the end of the container's cross axis.
481    /// [Docs](https://tailwindcss.com/docs/align-content#end)
482    fn content_end(mut self) -> Self {
483        self.style().align_content = Some(AlignContent::FlexEnd);
484        self
485    }
486
487    /// Sets the element to pack content items along the container's cross axis
488    /// such that there is an equal amount of space between each item.
489    /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
490    fn content_between(mut self) -> Self {
491        self.style().align_content = Some(AlignContent::SpaceBetween);
492        self
493    }
494
495    /// Sets the element to pack content items along the container's cross axis
496    /// such that there is an equal amount of space on each side of each item.
497    /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
498    fn content_around(mut self) -> Self {
499        self.style().align_content = Some(AlignContent::SpaceAround);
500        self
501    }
502
503    /// Sets the element to pack content items along the container's cross axis
504    /// such that there is an equal amount of space between each item.
505    /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
506    fn content_evenly(mut self) -> Self {
507        self.style().align_content = Some(AlignContent::SpaceEvenly);
508        self
509    }
510
511    /// Sets the element to allow content items to fill the available space along the container's cross axis.
512    /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
513    fn content_stretch(mut self) -> Self {
514        self.style().align_content = Some(AlignContent::Stretch);
515        self
516    }
517
518    /// Sets the background color of the element.
519    fn bg<F>(mut self, fill: F) -> Self
520    where
521        F: Into<Fill>,
522        Self: Sized,
523    {
524        self.style().background = Some(fill.into());
525        self
526    }
527
528    /// Sets the border style of the element.
529    fn border_dashed(mut self) -> Self {
530        self.style().border_style = Some(BorderStyle::Dashed);
531        self
532    }
533
534    /// Returns a mutable reference to the text style that has been configured on this element.
535    fn text_style(&mut self) -> &mut Option<TextStyleRefinement> {
536        let style: &mut StyleRefinement = self.style();
537        &mut style.text
538    }
539
540    /// Sets the text color of this element.
541    ///
542    /// This value cascades to its child elements.
543    fn text_color(mut self, color: impl Into<Hsla>) -> Self {
544        self.text_style().get_or_insert_with(Default::default).color = Some(color.into());
545        self
546    }
547
548    /// Sets the font weight of this element
549    ///
550    /// This value cascades to its child elements.
551    fn font_weight(mut self, weight: FontWeight) -> Self {
552        self.text_style()
553            .get_or_insert_with(Default::default)
554            .font_weight = Some(weight);
555        self
556    }
557
558    /// Sets the background color of this element.
559    ///
560    /// This value cascades to its child elements.
561    fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
562        self.text_style()
563            .get_or_insert_with(Default::default)
564            .background_color = Some(bg.into());
565        self
566    }
567
568    /// Sets the text size of this element.
569    ///
570    /// This value cascades to its child elements.
571    fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
572        self.text_style()
573            .get_or_insert_with(Default::default)
574            .font_size = Some(size.into());
575        self
576    }
577
578    /// Sets the text size to 'extra small'.
579    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
580    fn text_xs(mut self) -> Self {
581        self.text_style()
582            .get_or_insert_with(Default::default)
583            .font_size = Some(rems(0.75).into());
584        self
585    }
586
587    /// Sets the text size to 'small'.
588    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
589    fn text_sm(mut self) -> Self {
590        self.text_style()
591            .get_or_insert_with(Default::default)
592            .font_size = Some(rems(0.875).into());
593        self
594    }
595
596    /// Sets the text size to 'base'.
597    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
598    fn text_base(mut self) -> Self {
599        self.text_style()
600            .get_or_insert_with(Default::default)
601            .font_size = Some(rems(1.0).into());
602        self
603    }
604
605    /// Sets the text size to 'large'.
606    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
607    fn text_lg(mut self) -> Self {
608        self.text_style()
609            .get_or_insert_with(Default::default)
610            .font_size = Some(rems(1.125).into());
611        self
612    }
613
614    /// Sets the text size to 'extra large'.
615    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
616    fn text_xl(mut self) -> Self {
617        self.text_style()
618            .get_or_insert_with(Default::default)
619            .font_size = Some(rems(1.25).into());
620        self
621    }
622
623    /// Sets the text size to 'extra extra large'.
624    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
625    fn text_2xl(mut self) -> Self {
626        self.text_style()
627            .get_or_insert_with(Default::default)
628            .font_size = Some(rems(1.5).into());
629        self
630    }
631
632    /// Sets the text size to 'extra extra extra large'.
633    /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
634    fn text_3xl(mut self) -> Self {
635        self.text_style()
636            .get_or_insert_with(Default::default)
637            .font_size = Some(rems(1.875).into());
638        self
639    }
640
641    /// Sets the font style of the element to italic.
642    /// [Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
643    fn italic(mut self) -> Self {
644        self.text_style()
645            .get_or_insert_with(Default::default)
646            .font_style = Some(FontStyle::Italic);
647        self
648    }
649
650    /// Sets the font style of the element to normal (not italic).
651    /// [Docs](https://tailwindcss.com/docs/font-style#displaying-text-normally)
652    fn not_italic(mut self) -> Self {
653        self.text_style()
654            .get_or_insert_with(Default::default)
655            .font_style = Some(FontStyle::Normal);
656        self
657    }
658
659    /// Sets the text decoration to underline.
660    /// [Docs](https://tailwindcss.com/docs/text-decoration-line#underling-text)
661    fn underline(mut self) -> Self {
662        let style = self.text_style().get_or_insert_with(Default::default);
663        style.underline = Some(UnderlineStyle {
664            thickness: px(1.),
665            ..Default::default()
666        });
667        self
668    }
669
670    /// Sets the decoration of the text to have a line through it.
671    /// [Docs](https://tailwindcss.com/docs/text-decoration-line#adding-a-line-through-text)
672    fn line_through(mut self) -> Self {
673        let style = self.text_style().get_or_insert_with(Default::default);
674        style.strikethrough = Some(StrikethroughStyle {
675            thickness: px(1.),
676            ..Default::default()
677        });
678        self
679    }
680
681    /// Removes the text decoration on this element.
682    ///
683    /// This value cascades to its child elements.
684    fn text_decoration_none(mut self) -> Self {
685        self.text_style()
686            .get_or_insert_with(Default::default)
687            .underline = None;
688        self
689    }
690
691    /// Sets the color for the underline on this element
692    fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
693        let style = self.text_style().get_or_insert_with(Default::default);
694        let underline = style.underline.get_or_insert_with(Default::default);
695        underline.color = Some(color.into());
696        self
697    }
698
699    /// Sets the text decoration style to a solid line.
700    /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
701    fn text_decoration_solid(mut self) -> Self {
702        let style = self.text_style().get_or_insert_with(Default::default);
703        let underline = style.underline.get_or_insert_with(Default::default);
704        underline.wavy = false;
705        self
706    }
707
708    /// Sets the text decoration style to a wavy line.
709    /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
710    fn text_decoration_wavy(mut self) -> Self {
711        let style = self.text_style().get_or_insert_with(Default::default);
712        let underline = style.underline.get_or_insert_with(Default::default);
713        underline.wavy = true;
714        self
715    }
716
717    /// Sets the text decoration to be 0px thick.
718    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
719    fn text_decoration_0(mut self) -> Self {
720        let style = self.text_style().get_or_insert_with(Default::default);
721        let underline = style.underline.get_or_insert_with(Default::default);
722        underline.thickness = px(0.);
723        self
724    }
725
726    /// Sets the text decoration to be 1px thick.
727    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
728    fn text_decoration_1(mut self) -> Self {
729        let style = self.text_style().get_or_insert_with(Default::default);
730        let underline = style.underline.get_or_insert_with(Default::default);
731        underline.thickness = px(1.);
732        self
733    }
734
735    /// Sets the text decoration to be 2px thick.
736    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
737    fn text_decoration_2(mut self) -> Self {
738        let style = self.text_style().get_or_insert_with(Default::default);
739        let underline = style.underline.get_or_insert_with(Default::default);
740        underline.thickness = px(2.);
741        self
742    }
743
744    /// Sets the text decoration to be 4px thick.
745    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
746    fn text_decoration_4(mut self) -> Self {
747        let style = self.text_style().get_or_insert_with(Default::default);
748        let underline = style.underline.get_or_insert_with(Default::default);
749        underline.thickness = px(4.);
750        self
751    }
752
753    /// Sets the text decoration to be 8px thick.
754    /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
755    fn text_decoration_8(mut self) -> Self {
756        let style = self.text_style().get_or_insert_with(Default::default);
757        let underline = style.underline.get_or_insert_with(Default::default);
758        underline.thickness = px(8.);
759        self
760    }
761
762    /// Sets the font family of this element and its children.
763    fn font_family(mut self, family_name: impl Into<SharedString>) -> Self {
764        self.text_style()
765            .get_or_insert_with(Default::default)
766            .font_family = Some(family_name.into());
767        self
768    }
769
770    /// Sets the font of this element and its children.
771    fn font(mut self, font: Font) -> Self {
772        let Font {
773            family,
774            features,
775            fallbacks,
776            weight,
777            style,
778        } = font;
779
780        let text_style = self.text_style().get_or_insert_with(Default::default);
781        text_style.font_family = Some(family);
782        text_style.font_features = Some(features);
783        text_style.font_weight = Some(weight);
784        text_style.font_style = Some(style);
785        text_style.font_fallbacks = fallbacks;
786
787        self
788    }
789
790    /// Sets the line height of this element and its children.
791    fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
792        self.text_style()
793            .get_or_insert_with(Default::default)
794            .line_height = Some(line_height.into());
795        self
796    }
797
798    /// Sets the opacity of this element and its children.
799    fn opacity(mut self, opacity: f32) -> Self {
800        self.style().opacity = Some(opacity);
801        self
802    }
803
804    /// Sets clockwise rotation in degrees.
805    fn rotate(mut self, angle_degrees: f32) -> Self {
806        self.style().rotate = Some(angle_degrees.to_radians());
807        self
808    }
809
810    /// Sets uniform scale factor.
811    fn scale(mut self, factor: f32) -> Self {
812        self.style().scale = Some(point(factor, factor));
813        self
814    }
815
816    /// Sets non-uniform scale factors for x and y axes.
817    fn scale_xy(mut self, x: f32, y: f32) -> Self {
818        self.style().scale = Some(point(x, y));
819        self
820    }
821
822    /// Sets the transform origin as a fraction of element size (0.0-1.0).
823    /// Default is center (0.5, 0.5).
824    fn transform_origin(mut self, x: f32, y: f32) -> Self {
825        self.style().transform_origin = Some(point(x, y));
826        self
827    }
828
829    /// Sets the grid columns of this element.
830    fn grid_cols(mut self, cols: u16) -> Self {
831        self.style().grid_cols = Some(GridTemplate {
832            repeat: cols,
833            min_size: TemplateColumnMinSize::Zero,
834        });
835        self
836    }
837
838    /// Sets grid columns with min-content minimum sizing.
839    /// Unlike `grid_cols`, these columns do not shrink to zero under min-content constraints.
840    fn grid_cols_min_content(mut self, cols: u16) -> Self {
841        self.style().grid_cols = Some(GridTemplate {
842            repeat: cols,
843            min_size: TemplateColumnMinSize::MinContent,
844        });
845        self
846    }
847
848    /// Sets grid columns to use content-based max-content widths.
849    fn grid_cols_max_content(mut self, cols: u16) -> Self {
850        self.style().grid_cols = Some(GridTemplate {
851            repeat: cols,
852            min_size: TemplateColumnMinSize::MaxContent,
853        });
854        self
855    }
856
857    /// Sets the grid rows of this element.
858    fn grid_rows(mut self, rows: u16) -> Self {
859        self.style().grid_rows = Some(GridTemplate {
860            repeat: rows,
861            min_size: TemplateColumnMinSize::Zero,
862        });
863        self
864    }
865
866    /// Sets grid rows with min-content minimum sizing.
867    /// Unlike `grid_rows`, these rows do not shrink to zero under min-content constraints.
868    fn grid_rows_min_content(mut self, rows: u16) -> Self {
869        self.style().grid_rows = Some(GridTemplate {
870            repeat: rows,
871            min_size: TemplateColumnMinSize::MinContent,
872        });
873        self
874    }
875
876    /// Sets grid rows with content-based max-content sizing.
877    fn grid_rows_max_content(mut self, rows: u16) -> Self {
878        self.style().grid_rows = Some(GridTemplate {
879            repeat: rows,
880            min_size: TemplateColumnMinSize::MaxContent,
881        });
882        self
883    }
884
885    /// Sets the column start of this element.
886    fn col_start(mut self, start: i16) -> Self {
887        let grid_location = self.style().grid_location_mut();
888        grid_location.column.start = GridPlacement::Line(start);
889        self
890    }
891
892    /// Sets the column start of this element to auto.
893    fn col_start_auto(mut self) -> Self {
894        let grid_location = self.style().grid_location_mut();
895        grid_location.column.start = GridPlacement::Auto;
896        self
897    }
898
899    /// Sets the column end of this element.
900    fn col_end(mut self, end: i16) -> Self {
901        let grid_location = self.style().grid_location_mut();
902        grid_location.column.end = GridPlacement::Line(end);
903        self
904    }
905
906    /// Sets the column end of this element to auto.
907    fn col_end_auto(mut self) -> Self {
908        let grid_location = self.style().grid_location_mut();
909        grid_location.column.end = GridPlacement::Auto;
910        self
911    }
912
913    /// Sets the column span of this element.
914    fn col_span(mut self, span: u16) -> Self {
915        let grid_location = self.style().grid_location_mut();
916        grid_location.column = GridPlacement::Span(span)..GridPlacement::Span(span);
917        self
918    }
919
920    /// Spans the element across all columns.
921    fn col_span_full(mut self) -> Self {
922        let grid_location = self.style().grid_location_mut();
923        grid_location.column = GridPlacement::Line(1)..GridPlacement::Line(-1);
924        self
925    }
926
927    /// Sets the row start of this element.
928    fn row_start(mut self, start: i16) -> Self {
929        let grid_location = self.style().grid_location_mut();
930        grid_location.row.start = GridPlacement::Line(start);
931        self
932    }
933
934    /// Sets the row start of this element to "auto"
935    fn row_start_auto(mut self) -> Self {
936        let grid_location = self.style().grid_location_mut();
937        grid_location.row.start = GridPlacement::Auto;
938        self
939    }
940
941    /// Sets the row end of this element.
942    fn row_end(mut self, end: i16) -> Self {
943        let grid_location = self.style().grid_location_mut();
944        grid_location.row.end = GridPlacement::Line(end);
945        self
946    }
947
948    /// Sets the row end of this element to "auto"
949    fn row_end_auto(mut self) -> Self {
950        let grid_location = self.style().grid_location_mut();
951        grid_location.row.end = GridPlacement::Auto;
952        self
953    }
954
955    /// Sets the row span of this element.
956    fn row_span(mut self, span: u16) -> Self {
957        let grid_location = self.style().grid_location_mut();
958        grid_location.row = GridPlacement::Span(span)..GridPlacement::Span(span);
959        self
960    }
961
962    /// Spans the element across all rows.
963    fn row_span_full(mut self) -> Self {
964        let grid_location = self.style().grid_location_mut();
965        grid_location.row = GridPlacement::Line(1)..GridPlacement::Line(-1);
966        self
967    }
968
969    /// Draws a debug border around this element.
970    #[cfg(debug_assertions)]
971    fn debug(mut self) -> Self {
972        self.style().debug = Some(true);
973        self
974    }
975
976    /// Draws a debug border on all conforming elements below this element.
977    #[cfg(debug_assertions)]
978    fn debug_below(mut self) -> Self {
979        self.style().debug_below = Some(true);
980        self
981    }
982}
983
984#[cfg(test)]
985mod tests {
986    use super::*;
987
988    #[test]
989    fn cursor_none_requires_no_argument_and_sets_explicit_none() {
990        let mut element = crate::div().cursor_pointer().cursor_none();
991        assert_eq!(element.style().mouse_cursor, Some(CursorStyle::None));
992    }
993
994    #[test]
995    fn grid_content_sizing_builders_select_expected_modes() {
996        let mut min_columns = crate::div().grid_cols_min_content(2);
997        assert_eq!(
998            min_columns.style().grid_cols,
999            Some(GridTemplate {
1000                repeat: 2,
1001                min_size: TemplateColumnMinSize::MinContent,
1002            })
1003        );
1004
1005        let mut min_rows = crate::div().grid_rows_min_content(3);
1006        assert_eq!(
1007            min_rows.style().grid_rows,
1008            Some(GridTemplate {
1009                repeat: 3,
1010                min_size: TemplateColumnMinSize::MinContent,
1011            })
1012        );
1013
1014        let mut max_rows = crate::div().grid_rows_max_content(4);
1015        assert_eq!(
1016            max_rows.style().grid_rows,
1017            Some(GridTemplate {
1018                repeat: 4,
1019                min_size: TemplateColumnMinSize::MaxContent,
1020            })
1021        );
1022    }
1023}
gpui_core/styled.rs

gpui_core/
styled.rs
