From 433a90bfdb57a61bb280740c38e93c00fa6c320b Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Sun, 17 Sep 2023 23:10:33 +0800
Subject: [PATCH] feat: button hover

---
 src/button/button.css |  3 ++-
 src/button/mod.rs     | 10 ++++++++++
 src/theme/common.rs   | 16 ++++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/button/button.css b/src/button/button.css
index fc325d3..16c800b 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -16,6 +16,7 @@
 .melt-button:hover {
     transition: all 0.3s;
     border-color: var(--border-color-hover);
+    background-color: var(--background-color-hover);
 }
 
 .melt-button--text,
@@ -35,4 +36,4 @@
 .melt-button--round {
     padding: 0 10px;
     border-radius: 50%;
-}
\ No newline at end of file
+}
diff --git a/src/button/mod.rs b/src/button/mod.rs
index 0fc82f7..0ad4853 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -31,6 +31,14 @@ impl ButtonColor {
             ButtonColor::ERROR => theme.common.color_error.clone(),
         }
     }
+    pub fn theme_color_hover(&self, theme: &Theme) -> String {
+        match self {
+            ButtonColor::PRIMARY => theme.common.color_primary_hover.clone(),
+            ButtonColor::SUCCESS => theme.common.color_success_hover.clone(),
+            ButtonColor::WARNING => theme.common.color_warning_hover.clone(),
+            ButtonColor::ERROR => theme.common.color_error_hover.clone(),
+        }
+    }
 }
 
 #[component]
@@ -47,8 +55,10 @@ pub fn Button(
         let mut css_vars = String::new();
         let theme = theme.get();
         let bg_color = color.get().theme_color(&theme);
+        let bg_color_hover = color.get().theme_color_hover(&theme);
         if type_.get() == ButtonType::PRIMARY {
             css_vars.push_str(&format!("--background-color: {bg_color};"));
+            css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};"));
             css_vars.push_str(&format!("--font-color: #fff;"));
             css_vars.push_str(&format!("--border-color: {bg_color};"));
             css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
diff --git a/src/theme/common.rs b/src/theme/common.rs
index 7f3bbf4..37688d7 100644
--- a/src/theme/common.rs
+++ b/src/theme/common.rs
@@ -5,9 +5,13 @@ pub struct CommonTheme {
     pub font_family: String,
 
     pub color_primary: String,
+    pub color_primary_hover: String,
     pub color_success: String,
+    pub color_success_hover: String,
     pub color_warning: String,
+    pub color_warning_hover: String,
     pub color_error: String,
+    pub color_error_hover: String,
 
     pub font_size: String,
     pub font_size_small: String,
@@ -32,9 +36,13 @@ impl CommonTheme {
         Self {
             font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(),
             color_primary: "".into(),
+            color_primary_hover: "".into(),
             color_success: "".into(),
+            color_success_hover: "".into(),
             color_warning: "".into(),
+            color_warning_hover: "".into(),
             color_error: "".into(),
+            color_error_hover: "".into(),
             font_size: "14px".into(),
             font_size_small: "12px".into(),
             font_size_medium: "16px".into(),
@@ -57,18 +65,26 @@ impl ThemeMethod for CommonTheme {
     fn light() -> Self {
         Self {
             color_primary: "#f5222d".into(),
+            color_primary_hover: "#ff4d4f".into(),
             color_success: "#18a058".into(),
+            color_success_hover: "#36ad6a".into(),
             color_warning: "#f0a020".into(),
+            color_warning_hover: "#fcb040".into(),
             color_error: "#d03050".into(),
+            color_error_hover: "#de576d".into(),
             ..CommonTheme::common()
         }
     }
     fn dark() -> Self {
         Self {
             color_primary: "#d32029".into(),
+            color_primary_hover: "#e04648".into(),
             color_success: "#18a058".into(),
+            color_success_hover: "".into(),
             color_warning: "#f0a020".into(),
+            color_warning_hover: "#fcb040".into(),
             color_error: "#d03050".into(),
+            color_error_hover: "#de576d".into(),
             ..CommonTheme::common()
         }
     }