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

button: Fix Button disabled style. (#394)

Browse source 
- Fix `lighten`, `darken` method for Hsla.
<img width="619" alt="image"
src="https://github.com/user-attachments/assets/75c64f46-1551-4abf-8521-f0b9c90682d2">
<img width="620" alt="image"
src="https://github.com/user-attachments/assets/9f3655ba-1506-4e58-aa20-b17546fbc215">
This commit is contained in:
Jason Lee 2024-11-05 14:36:05 +08:00 committed by GitHub
parent 852c38f42c
commit 26211000f7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -423,6 +423,7 @@ impl RenderOnce for Button {
.bg(disabled_style.bg)
.text_color(disabled_style.fg)
.border_color(disabled_style.border)
.shadow_none()
})
.child({
h_flex()
@ -539,7 +540,13 @@ impl ButtonStyle {
ButtonStyle::Primary => cx.theme().primary_hover,
ButtonStyle::Secondary | ButtonStyle::Outline => cx.theme().secondary_hover,
ButtonStyle::Danger => cx.theme().destructive_hover,
ButtonStyle::Ghost => cx.theme().secondary_hover,
ButtonStyle::Ghost => {
if cx.theme().mode.is_dark() {
cx.theme().secondary.lighten(0.1).opacity(0.8)
} else {
cx.theme().secondary.darken(0.1).opacity(0.8)
}
}
ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.hover,
@ -621,22 +628,28 @@ impl ButtonStyle {
fn disabled(&self, cx: &WindowContext) -> ButtonStyles {
let bg = match self {
ButtonStyle::Link | ButtonStyle::Ghost | ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Link | ButtonStyle::Ghost | ButtonStyle::Outline | ButtonStyle::Text => {
cx.theme().transparent
}
ButtonStyle::Primary => cx.theme().primary.opacity(0.15),
ButtonStyle::Danger => cx.theme().destructive.opacity(0.15),
ButtonStyle::Secondary => cx.theme().secondary.opacity(1.5),
ButtonStyle::Custom(style) => style.color.opacity(0.15),
_ => cx.theme().secondary.darken(0.2).grayscale(),
};
let fg = match self {
ButtonStyle::Link | ButtonStyle::Text | ButtonStyle::Ghost => {
cx.theme().link.grayscale()
}
_ => cx.theme().secondary_foreground.darken(0.2).grayscale(),
_ => cx.theme().secondary_foreground.opacity(0.5).grayscale(),
};
let border = match self {
ButtonStyle::Outline => cx.theme().border.opacity(0.5),
_ => bg,
};
let border = bg;
let underline = self.underline(cx);
let shadow = self.shadow(cx);
let shadow = false;
ButtonStyles {
bg,

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

@ -118,14 +118,14 @@ impl Colorize for Hsla {
/// Return a new color with the lightness increased by the given factor.
fn lighten(&self, factor: f32) -> Hsla {
let l = (self.l * 1.0 - factor.clamp(0.0, 1.0)).min(1.0);
let l = self.l + (1.0 - self.l) * factor.clamp(0.0, 1.0).min(1.0);
Hsla { l, ..*self }
}
/// Return a new color with the darkness increased by the given factor.
fn darken(&self, factor: f32) -> Hsla {
let l = (self.l * 1.0 - factor.clamp(0.0, 1.0)).max(0.0);
let l = self.l * (1.0 - factor.clamp(0.0, 1.0).min(1.0));
Hsla { l, ..*self }
}
@ -239,9 +239,9 @@ impl Colors {
primary_hover: hsl(223.0, 0.0, 90.0),
primary_active: hsl(223.0, 0.0, 80.0),
primary_foreground: hsl(223.0, 5.9, 10.0),
secondary: hsl(240.0, 3.7, 17.9),
secondary_hover: hsl(240.0, 3.7, 22.9).opacity(0.5),
secondary_active: hsl(240.0, 3.7, 22.9).opacity(0.8),
secondary: hsl(240.0, 0., 13.0),
secondary_hover: hsl(240.0, 0., 15.),
secondary_active: hsl(240.0, 0., 10.),
secondary_foreground: hsl(0.0, 0.0, 78.0),
destructive: hsl(0.0, 62.8, 30.6),
destructive_hover: hsl(0.0, 62.8, 35.6),