shadow_design/
typography.rs

1use dioxus::prelude::*;
2
3#[derive(Clone, Copy, PartialEq, Debug, Default)]
4pub enum HeadingOrder {
5    #[default]
6    H1,
7    H2,
8    H3,
9    H4,
10    H5,
11    H6,
12}
13
14impl HeadingOrder {
15    pub fn scss_class(&self) -> &'static str {
16        match self {
17            HeadingOrder::H1 => "sd-heading--h1",
18            HeadingOrder::H2 => "sd-heading--h2",
19            HeadingOrder::H3 => "sd-heading--h3",
20            HeadingOrder::H4 => "sd-heading--h4",
21            HeadingOrder::H5 => "sd-heading--h5",
22            HeadingOrder::H6 => "sd-heading--h6",
23        }
24    }
25}
26
27#[component]
28pub fn Heading(
29    #[props(default)] order: HeadingOrder,
30    #[props(default)] class: String,
31    children: Element,
32) -> Element {
33    let order_class = order.scss_class();
34
35    match order {
36        HeadingOrder::H1 => rsx! { h1 { class: "sd-heading {order_class} {class}", {children} } },
37        HeadingOrder::H2 => rsx! { h2 { class: "sd-heading {order_class} {class}", {children} } },
38        HeadingOrder::H3 => rsx! { h3 { class: "sd-heading {order_class} {class}", {children} } },
39        HeadingOrder::H4 => rsx! { h4 { class: "sd-heading {order_class} {class}", {children} } },
40        HeadingOrder::H5 => rsx! { h5 { class: "sd-heading {order_class} {class}", {children} } },
41        HeadingOrder::H6 => rsx! { h6 { class: "sd-heading {order_class} {class}", {children} } },
42    }
43}
44
45#[derive(Clone, Copy, PartialEq, Debug, Default)]
46pub enum TextSize {
47    Xs,
48    Sm,
49    #[default]
50    Md,
51    Lg,
52    Xl,
53}
54
55impl TextSize {
56    pub fn scss_class(&self) -> &'static str {
57        match self {
58            TextSize::Xs => "sd-text--xs",
59            TextSize::Sm => "sd-text--sm",
60            TextSize::Md => "sd-text--md",
61            TextSize::Lg => "sd-text--lg",
62            TextSize::Xl => "sd-text--xl",
63        }
64    }
65}
66
67#[component]
68pub fn Text(
69    #[props(default)] size: TextSize,
70    #[props(default)] dimmed: bool,
71    #[props(default)] class: String,
72    children: Element,
73) -> Element {
74    let size_class = size.scss_class();
75    let dimmed_class = if dimmed { "sd-text--dimmed" } else { "" };
76
77    rsx! {
78        p {
79            class: "sd-text {size_class} {dimmed_class} {class}",
80            {children}
81        }
82    }
83}
84
85#[component]
86pub fn Kbd(#[props(default)] class: String, children: Element) -> Element {
87    rsx! {
88        kbd {
89            class: "sd-kbd {class}",
90            {children}
91        }
92    }
93}
94
95#[component]
96pub fn Code(#[props(default)] class: String, children: Element) -> Element {
97    rsx! {
98        code {
99            class: "sd-code {class}",
100            {children}
101        }
102    }
103}
shadow_design/typography.rs

shadow_design/
typography.rs
