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