From 5c88c6a5a6746fa27146215fea4c21384a771351 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Thu, 10 Apr 2025 13:09:49 +0200
Subject: [PATCH] button color anims

---
 .config/quickshell/modules/common/Appearance.qml   |  9 +++++++++
 .../modules/common/widgets/SmallCircleButton.qml   | 14 ++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml
index 44f79a4a1..155f80dc3 100644
--- a/.config/quickshell/modules/common/Appearance.qml
+++ b/.config/quickshell/modules/common/Appearance.qml
@@ -4,6 +4,7 @@ pragma Singleton
 
 Singleton {
     property QtObject m3colors
+    property QtObject animation
     property QtObject colors
     property QtObject rounding
     property QtObject font
@@ -138,4 +139,12 @@ Singleton {
         }
     }
 
+    animation: QtObject {
+        property QtObject elementDecel: QtObject {
+            property int duration: 100
+            property int type: Easing.BezierSpline
+            property list<real> bezierCurve: [0, 0.55, 0.45, 1]
+        }
+    }
+
 }
diff --git a/.config/quickshell/modules/common/widgets/SmallCircleButton.qml b/.config/quickshell/modules/common/widgets/SmallCircleButton.qml
index c1df4855f..545887bfa 100644
--- a/.config/quickshell/modules/common/widgets/SmallCircleButton.qml
+++ b/.config/quickshell/modules/common/widgets/SmallCircleButton.qml
@@ -8,18 +8,28 @@ import Quickshell.Wayland
 
 Button {
     id: button
-    implicitWidth: 26
-    implicitHeight: 26
 
     required default property Item content
     property bool extraActiveCondition: false
 
+    implicitWidth: 26
+    implicitHeight: 26
     contentItem: content
 
     background: Rectangle {
         anchors.fill: parent
         radius: Appearance.rounding.full
         color: (button.down || extraActiveCondition) ? Appearance.colors.colLayer2Active : (button.hovered ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2)
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Appearance.animation.elementDecel.duration
+                easing.type: Appearance.animation.elementDecel.type
+                easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
+            }
+
+        }
+
     }
 
 }