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