From 4375f6e13dc99917223f280c64a9a34fbb14cf29 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 17:30:09 -0400 Subject: [PATCH 1/3] move theme to styling --- components/LucideIcon.qml | 2 +- components/StyledButton.qml | 4 ++-- components/StyledDrawer.qml | 2 +- components/StyledIconButton.qml | 6 +++--- components/StyledLabel.qml | 2 +- components/StyledMenu.qml | 4 ++-- components/StyledMenuItem.qml | 6 +++--- components/StyledMenuSeparator.qml | 6 +++--- components/StyledPopup.qml | 2 +- components/StyledProgressBar.qml | 6 +++--- components/StyledSlider.qml | 4 ++-- components/StyledSwitch.qml | 6 +++--- components/StyledText.qml | 2 +- components/StyledTextField.qml | 2 +- components/StyledToolTip.qml | 6 +++--- components/StyledWrapperRectangle.qml | 2 +- config/Styling.qml | 1 + modules/bar/Bar.qml | 4 ++-- modules/bar/components/Caffeine.qml | 2 +- modules/bar/components/Cpu.qml | 4 ++-- modules/bar/components/Gpu.qml | 4 ++-- modules/bar/components/Pipewire.qml | 2 +- modules/bar/components/Power.qml | 12 ++++++------ modules/bar/components/bluetooth/BluetoothMenu.qml | 2 +- modules/bar/components/bluetooth/ConnectedDevice.qml | 4 ++-- modules/bar/components/bluetooth/PairedDevice.qml | 2 +- modules/bar/components/hyprland/Workspace.qml | 4 ++-- .../components/notifications/NotificationMenu.qml | 4 ++-- modules/bar/components/tray/menu/Menu.qml | 4 ++-- modules/launcher/AppList.qml | 2 +- modules/launcher/Launcher.qml | 2 +- modules/launcher/items/AppItem.qml | 4 ++-- modules/pomodoro/Pomodoro.qml | 6 +++--- modules/powermenu/PowerMenu.qml | 4 ++-- modules/storybook/Storybook.qml | 2 +- widgets/Circle.qml | 4 ++-- 36 files changed, 68 insertions(+), 67 deletions(-) diff --git a/components/LucideIcon.qml b/components/LucideIcon.qml index 3574856..aa73b88 100644 --- 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 diff --git a/components/StyledButton.qml b/components/StyledButton.qml index 95c66e9..bfe817f 100644 --- 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 diff --git a/components/StyledDrawer.qml b/components/StyledDrawer.qml index eafe214..f0816fd 100644 --- a/components/StyledDrawer.qml +++ b/components/StyledDrawer.qml @@ -20,6 +20,6 @@ Drawer { topRightRadius = 8; } } - color: Theme.palette.base100 + color: Styling.theme.base100 } } diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index 7f725db..bdfea7a 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -6,7 +6,7 @@ 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 @@ -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 diff --git a/components/StyledLabel.qml b/components/StyledLabel.qml index f654876..a1f429d 100644 --- 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 diff --git a/components/StyledMenu.qml b/components/StyledMenu.qml index 24815b6..3335c73 100644 --- 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 diff --git a/components/StyledMenuItem.qml b/components/StyledMenuItem.qml index fe078d2..210df67 100644 --- 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 } diff --git a/components/StyledMenuSeparator.qml b/components/StyledMenuSeparator.qml index 2759e47..05e621a 100644 --- 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 } diff --git a/components/StyledPopup.qml b/components/StyledPopup.qml index c335b7a..0c54c45 100644 --- 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 } } diff --git a/components/StyledProgressBar.qml b/components/StyledProgressBar.qml index 9132e83..d40d8ba 100644 --- 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 } diff --git a/components/StyledSlider.qml b/components/StyledSlider.qml index e207c28..fc1df87 100644 --- 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 } } diff --git a/components/StyledSwitch.qml b/components/StyledSwitch.qml index e2c222c..06dd4e8 100644 --- 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 } } diff --git a/components/StyledText.qml b/components/StyledText.qml index 2535777..0b1a44c 100644 --- a/components/StyledText.qml +++ b/components/StyledText.qml @@ -3,7 +3,7 @@ import QtQuick Text { font.family: Theme.fontFamily - color: Theme.palette.basecontent + color: Styling.theme.basecontent Behavior on color { ColorAnimation { duration: Styling.animations.speed.fast diff --git a/components/StyledTextField.qml b/components/StyledTextField.qml index 8e5083f..aa98e33 100644 --- 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 {} } diff --git a/components/StyledToolTip.qml b/components/StyledToolTip.qml index 544d55b..8fa2b0b 100644 --- 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 } } diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index d056ff5..b6c3eba 100644 --- 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 diff --git a/config/Styling.qml b/config/Styling.qml index 9fd15d8..4b1d7a4 100644 --- a/config/Styling.qml +++ b/config/Styling.qml @@ -8,6 +8,7 @@ Singleton { readonly property Lucide lucide: Lucide {} readonly property Animations animations: Animations {} + readonly property var theme: Theme.palette component Animations: QtObject { property AnimationSpeed speed: AnimationSpeed {} diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index 620823f..4aff347 100644 --- 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 } diff --git a/modules/bar/components/Caffeine.qml b/modules/bar/components/Caffeine.qml index a2ac7b0..126ec7a 100644 --- 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: { diff --git a/modules/bar/components/Cpu.qml b/modules/bar/components/Cpu.qml index b0b46ed..d627fb3 100644 --- a/modules/bar/components/Cpu.qml +++ b/modules/bar/components/Cpu.qml @@ -24,7 +24,7 @@ StyledButton { } 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 { @@ -32,7 +32,7 @@ StyledButton { 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 { diff --git a/modules/bar/components/Gpu.qml b/modules/bar/components/Gpu.qml index 1e29627..ee11e87 100644 --- a/modules/bar/components/Gpu.qml +++ b/modules/bar/components/Gpu.qml @@ -24,7 +24,7 @@ StyledButton { } 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 { @@ -32,7 +32,7 @@ StyledButton { 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 { diff --git a/modules/bar/components/Pipewire.qml b/modules/bar/components/Pipewire.qml index cde5842..f677e4b 100644 --- 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 } } } diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml index 2dae2d1..51bc4b9 100644 --- a/modules/bar/components/Power.qml +++ b/modules/bar/components/Power.qml @@ -15,12 +15,12 @@ StyledButton { 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: { @@ -44,12 +44,12 @@ StyledButton { 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)}%` } diff --git a/modules/bar/components/bluetooth/BluetoothMenu.qml b/modules/bar/components/bluetooth/BluetoothMenu.qml index 14e9759..9bb911e 100644 --- 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 diff --git a/modules/bar/components/bluetooth/ConnectedDevice.qml b/modules/bar/components/bluetooth/ConnectedDevice.qml index ebdb49e..11944dd 100644 --- 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) { diff --git a/modules/bar/components/bluetooth/PairedDevice.qml b/modules/bar/components/bluetooth/PairedDevice.qml index 443ec90..27afaf3 100644 --- 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) { diff --git a/modules/bar/components/hyprland/Workspace.qml b/modules/bar/components/hyprland/Workspace.qml index f342917..3f983f9 100644 --- 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 } } } diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml index 7354f86..8a889d2 100644 --- 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 diff --git a/modules/bar/components/tray/menu/Menu.qml b/modules/bar/components/tray/menu/Menu.qml index 5b57904..f547133 100644 --- 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 diff --git a/modules/launcher/AppList.qml b/modules/launcher/AppList.qml index cee2574..ed026b9 100644 --- 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 { diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index e976626..d04ce1b 100644 --- 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 { diff --git a/modules/launcher/items/AppItem.qml b/modules/launcher/items/AppItem.qml index 7a10111..a9437c0 100644 --- 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 } diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 925d652..168af2d 100644 --- 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 } diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index 198c5ba..dee8827 100644 --- 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 diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 3815c7f..581c482 100644 --- 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 diff --git a/widgets/Circle.qml b/widgets/Circle.qml index 33207a5..226bcf0 100644 --- 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 { From 205ad37e3ebb6befb55ef489b44e3560c6a0f40e Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 17:33:48 -0400 Subject: [PATCH 2/3] only watch theme files --- config/Theme.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/Theme.qml b/config/Theme.qml index 82c316a..e54b66e 100644 --- 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}`) } From 7de7ae19bb8989dc52d4fa7bdc6b8be101f1fa2c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 22:41:21 -0400 Subject: [PATCH 3/3] add typography --- components/MprisController.qml | 4 +- components/StyledIconButton.qml | 2 +- components/StyledText.qml | 3 +- config/Dimensions.qml | 122 ------------------ config/Styling.qml | 86 ++++++------ modules/bar/components/Clock.qml | 7 - modules/bar/components/Cpu.qml | 4 +- modules/bar/components/Gpu.qml | 6 +- modules/bar/components/Memory.qml | 5 +- modules/bar/components/Network.qml | 6 +- modules/bar/components/Power.qml | 10 +- modules/bar/components/Storage.qml | 5 +- .../bar/components/hyprland/Workspaces.qml | 3 +- modules/bar/components/tray/Tray.qml | 3 +- 14 files changed, 77 insertions(+), 189 deletions(-) diff --git a/components/MprisController.qml b/components/MprisController.qml index a6b6a88..265d045 100644 --- 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 { diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index bdfea7a..5a91ff4 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -10,7 +10,7 @@ RoundButton { property int rotation: 0 font.family: Styling.lucide.font.family - font.pixelSize: 19 + font.pixelSize: 16 radius: 8 padding: 8 diff --git a/components/StyledText.qml b/components/StyledText.qml index 0b1a44c..95ac150 100644 --- a/components/StyledText.qml +++ b/components/StyledText.qml @@ -2,7 +2,8 @@ import qs.config import QtQuick Text { - font.family: Theme.fontFamily + font.family: Styling.typography.fontFamily + font.pixelSize: Styling.typography.textSize.base color: Styling.theme.basecontent Behavior on color { ColorAnimation { diff --git a/config/Dimensions.qml b/config/Dimensions.qml index 6b3deaf..6298414 100644 --- 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 - } } diff --git a/config/Styling.qml b/config/Styling.qml index 4b1d7a4..467268d 100644 --- a/config/Styling.qml +++ b/config/Styling.qml @@ -6,19 +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 { @@ -32,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}" } } diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml index c18d940..9b483e5 100644 --- 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 diff --git a/modules/bar/components/Cpu.qml b/modules/bar/components/Cpu.qml index d627fb3..dda97c9 100644 --- a/modules/bar/components/Cpu.qml +++ b/modules/bar/components/Cpu.qml @@ -15,13 +15,13 @@ 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 @@ -30,10 +30,8 @@ StyledButton { 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 - states: [ State { name: "showTemp" diff --git a/modules/bar/components/Gpu.qml b/modules/bar/components/Gpu.qml index ee11e87..e7ee38b 100644 --- a/modules/bar/components/Gpu.qml +++ b/modules/bar/components/Gpu.qml @@ -11,17 +11,17 @@ 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 ? Styling.theme.primarycontent : Styling.theme.basecontent @@ -30,10 +30,8 @@ StyledButton { 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 - states: [ State { name: "temp" diff --git a/modules/bar/components/Memory.qml b/modules/bar/components/Memory.qml index 1f251e6..43aae51 100644 --- 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()}%` } } diff --git a/modules/bar/components/Network.qml b/modules/bar/components/Network.qml index 4fa89cd..47a0406 100644 --- 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()}%` } } diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml index 51bc4b9..0dfde02 100644 --- a/modules/bar/components/Power.qml +++ b/modules/bar/components/Power.qml @@ -9,10 +9,16 @@ 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; @@ -22,7 +28,6 @@ StyledButton { } return Styling.theme.basecontent; } - font.pixelSize: 16 text: { if (root.laptopBattery?.state == UPowerDeviceState.Charging) { return Styling.lucide.icons.batteryCharging; @@ -41,7 +46,9 @@ StyledButton { } StyledText { + Layout.alignment: Qt.AlignVCenter + color: { if (root.isCritical) { return Styling.theme.error; @@ -54,5 +61,4 @@ StyledButton { text: `${(root.laptopBattery?.percentage.toFixed(2) * 100)}%` } } - visible: laptopBattery } diff --git a/modules/bar/components/Storage.qml b/modules/bar/components/Storage.qml index a7d189a..fdb1fd0 100644 --- 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()}%` } } diff --git a/modules/bar/components/hyprland/Workspaces.qml b/modules/bar/components/hyprland/Workspaces.qml index 44a3e16..5a4d10e 100644 --- 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 { diff --git a/modules/bar/components/tray/Tray.qml b/modules/bar/components/tray/Tray.qml index ac343f8..0ffd814 100644 --- 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