dms: Material Animation Refactor

- Thanks Google for Material 3 Expressive stuffs
- Thanks Caelestia shell for pushing qml limits to showcase the blueprint

quickshell/Widgets/StateLayer.qml

@@ -9,6 +9,7 @@ MouseArea {
     property real cornerRadius: parent && parent.radius !== undefined ? parent.radius : Theme.cornerRadius
     property var tooltipText: null
     property string tooltipSide: "bottom"
+    property bool enableRipple: typeof SettingsData !== "undefined" ? (SettingsData.enableRippleEffects ?? true) : true
 
     readonly property real stateOpacity: disabled ? 0 : pressed ? 0.12 : containsMouse ? 0.08 : 0
 
@@ -16,10 +17,33 @@ MouseArea {
     cursorShape: disabled ? undefined : Qt.PointingHandCursor
     hoverEnabled: true
 
+    onPressed: mouse => {
+        if (!disabled && enableRipple) {
+            rippleLayer.trigger(mouse.x, mouse.y);
+        }
+    }
+
     Rectangle {
+        id: stateRect
         anchors.fill: parent
         radius: root.cornerRadius
         color: Qt.rgba(stateColor.r, stateColor.g, stateColor.b, stateOpacity)
+
+        Behavior on color {
+            enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
+            DankColorAnim {
+                duration: Theme.shorterDuration
+                easing.bezierCurve: Theme.expressiveCurves.standardDecel
+            }
+        }
+    }
+
+    DankRipple {
+        id: rippleLayer
+        anchors.fill: parent
+        rippleColor: root.stateColor
+        cornerRadius: root.cornerRadius
+        enableRipple: root.enableRipple
     }
 
     Timer {