adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feature/button disabled theme (#34)

Browse source 
* 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>
This commit is contained in:
kandrelczyk 2023-12-03 15:43:39 +01:00 • committed by GitHub
parent cd70d80795
commit 89d2ee158e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/button/button.css
View file

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

18
src/button/mod.rs
View file

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

9
src/button/theme.rs
View file

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