theme: Add color darken function (#20746)

This PR adds a `darken` function that allows to reduce the lightness of
a color by a certain factor. This popped up as I wanted to add hover
styles to tinted-colors buttons.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2024-11-18 12:44:49 -03:00 committed by GitHub
parent 3f905d57e5
commit 0e7770a9a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 1 deletions

View file

@ -315,6 +315,22 @@ impl Theme {
pub fn window_background_appearance(&self) -> WindowBackgroundAppearance {
self.styles.window_background_appearance
}
/// Darkens the color by reducing its lightness.
/// The resulting lightness is clamped to ensure it doesn't go below 0.0.
///
/// The first value darkens light appearance mode, the second darkens appearance dark mode.
///
/// Note: This is a tentative solution and may be replaced with a more robust color system.
pub fn darken(&self, color: Hsla, light_amount: f32, dark_amount: f32) -> Hsla {
let amount = match self.appearance {
Appearance::Light => light_amount,
Appearance::Dark => dark_amount,
};
let mut hsla = color;
hsla.l = (hsla.l - amount).max(0.0);
hsla
}
}
/// Compounds a color with an alpha value.

View file

@ -202,7 +202,12 @@ impl ButtonStyle {
icon_color: Color::Default.color(cx),
}
}
ButtonStyle::Tinted(tint) => tint.button_like_style(cx),
ButtonStyle::Tinted(tint) => {
let mut styles = tint.button_like_style(cx);
let theme = cx.theme();
styles.background = theme.darken(styles.background, 0.05, 0.2);
styles
}
ButtonStyle::Subtle => ButtonLikeStyles {
background: cx.theme().colors().ghost_element_hover,
border_color: transparent_black(),