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

@@ -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;

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
+                ));
             }
         });
 

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(),
         }
     }
 }