dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add ButtonCustomStyle for customized color (#85)

Browse source
This commit is contained in:
Floyd Wang 2024-07-30 10:38:42 +08:00 committed by GitHub
parent f496c241d7
commit fc6423f22c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 53 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
crates/ui/src/button.rs
View file

@ -24,6 +24,52 @@ impl From<Pixels> 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);

47
crates/ui/src/theme.rs
View file

@ -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.),