add styling with animation speed

components/LucideIcon.qml

@@ -5,7 +5,7 @@ Text {
     color: Theme.palette.basecontent
     Behavior on color {
         ColorAnimation {
-            duration: 100
+            duration: Styling.animations.speed.fast
         }
     }
     font.family: Theme.lucide.font.family

components/MprisController.qml

@@ -3,7 +3,6 @@ pragma ComponentBehavior: Bound
 import qs.components
 import qs.config
 import qs.constants
-import qs.widgets
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.Mpris

components/MprisPlayerSelector.qml

@@ -1,7 +1,6 @@
 import qs.components
 import qs.constants
 import qs.services
-import qs.widgets
 import QtQuick
 import QtQuick.Layouts
 

components/StyledButton.qml

@@ -12,12 +12,16 @@ Button {
     horizontalPadding: 8
 
     palette.button: hovered ? Theme.palette.primary : Theme.palette.base200
-    ColorAnimation on palette.button {
+    Behavior on palette.button {
-        duration: 100
+        ColorAnimation {
+            duration: Styling.animations.speed.normal
+        }
     }
     palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
-    ColorAnimation on palette.buttonText {
+    Behavior on palette.buttonText {
-        duration: 100
+        ColorAnimation {
+            duration: Styling.animations.speed.normal
+        }
     }
 
     wheelEnabled: true

components/StyledIconButton.qml

@@ -28,26 +28,34 @@ RoundButton {
         font: control.font
         text: control.text
         color: control.color
-        ColorAnimation on color {
+        Behavior on color {
-            duration: 100
+            ColorAnimation {
+                duration: Styling.animations.speed.normal
+            }
         }
         rotation: control.rotation
-        RotationAnimation on rotation {
+        Behavior on rotation {
-            duration: 200
+            RotationAnimation {
+                duration: Styling.animations.speed.slow
                 easing.type: Easing.InOutCubic
             }
         }
+    }
 
     background: Rectangle {
         id: rect
         border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200
-        ColorAnimation on border.color {
+        Behavior on border.color {
-            duration: 100
+            ColorAnimation {
+                duration: Styling.animations.speed.normal
+            }
         }
         border.width: 0
         color: control.hovered ? Theme.palette.primary : Theme.palette.base200
-        ColorAnimation on color {
+        Behavior on color {
-            duration: 100
+            ColorAnimation {
+                duration: Styling.animations.speed.normal
+            }
         }
         radius: control.radius
     }

components/StyledLabel.qml

@@ -7,8 +7,9 @@ WrapperRectangle {
     margin: 8
     radius: 8
     color: Theme.palette.base200
-    ColorAnimation on color {
+    Behavior on color {
-        duration: 200
+        ColorAnimation {
-        easing.type: Easing.InOutQuad
+            duration: Styling.animations.speed.normal
+        }
     }
 }

components/StyledListView.qml

@@ -1,3 +1,4 @@
+import qs.config
 import QtQuick
 import QtQuick.Controls
 
@@ -14,7 +15,7 @@ ListView {
     rebound: Transition {
         NumberAnimation {
             properties: "x,y"
-            duration: 400
+            duration: Styling.animations.speed.slow
             easing.type: Easing.BezierSpline
             easing.bezierCurve: [0.2, 0, 0, 1, 1, 1]
         }

components/StyledProgressBar.qml

@@ -48,7 +48,7 @@ ProgressBar {
                 XAnimator on x {
                     from: control.width + rect.width
                     to: -rect.width
-                    duration: 1000
+                    duration: Styling.animations.speed.verySlow
                     loops: Animation.Infinite
                     running: control.indeterminate
                 }

components/StyledSlider.qml

@@ -19,13 +19,13 @@ Slider {
         width: control.availableWidth
         height: implicitHeight
         radius: 8
-        color: Theme.palette.base100
+        color: Theme.palette.base200
 
         Rectangle {
             width: control.visualPosition * parent.width
             Behavior on width {
                 NumberAnimation {
-                    duration: 75
+                    duration: Styling.animations.speed.fast
                 }
             }
             height: parent.height

components/StyledSwitch.qml

@@ -40,14 +40,13 @@ Switch {
             y: parent.height / 2 - height / 2
             Behavior on x {
                 NumberAnimation {
-                    duration: 100
+                    duration: Styling.animations.speed.fast
                 }
             }
             width: parent.width / 2 - indicator.padding
             height: parent.height - indicator.padding
             radius: 16
             color: control.checked ? Theme.palette.primary : Theme.palette.basecontent
-            // border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
         }
     }
 

components/StyledText.qml

@@ -4,7 +4,9 @@ import QtQuick
 Text {
     font.family: Theme.fontFamily
     color: Theme.palette.basecontent
-    ColorAnimation on color {
+    Behavior on color {
-        duration: 100
+        ColorAnimation {
+            duration: Styling.animations.speed.fast
+        }
     }
 }

components/StyledToolTip.qml

@@ -15,5 +15,7 @@ ToolTip {
     background: Rectangle {
         radius: 8
         color: Theme.palette.base100
+        border.color: Theme.palette.base200
+        border.width: 2
     }
 }

components/StyledWrapperRectangle.qml

@@ -5,8 +5,9 @@ import Quickshell.Widgets
 WrapperRectangle {
     radius: 8
     color: Theme.palette.base100
-    ColorAnimation on color {
+    Behavior on color {
-        duration: 200
+        ColorAnimation {
-        easing.type: Easing.InOutQuad
+            duration: Styling.animations.speed.fast
+        }
     }
 }

config/Styling.qml

@@ -0,0 +1,21 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+
+Singleton {
+    id: root
+
+    readonly property Animations animations: Animations {}
+
+    component Animations: QtObject {
+        property AnimationSpeed speed: AnimationSpeed {}
+    }
+    component AnimationSpeed: QtObject {
+        property int veryFast: 50
+        property int fast: 100
+        property int normal: 200
+        property int slow: 400
+        property int verySlow: 1000
+    }
+}