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