use Dimensions config

config/Dimensions.qml

@@ -0,0 +1,44 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+
+Singleton {
+    id: root
+
+    property int radius: 8
+
+    property Bar bar: Bar {}
+    property Clock clock: Clock {}
+    property Workspace workspace: Workspace {}
+
+    component Bar: QtObject {
+        id: bar
+
+        property int spacing: 6
+        property int border: 2
+        property int height: 50
+        property int verticalMargins: 4
+        property int horizontalMargins: 6
+        property int verticalPadding: 2
+        property int horizontalPadding: 6
+    }
+
+    component Clock: QtObject {
+        id: clock
+
+        property int fontSize: 14
+        property int width: 230
+        property int height: 30
+    }
+
+    component Workspace: QtObject {
+        id: workspace
+
+        property int spacing: 5
+        property int width: 30
+        property int height: 30
+        property int verticalPadding: 6
+        property int horizontalPadding: 7
+    }
+}

modules/bar/Bar.qml

@@ -13,47 +13,73 @@ Scope {
             right: true
         }
 
-        implicitHeight: 40
-
+        implicitHeight: Dimensions.bar.height
         color: 'transparent'
 
-        Rectangle {
-            id: background
+        Item {
+
             anchors.fill: parent
-            color: Theme.palette.base300
-        }
+            anchors.leftMargin: Dimensions.bar.horizontalMargins
+            anchors.rightMargin: Dimensions.bar.horizontalMargins
+            anchors.topMargin: Dimensions.bar.verticalMargins
+            anchors.bottomMargin: Dimensions.bar.verticalMargins
 
-        Row {
-            id: leftbar
+            Rectangle {
+                id: background
+                anchors.fill: parent
+                color: Theme.palette.base300
+                radius: Dimensions.radius
 
-            spacing: 6
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.bottom: parent.bottom
-            anchors.margins: 2
-
-            Workspaces {
-                anchors.verticalCenter: parent.verticalCenter
+                border {
+                    color: Theme.palette.base100
+                    width: Dimensions.bar.border
+                    pixelAligned: true
+                }
             }
-        }
 
-        Row {
-            id: centerbar
+            Row {
+                id: leftbar
 
-            spacing: 6
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
 
-            Clock {}
-        }
+                anchors.leftMargin: Dimensions.bar.horizontalPadding
+                anchors.topMargin: Dimensions.bar.verticalPadding
+                anchors.bottomMargin: Dimensions.bar.verticalPadding
 
-        Row {
-            id: rightbar
+                spacing: Dimensions.bar.spacing
 
-            anchors.top: parent.top
-            anchors.right: parent.left
-            anchors.bottom: parent.bottom
+                Workspaces {
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+
+            Row {
+                id: centerbar
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+
+                anchors.topMargin: Dimensions.bar.verticalPadding
+                anchors.bottomMargin: Dimensions.bar.verticalPadding
+
+                spacing: Dimensions.bar.spacing
+
+                Clock {}
+            }
+
+            Row {
+                id: rightbar
+
+                anchors.right: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+
+                anchors.rightMargin: Dimensions.bar.horizontalPadding
+                anchors.topMargin: Dimensions.bar.verticalPadding
+                anchors.bottomMargin: Dimensions.bar.verticalPadding
+
+                spacing: Dimensions.bar.spacing
+            }
         }
     }
 }

modules/bar/components/Clock.qml

@@ -1,48 +1,39 @@
-import Quickshell
 import Quickshell.Io
 import QtQuick
 import "root:styled"
+import "../../../config/"
 
 Item {
     id: clock
 
-    implicitWidth: 200
-    implicitHeight: 30
+    implicitWidth: Dimensions.clock.width
+    implicitHeight: Dimensions.clock.height
 
     StyledLabel {
-        anchors.fill: parent
+      anchors.fill: text
     }
 
     StyledText {
         id: text
         anchors.centerIn: parent
 
+        font.pixelSize: Dimensions.clock.fontSize
+
         Process {
-            // give the process object an id so we can talk
-            // about it from the timer
             id: dateProc
 
             command: ["date"]
             running: true
 
             stdout: StdioCollector {
-                onStreamFinished: text.text = this.text
+                onStreamFinished: text.text = ` ${this.text}`
             }
         }
 
-        // use a timer to rerun the process at an interval
         Timer {
-            // 1000 milliseconds is 1 second
             interval: 1000
-
-            // start the timer immediately
             running: true
-
-            // run the timer again when it ends
             repeat: true
-
-            // when the timer is triggered, set the running property of the
-            // process to true, which reruns it if stopped.
             onTriggered: dateProc.running = true
         }
     }

modules/bar/components/Workspace.qml

@@ -10,29 +10,50 @@ Item {
 
     visible: modelData.id > 0
 
-    width: 30
-    height: 30
+    width: Dimensions.workspace.width
+    height: Dimensions.workspace.height
+
+    Rectangle {
+        id: rectangle
+        anchors.fill: button
+        color: Theme.palette.base100
+        radius: Dimensions.radius
+    }
 
     Button {
         id: button
         anchors.centerIn: parent
 
-        padding: 6
-        leftPadding: 7
-        rightPadding: 7
+        verticalPadding: Dimensions.workspace.verticalPadding
+        horizontalPadding: Dimensions.workspace.horizontalPadding
 
-        background: Rectangle {
-            id: rectangle
-            anchors.fill: parent
-            color: "#161212"
-            radius: 8
-        }
-
-        rotation: workspace.modelData.active ? 0 : 180
+        background: null
 
         icon.source: "/home/baobeld/dotfiles/quickshell/assets/triangle.svg"
-        icon.color: workspace.modelData.active ? Theme.palette.primary : Theme.palette.basecontent
+        icon.color: Theme.palette.basecontent
 
         onClicked: workspace.modelData.activate()
+
+        states: State {
+            name: "active"
+            when: workspace.modelData.active
+            PropertyChanges {
+                button {
+                    rotation: 180
+                    icon.color: Theme.palette.primary
+                }
+            }
+        }
+
+        transitions: Transition {
+            from: ""
+            to: "active"
+            reversible: true
+            NumberAnimation {
+                properties: "rotation"
+                duration: 250
+                easing.type: Easing.InOutQuad
+            }
+        }
     }
 }

modules/bar/components/Workspaces.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Controls
 import Quickshell.Hyprland
+import "../../../config/"
 
 Row {
     id: root
 
-    spacing: 4
+    spacing: Dimensions.workspace.spacing
 
     Repeater {
 

styled/StyledLabel.qml

@@ -1,8 +1,8 @@
 import QtQuick
-import "root:config"
+import "../config/"
 
 Rectangle {
     color: Theme.palette.base100
 
-    radius: 5
+    radius: Dimensions.radius
 }

styled/StyledText.qml

@@ -3,4 +3,5 @@ import "root:config"
 
 Text {
     color: Theme.palette.basecontent
+    font.family: Theme.fontFamily
 }