1use crate::{
2 self as gpui, hsla, point, px, relative, rems, AbsoluteLength, AlignItems, CursorStyle,
3 DefiniteLength, Fill, FlexDirection, FontWeight, Hsla, JustifyContent, Length, Position,
4 SharedString, StyleRefinement, Visibility, WhiteSpace,
5};
6use crate::{BoxShadow, TextStyleRefinement};
7use smallvec::{smallvec, SmallVec};
8use taffy::style::{Display, Overflow};
9
10/// A trait for elements that can be styled.
11/// Use this to opt-in to a CSS-like styling API.
12pub trait Styled: Sized {
13 /// Returns a reference to the style memory of this element.
14 fn style(&mut self) -> &mut StyleRefinement;
15
16 gpui_macros::style_helpers!();
17
18 /// Set the z-index of this element.
19 fn z_index(mut self, z_index: u16) -> Self {
20 self.style().z_index = Some(z_index);
21 self
22 }
23
24 /// Sets the size of the element to sthe full width and height.
25 fn full(mut self) -> Self {
26 self.style().size.width = Some(relative(1.).into());
27 self.style().size.height = Some(relative(1.).into());
28 self
29 }
30
31 /// Sets the position of the element to `relative`.
32 /// [Docs](https://tailwindcss.com/docs/position)
33 fn relative(mut self) -> Self {
34 self.style().position = Some(Position::Relative);
35 self
36 }
37
38 /// Sets the position of the element to `absolute`.
39 /// [Docs](https://tailwindcss.com/docs/position)
40 fn absolute(mut self) -> Self {
41 self.style().position = Some(Position::Absolute);
42 self
43 }
44
45 /// Sets the display type of the element to `block`.
46 /// [Docs](https://tailwindcss.com/docs/display)
47 fn block(mut self) -> Self {
48 self.style().display = Some(Display::Block);
49 self
50 }
51
52 /// Sets the display type of the element to `flex`.
53 /// [Docs](https://tailwindcss.com/docs/display)
54 fn flex(mut self) -> Self {
55 self.style().display = Some(Display::Flex);
56 self
57 }
58
59 /// Sets the visibility of the element to `visible`.
60 /// [Docs](https://tailwindcss.com/docs/visibility)
61 fn visible(mut self) -> Self {
62 self.style().visibility = Some(Visibility::Visible);
63 self
64 }
65
66 /// Sets the visibility of the element to `hidden`.
67 /// [Docs](https://tailwindcss.com/docs/visibility)
68 fn invisible(mut self) -> Self {
69 self.style().visibility = Some(Visibility::Hidden);
70 self
71 }
72
73 /// Sets the behavior of content that overflows the container to be hidden.
74 /// [Docs](https://tailwindcss.com/docs/overflow#hiding-content-that-overflows)
75 fn overflow_hidden(mut self) -> Self {
76 self.style().overflow.x = Some(Overflow::Hidden);
77 self.style().overflow.y = Some(Overflow::Hidden);
78 self
79 }
80
81 /// Sets the behavior of content that overflows the container on the X axis to be hidden.
82 /// [Docs](https://tailwindcss.com/docs/overflow#hiding-content-that-overflows)
83 fn overflow_x_hidden(mut self) -> Self {
84 self.style().overflow.x = Some(Overflow::Hidden);
85 self
86 }
87
88 /// Sets the behavior of content that overflows the container on the Y axis to be hidden.
89 /// [Docs](https://tailwindcss.com/docs/overflow#hiding-content-that-overflows)
90 fn overflow_y_hidden(mut self) -> Self {
91 self.style().overflow.y = Some(Overflow::Hidden);
92 self
93 }
94
95 /// Set the cursor style when hovering over this element
96 fn cursor(mut self, cursor: CursorStyle) -> Self {
97 self.style().mouse_cursor = Some(cursor);
98 self
99 }
100
101 /// Sets the cursor style when hovering an element to `default`.
102 /// [Docs](https://tailwindcss.com/docs/cursor)
103 fn cursor_default(mut self) -> Self {
104 self.style().mouse_cursor = Some(CursorStyle::Arrow);
105 self
106 }
107
108 /// Sets the cursor style when hovering an element to `pointer`.
109 /// [Docs](https://tailwindcss.com/docs/cursor)
110 fn cursor_pointer(mut self) -> Self {
111 self.style().mouse_cursor = Some(CursorStyle::PointingHand);
112 self
113 }
114
115 /// Sets cursor style when hovering over an element to `text`.
116 /// [Docs](https://tailwindcss.com/docs/cursor)
117 fn cursor_text(mut self) -> Self {
118 self.style().mouse_cursor = Some(CursorStyle::IBeam);
119 self
120 }
121
122 /// Sets cursor style when hovering over an element to `move`.
123 /// [Docs](https://tailwindcss.com/docs/cursor)
124 fn cursor_move(mut self) -> Self {
125 self.style().mouse_cursor = Some(CursorStyle::ClosedHand);
126 self
127 }
128
129 /// Sets cursor style when hovering over an element to `not-allowed`.
130 /// [Docs](https://tailwindcss.com/docs/cursor)
131 fn cursor_not_allowed(mut self) -> Self {
132 self.style().mouse_cursor = Some(CursorStyle::OperationNotAllowed);
133 self
134 }
135
136 /// Sets cursor style when hovering over an element to `context-menu`.
137 /// [Docs](https://tailwindcss.com/docs/cursor)
138 fn cursor_context_menu(mut self) -> Self {
139 self.style().mouse_cursor = Some(CursorStyle::ContextualMenu);
140 self
141 }
142
143 /// Sets cursor style when hovering over an element to `crosshair`.
144 /// [Docs](https://tailwindcss.com/docs/cursor)
145 fn cursor_crosshair(mut self) -> Self {
146 self.style().mouse_cursor = Some(CursorStyle::Crosshair);
147 self
148 }
149
150 /// Sets cursor style when hovering over an element to `vertical-text`.
151 /// [Docs](https://tailwindcss.com/docs/cursor)
152 fn cursor_vertical_text(mut self) -> Self {
153 self.style().mouse_cursor = Some(CursorStyle::IBeamCursorForVerticalLayout);
154 self
155 }
156
157 /// Sets cursor style when hovering over an element to `alias`.
158 /// [Docs](https://tailwindcss.com/docs/cursor)
159 fn cursor_alias(mut self) -> Self {
160 self.style().mouse_cursor = Some(CursorStyle::DragLink);
161 self
162 }
163
164 /// Sets cursor style when hovering over an element to `copy`.
165 /// [Docs](https://tailwindcss.com/docs/cursor)
166 fn cursor_copy(mut self) -> Self {
167 self.style().mouse_cursor = Some(CursorStyle::DragCopy);
168 self
169 }
170
171 /// Sets cursor style when hovering over an element to `no-drop`.
172 /// [Docs](https://tailwindcss.com/docs/cursor)
173 fn cursor_no_drop(mut self) -> Self {
174 self.style().mouse_cursor = Some(CursorStyle::OperationNotAllowed);
175 self
176 }
177
178 /// Sets cursor style when hovering over an element to `grab`.
179 /// [Docs](https://tailwindcss.com/docs/cursor)
180 fn cursor_grab(mut self) -> Self {
181 self.style().mouse_cursor = Some(CursorStyle::OpenHand);
182 self
183 }
184
185 /// Sets cursor style when hovering over an element to `grabbing`.
186 /// [Docs](https://tailwindcss.com/docs/cursor)
187 fn cursor_grabbing(mut self) -> Self {
188 self.style().mouse_cursor = Some(CursorStyle::ClosedHand);
189 self
190 }
191
192 /// Sets cursor style when hovering over an element to `col-resize`.
193 /// [Docs](https://tailwindcss.com/docs/cursor)
194 fn cursor_col_resize(mut self) -> Self {
195 self.style().mouse_cursor = Some(CursorStyle::ResizeLeftRight);
196 self
197 }
198
199 /// Sets cursor style when hovering over an element to `row-resize`.
200 /// [Docs](https://tailwindcss.com/docs/cursor)
201 fn cursor_row_resize(mut self) -> Self {
202 self.style().mouse_cursor = Some(CursorStyle::ResizeUpDown);
203 self
204 }
205
206 /// Sets cursor style when hovering over an element to `n-resize`.
207 /// [Docs](https://tailwindcss.com/docs/cursor)
208 fn cursor_n_resize(mut self) -> Self {
209 self.style().mouse_cursor = Some(CursorStyle::ResizeUp);
210 self
211 }
212
213 /// Sets cursor style when hovering over an element to `e-resize`.
214 /// [Docs](https://tailwindcss.com/docs/cursor)
215 fn cursor_e_resize(mut self) -> Self {
216 self.style().mouse_cursor = Some(CursorStyle::ResizeRight);
217 self
218 }
219
220 /// Sets cursor style when hovering over an element to `s-resize`.
221 /// [Docs](https://tailwindcss.com/docs/cursor)
222 fn cursor_s_resize(mut self) -> Self {
223 self.style().mouse_cursor = Some(CursorStyle::ResizeDown);
224 self
225 }
226
227 /// Sets cursor style when hovering over an element to `w-resize`.
228 /// [Docs](https://tailwindcss.com/docs/cursor)
229 fn cursor_w_resize(mut self) -> Self {
230 self.style().mouse_cursor = Some(CursorStyle::ResizeLeft);
231 self
232 }
233
234 /// Sets the whitespace of the element to `normal`.
235 /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
236 fn whitespace_normal(mut self) -> Self {
237 self.text_style()
238 .get_or_insert_with(Default::default)
239 .white_space = Some(WhiteSpace::Normal);
240 self
241 }
242
243 /// Sets the whitespace of the element to `nowrap`.
244 /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
245 fn whitespace_nowrap(mut self) -> Self {
246 self.text_style()
247 .get_or_insert_with(Default::default)
248 .white_space = Some(WhiteSpace::Nowrap);
249 self
250 }
251
252 /// Sets the flex direction of the element to `column`.
253 /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
254 fn flex_col(mut self) -> Self {
255 self.style().flex_direction = Some(FlexDirection::Column);
256 self
257 }
258
259 /// Sets the flex direction of the element to `column-reverse`.
260 /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
261 fn flex_col_reverse(mut self) -> Self {
262 self.style().flex_direction = Some(FlexDirection::ColumnReverse);
263 self
264 }
265
266 /// Sets the flex direction of the element to `row`.
267 /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
268 fn flex_row(mut self) -> Self {
269 self.style().flex_direction = Some(FlexDirection::Row);
270 self
271 }
272
273 /// Sets the flex direction of the element to `row-reverse`.
274 /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
275 fn flex_row_reverse(mut self) -> Self {
276 self.style().flex_direction = Some(FlexDirection::RowReverse);
277 self
278 }
279
280 /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
281 /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
282 fn flex_1(mut self) -> Self {
283 self.style().flex_grow = Some(1.);
284 self.style().flex_shrink = Some(1.);
285 self.style().flex_basis = Some(relative(0.).into());
286 self
287 }
288
289 /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
290 /// [Docs](https://tailwindcss.com/docs/flex#auto)
291 fn flex_auto(mut self) -> Self {
292 self.style().flex_grow = Some(1.);
293 self.style().flex_shrink = Some(1.);
294 self.style().flex_basis = Some(Length::Auto);
295 self
296 }
297
298 /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
299 /// [Docs](https://tailwindcss.com/docs/flex#initial)
300 fn flex_initial(mut self) -> Self {
301 self.style().flex_grow = Some(0.);
302 self.style().flex_shrink = Some(1.);
303 self.style().flex_basis = Some(Length::Auto);
304 self
305 }
306
307 /// Sets the element to prevent a flex item from growing or shrinking.
308 /// [Docs](https://tailwindcss.com/docs/flex#none)
309 fn flex_none(mut self) -> Self {
310 self.style().flex_grow = Some(0.);
311 self.style().flex_shrink = Some(0.);
312 self
313 }
314
315 /// Sets the initial size of flex items for this element.
316 /// [Docs](https://tailwindcss.com/docs/flex-basis)
317 fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
318 self.style().flex_basis = Some(basis.into());
319 self
320 }
321
322 /// Sets the element to allow a flex item to grow to fill any available space.
323 /// [Docs](https://tailwindcss.com/docs/flex-grow)
324 fn flex_grow(mut self) -> Self {
325 self.style().flex_grow = Some(1.);
326 self
327 }
328
329 /// Sets the element to allow a flex item to shrink if needed.
330 /// [Docs](https://tailwindcss.com/docs/flex-shrink)
331 fn flex_shrink(mut self) -> Self {
332 self.style().flex_shrink = Some(1.);
333 self
334 }
335
336 /// Sets the element to prevent a flex item from shrinking.
337 /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
338 fn flex_shrink_0(mut self) -> Self {
339 self.style().flex_shrink = Some(0.);
340 self
341 }
342
343 /// Sets the element to align flex items to the start of the container's cross axis.
344 /// [Docs](https://tailwindcss.com/docs/align-items#start)
345 fn items_start(mut self) -> Self {
346 self.style().align_items = Some(AlignItems::FlexStart);
347 self
348 }
349
350 /// Sets the element to align flex items to the end of the container's cross axis.
351 /// [Docs](https://tailwindcss.com/docs/align-items#end)
352 fn items_end(mut self) -> Self {
353 self.style().align_items = Some(AlignItems::FlexEnd);
354 self
355 }
356
357 /// Sets the element to align flex items along the center of the container's cross axis.
358 /// [Docs](https://tailwindcss.com/docs/align-items#center)
359 fn items_center(mut self) -> Self {
360 self.style().align_items = Some(AlignItems::Center);
361 self
362 }
363
364 /// Sets the element to justify flex items along the container's main axis
365 /// such that there is an equal amount of space between each item.
366 /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
367 fn justify_between(mut self) -> Self {
368 self.style().justify_content = Some(JustifyContent::SpaceBetween);
369 self
370 }
371
372 /// Sets the element to justify flex items along the center of the container's main axis.
373 /// [Docs](https://tailwindcss.com/docs/justify-content#center)
374 fn justify_center(mut self) -> Self {
375 self.style().justify_content = Some(JustifyContent::Center);
376 self
377 }
378
379 /// Sets the element to justify flex items against the start of the container's main axis.
380 /// [Docs](https://tailwindcss.com/docs/justify-content#start)
381 fn justify_start(mut self) -> Self {
382 self.style().justify_content = Some(JustifyContent::Start);
383 self
384 }
385
386 /// Sets the element to justify flex items against the end of the container's main axis.
387 /// [Docs](https://tailwindcss.com/docs/justify-content#end)
388 fn justify_end(mut self) -> Self {
389 self.style().justify_content = Some(JustifyContent::End);
390 self
391 }
392
393 /// Sets the element to justify items along the container's main axis such
394 /// that there is an equal amount of space on each side of each item.
395 /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
396 fn justify_around(mut self) -> Self {
397 self.style().justify_content = Some(JustifyContent::SpaceAround);
398 self
399 }
400
401 /// Sets the background color of the element.
402 fn bg<F>(mut self, fill: F) -> Self
403 where
404 F: Into<Fill>,
405 Self: Sized,
406 {
407 self.style().background = Some(fill.into());
408 self
409 }
410
411 /// Sets the border color of the element.
412 fn border_color<C>(mut self, border_color: C) -> Self
413 where
414 C: Into<Hsla>,
415 Self: Sized,
416 {
417 self.style().border_color = Some(border_color.into());
418 self
419 }
420
421 /// Sets the box shadow of the element.
422 /// [Docs](https://tailwindcss.com/docs/box-shadow)
423 fn shadow(mut self, shadows: SmallVec<[BoxShadow; 2]>) -> Self {
424 self.style().box_shadow = Some(shadows);
425 self
426 }
427
428 /// Clears the box shadow of the element.
429 /// [Docs](https://tailwindcss.com/docs/box-shadow)
430 fn shadow_none(mut self) -> Self {
431 self.style().box_shadow = Some(Default::default());
432 self
433 }
434
435 /// Sets the box shadow of the element.
436 /// [Docs](https://tailwindcss.com/docs/box-shadow)
437 fn shadow_sm(mut self) -> Self {
438 self.style().box_shadow = Some(smallvec::smallvec![BoxShadow {
439 color: hsla(0., 0., 0., 0.05),
440 offset: point(px(0.), px(1.)),
441 blur_radius: px(2.),
442 spread_radius: px(0.),
443 }]);
444 self
445 }
446
447 /// Sets the box shadow of the element.
448 /// [Docs](https://tailwindcss.com/docs/box-shadow)
449 fn shadow_md(mut self) -> Self {
450 self.style().box_shadow = Some(smallvec![
451 BoxShadow {
452 color: hsla(0.5, 0., 0., 0.1),
453 offset: point(px(0.), px(4.)),
454 blur_radius: px(6.),
455 spread_radius: px(-1.),
456 },
457 BoxShadow {
458 color: hsla(0., 0., 0., 0.1),
459 offset: point(px(0.), px(2.)),
460 blur_radius: px(4.),
461 spread_radius: px(-2.),
462 }
463 ]);
464 self
465 }
466
467 /// Sets the box shadow of the element.
468 /// [Docs](https://tailwindcss.com/docs/box-shadow)
469 fn shadow_lg(mut self) -> Self {
470 self.style().box_shadow = Some(smallvec![
471 BoxShadow {
472 color: hsla(0., 0., 0., 0.1),
473 offset: point(px(0.), px(10.)),
474 blur_radius: px(15.),
475 spread_radius: px(-3.),
476 },
477 BoxShadow {
478 color: hsla(0., 0., 0., 0.1),
479 offset: point(px(0.), px(4.)),
480 blur_radius: px(6.),
481 spread_radius: px(-4.),
482 }
483 ]);
484 self
485 }
486
487 /// Sets the box shadow of the element.
488 /// [Docs](https://tailwindcss.com/docs/box-shadow)
489 fn shadow_xl(mut self) -> Self {
490 self.style().box_shadow = Some(smallvec![
491 BoxShadow {
492 color: hsla(0., 0., 0., 0.1),
493 offset: point(px(0.), px(20.)),
494 blur_radius: px(25.),
495 spread_radius: px(-5.),
496 },
497 BoxShadow {
498 color: hsla(0., 0., 0., 0.1),
499 offset: point(px(0.), px(8.)),
500 blur_radius: px(10.),
501 spread_radius: px(-6.),
502 }
503 ]);
504 self
505 }
506
507 /// Sets the box shadow of the element.
508 /// [Docs](https://tailwindcss.com/docs/box-shadow)
509 fn shadow_2xl(mut self) -> Self {
510 self.style().box_shadow = Some(smallvec![BoxShadow {
511 color: hsla(0., 0., 0., 0.25),
512 offset: point(px(0.), px(25.)),
513 blur_radius: px(50.),
514 spread_radius: px(-12.),
515 }]);
516 self
517 }
518
519 /// Get the text style that has been configured on this element.
520 fn text_style(&mut self) -> &mut Option<TextStyleRefinement> {
521 let style: &mut StyleRefinement = self.style();
522 &mut style.text
523 }
524
525 /// Set the text color of this element, this value cascades to it's child elements.
526 fn text_color(mut self, color: impl Into<Hsla>) -> Self {
527 self.text_style().get_or_insert_with(Default::default).color = Some(color.into());
528 self
529 }
530
531 /// Set the font weight of this element, this value cascades to it's child elements.
532 fn font_weight(mut self, weight: FontWeight) -> Self {
533 self.text_style()
534 .get_or_insert_with(Default::default)
535 .font_weight = Some(weight);
536 self
537 }
538
539 /// Set the background color of this element, this value cascades to it's child elements.
540 fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
541 self.text_style()
542 .get_or_insert_with(Default::default)
543 .background_color = Some(bg.into());
544 self
545 }
546
547 /// Set the text size of this element, this value cascades to it's child elements.
548 fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
549 self.text_style()
550 .get_or_insert_with(Default::default)
551 .font_size = Some(size.into());
552 self
553 }
554
555 /// Set the text size to 'extra small',
556 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
557 fn text_xs(mut self) -> Self {
558 self.text_style()
559 .get_or_insert_with(Default::default)
560 .font_size = Some(rems(0.75).into());
561 self
562 }
563
564 /// Set the text size to 'small',
565 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
566 fn text_sm(mut self) -> Self {
567 self.text_style()
568 .get_or_insert_with(Default::default)
569 .font_size = Some(rems(0.875).into());
570 self
571 }
572
573 /// Reset the text styling for this element and it's children.
574 fn text_base(mut self) -> Self {
575 self.text_style()
576 .get_or_insert_with(Default::default)
577 .font_size = Some(rems(1.0).into());
578 self
579 }
580
581 /// Set the text size to 'large',
582 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
583 fn text_lg(mut self) -> Self {
584 self.text_style()
585 .get_or_insert_with(Default::default)
586 .font_size = Some(rems(1.125).into());
587 self
588 }
589
590 /// Set the text size to 'extra large',
591 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
592 fn text_xl(mut self) -> Self {
593 self.text_style()
594 .get_or_insert_with(Default::default)
595 .font_size = Some(rems(1.25).into());
596 self
597 }
598
599 /// Set the text size to 'extra-extra large',
600 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
601 fn text_2xl(mut self) -> Self {
602 self.text_style()
603 .get_or_insert_with(Default::default)
604 .font_size = Some(rems(1.5).into());
605 self
606 }
607
608 /// Set the text size to 'extra-extra-extra large',
609 /// see the [Tailwind Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
610 fn text_3xl(mut self) -> Self {
611 self.text_style()
612 .get_or_insert_with(Default::default)
613 .font_size = Some(rems(1.875).into());
614 self
615 }
616
617 /// Remove the text decoration on this element, this value cascades to it's child elements.
618 fn text_decoration_none(mut self) -> Self {
619 self.text_style()
620 .get_or_insert_with(Default::default)
621 .underline = None;
622 self
623 }
624
625 /// Set the color for the underline on this element
626 fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
627 let style = self.text_style().get_or_insert_with(Default::default);
628 let underline = style.underline.get_or_insert_with(Default::default);
629 underline.color = Some(color.into());
630 self
631 }
632
633 /// Set the underline to a solid line
634 fn text_decoration_solid(mut self) -> Self {
635 let style = self.text_style().get_or_insert_with(Default::default);
636 let underline = style.underline.get_or_insert_with(Default::default);
637 underline.wavy = false;
638 self
639 }
640
641 /// Set the underline to a wavy line
642 fn text_decoration_wavy(mut self) -> Self {
643 let style = self.text_style().get_or_insert_with(Default::default);
644 let underline = style.underline.get_or_insert_with(Default::default);
645 underline.wavy = true;
646 self
647 }
648
649 /// Set the underline to be 0 thickness, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
650 fn text_decoration_0(mut self) -> Self {
651 let style = self.text_style().get_or_insert_with(Default::default);
652 let underline = style.underline.get_or_insert_with(Default::default);
653 underline.thickness = px(0.);
654 self
655 }
656
657 /// Set the underline to be 1px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
658 fn text_decoration_1(mut self) -> Self {
659 let style = self.text_style().get_or_insert_with(Default::default);
660 let underline = style.underline.get_or_insert_with(Default::default);
661 underline.thickness = px(1.);
662 self
663 }
664
665 /// Set the underline to be 2px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
666 fn text_decoration_2(mut self) -> Self {
667 let style = self.text_style().get_or_insert_with(Default::default);
668 let underline = style.underline.get_or_insert_with(Default::default);
669 underline.thickness = px(2.);
670 self
671 }
672
673 /// Set the underline to be 4px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
674 fn text_decoration_4(mut self) -> Self {
675 let style = self.text_style().get_or_insert_with(Default::default);
676 let underline = style.underline.get_or_insert_with(Default::default);
677 underline.thickness = px(4.);
678 self
679 }
680
681 /// Set the underline to be 8px thick, see the [Tailwind Docs](https://tailwindcss.com/docs/text-decoration-thickness)
682 fn text_decoration_8(mut self) -> Self {
683 let style = self.text_style().get_or_insert_with(Default::default);
684 let underline = style.underline.get_or_insert_with(Default::default);
685 underline.thickness = px(8.);
686 self
687 }
688
689 /// Change the font on this element and it's children.
690 fn font(mut self, family_name: impl Into<SharedString>) -> Self {
691 self.text_style()
692 .get_or_insert_with(Default::default)
693 .font_family = Some(family_name.into());
694 self
695 }
696
697 /// Set the line height on this element and it's children.
698 fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
699 self.text_style()
700 .get_or_insert_with(Default::default)
701 .line_height = Some(line_height.into());
702 self
703 }
704
705 /// Draw a debug border around this element.
706 #[cfg(debug_assertions)]
707 fn debug(mut self) -> Self {
708 self.style().debug = Some(true);
709 self
710 }
711
712 /// Draw a debug border on all conforming elements below this element.
713 #[cfg(debug_assertions)]
714 fn debug_below(mut self) -> Self {
715 self.style().debug_below = Some(true);
716 self
717 }
718}