add typography

only watch theme files
move theme to styling
2025-09-05 22:41:21 -04:00 · 2025-09-05 17:33:48 -04:00 · 2025-09-05 17:30:09 -04:00
45 changed files with 146 additions and 257 deletions
--- a/components/LucideIcon.qml
+++ b/components/LucideIcon.qml
@ -5,7 +5,7 @@ Text {
    font.family: Styling.lucide.font.family
    font.pixelSize: 16

-    color: Theme.palette.basecontent
+    color: Styling.theme.basecontent
    Behavior on color {
        ColorAnimation {
            duration: Styling.animations.speed.fast
--- a/components/MprisController.qml
+++ b/components/MprisController.qml
@ -21,7 +21,7 @@ Loader {
            id: text
            Layout.alignment: Qt.AlignHCenter
            text: `${root.player.trackTitle} - ${root.player.trackArtist}`
-            font.pixelSize: Dimensions.mpris.fontSize
+            font.pixelSize: Styling.typography.textSize.base
        }

        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: Dimensions.mpris.fontSize
+            font.pixelSize: Styling.typography.textSize.sm
        }

        StyledSlider {
--- a/components/StyledButton.qml
+++ b/components/StyledButton.qml
@ -11,13 +11,13 @@ Button {
    verticalPadding: 6
    horizontalPadding: 8

-    palette.button: hovered ? Theme.palette.primary : Theme.palette.base200
+    palette.button: hovered ? Styling.theme.primary : Styling.theme.base200
    Behavior on palette.button {
        ColorAnimation {
            duration: Styling.animations.speed.normal
        }
    }
-    palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+    palette.buttonText: hoverEnabled && hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
    Behavior on palette.buttonText {
        ColorAnimation {
            duration: Styling.animations.speed.normal
--- a/components/StyledDrawer.qml
+++ b/components/StyledDrawer.qml
@ -20,6 +20,6 @@ Drawer {
                topRightRadius = 8;
            }
        }
-        color: Theme.palette.base100
+        color: Styling.theme.base100
    }
 }
--- a/components/StyledIconButton.qml
+++ b/components/StyledIconButton.qml
@ -6,11 +6,11 @@ RoundButton {
    id: control

    property alias border: rect.border
-    property color color: hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+    property color color: hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
    property int rotation: 0

    font.family: Styling.lucide.font.family
-    font.pixelSize: 19
+    font.pixelSize: 16
    radius: 8
    padding: 8

@ -39,14 +39,14 @@ RoundButton {

    background: Rectangle {
        id: rect
-        border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200
+        border.color: control.hovered ? Styling.theme.base300 : Styling.theme.base200
        Behavior on border.color {
            ColorAnimation {
                duration: Styling.animations.speed.normal
            }
        }
        border.width: 0
-        color: control.hovered ? Theme.palette.primary : Theme.palette.base200
+        color: control.hovered ? Styling.theme.primary : Styling.theme.base200
        Behavior on color {
            ColorAnimation {
                duration: Styling.animations.speed.normal
--- a/components/StyledLabel.qml
+++ b/components/StyledLabel.qml
@ -6,7 +6,7 @@ WrapperRectangle {
    id: root
    margin: 8
    radius: 8
-    color: Theme.palette.base200
+    color: Styling.theme.base200
    Behavior on color {
        ColorAnimation {
            duration: Styling.animations.speed.normal
--- a/components/StyledMenu.qml
+++ b/components/StyledMenu.qml
@ -5,8 +5,8 @@ import QtQuick.Controls
 Menu {
    id: root

-    palette.window: Theme.palette.base100
-    palette.base: Theme.palette.base100
+    palette.window: Styling.theme.base100
+    palette.base: Styling.theme.base100

    focus: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
--- a/components/StyledMenuItem.qml
+++ b/components/StyledMenuItem.qml
@ -3,7 +3,7 @@ import QtQuick
 import QtQuick.Controls

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

 MenuSeparator {
-    palette.text: Theme.palette.basecontent
-    palette.highlight: Theme.palette.primary
-    palette.highlightedText: Theme.palette.primarycontent
+    palette.text: Styling.theme.basecontent
+    palette.highlight: Styling.theme.primary
+    palette.highlightedText: Styling.theme.primarycontent
 }
--- a/components/StyledPopup.qml
+++ b/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: Theme.palette.base200
+        color: Styling.theme.base200
        radius: 8
    }
 }
--- a/components/StyledProgressBar.qml
+++ b/components/StyledProgressBar.qml
@ -15,7 +15,7 @@ ProgressBar {
    background: Rectangle {
        implicitWidth: 200
        implicitHeight: 6
-        color: Theme.palette.base100
+        color: Styling.theme.base100
        radius: 8
    }

@ -28,7 +28,7 @@ ProgressBar {
            width: control.visualPosition * parent.width
            height: parent.height
            radius: 8
-            color: Theme.palette.primary
+            color: Styling.theme.primary
            visible: !control.indeterminate
        }

@ -41,7 +41,7 @@ ProgressBar {
            Row {
                Rectangle {
                    id: rect
-                    color: Theme.palette.primary
+                    color: Styling.theme.primary
                    width: 40
                    height: control.height
                }
--- a/components/StyledSlider.qml
+++ b/components/StyledSlider.qml
@ -19,7 +19,7 @@ Slider {
        width: control.availableWidth
        height: implicitHeight
        radius: 8
-        color: Theme.palette.base200
+        color: Styling.theme.base200

        Rectangle {
            width: control.visualPosition * parent.width
@ -29,7 +29,7 @@ Slider {
                }
            }
            height: parent.height
-            color: Theme.palette.primary
+            color: Styling.theme.primary
            radius: 8
        }
    }
--- a/components/StyledSwitch.qml
+++ b/components/StyledSwitch.qml
@ -11,7 +11,7 @@ Switch {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
-        color: Theme.palette.basecontent
+        color: Styling.theme.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 ? Theme.palette.primary : Theme.palette.basecontent
+        border.color: control.checked ? Styling.theme.primary : Styling.theme.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 ? Theme.palette.primary : Theme.palette.basecontent
+            color: control.checked ? Styling.theme.primary : Styling.theme.basecontent
        }
    }

--- a/components/StyledText.qml
+++ b/components/StyledText.qml
@ -2,8 +2,9 @@ import qs.config
 import QtQuick

 Text {
-    font.family: Theme.fontFamily
-    color: Theme.palette.basecontent
+    font.family: Styling.typography.fontFamily
+    font.pixelSize: Styling.typography.textSize.base
+    color: Styling.theme.basecontent
    Behavior on color {
        ColorAnimation {
            duration: Styling.animations.speed.fast
--- a/components/StyledTextField.qml
+++ b/components/StyledTextField.qml
@ -4,6 +4,6 @@ import QtQuick.Controls

 TextField {

-    color: Theme.palette.basecontent
+    color: Styling.theme.basecontent
    background: Item {}
 }
--- a/components/StyledToolTip.qml
+++ b/components/StyledToolTip.qml
@ -9,13 +9,13 @@ ToolTip {
    contentItem: Text {
        text: control.text
        font: control.font
-        color: Theme.palette.basecontent
+        color: Styling.theme.basecontent
    }

    background: Rectangle {
        radius: 8
-        color: Theme.palette.base100
-        border.color: Theme.palette.base200
+        color: Styling.theme.base100
+        border.color: Styling.theme.base200
        border.width: 2
    }
 }
--- a/components/StyledWrapperRectangle.qml
+++ b/components/StyledWrapperRectangle.qml
@ -4,7 +4,7 @@ import Quickshell.Widgets

 WrapperRectangle {
    radius: 8
-    color: Theme.palette.base100
+    color: Styling.theme.base100
    Behavior on color {
        ColorAnimation {
            duration: Styling.animations.speed.fast
--- a/config/Dimensions.qml
+++ b/config/Dimensions.qml
@ -9,20 +9,6 @@ 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
@ -33,112 +19,4 @@ 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
-    }
 }
--- a/config/Styling.qml
+++ b/config/Styling.qml
@ -6,18 +6,31 @@ import Quickshell
 Singleton {
    id: root

-    readonly property Lucide lucide: Lucide {}
    readonly property Animations animations: Animations {}
+    readonly property Typography typography: Typography {}
+    readonly property var theme: Theme.palette
+    readonly property Lucide lucide: Lucide {}

    component Animations: QtObject {
-        property AnimationSpeed speed: AnimationSpeed {}
+        readonly 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
+        readonly property int veryFast: 50
+        readonly property int fast: 100
+        readonly property int normal: 200
+        readonly property int slow: 400
+        readonly 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 {
@ -31,35 +44,35 @@ Singleton {
        }
    }
    component LucideIcons: QtObject {
-        property string batteryCharging: "\u{E058}"
-        property string batteryFull: "\u{E059}"
-        property string batteryMedium: "\u{E05b}"
-        property string batteryLow: "\u{E05a}"
-        property string batteryWarning: "\u{E3b0}"
-        property string bell: "\u{E05d}"
-        property string bellRing: "\u{E224}"
-        property string bluetooth: "\u{E060}"
-        property string bluetoothConnected: "\u{E1b8}"
-        property string brickWall: "\u{E586}"
-        property string coffee: "\u{E09a}"
-        property string chevronLeft: "\u{E072}"
-        property string chevronRight: "\u{E073}"
-        property string cpu: "\u{E0ad}"
-        property string gpu: "\u{E66f}"
-        property string hardDrive: "\u{E0f1}"
-        property string memoryStick: "\u{E44a}"
-        property string pause: "\u{E132}"
-        property string play: "\u{E140}"
-        property string search: "\u{E155}"
-        property string skipBack: "\u{E163}"
-        property string skipForward: "\u{E164}"
-        property string stop: "\u{E132}"
-        property string square: "\u{E16B}"
-        property string wifiOff: "\u{E1af}"
-        property string wifiLow: "\u{E5fd}"
-        property string wifiHigh: "\u{E5fc}"
-        property string wifi: "\u{E1ae}"
-        property string triangle: "\u{E192}"
-        property string triangleDashed: "\u{E642}"
+        readonly property string batteryCharging: "\u{E058}"
+        readonly property string batteryFull: "\u{E059}"
+        readonly property string batteryMedium: "\u{E05b}"
+        readonly property string batteryLow: "\u{E05a}"
+        readonly property string batteryWarning: "\u{E3b0}"
+        readonly property string bell: "\u{E05d}"
+        readonly property string bellRing: "\u{E224}"
+        readonly property string bluetooth: "\u{E060}"
+        readonly property string bluetoothConnected: "\u{E1b8}"
+        readonly property string brickWall: "\u{E586}"
+        readonly property string coffee: "\u{E09a}"
+        readonly property string chevronLeft: "\u{E072}"
+        readonly property string chevronRight: "\u{E073}"
+        readonly property string cpu: "\u{E0ad}"
+        readonly property string gpu: "\u{E66f}"
+        readonly property string hardDrive: "\u{E0f1}"
+        readonly property string memoryStick: "\u{E44a}"
+        readonly property string pause: "\u{E132}"
+        readonly property string play: "\u{E140}"
+        readonly property string search: "\u{E155}"
+        readonly property string skipBack: "\u{E163}"
+        readonly property string skipForward: "\u{E164}"
+        readonly property string stop: "\u{E132}"
+        readonly property string square: "\u{E16B}"
+        readonly property string wifiOff: "\u{E1af}"
+        readonly property string wifiLow: "\u{E5fd}"
+        readonly property string wifiHigh: "\u{E5fc}"
+        readonly property string wifi: "\u{E1ae}"
+        readonly property string triangle: "\u{E192}"
+        readonly property string triangleDashed: "\u{E642}"
    }
 }
--- a/config/Theme.qml
+++ b/config/Theme.qml
@ -16,7 +16,7 @@ Singleton {

    Process {
        running: true
-        command: ["bash", "-c", `inotifywait -m -r ~/.config/lux -e modify,move,create,delete | while read dir action; do ls -m "$dir"; done`]
+        command: ["bash", "-c", `inotifywait -m -r ~/.config/lux/themes/ -e modify,move,create,delete | while read dir action; do ls -m "$dir"; done`]
        stderr: StdioCollector {
            onStreamFinished: console.log(`line read: ${this.text}`)
        }
--- a/modules/bar/Bar.qml
+++ b/modules/bar/Bar.qml
@ -32,11 +32,11 @@ PanelWindow {
        Rectangle {
            id: background
            anchors.fill: parent
-            color: Theme.palette.base100
+            color: Styling.theme.base100
            radius: Dimensions.radius

            border {
-                color: Theme.palette.base200
+                color: Styling.theme.base200
                width: Dimensions.bar.border
                pixelAligned: true
            }
--- a/modules/bar/components/Caffeine.qml
+++ b/modules/bar/components/Caffeine.qml
@ -6,7 +6,7 @@ StyledIconButton {
    id: root

    border.width: 2
-    border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base300
+    border.color: Caffeine.enabled ? Styling.theme.secondary : root.hovered ? Styling.theme.primary : Styling.theme.base300
    text: Styling.lucide.icons.coffee

    onClicked: {
--- a/modules/bar/components/Clock.qml
+++ b/modules/bar/components/Clock.qml
@ -1,16 +1,9 @@
 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
--- a/modules/bar/components/Cpu.qml
+++ b/modules/bar/components/Cpu.qml
@ -15,25 +15,23 @@ StyledButton {
    }

    contentItem: RowLayout {
-        id: row

        spacing: 0

        Ref {
            service: SystemInfo
        }
+
        LucideIcon {
            text: Styling.lucide.icons.cpu
-            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+            color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
        }

        StyledText {
            id: text

-            font.pixelSize: Dimensions.cpu.fontSize
            text: ` ${(SystemInfo.cpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
-            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
-
+            color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
            states: [
                State {
                    name: "showTemp"
--- a/modules/bar/components/Gpu.qml
+++ b/modules/bar/components/Gpu.qml
@ -11,29 +11,27 @@ StyledButton {
    property bool showTemp: false

    onClicked: {
-        root.showTemp = !root.showTemp;
+        showTemp = !showTemp;
    }

    contentItem: RowLayout {
-        id: row

        spacing: 0

        Ref {
            service: SystemInfo
        }
+
        LucideIcon {
            text: Styling.lucide.icons.gpu
-            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+            color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
        }

        StyledText {
            id: text

-            font.pixelSize: Dimensions.gpu.fontSize
            text: ` ${(SystemInfo.gpuPerc * 100).toFixed().toString().padStart(2, "_")}%`
-            color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
-
+            color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
            states: [
                State {
                    name: "temp"
--- a/modules/bar/components/Memory.qml
+++ b/modules/bar/components/Memory.qml
@ -6,17 +6,18 @@ 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()}%`
        }
    }
--- a/modules/bar/components/Network.qml
+++ b/modules/bar/components/Network.qml
@ -6,15 +6,16 @@ import QtQuick
 import QtQuick.Layouts

 StyledLabel {
+
    RowLayout {
+
        Ref {
            service: NetworkService
        }
+
        LucideIcon {
            id: icon
-
            text: Styling.lucide.icons.wifiOff
-
            states: [
                State {
                    name: "high"
@ -48,7 +49,6 @@ StyledLabel {

        StyledText {
            id: text
-            font.pixelSize: Dimensions.network.fontSize
            text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
        }
    }
--- a/modules/bar/components/Pipewire.qml
+++ b/modules/bar/components/Pipewire.qml
@ -28,7 +28,7 @@ StyledButton {
            when: Pipewire.muted
            PropertyChanges {
                root {
-                    palette.button: Theme.palette.error
+                    palette.button: Styling.theme.error
                }
            }
        }
--- a/modules/bar/components/Power.qml
+++ b/modules/bar/components/Power.qml
@ -9,20 +9,25 @@ 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 Theme.palette.error;
+                    return Styling.theme.error;
                }
                if (root.hovered) {
-                    return Theme.palette.primarycontent;
+                    return Styling.theme.primarycontent;
                }
-                return Theme.palette.basecontent;
+                return Styling.theme.basecontent;
            }
-            font.pixelSize: 16
            text: {
                if (root.laptopBattery?.state == UPowerDeviceState.Charging) {
                    return Styling.lucide.icons.batteryCharging;
@ -41,18 +46,19 @@ StyledButton {
        }

        StyledText {
+
            Layout.alignment: Qt.AlignVCenter
+
            color: {
                if (root.isCritical) {
-                    return Theme.palette.error;
+                    return Styling.theme.error;
                }
                if (root.hovered) {
-                    return Theme.palette.primarycontent;
+                    return Styling.theme.primarycontent;
                }
-                return Theme.palette.basecontent;
+                return Styling.theme.basecontent;
            }
            text: `${(root.laptopBattery?.percentage.toFixed(2) * 100)}%`
        }
    }
-    visible: laptopBattery
 }
--- a/modules/bar/components/Storage.qml
+++ b/modules/bar/components/Storage.qml
@ -6,17 +6,20 @@ 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()}%`
        }
    }
--- a/modules/bar/components/bluetooth/BluetoothMenu.qml
+++ b/modules/bar/components/bluetooth/BluetoothMenu.qml
@ -11,7 +11,7 @@ import Quickshell.Bluetooth
 StyledPopupWindow {
    id: root

-    backgroundColor: Theme.palette.base300
+    backgroundColor: Styling.theme.base300
    margins: 16
    radius: 8

--- a/modules/bar/components/bluetooth/ConnectedDevice.qml
+++ b/modules/bar/components/bluetooth/ConnectedDevice.qml
@ -64,7 +64,7 @@ StyledLabel {
                            PropertyChanges {
                                icon {
                                    text: Styling.lucide.icons.batteryWarning
-                                    color: Theme.palette.error
+                                    color: Styling.theme.error
                                }
                            }
                        }
@ -76,7 +76,7 @@ StyledLabel {
        StyledButton {
            Layout.alignment: Qt.AlignRight
            text: 'Disconnect'
-            palette.button: hovered ? Theme.palette.error : Theme.palette.base200
+            palette.button: hovered ? Styling.theme.error : Styling.theme.base200

            onClicked: {
                if (root.modelData.state != BluetoothDeviceState.Connected) {
--- a/modules/bar/components/bluetooth/PairedDevice.qml
+++ b/modules/bar/components/bluetooth/PairedDevice.qml
@ -48,7 +48,7 @@ StyledLabel {
                hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected
                text: 'Unpair'

-                palette.button: hovered ? Theme.palette.error : Theme.palette.base100
+                palette.button: hovered ? Styling.theme.error : Styling.theme.base100

                onClicked: {
                    if (!hoverEnabled) {
--- a/modules/bar/components/hyprland/Workspace.qml
+++ b/modules/bar/components/hyprland/Workspace.qml
@ -22,7 +22,7 @@ StyledIconButton {
            PropertyChanges {
                root {
                    rotation: 180
-                    color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary
+                    color: root.hovered ? Styling.theme.basecontent : Styling.theme.primary
                }
            }
        },
@ -33,7 +33,7 @@ StyledIconButton {
                root {
                    text: Styling.lucide.icons.triangleDashed
                    rotation: 180
-                    color: root.hovered ? Theme.palette.basecontent : Theme.palette.primary
+                    color: root.hovered ? Styling.theme.basecontent : Styling.theme.primary
                }
            }
        }
--- a/modules/bar/components/hyprland/Workspaces.qml
+++ b/modules/bar/components/hyprland/Workspaces.qml
@ -1,6 +1,5 @@
 pragma ComponentBehavior: Bound

-import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Hyprland
@ -8,7 +7,7 @@ import Quickshell.Hyprland
 RowLayout {
    id: root

-    spacing: Dimensions.workspace.spacing
+    spacing: 4

    Repeater {

--- a/modules/bar/components/notifications/NotificationMenu.qml
+++ b/modules/bar/components/notifications/NotificationMenu.qml
@ -10,7 +10,7 @@ import QtQuick.Layouts
 StyledPopupWindow {
    id: root

-    backgroundColor: Theme.palette.base300
+    backgroundColor: Styling.theme.base300
    margins: 16
    radius: 8

@ -32,7 +32,7 @@ StyledPopupWindow {

        StyledLabel {
            Layout.columnSpan: 2
-            color: Theme.palette.base200
+            color: Styling.theme.base200
            StyledListView {
                id: notifications

--- a/modules/bar/components/tray/Tray.qml
+++ b/modules/bar/components/tray/Tray.qml
@ -1,6 +1,5 @@
 pragma ComponentBehavior: Bound

-import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.SystemTray
@ -8,7 +7,7 @@ import Quickshell.Services.SystemTray
 RowLayout {
    id: root

-    spacing: Dimensions.tray.spacing
+    spacing: 4

    Repeater {
        model: SystemTray.items
--- a/modules/bar/components/tray/menu/Menu.qml
+++ b/modules/bar/components/tray/menu/Menu.qml
@ -9,7 +9,7 @@ import Quickshell
 StyledPopupWindow {
    id: window

-    backgroundColor: Theme.palette.base300
+    backgroundColor: Styling.theme.base300
    margins: 14
    radius: 8

@ -32,7 +32,7 @@ StyledPopupWindow {
                property Component menuSeperator: Rectangle {
                    implicitHeight: 2

-                    color: Theme.palette.base100
+                    color: Styling.theme.base100
                }
                property Component menuItem: MenuItem {
                    menuEntry: loader.modelData
--- a/modules/launcher/AppList.qml
+++ b/modules/launcher/AppList.qml
@ -31,7 +31,7 @@ StyledListView {
    highlightResizeDuration: 0
    highlight: Rectangle {
        radius: 8
-        color: Theme.palette.primary
+        color: Styling.theme.primary
    }

    header: StyledText {
--- a/modules/launcher/Launcher.qml
+++ b/modules/launcher/Launcher.qml
@ -47,7 +47,7 @@ StyledWindow {
                Layout.alignment: Qt.AlignTop
                margin: 4

-                color: Theme.palette.base200
+                color: Styling.theme.base200

                RowLayout {
                    LucideIcon {
--- a/modules/launcher/items/AppItem.qml
+++ b/modules/launcher/items/AppItem.qml
@ -42,7 +42,7 @@ Item {

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

            Layout.alignment: Qt.AlignTop
            Layout.fillWidth: true
-            color: root.active ? Theme.palette.primarycontent : Theme.palette.basecontent
+            color: root.active ? Styling.theme.primarycontent : Styling.theme.basecontent
            font.pixelSize: 10
            elide: Text.ElideRight
        }
--- a/modules/pomodoro/Pomodoro.qml
+++ b/modules/pomodoro/Pomodoro.qml
@ -53,10 +53,10 @@ StyledWindow {
                Circle {
                    id: circle
                    radius: 150
-                    borderColor: Theme.palette.base100
-                    strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
+                    borderColor: Styling.theme.base100
+                    strokeColor: Pomodoro.state == "timer" ? Styling.theme.primary : Styling.theme.warning
                    strokeWidth: 12
-                    fillColor: button.hovered ? Theme.palette.primary : "transparent"
+                    fillColor: button.hovered ? Styling.theme.primary : "transparent"
                    percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
                }

--- a/modules/powermenu/PowerMenu.qml
+++ b/modules/powermenu/PowerMenu.qml
@ -76,7 +76,7 @@ StyledWindow {
            highlightResizeDuration: 0
            highlight: Rectangle {
                radius: 8
-                color: Theme.palette.primary
+                color: Styling.theme.primary
            }

            onCurrentItemChanged: {
@ -103,7 +103,7 @@ StyledWindow {
                }

                padding: 16
-                color: list.currentIndex == index ? Theme.palette.primarycontent : Theme.palette.basecontent
+                color: list.currentIndex == index ? Styling.theme.primarycontent : Styling.theme.basecontent
                text: modelData.text
                font.pixelSize: 18
                font.bold: true
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@ -137,7 +137,7 @@ StyledWindow {
                    font.pixelSize: 18
                }
                StyledWrapperRectangle {
-                    border.color: Theme.palette.base100
+                    border.color: Styling.theme.base100
                    border.width: 2
                    StyledListView {
                        implicitWidth: 200
--- a/widgets/Circle.qml
+++ b/widgets/Circle.qml
@ -22,8 +22,8 @@ Item {
        ShapePath {
            id: fill

-            fillColor: Theme.palette.base100
-            strokeColor: Theme.palette.base200
+            fillColor: Styling.theme.base100
+            strokeColor: Styling.theme.base200
            strokeWidth: 8

            PathAngleArc {
Author	SHA1	Message	Date
Benjamin Palko	7de7ae19bb	add typography	2025-09-05 22:41:21 -04:00
Benjamin Palko	205ad37e3e	only watch theme files	2025-09-05 17:33:48 -04:00
Benjamin Palko	4375f6e13d	move theme to styling	2025-09-05 17:30:09 -04:00