From 0e7770a9a2f738c305544a4e23433e1cff4cb761 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 18 Nov 2024 12:44:49 -0300
Subject: [PATCH] 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
---
 crates/theme/src/theme.rs                      | 16 ++++++++++++++++
 crates/ui/src/components/button/button_like.rs |  7 ++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index e0d4fb42440e2bb3260e4871507e517ed680def6..cf860ad452df7b60ea46218c40efe76106d5d571 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -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.
diff --git a/crates/ui/src/components/button/button_like.rs b/crates/ui/src/components/button/button_like.rs
index a285388cbd6a446869d22ecb1dc9ebabe03469a5..1eff4feb72adfec2f1859aa0cf63adb122bffa98 100644
--- a/crates/ui/src/components/button/button_like.rs
+++ b/crates/ui/src/components/button/button_like.rs
@@ -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(),