From 6fff3b22c2655b465ad1fab383b32f5ead3ceb41 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 26 Oct 2023 18:03:24 +0800
Subject: [PATCH] feat: theme

---
 demo/src/pages/grid/mod.rs  |  4 ++--
 src/button/button.css       |  1 -
 src/button/mod.rs           | 43 +++++++++++++++++++++++--------------
 src/button/theme.rs         | 15 ++++++++++---
 src/card/card.css           |  6 +++---
 src/card/mod.rs             | 19 ++++++++++++++--
 src/layout/layout-sider.css |  2 +-
 src/menu/theme.rs           |  6 +++---
 8 files changed, 65 insertions(+), 31 deletions(-)

diff --git a/demo/src/pages/grid/mod.rs b/demo/src/pages/grid/mod.rs
index e791f70..a89d513 100644
--- a/demo/src/pages/grid/mod.rs
+++ b/demo/src/pages/grid/mod.rs
@@ -8,10 +8,10 @@ pub fn GridPage() -> impl IntoView {
     mount_style(
         "grid-demo",
         r#".melt-grid-item {
-        height: 130px;
+        height: 60px;
         color: white;
         text-align: center;
-        line-height: 130px;
+        line-height: 60px;
       }
       .melt-grid-item:nth-child(odd) {
         background-color: #3d8ae5dd;
diff --git a/src/button/button.css b/src/button/button.css
index 4470acf..b3bb2d6 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -33,7 +33,6 @@
 
 .melt-button--text:hover {
     color: var(--font-color-hover);
-    background-color: #f2f2f2;
 }
 
 .melt-button--link {
diff --git a/src/button/mod.rs b/src/button/mod.rs
index ad0c255..468751a 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -65,22 +65,33 @@ pub fn Button(
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         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);
-        let bg_color_active = color.get().theme_color_active(&theme);
-        if variant.get() == ButtonVariant::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!("--background-color-active: {bg_color_active};"));
-            css_vars.push_str("--font-color: #fff;");
-            css_vars.push_str(&format!("--border-color: {bg_color};"));
-            css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
-        } else {
-            css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
-            css_vars.push_str("--border-color: #555a;");
-            css_vars.push_str("--border-color-hover: #555;");
-        }
+        theme.with(|theme| {
+            let bg_color = color.get().theme_color(&theme);
+            if variant.get() == ButtonVariant::Primary {
+                let bg_color_hover = color.get().theme_color_hover(&theme);
+                let bg_color_active = color.get().theme_color_active(&theme);
+                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!("--background-color-active: {bg_color_active};"));
+                css_vars.push_str("--font-color: #fff;");
+                css_vars.push_str(&format!("--border-color: {bg_color};"));
+                css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
+            } else if variant.get() == ButtonVariant::Text {
+                css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
+                css_vars.push_str(&format!(
+                    "--background-color-hover: {};",
+                    theme.button.color_text_hover
+                ));
+                css_vars.push_str(&format!(
+                    "--background-color-active: {};",
+                    theme.button.color_text_active
+                ));
+            } else {
+                css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
+                css_vars.push_str("--border-color: #555a;");
+                css_vars.push_str("--border-color-hover: #555;");
+            }
+        });
 
         css_vars
     });
diff --git a/src/button/theme.rs b/src/button/theme.rs
index 9281a8e..5b6ce14 100644
--- a/src/button/theme.rs
+++ b/src/button/theme.rs
@@ -1,14 +1,23 @@
 use crate::theme::ThemeMethod;
 
 #[derive(Clone)]
-pub struct ButtonTheme {}
+pub struct ButtonTheme {
+    pub color_text_hover: String,
+    pub color_text_active: String,
+}
 
 impl ThemeMethod for ButtonTheme {
     fn light() -> Self {
-        Self {}
+        Self {
+            color_text_hover: "#f1f3f5".into(),
+            color_text_active: "#eceef0".into(),
+        }
     }
 
     fn dark() -> Self {
-        Self {}
+        Self {
+            color_text_hover: "#ffffff1a".into(),
+            color_text_active: "#ffffff26".into(),
+        }
     }
 }
diff --git a/src/card/card.css b/src/card/card.css
index 281b7d5..7133586 100644
--- a/src/card/card.css
+++ b/src/card/card.css
@@ -1,7 +1,7 @@
 .melt-card {
     display: flex;
     flex-direction: column;
-    border: 1px solid #efeff5;
+    border: 1px solid var(--melt-border-color);
     border-radius: 3px;
     overflow: hidden;
 }
@@ -21,12 +21,12 @@
 .melt-card__content,
 .melt-card__footer {
     padding: 12px 28px;
-    background-color: #fff;
+    background-color: var(--melt-background-color);
 }
 .melt-card__header {
     padding: 20px 28px;
 }
-.melt-card__header+.melt-card__content,
+.melt-card__header + .melt-card__content,
 .melt-card__footer {
     padding: 0 28px 20px;
 }
diff --git a/src/card/mod.rs b/src/card/mod.rs
index bc16d1b..4c7c6e0 100644
--- a/src/card/mod.rs
+++ b/src/card/mod.rs
@@ -1,4 +1,4 @@
-use crate::{components::*, utils::mount_style::mount_style};
+use crate::{components::*, use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
 
 #[derive(Clone)]
@@ -29,6 +29,21 @@ pub fn Card(
     #[prop(optional)] card_footer: Option<CardFooter>,
 ) -> impl IntoView {
     mount_style("card", include_str!("./card.css"));
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--melt-background-color: {};",
+                theme.common.background_color
+            ));
+            css_vars.push_str(&format!(
+                "--melt-border-color: {};",
+                theme.common.border_color
+            ));
+        });
+        css_vars
+    });
 
     let title = store_value(title);
     let is_header = card_header.is_some();
@@ -37,7 +52,7 @@ pub fn Card(
     let header_extra = store_value(card_header_extra);
 
     view! {
-        <div class="melt-card">
+        <div class="melt-card" style=move || css_vars.get()>
             <If cond=is_header>
                 <Then slot>
                     <div class="melt-card__header">
diff --git a/src/layout/layout-sider.css b/src/layout/layout-sider.css
index 2fbf491..35478bb 100644
--- a/src/layout/layout-sider.css
+++ b/src/layout/layout-sider.css
@@ -1,5 +1,5 @@
 .melt-layout-sider {
     position: relative;
-    min-width: 208px;
+    min-width: 240px;
     overflow: auto;
 }
diff --git a/src/menu/theme.rs b/src/menu/theme.rs
index e4b922f..0305d69 100644
--- a/src/menu/theme.rs
+++ b/src/menu/theme.rs
@@ -18,9 +18,9 @@ impl ThemeMethod for MenuTheme {
 
     fn dark() -> Self {
         Self {
-            color: "#4b5263".into(),
-            item_color_hover: "#f3f5f6".into(),
-            group_color: "#111727".into(),
+            color: "#9ca5b0".into(),
+            item_color_hover: "#383f5233".into(),
+            group_color: "#ffffffe6".into(),
         }
     }
 }