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
 
@@ -29,10 +28,10 @@ RowLayout {
             const player = Mpris.active;
             const displayName = player.identity ?? player.desktopEntry ?? player.dbusName ?? "unknown";
             if (displayName.toLowerCase().includes('tidal')) {
-              return "Tidal";
+                return "Tidal";
             }
             if (displayName.toLowerCase().includes('zen')) {
-              return "Zen";
+                return "Zen";
             }
             return displayName;
         }

components/StyledButton.qml

@@ -8,18 +8,19 @@ Button {
     property alias radius: rectangle.radius
 
     font.pixelSize: 14
-    padding: 6
+    verticalPadding: 6
+    horizontalPadding: 8
 
-    palette.button: hovered ? Theme.palette.primary : Theme.palette.base100
+    palette.button: hovered ? Theme.palette.primary : Theme.palette.base200
     Behavior on palette.button {
         ColorAnimation {
-            duration: 100
+            duration: Styling.animations.speed.normal
         }
     }
     palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
     Behavior on palette.buttonText {
         ColorAnimation {
-            duration: 100
+            duration: Styling.animations.speed.normal
         }
     }
 

components/StyledDrawer.qml

@@ -20,6 +20,6 @@ Drawer {
                 topRightRadius = 8;
             }
         }
-        color: Theme.palette.base200
+        color: Theme.palette.base100
     }
 }

components/StyledIconButton.qml

@@ -15,9 +15,9 @@ RoundButton {
     property int rotation: 0
 
     font.family: loader.font.family
-    font.pixelSize: 18
+    font.pixelSize: 19
     radius: 8
-    padding: 6
+    padding: 8
 
     HoverHandler {
         cursorShape: Qt.PointingHandCursor
@@ -30,13 +30,13 @@ RoundButton {
         color: control.color
         Behavior on color {
             ColorAnimation {
-                duration: 100
+                duration: Styling.animations.speed.normal
             }
         }
         rotation: control.rotation
         Behavior on rotation {
             RotationAnimation {
-                duration: 200
+                duration: Styling.animations.speed.slow
                 easing.type: Easing.InOutCubic
             }
         }
@@ -44,17 +44,17 @@ RoundButton {
 
     background: Rectangle {
         id: rect
-        border.color: control.hovered ? Theme.palette.primary : Theme.palette.base100
+        border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200
         Behavior on border.color {
             ColorAnimation {
-                duration: 100
+                duration: Styling.animations.speed.normal
             }
         }
-        border.width: 2
+        border.width: 0
-        color: control.hovered ? Theme.palette.primary : Theme.palette.base100
+        color: control.hovered ? Theme.palette.primary : Theme.palette.base200
         Behavior on color {
             ColorAnimation {
-                duration: 100
+                duration: Styling.animations.speed.normal
             }
         }
         radius: control.radius

components/StyledLabel.qml

@@ -6,11 +6,10 @@ WrapperRectangle {
     id: root
     margin: 8
     radius: 8
-    color: Theme.palette.base100
+    color: Theme.palette.base200
     Behavior on color {
         ColorAnimation {
-            duration: 200
+            duration: Styling.animations.speed.normal
-            easing.type: Easing.InOutQuad
         }
     }
 }

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

@@ -40,15 +40,15 @@ ProgressBar {
 
             Row {
                 Rectangle {
-                  id: rect
+                    id: rect
-                        color: Theme.palette.primary
+                    color: Theme.palette.primary
-                        width: 40
+                    width: 40
-                        height: control.height
+                    height: control.height
-                    }
+                }
                 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/StyledTextField.qml

@@ -1,8 +1,9 @@
 import qs.config
+import QtQuick
 import QtQuick.Controls
 
 TextField {
 
     color: Theme.palette.basecontent
-    background: null
+    background: Item {}
 }

components/StyledToolTip.qml

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

components/StyledWrapperRectangle.qml

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

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
+    }
+}

modules/bar/Bar.qml

@@ -32,11 +32,11 @@ PanelWindow {
         Rectangle {
             id: background
             anchors.fill: parent
-            color: Theme.palette.base300
+            color: Theme.palette.base100
             radius: Dimensions.radius
 
             border {
-                color: Theme.palette.base100
+                color: Theme.palette.base200
                 width: Dimensions.bar.border
                 pixelAligned: true
             }

modules/bar/components/Caffeine.qml

@@ -6,7 +6,8 @@ import qs.services
 StyledIconButton {
     id: root
 
-    border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base100
+    border.width: 2
+    border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base300
     text: Icons.coffee
 
     onClicked: {

modules/drawers/dashboard/Dashboard.qml

@@ -4,13 +4,14 @@ import qs.components
 import qs.services
 import QtQuick
 import QtQuick.Layouts
+import Quickshell.Widgets
 
 StyledDrawer {
     id: root
 
     visible: Visibility.dashboard
 
-    StyledWrapperRectangle {
+    WrapperItem {
         margin: 32
         ColumnLayout {
             spacing: 8

modules/launcher/AppList.qml

@@ -4,7 +4,6 @@ import "items"
 import "services"
 import qs.components
 import qs.config
-import qs.widgets
 import Quickshell
 import QtQuick
 import QtQuick.Controls

modules/launcher/Launcher.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import "services"
+import qs.config
 import qs.components
 import qs.constants
 import qs.services
@@ -47,6 +48,8 @@ StyledWindow {
                 Layout.alignment: Qt.AlignTop
                 margin: 4
 
+                color: Theme.palette.base200
+
                 RowLayout {
                     LucideIcon {
                         id: icon

modules/powermenu/PowerMenu.qml

@@ -3,7 +3,6 @@ pragma ComponentBehavior: Bound
 import qs.components
 import qs.config
 import qs.services
-import qs.widgets
 import Quickshell.Hyprland
 import Quickshell.Io
 import Quickshell.Wayland
@@ -28,7 +27,6 @@ StyledWindow {
     StyledWrapperRectangle {
         id: rect
 
-        color: Theme.palette.base300
         margin: 14
         radius: 8