dioxus_tw_components/components/atoms/button/
style.rs

1use std::str::FromStr;
2
3use super::props::*;
4use crate::attributes::*;
5use dioxus::prelude::*;
6
7impl Class for ButtonProps {
8    fn base(&self) -> &'static str {
9        "text-center font-medium rounded-global-radius disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer select-none"
10    }
11
12    // Handled in variant
13    fn color(&self) -> Option<&'static str> {
14        Some("")
15    }
16
17    fn size(&self) -> Option<&'static str> {
18        Some(match *self.size.read() {
19            Size::Xs => "h-4 px-2 text-xs",
20            Size::Sm => "h-7 px-3 py-1 text-sm",
21            Size::Md => "h-9 px-4 py-2 text-sm",
22            Size::Lg => "h-11 px-7 py-2 text-lg",
23            Size::Xl => "h-14 px-9 py-3 text-xl",
24        })
25    }
26
27    fn variant(&self) -> Option<&'static str> {
28        Some(match *self.variant.read() {
29            ButtonVariant::Default => match *self.color.read() {
30                Color::Default => {
31                    "bg-foreground text-background hover:bg-foreground/80 active:bg-foreground/70 active:shadow-sm"
32                }
33                Color::Primary => {
34                    "bg-primary text-primary-foreground border-primary hover:bg-primary/90 active:bg-primary/80 active:shadow-sm"
35                }
36                Color::Secondary => {
37                    "bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/90 active:bg-secondary/80 active:shadow-sm"
38                }
39                Color::Destructive => {
40                    "bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90 active:bg-destructive/80 active:shadow-sm"
41                }
42                Color::Success => {
43                    "bg-success text-success-foreground border-success hover:bg-success/90 active:bg-success/80 active:shadow-sm"
44                }
45                Color::Accent => {
46                    "bg-accent text-accent-foreground border-accent hover:bg-accent/90 active:bg-accent/80 active:shadow-sm"
47                }
48                Color::Muted => {
49                    "bg-muted text-muted-foreground border-muted hover:bg-muted/90 active:bg-muted/80 active:shadow-sm"
50                }
51            },
52            ButtonVariant::Outline => match *self.color.read() {
53                Color::Default => {
54                    "border bg-transparent border-foreground text-foreground hover:bg-foreground/40"
55                }
56                Color::Primary => {
57                    "border bg-transparent border-primary text-primary hover:bg-primary/90 hover:text-primary-foreground"
58                }
59                Color::Secondary => {
60                    "border bg-transparent border-secondary text-secondary hover:bg-secondary/90 hover:text-secondary-foreground"
61                }
62                Color::Destructive => {
63                    "border bg-transparent border-destructive text-destructive hover:bg-destructive/90 hover:text-destructive-foreground"
64                }
65                Color::Success => {
66                    "border bg-transparent border-success text-success hover:bg-success/90 hover:text-success-foreground"
67                }
68                Color::Accent => {
69                    "border bg-transparent border-accent text-accent hover:bg-accent/90 hover:text-accent-foreground"
70                }
71                Color::Muted => {
72                    "border bg-transparent border-muted text-muted hover:bg-muted/90 hover:text-muted-foreground"
73                }
74            },
75            ButtonVariant::Ghost => match *self.color.read() {
76                Color::Default => {
77                    "bg-transparent border-foreground text-foreground hover:bg-foreground/40"
78                }
79                Color::Primary => {
80                    "bg-transparent border-primary text-primary hover:bg-primary/90 hover:text-primary-foreground active:shadow-sm"
81                }
82                Color::Secondary => {
83                    "bg-transparent border-secondary text-secondary hover:bg-secondary/90 hover:text-secondary-foreground active:shadow-sm"
84                }
85                Color::Destructive => {
86                    "bg-transparent border-destructive text-destructive hover:bg-destructive/90 hover:text-destructive-foreground active:shadow-sm"
87                }
88                Color::Success => {
89                    "bg-transparent border-success text-success hover:bg-success/90 hover:text-success-foreground active:shadow-sm"
90                }
91                Color::Accent => {
92                    "bg-transparent border-accent text-accent hover:bg-accent/90 hover:text-accent-foreground active:shadow-sm"
93                }
94                Color::Muted => {
95                    "bg-transparent border-muted text-muted hover:bg-muted/90 hover:text-muted-foreground active:shadow-sm"
96                }
97            },
98        })
99    }
100
101    fn animation(&self) -> Option<&'static str> {
102        Some(match *self.animation.read() {
103            Animation::None => "",
104            Animation::Light | Animation::Full => "transition-colors duration-150",
105            // Animation::Full => "relative z-30 after:-z-20 after:absolute after:h-1 after:w-1 after:bg-background/80 after:left-5 overflow-hidden after:bottom-0 after:translate-y-full after:rounded-md hover:after:scale-300 hover:after:transition-all hover:after:duration-700 after:transition-all after:duration-700 transition-all duration-700",
106        })
107    }
108}
109
110#[derive(Default, Clone, Copy, PartialEq)]
111pub enum ButtonVariant {
112    #[default]
113    Default,
114    Outline,
115    Ghost,
116}
117
118impl FromStr for ButtonVariant {
119    type Err = &'static str;
120
121    fn from_str(s: &str) -> Result<Self, Self::Err> {
122        match s {
123            "outline" => Ok(ButtonVariant::Outline),
124            "ghost" => Ok(ButtonVariant::Ghost),
125            _ => Ok(ButtonVariant::Default),
126        }
127    }
128}
129
130impl std::fmt::Display for ButtonVariant {
131    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
132        let s = match self {
133            ButtonVariant::Default => "Default",
134            ButtonVariant::Outline => "Outline",
135            ButtonVariant::Ghost => "Ghost",
136        };
137        f.write_str(s)
138    }
139}
dioxus_tw_components/components/atoms/button/style.rs

dioxus_tw_components/components/atoms/button/
style.rs
