From 89d2ee158e9391fa4c04b9e4d4c3e2449b50acbb Mon Sep 17 00:00:00 2001
From: kandrelczyk <cristof@curiana.net>
Date: Sun, 3 Dec 2023 15:43:39 +0100
Subject: [PATCH] Feature/button disabled theme (#34)

* Proper handling of disabled buttons

* Proper handling of disabled buttons

* Proper handling of disabled buttons

* disabled button - additional theme colors

* disabled button - additional theme colors

---------

Co-authored-by: Cristobal Andrada <kandrelczyk@gmail.com>
---
 src/button/button.css | 10 ++++++----
 src/button/mod.rs     | 18 ++++++++++++++++++
 src/button/theme.rs   |  9 +++++++++
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/button/button.css b/src/button/button.css
index 8171afc..67091e2 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -21,6 +21,12 @@
 }
 
 .thaw-button--disabled:not(.thaw-button--text) {
+    border-color: var(--thaw-border-color-disabled);
+    background-color: var(--thaw-background-color-disabled);
+}
+
+.thaw-button--disabled {
+    color: var(--thaw-font-color-disabled);
     cursor: not-allowed;
 }
 
@@ -39,10 +45,6 @@
     color: var(--thaw-font-color-hover);
 }
 
-.thaw-button--text.thaw-button--disabled {
-    cursor: not-allowed;
-}
-
 .thaw-button--link {
     height: auto;
     padding: inherit;
diff --git a/src/button/mod.rs b/src/button/mod.rs
index e2c2848..5ba0926 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -72,6 +72,10 @@ pub fn Button(
         let mut css_vars = String::new();
         theme.with(|theme| {
             let bg_color = color.get().theme_color(theme);
+            css_vars.push_str(&format!(
+                "--thaw-font-color-disabled: {};",
+                theme.button.color_text_disabled
+            ));
             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);
@@ -84,6 +88,16 @@ pub fn Button(
                 css_vars.push_str(&format!("--thaw-border-color: {bg_color};"));
                 css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
                 css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
+
+                css_vars.push_str(&format!(
+                    "--thaw-background-color-disabled: {};",
+                    theme.button.color_background_disabled
+                ));
+                css_vars.push_str(&format!(
+                    "--thaw-border-color-disabled: {};",
+                    theme.button.color_border_disabled
+                ));
+
             } else if variant.get() == ButtonVariant::Text {
                 css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
                 css_vars.push_str(&format!(
@@ -100,6 +114,10 @@ pub fn Button(
                 css_vars.push_str("--thaw-border-color: #555a;");
                 css_vars.push_str("--thaw-border-color-hover: #555;");
                 css_vars.push_str("--thaw-ripple-color: #0000;");
+                css_vars.push_str(&format!(
+                    "--thaw-border-color-disabled: {};",
+                    theme.button.color_border_disabled
+                ));
             }
         });
 
diff --git a/src/button/theme.rs b/src/button/theme.rs
index 5b6ce14..1b81224 100644
--- a/src/button/theme.rs
+++ b/src/button/theme.rs
@@ -4,6 +4,9 @@ use crate::theme::ThemeMethod;
 pub struct ButtonTheme {
     pub color_text_hover: String,
     pub color_text_active: String,
+    pub color_text_disabled: String,
+    pub color_background_disabled: String,
+    pub color_border_disabled: String
 }
 
 impl ThemeMethod for ButtonTheme {
@@ -11,6 +14,9 @@ impl ThemeMethod for ButtonTheme {
         Self {
             color_text_hover: "#f1f3f5".into(),
             color_text_active: "#eceef0".into(),
+            color_text_disabled: "#00000040".into(),
+            color_background_disabled: "#0000000a".into(),
+            color_border_disabled: "#d9d9d9".into(),
         }
     }
 
@@ -18,6 +24,9 @@ impl ThemeMethod for ButtonTheme {
         Self {
             color_text_hover: "#ffffff1a".into(),
             color_text_active: "#ffffff26".into(),
+            color_text_disabled: "#4c5155".into(),
+            color_background_disabled: "#2b2f31".into(),
+            color_border_disabled: "#2b2f31".into(),
         }
     }
 }