make ripples more subtle (circle -> radial gradient)

.config/quickshell/modules/common/widgets/PrimaryTabButton.qml

@@ -110,13 +110,28 @@ TabButton {
             animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
         }
 
-        Rectangle {
+        Item {
             id: ripple
-
+            width: ripple.implicitWidth
-            radius: Appearance?.rounding.full ?? 9999
+            height: ripple.implicitHeight
-            color: button.colRipple
             opacity: 0
 
+            property real implicitWidth: 0
+            property real implicitHeight: 0
+
+            Behavior on opacity {
+                animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+
+            RadialGradient {
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: button.colRipple }
+                    GradientStop { position: 0.3; color: button.colRipple }
+                    GradientStop { position: 0.5 ; color: Qt.rgba(button.colRipple.r, button.colRipple.g, button.colRipple.b, 0) }
+                }
+            }
+
             transform: Translate {
                 x: -ripple.width / 2
                 y: -ripple.height / 2

.config/quickshell/modules/common/widgets/RippleButton.qml

@@ -150,16 +150,28 @@ Button {
             }
         }
 
-        Rectangle {
+        Item {
             id: ripple
-
+            width: ripple.implicitWidth
-            radius: Appearance?.rounding.full ?? 9999
+            height: ripple.implicitHeight
             opacity: 0
-            color: root.rippleColor
+
-            Behavior on color {
+            property real implicitWidth: 0
+            property real implicitHeight: 0
+
+            Behavior on opacity {
                 animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
             }
 
+            RadialGradient {
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: root.rippleColor }
+                    GradientStop { position: 0.3; color: root.rippleColor }
+                    GradientStop { position: 0.5; color: Qt.rgba(root.rippleColor.r, root.rippleColor.g, root.rippleColor.b, 0) }
+                }
+            }
+
             transform: Translate {
                 x: -ripple.width / 2
                 y: -ripple.height / 2