From fc6423f22cf375df32757544d2ef71983988f280 Mon Sep 17 00:00:00 2001 From: Floyd Wang Date: Tue, 30 Jul 2024 10:38:42 +0800 Subject: [PATCH] Add `ButtonCustomStyle` for customized color (#85) --- crates/ui/src/button.rs | 53 +++++++++++++++++++++++++++++++++++++++++ crates/ui/src/theme.rs | 47 ------------------------------------ 2 files changed, 53 insertions(+), 47 deletions(-) diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs index a23c0271..5de165ff 100644 --- a/crates/ui/src/button.rs +++ b/crates/ui/src/button.rs @@ -24,6 +24,52 @@ impl From for ButtonRounded { } } +#[derive(Clone, Copy)] +pub struct ButtonCustomStyle { + color: Hsla, + foreground: Hsla, + border: Hsla, + hover: Hsla, + active: Hsla, +} + +impl ButtonCustomStyle { + pub fn new(cx: &WindowContext) -> Self { + Self { + color: cx.theme().secondary, + foreground: cx.theme().secondary_foreground, + border: cx.theme().border, + hover: cx.theme().secondary_hover, + active: cx.theme().secondary_active, + } + } + + pub fn color(mut self, color: Hsla) -> Self { + self.color = color; + self + } + + pub fn foreground(mut self, color: Hsla) -> Self { + self.foreground = color; + self + } + + pub fn border(mut self, color: Hsla) -> Self { + self.border = color; + self + } + + pub fn hover(mut self, color: Hsla) -> Self { + self.hover = color; + self + } + + pub fn active(mut self, color: Hsla) -> Self { + self.active = color; + self + } +} + #[derive(Clone, Copy)] pub enum ButtonStyle { Primary, @@ -31,6 +77,7 @@ pub enum ButtonStyle { Danger, Outline, Ghost, + Custom(ButtonCustomStyle), } #[derive(IntoElement)] @@ -306,6 +353,7 @@ impl ButtonStyle { ButtonStyle::Danger => cx.theme().destructive, ButtonStyle::Outline => cx.theme().transparent, ButtonStyle::Ghost => cx.theme().transparent, + ButtonStyle::Custom(colors) => colors.color, } } @@ -316,6 +364,7 @@ impl ButtonStyle { ButtonStyle::Danger => cx.theme().destructive_foreground, ButtonStyle::Outline => cx.theme().secondary_foreground, ButtonStyle::Ghost => cx.theme().secondary_foreground, + ButtonStyle::Custom(colors) => colors.foreground, } } @@ -326,6 +375,7 @@ impl ButtonStyle { ButtonStyle::Danger => cx.theme().destructive, ButtonStyle::Outline => cx.theme().border, ButtonStyle::Ghost => cx.theme().transparent, + ButtonStyle::Custom(colors) => colors.border, } } @@ -344,6 +394,7 @@ impl ButtonStyle { ButtonStyle::Danger => cx.theme().destructive_hover, ButtonStyle::Outline => cx.theme().secondary_hover, ButtonStyle::Ghost => cx.theme().secondary, + ButtonStyle::Custom(colors) => colors.hover, }; let border = self.border_color(cx); let fg = self.text_color(cx); @@ -358,6 +409,7 @@ impl ButtonStyle { ButtonStyle::Danger => cx.theme().destructive_active, ButtonStyle::Outline => cx.theme().secondary_active, ButtonStyle::Ghost => cx.theme().secondary_active, + ButtonStyle::Custom(colors) => colors.active, }; let border = self.border_color(cx); let fg = self.text_color(cx); @@ -372,6 +424,7 @@ impl ButtonStyle { ButtonStyle::Danger => cx.theme().destructive_active, ButtonStyle::Outline => cx.theme().secondary_active, ButtonStyle::Ghost => cx.theme().secondary_active, + ButtonStyle::Custom(colors) => colors.active, }; let border = self.border_color(cx); let fg = self.text_color(cx); diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index c39bd8bb..ea465e11 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -164,30 +164,6 @@ struct Colors { } impl Colors { - // .light { - // --title_bar_background: 0 0% 100%; - // --background: 0 0% 100%; - // --foreground: 240 10% 3.9%; - // --card: 0 0% 100%; - // --card-foreground: 240 10% 3.9%; - // --popover: 0 0% 100%; - // --popover-foreground: 240 10% 3.9%; - // --primary: 240 5.9% 10%; - // --primary-foreground: 0 0% 98%; - // --secondary: 240 4.8% 95.9%; - // --secondary-foreground: 240 5.9% 10%; - // --muted: 240 4.8% 95.9%; - // --muted-foreground: 240 3.8% 46.1%; - // --accent: 240 4.8% 95.9%; - // --accent-foreground: 240 5.9% 10%; - // --destructive: 0 84.2% 60.2%; - // --destructive-foreground: 0 0% 98%; - // --border: 240 5.9% 90%; - // --input: 240 5.9% 90%; - // --ring: 240 5.9% 10%; - // --radius: 0rem; - // --selection: 211 97% 85%; - // } fn light() -> Colors { Colors { title_bar_background: hsl(0.0, 0.0, 100.), @@ -228,29 +204,6 @@ impl Colors { } } - // .dark { - // --title_bar_background: 0 0% 12%; - // --background: 240 10% 3.9%; - // --foreground: 0 0% 98%; - // --card: 240 10% 3.9%; - // --card-foreground: 0 0% 98%; - // --popover: 240 10% 3.9%; - // --popover-foreground: 0 0% 98%; - // --primary: 0 0% 98%; - // --primary-foreground: 240 5.9% 10%; - // --secondary: 240 3.7% 15.9%; - // --secondary-foreground: 0 0% 98%; - // --muted: 240 3.7% 15.9%; - // --muted-foreground: 240 5% 64.9%; - // --accent: 240 3.7% 15.9%; - // --accent-foreground: 0 0% 98%; - // --destructive: 0 62.8% 30.6%; - // --destructive-foreground: 0 0% 98%; - // --border: 240 3.7% 15.9%; - // --input: 240 3.7% 15.9%; - // --ring: 240 4.9% 83.9%; - // --selection: 211 97% 85%; - // } fn dark() -> Colors { Colors { title_bar_background: hsl(0., 0., 12.),