components/LucideIcon.qml

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

components/MprisController.qml

@@ -21,7 +21,7 @@ Loader {
             id: text
             Layout.alignment: Qt.AlignHCenter
             text: `${root.player.trackTitle} - ${root.player.trackArtist}`
-            font.pixelSize: Styling.typography.textSize.base
+            font.pixelSize: Dimensions.mpris.fontSize
         }
 
         RowLayout {
@@ -57,7 +57,7 @@ Loader {
                 }
                 return `${formatTime(root.player.position / 60)}:${formatTime(root.player.position % 60)} - ${formatTime(root.player.length / 60)}:${formatTime(root.player.length % 60)}`;
             }
-            font.pixelSize: Styling.typography.textSize.sm
+            font.pixelSize: Dimensions.mpris.fontSize
         }
 
         StyledSlider {

components/StyledButton.qml

@@ -11,13 +11,13 @@ Button {
     verticalPadding: 6
     horizontalPadding: 8
 
-    palette.button: hovered ? Styling.theme.primary : Styling.theme.base200
+    palette.button: hovered ? Theme.palette.primary : Theme.palette.base200
     Behavior on palette.button {
         ColorAnimation {
             duration: Styling.animations.speed.normal
         }
     }
-    palette.buttonText: hoverEnabled && hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
+    palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
     Behavior on palette.buttonText {
         ColorAnimation {
             duration: Styling.animations.speed.normal

components/StyledDrawer.qml

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

components/StyledIconButton.qml

@@ -6,11 +6,11 @@ RoundButton {
     id: control
 
     property alias border: rect.border
-    property color color: hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
+    property color color: hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
     property int rotation: 0
 
     font.family: Styling.lucide.font.family
-    font.pixelSize: 16
+    font.pixelSize: 19
     radius: 8
     padding: 8
 
@@ -39,14 +39,14 @@ RoundButton {
 
     background: Rectangle {
         id: rect
-        border.color: control.hovered ? Styling.theme.base300 : Styling.theme.base200
+        border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200
         Behavior on border.color {
             ColorAnimation {
                 duration: Styling.animations.speed.normal
             }
         }
         border.width: 0
-        color: control.hovered ? Styling.theme.primary : Styling.theme.base200
+        color: control.hovered ? Theme.palette.primary : Theme.palette.base200
         Behavior on color {
             ColorAnimation {
                 duration: Styling.animations.speed.normal

components/StyledLabel.qml

@@ -6,7 +6,7 @@ WrapperRectangle {
     id: root
     margin: 8
     radius: 8
-    color: Styling.theme.base200
+    color: Theme.palette.base200
     Behavior on color {
         ColorAnimation {
             duration: Styling.animations.speed.normal

components/StyledMenu.qml

@@ -5,8 +5,8 @@ import QtQuick.Controls
 Menu {
     id: root
 
-    palette.window: Styling.theme.base100
+    palette.window: Theme.palette.base100
-    palette.base: Styling.theme.base100
+    palette.base: Theme.palette.base100
 
     focus: true
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

components/StyledMenuItem.qml

@@ -3,7 +3,7 @@ import QtQuick
 import QtQuick.Controls
 
 MenuItem {
-    palette.text: Styling.theme.basecontent
+    palette.text: Theme.palette.basecontent
-    palette.highlight: Styling.theme.primary
+    palette.highlight: Theme.palette.primary
-    palette.highlightedText: Styling.theme.primarycontent
+    palette.highlightedText: Theme.palette.primarycontent
 }

components/StyledMenuSeparator.qml

@@ -3,7 +3,7 @@ import QtQuick
 import QtQuick.Controls
 
 MenuSeparator {
-    palette.text: Styling.theme.basecontent
+    palette.text: Theme.palette.basecontent
-    palette.highlight: Styling.theme.primary
+    palette.highlight: Theme.palette.primary
-    palette.highlightedText: Styling.theme.primarycontent
+    palette.highlightedText: Theme.palette.primarycontent
 }

components/StyledPopup.qml

@@ -31,7 +31,7 @@ PopupWindow {
         anchors.centerIn: root
         implicitWidth: root.contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
         implicitHeight: root.contentItem.children.reduce((prev, child) => prev + child.height, 0)
-        color: Styling.theme.base200
+        color: Theme.palette.base200
         radius: 8
     }
 }

components/StyledProgressBar.qml

@@ -15,7 +15,7 @@ ProgressBar {
     background: Rectangle {
         implicitWidth: 200
         implicitHeight: 6
-        color: Styling.theme.base100
+        color: Theme.palette.base100
         radius: 8
     }
 
@@ -28,7 +28,7 @@ ProgressBar {
             width: control.visualPosition * parent.width
             height: parent.height
             radius: 8
-            color: Styling.theme.primary
+            color: Theme.palette.primary
             visible: !control.indeterminate
         }
 
@@ -41,7 +41,7 @@ ProgressBar {
             Row {
                 Rectangle {
                     id: rect
-                    color: Styling.theme.primary
+                    color: Theme.palette.primary
                     width: 40
                     height: control.height
                 }

components/StyledSlider.qml

@@ -19,7 +19,7 @@ Slider {
         width: control.availableWidth
         height: implicitHeight
         radius: 8
-        color: Styling.theme.base200
+        color: Theme.palette.base200
 
         Rectangle {
             width: control.visualPosition * parent.width
@@ -29,7 +29,7 @@ Slider {
                 }
             }
             height: parent.height
-            color: Styling.theme.primary
+            color: Theme.palette.primary
             radius: 8
         }
     }

components/StyledSwitch.qml

@@ -11,7 +11,7 @@ Switch {
         text: control.text
         font: control.font
         opacity: enabled ? 1.0 : 0.3
-        color: Styling.theme.basecontent
+        color: Theme.palette.basecontent
         elide: Text.ElideRight
         verticalAlignment: Text.AlignVCenter
     }
@@ -31,7 +31,7 @@ Switch {
         y: parent.height / 2 - height / 2
         radius: 16
         color: "transparent"
-        border.color: control.checked ? Styling.theme.primary : Styling.theme.basecontent
+        border.color: control.checked ? Theme.palette.primary : Theme.palette.basecontent
         border.width: 2
 
         Rectangle {
@@ -46,7 +46,7 @@ Switch {
             width: parent.width / 2 - indicator.padding
             height: parent.height - indicator.padding
             radius: 16
-            color: control.checked ? Styling.theme.primary : Styling.theme.basecontent
+            color: control.checked ? Theme.palette.primary : Theme.palette.basecontent
         }
     }
 

components/StyledText.qml

@@ -2,9 +2,8 @@ import qs.config
 import QtQuick
 
 Text {
-    font.family: Styling.typography.fontFamily
+    font.family: Theme.fontFamily
-    font.pixelSize: Styling.typography.textSize.base
+    color: Theme.palette.basecontent
-    color: Styling.theme.basecontent
     Behavior on color {
         ColorAnimation {
             duration: Styling.animations.speed.fast

components/StyledTextField.qml

@@ -4,6 +4,6 @@ import QtQuick.Controls
 
 TextField {
 
-    color: Styling.theme.basecontent
+    color: Theme.palette.basecontent
     background: Item {}
 }

components/StyledToolTip.qml

@@ -9,13 +9,13 @@ ToolTip {
     contentItem: Text {
         text: control.text
         font: control.font
-        color: Styling.theme.basecontent
+        color: Theme.palette.basecontent
     }
 
     background: Rectangle {
         radius: 8
-        color: Styling.theme.base100
+        color: Theme.palette.base100
-        border.color: Styling.theme.base200
+        border.color: Theme.palette.base200
         border.width: 2
     }
 }

components/StyledWrapperRectangle.qml

@@ -4,7 +4,7 @@ import Quickshell.Widgets
 
 WrapperRectangle {
     radius: 8
-    color: Styling.theme.base100
+    color: Theme.palette.base100
     Behavior on color {
         ColorAnimation {
             duration: Styling.animations.speed.fast

config/Dimensions.qml

@@ -9,6 +9,20 @@ Singleton {
     property int radius: 8
 
     property Bar bar: Bar {}
+    property Mpris mpris: Mpris {}
+    property Clock clock: Clock {}
+    property Pipewire pipewire: Pipewire {}
+    property Network network: Network {}
+    property Bluetooth bluetooth: Bluetooth {}
+    property Storage storage: Storage {}
+    property Memory memory: Memory {}
+    property Cpu cpu: Cpu {}
+    property Gpu gpu: Gpu {}
+    property Caffeine caffeine: Caffeine {}
+    property Notifications notifications: Notifications {}
+    property Workspace workspace: Workspace {}
+    property Tray tray: Tray {}
+    property TrayMenu trayMenu: TrayMenu {}
 
     component Bar: QtObject {
         property int spacing: 8
@@ -19,4 +33,112 @@ Singleton {
         property int verticalPadding: 2
         property int horizontalPadding: 8
     }
+
+    component Mpris: QtObject {
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Clock: QtObject {
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Pipewire: QtObject {
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Network: QtObject {
+        property int iconSize: 14
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Bluetooth: QtObject {
+        property int fontSize: 16
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Storage: QtObject {
+        property int iconSize: 14
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Memory: QtObject {
+        property int iconSize: 14
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Cpu: QtObject {
+        property int iconSize: 14
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Gpu: QtObject {
+        property int iconSize: 14
+        property int fontSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Caffeine: QtObject {
+        property int fontSize: 16
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Notifications: QtObject {
+        property int fontSize: 16
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
+    component Workspace: QtObject {
+        property int spacing: 5
+        property int iconSize: 16
+        property int width: 30
+        property int height: 30
+        property int verticalPadding: 6
+        property int horizontalPadding: 7
+    }
+
+    component Tray: QtObject {
+        property int spacing: 5
+        property int iconSize: 18
+        property int width: 30
+        property int height: 30
+        property int verticalPadding: 6
+        property int horizontalPadding: 7
+    }
+
+    component TrayMenu: QtObject {
+        property int fontSize: 10
+        property int width: 30
+        property int height: 30
+        property int verticalPadding: 6
+        property int horizontalPadding: 7
+    }
 }

config/Styling.qml

@@ -6,31 +6,18 @@ import Quickshell
 Singleton {
     id: root
 
-    readonly property Animations animations: Animations {}
-    readonly property Typography typography: Typography {}
-    readonly property var theme: Theme.palette
     readonly property Lucide lucide: Lucide {}
+    readonly property Animations animations: Animations {}
 
     component Animations: QtObject {
-        readonly property AnimationSpeed speed: AnimationSpeed {}
+        property AnimationSpeed speed: AnimationSpeed {}
     }
     component AnimationSpeed: QtObject {
-        readonly property int veryFast: 50
+        property int veryFast: 50
-        readonly property int fast: 100
+        property int fast: 100
-        readonly property int normal: 200
+        property int normal: 200
-        readonly property int slow: 400
+        property int slow: 400
-        readonly property int verySlow: 1000
+        property int verySlow: 1000
-    }
-
-    component Typography: QtObject {
-        readonly property string fontFamily: "JetBrainsMono Nerd Font"
-        readonly property FontSize textSize: FontSize {}
-    }
-    component FontSize: QtObject {
-        readonly property int sm: 12
-        readonly property int base: 14
-        readonly property int lg: 18
-        readonly property int xl: 24
     }
 
     component Lucide: Item {
@@ -44,35 +31,35 @@ Singleton {
         }
     }
     component LucideIcons: QtObject {
-        readonly property string batteryCharging: "\u{E058}"
+        property string batteryCharging: "\u{E058}"
-        readonly property string batteryFull: "\u{E059}"
+        property string batteryFull: "\u{E059}"
-        readonly property string batteryMedium: "\u{E05b}"
+        property string batteryMedium: "\u{E05b}"
-        readonly property string batteryLow: "\u{E05a}"
+        property string batteryLow: "\u{E05a}"
-        readonly property string batteryWarning: "\u{E3b0}"
+        property string batteryWarning: "\u{E3b0}"
-        readonly property string bell: "\u{E05d}"
+        property string bell: "\u{E05d}"
-        readonly property string bellRing: "\u{E224}"
+        property string bellRing: "\u{E224}"
-        readonly property string bluetooth: "\u{E060}"
+        property string bluetooth: "\u{E060}"
-        readonly property string bluetoothConnected: "\u{E1b8}"
+        property string bluetoothConnected: "\u{E1b8}"
-        readonly property string brickWall: "\u{E586}"
+        property string brickWall: "\u{E586}"
-        readonly property string coffee: "\u{E09a}"
+        property string coffee: "\u{E09a}"
-        readonly property string chevronLeft: "\u{E072}"
+        property string chevronLeft: "\u{E072}"
-        readonly property string chevronRight: "\u{E073}"
+        property string chevronRight: "\u{E073}"
-        readonly property string cpu: "\u{E0ad}"
+        property string cpu: "\u{E0ad}"
-        readonly property string gpu: "\u{E66f}"
+        property string gpu: "\u{E66f}"
-        readonly property string hardDrive: "\u{E0f1}"
+        property string hardDrive: "\u{E0f1}"
-        readonly property string memoryStick: "\u{E44a}"
+        property string memoryStick: "\u{E44a}"
-        readonly property string pause: "\u{E132}"
+        property string pause: "\u{E132}"
-        readonly property string play: "\u{E140}"
+        property string play: "\u{E140}"
-        readonly property string search: "\u{E155}"
+        property string search: "\u{E155}"
-        readonly property string skipBack: "\u{E163}"
+        property string skipBack: "\u{E163}"
-        readonly property string skipForward: "\u{E164}"
+        property string skipForward: "\u{E164}"
-        readonly property string stop: "\u{E132}"
+        property string stop: "\u{E132}"
-        readonly property string square: "\u{E16B}"
+        property string square: "\u{E16B}"
-        readonly property string wifiOff: "\u{E1af}"
+        property string wifiOff: "\u{E1af}"
-        readonly property string wifiLow: "\u{E5fd}"
+        property string wifiLow: "\u{E5fd}"
-        readonly property string wifiHigh: "\u{E5fc}"
+        property string wifiHigh: "\u{E5fc}"
-        readonly property string wifi: "\u{E1ae}"
+        property string wifi: "\u{E1ae}"
-        readonly property string triangle: "\u{E192}"
+        property string triangle: "\u{E192}"
-        readonly property string triangleDashed: "\u{E642}"
+        property string triangleDashed: "\u{E642}"
     }
 }

config/Theme.qml

@@ -16,7 +16,7 @@ Singleton {
 
     Process {
         running: true
-        command: ["bash", "-c", `inotifywait -m -r ~/.config/lux/themes/ -e modify,move,create,delete | while read dir action; do ls -m "$dir"; done`]
+        command: ["bash", "-c", `inotifywait -m -r ~/.config/lux -e modify,move,create,delete | while read dir action; do ls -m "$dir"; done`]
         stderr: StdioCollector {
             onStreamFinished: console.log(`line read: ${this.text}`)
         }

modules/bar/Bar.qml

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

modules/bar/components/Caffeine.qml

@@ -6,7 +6,7 @@ StyledIconButton {
     id: root
 
     border.width: 2
-    border.color: Caffeine.enabled ? Styling.theme.secondary : root.hovered ? Styling.theme.primary : Styling.theme.base300
+    border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base300
     text: Styling.lucide.icons.coffee
 
     onClicked: {

modules/bar/components/Clock.qml

@@ -1,9 +1,16 @@
 import qs.components
+import qs.config
+import qs.widgets
 import Quickshell
 
 StyledLabel {
     StyledText {
+        id: text
+
+        font.pixelSize: Dimensions.clock.fontSize
+
         text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
+
         SystemClock {
             id: clock
             precision: SystemClock.Seconds

modules/bar/components/Cpu.qml

@@ -15,23 +15,25 @@ StyledButton {
     }
 
     contentItem: RowLayout {
+        id: row
 
         spacing: 0
 
         Ref {
             service: SystemInfo
         }
-
         LucideIcon {
             text: Styling.lucide.icons.cpu
-            color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
+            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
         }
 
         StyledText {
             id: text
 
+            font.pixelSize: Dimensions.cpu.fontSize
             text: ` ${(SystemInfo.cpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
-            color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
+            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+
             states: [
                 State {
                     name: "showTemp"

modules/bar/components/Gpu.qml

@@ -11,27 +11,29 @@ StyledButton {
     property bool showTemp: false
 
     onClicked: {
-        showTemp = !showTemp;
+        root.showTemp = !root.showTemp;
     }
 
     contentItem: RowLayout {
+        id: row
 
         spacing: 0
 
         Ref {
             service: SystemInfo
         }
-
         LucideIcon {
             text: Styling.lucide.icons.gpu
-            color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
+            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
         }
 
         StyledText {
             id: text
 
+            font.pixelSize: Dimensions.gpu.fontSize
             text: ` ${(SystemInfo.gpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
-            color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
+            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+
             states: [
                 State {
                     name: "temp"

modules/bar/components/Memory.qml

@@ -6,18 +6,17 @@ import QtQuick
 import QtQuick.Layouts
 
 StyledLabel {
-
     RowLayout {
-
         Ref {
             service: SystemInfo
         }
-
         LucideIcon {
             text: Styling.lucide.icons.memoryStick
         }
 
         StyledText {
+            id: text
+            font.pixelSize: Dimensions.memory.fontSize
             text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
         }
     }

modules/bar/components/Network.qml

@@ -6,16 +6,15 @@ import QtQuick
 import QtQuick.Layouts
 
 StyledLabel {
-
     RowLayout {
-
         Ref {
             service: NetworkService
         }
-
         LucideIcon {
             id: icon
+
             text: Styling.lucide.icons.wifiOff
+
             states: [
                 State {
                     name: "high"
@@ -49,6 +48,7 @@ StyledLabel {
 
         StyledText {
             id: text
+            font.pixelSize: Dimensions.network.fontSize
             text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
         }
     }

modules/bar/components/Pipewire.qml

@@ -28,7 +28,7 @@ StyledButton {
             when: Pipewire.muted
             PropertyChanges {
                 root {
-                    palette.button: Styling.theme.error
+                    palette.button: Theme.palette.error
                 }
             }
         }

modules/bar/components/Power.qml

@@ -9,25 +9,20 @@ StyledButton {
     property UPowerDevice laptopBattery: UPower.devices.values.find(device => device.isLaptopBattery) ?? null
     property bool isCritical: laptopBattery?.percentage < 0.10
 
-    visible: laptopBattery
-
     contentItem: RowLayout {
-
         spacing: 4
-
         LucideIcon {
-
             Layout.alignment: Qt.AlignVCenter
-
             color: {
                 if (root.isCritical) {
-                    return Styling.theme.error;
+                    return Theme.palette.error;
                 }
                 if (root.hovered) {
-                    return Styling.theme.primarycontent;
+                    return Theme.palette.primarycontent;
                 }
-                return Styling.theme.basecontent;
+                return Theme.palette.basecontent;
             }
+            font.pixelSize: 16
             text: {
                 if (root.laptopBattery?.state == UPowerDeviceState.Charging) {
                     return Styling.lucide.icons.batteryCharging;
@@ -46,19 +41,18 @@ StyledButton {
         }
 
         StyledText {
-
             Layout.alignment: Qt.AlignVCenter
-
             color: {
                 if (root.isCritical) {
-                    return Styling.theme.error;
+                    return Theme.palette.error;
                 }
                 if (root.hovered) {
-                    return Styling.theme.primarycontent;
+                    return Theme.palette.primarycontent;
                 }
-                return Styling.theme.basecontent;
+                return Theme.palette.basecontent;
             }
             text: `${(root.laptopBattery?.percentage.toFixed(2) * 100)}%`
         }
     }
+    visible: laptopBattery
 }

modules/bar/components/Storage.qml

@@ -6,20 +6,17 @@ import QtQuick
 import QtQuick.Layouts
 
 StyledLabel {
-
     RowLayout {
-
         Ref {
             service: SystemInfo
         }
-
         LucideIcon {
             text: Styling.lucide.icons.hardDrive
         }
 
         StyledText {
             id: text
-
+            font.pixelSize: Dimensions.storage.fontSize
             text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
         }
     }

modules/bar/components/bluetooth/BluetoothMenu.qml

@@ -11,7 +11,7 @@ import Quickshell.Bluetooth
 StyledPopupWindow {
     id: root
 
-    backgroundColor: Styling.theme.base300
+    backgroundColor: Theme.palette.base300
     margins: 16
     radius: 8
 

modules/bar/components/bluetooth/ConnectedDevice.qml

@@ -64,7 +64,7 @@ StyledLabel {
                             PropertyChanges {
                                 icon {
                                     text: Styling.lucide.icons.batteryWarning
-                                    color: Styling.theme.error
+                                    color: Theme.palette.error
                                 }
                             }
                         }
@@ -76,7 +76,7 @@ StyledLabel {
         StyledButton {
             Layout.alignment: Qt.AlignRight
             text: 'Disconnect'
-            palette.button: hovered ? Styling.theme.error : Styling.theme.base200
+            palette.button: hovered ? Theme.palette.error : Theme.palette.base200
 
             onClicked: {
                 if (root.modelData.state != BluetoothDeviceState.Connected) {

modules/bar/components/bluetooth/PairedDevice.qml

@@ -48,7 +48,7 @@ StyledLabel {
                 hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected
                 text: 'Unpair'
 
-                palette.button: hovered ? Styling.theme.error : Styling.theme.base100
+                palette.button: hovered ? Theme.palette.error : Theme.palette.base100
 
                 onClicked: {
                     if (!hoverEnabled) {

modules/bar/components/hyprland/Workspace.qml

@@ -22,7 +22,7 @@ StyledIconButton {
             PropertyChanges {
                 root {
                     rotation: 180
-                    color: root.hovered ? Styling.theme.basecontent : Styling.theme.primary
+                    color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary
                 }
             }
         },
@@ -33,7 +33,7 @@ StyledIconButton {
                 root {
                     text: Styling.lucide.icons.triangleDashed
                     rotation: 180
-                    color: root.hovered ? Styling.theme.basecontent : Styling.theme.primary
+                    color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary
                 }
             }
         }

modules/bar/components/hyprland/Workspaces.qml

@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 
+import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Hyprland
@@ -7,7 +8,7 @@ import Quickshell.Hyprland
 RowLayout {
     id: root
 
-    spacing: 4
+    spacing: Dimensions.workspace.spacing
 
     Repeater {
 

modules/bar/components/notifications/NotificationMenu.qml

@@ -10,7 +10,7 @@ import QtQuick.Layouts
 StyledPopupWindow {
     id: root
 
-    backgroundColor: Styling.theme.base300
+    backgroundColor: Theme.palette.base300
     margins: 16
     radius: 8
 
@@ -32,7 +32,7 @@ StyledPopupWindow {
 
         StyledLabel {
             Layout.columnSpan: 2
-            color: Styling.theme.base200
+            color: Theme.palette.base200
             StyledListView {
                 id: notifications
 

modules/bar/components/tray/Tray.qml

@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 
+import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.SystemTray
@@ -7,7 +8,7 @@ import Quickshell.Services.SystemTray
 RowLayout {
     id: root
 
-    spacing: 4
+    spacing: Dimensions.tray.spacing
 
     Repeater {
         model: SystemTray.items

modules/bar/components/tray/menu/Menu.qml

@@ -9,7 +9,7 @@ import Quickshell
 StyledPopupWindow {
     id: window
 
-    backgroundColor: Styling.theme.base300
+    backgroundColor: Theme.palette.base300
     margins: 14
     radius: 8
 
@@ -32,7 +32,7 @@ StyledPopupWindow {
                 property Component menuSeperator: Rectangle {
                     implicitHeight: 2
 
-                    color: Styling.theme.base100
+                    color: Theme.palette.base100
                 }
                 property Component menuItem: MenuItem {
                     menuEntry: loader.modelData

modules/launcher/AppList.qml

@@ -31,7 +31,7 @@ StyledListView {
     highlightResizeDuration: 0
     highlight: Rectangle {
         radius: 8
-        color: Styling.theme.primary
+        color: Theme.palette.primary
     }
 
     header: StyledText {

modules/launcher/Launcher.qml

@@ -47,7 +47,7 @@ StyledWindow {
                 Layout.alignment: Qt.AlignTop
                 margin: 4
 
-                color: Styling.theme.base200
+                color: Theme.palette.base200
 
                 RowLayout {
                     LucideIcon {

modules/launcher/items/AppItem.qml

@@ -42,7 +42,7 @@ Item {
 
             Layout.alignment: Qt.AlignBottom
             Layout.fillWidth: true
-            color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent
+            color: root.active ? Theme.palette.primarycontent : Theme.palette.basecontent
             font.pixelSize: 14
             font.bold: true
         }
@@ -52,7 +52,7 @@ Item {
 
             Layout.alignment: Qt.AlignTop
             Layout.fillWidth: true
-            color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent
+            color: root.active ? Theme.palette.primarycontent : Theme.palette.basecontent
             font.pixelSize: 10
             elide: Text.ElideRight
         }

modules/pomodoro/Pomodoro.qml

@@ -53,10 +53,10 @@ StyledWindow {
                 Circle {
                     id: circle
                     radius: 150
-                    borderColor: Styling.theme.base100
+                    borderColor: Theme.palette.base100
-                    strokeColor: Pomodoro.state == "timer" ? Styling.theme.primary : Styling.theme.warning
+                    strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
                     strokeWidth: 12
-                    fillColor: button.hovered ? Styling.theme.primary : "transparent"
+                    fillColor: button.hovered ? Theme.palette.primary : "transparent"
                     percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
                 }
 

modules/powermenu/PowerMenu.qml

@@ -76,7 +76,7 @@ StyledWindow {
             highlightResizeDuration: 0
             highlight: Rectangle {
                 radius: 8
-                color: Styling.theme.primary
+                color: Theme.palette.primary
             }
 
             onCurrentItemChanged: {
@@ -103,7 +103,7 @@ StyledWindow {
                 }
 
                 padding: 16
-                color: list.currentIndex == index ? Styling.theme.primarycontent : Styling.theme.basecontent
+                color: list.currentIndex == index ? Theme.palette.primarycontent : Theme.palette.basecontent
                 text: modelData.text
                 font.pixelSize: 18
                 font.bold: true

modules/storybook/Storybook.qml

@@ -137,7 +137,7 @@ StyledWindow {
                     font.pixelSize: 18
                 }
                 StyledWrapperRectangle {
-                    border.color: Styling.theme.base100
+                    border.color: Theme.palette.base100
                     border.width: 2
                     StyledListView {
                         implicitWidth: 200

widgets/Circle.qml

@@ -22,8 +22,8 @@ Item {
         ShapePath {
             id: fill
 
-            fillColor: Styling.theme.base100
+            fillColor: Theme.palette.base100
-            strokeColor: Styling.theme.base200
+            strokeColor: Theme.palette.base200
             strokeWidth: 8
 
             PathAngleArc {