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