add styling with animation speed

adjust theme on components
2025-09-05 15:48:24 -04:00 · 2025-09-05 15:15:17 -04:00
22 changed files with 72 additions and 47 deletions
--- a/components/LucideIcon.qml
+++ b/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
--- a/components/MprisController.qml
+++ b/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
--- a/components/MprisPlayerSelector.qml
+++ b/components/MprisPlayerSelector.qml
@ -1,7 +1,6 @@
 import qs.components
 import qs.constants
 import qs.services
-import qs.widgets
 import QtQuick
 import QtQuick.Layouts

--- a/components/StyledButton.qml
+++ b/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
        }
    }

--- a/components/StyledDrawer.qml
+++ b/components/StyledDrawer.qml
@ -20,6 +20,6 @@ Drawer {
                topRightRadius = 8;
            }
        }
-        color: Theme.palette.base200
+        color: Theme.palette.base100
    }
 }
--- a/components/StyledIconButton.qml
+++ b/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
-        color: control.hovered ? Theme.palette.primary : Theme.palette.base100
+        border.width: 0
+        color: control.hovered ? Theme.palette.primary : Theme.palette.base200
        Behavior on color {
            ColorAnimation {
-                duration: 100
+                duration: Styling.animations.speed.normal
            }
        }
        radius: control.radius
--- a/components/StyledLabel.qml
+++ b/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
-            easing.type: Easing.InOutQuad
+            duration: Styling.animations.speed.normal
        }
    }
 }
--- a/components/StyledListView.qml
+++ b/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]
        }
--- a/components/StyledProgressBar.qml
+++ b/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
                }
--- a/components/StyledSlider.qml
+++ b/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
--- a/components/StyledSwitch.qml
+++ b/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"
        }
    }

--- a/components/StyledText.qml
+++ b/components/StyledText.qml
@ -4,7 +4,9 @@ import QtQuick
 Text {
    font.family: Theme.fontFamily
    color: Theme.palette.basecontent
-    ColorAnimation on color {
-        duration: 100
+    Behavior on color {
+        ColorAnimation {
+            duration: Styling.animations.speed.fast
+        }
    }
 }
--- a/components/StyledTextField.qml
+++ b/components/StyledTextField.qml
@ -1,8 +1,9 @@
 import qs.config
+import QtQuick
 import QtQuick.Controls

 TextField {

    color: Theme.palette.basecontent
-    background: null
+    background: Item {}
 }
--- a/components/StyledToolTip.qml
+++ b/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
    }
 }
--- a/components/StyledWrapperRectangle.qml
+++ b/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
-            easing.type: Easing.InOutQuad
+            duration: Styling.animations.speed.fast
        }
    }
 }
--- a/config/Styling.qml
+++ b/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
+    }
+}
--- a/modules/bar/Bar.qml
+++ b/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
            }
--- a/modules/bar/components/Caffeine.qml
+++ b/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: {
--- a/modules/drawers/dashboard/Dashboard.qml
+++ b/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
--- a/modules/launcher/AppList.qml
+++ b/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
--- a/modules/launcher/Launcher.qml
+++ b/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
--- a/modules/powermenu/PowerMenu.qml
+++ b/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
Author	SHA1	Message	Date
Benjamin Palko	9fc91a92f7	add styling with animation speed	2025-09-05 15:48:24 -04:00
Benjamin Palko	f7e8fb7720	adjust theme on components	2025-09-05 15:15:17 -04:00