From f7e8fb7720ee01e74c37ccf7fe0153d6be68c76a Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 13:44:26 -0400 Subject: [PATCH 1/2] adjust theme on components --- components/StyledButton.qml | 17 +++++------- components/StyledDrawer.qml | 2 +- components/StyledIconButton.qml | 36 ++++++++++--------------- components/StyledLabel.qml | 10 +++---- components/StyledTextField.qml | 3 ++- components/StyledToolTip.qml | 2 +- components/StyledWrapperRectangle.qml | 10 +++---- modules/bar/Bar.qml | 4 +-- modules/bar/components/Caffeine.qml | 3 ++- modules/drawers/dashboard/Dashboard.qml | 3 ++- modules/launcher/AppList.qml | 1 - modules/launcher/Launcher.qml | 3 +++ modules/powermenu/PowerMenu.qml | 2 -- 13 files changed, 42 insertions(+), 54 deletions(-) diff --git a/components/StyledButton.qml b/components/StyledButton.qml index ead62b4..fb9be2b 100644 --- a/components/StyledButton.qml +++ b/components/StyledButton.qml @@ -8,19 +8,16 @@ Button { property alias radius: rectangle.radius font.pixelSize: 14 - padding: 6 + verticalPadding: 6 + horizontalPadding: 8 - palette.button: hovered ? Theme.palette.primary : Theme.palette.base100 - Behavior on palette.button { - ColorAnimation { - duration: 100 - } + palette.button: hovered ? Theme.palette.primary : Theme.palette.base200 + ColorAnimation on palette.button { + duration: 100 } palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent - Behavior on palette.buttonText { - ColorAnimation { - duration: 100 - } + ColorAnimation on palette.buttonText { + duration: 100 } wheelEnabled: true diff --git a/components/StyledDrawer.qml b/components/StyledDrawer.qml index c153482..eafe214 100644 --- a/components/StyledDrawer.qml +++ b/components/StyledDrawer.qml @@ -20,6 +20,6 @@ Drawer { topRightRadius = 8; } } - color: Theme.palette.base200 + color: Theme.palette.base100 } } diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index 780113d..186cb5d 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -15,9 +15,9 @@ RoundButton { property int rotation: 0 font.family: loader.font.family - font.pixelSize: 18 + font.pixelSize: 19 radius: 8 - padding: 6 + padding: 8 HoverHandler { cursorShape: Qt.PointingHandCursor @@ -28,34 +28,26 @@ RoundButton { font: control.font text: control.text color: control.color - Behavior on color { - ColorAnimation { - duration: 100 - } + ColorAnimation on color { + duration: 100 } rotation: control.rotation - Behavior on rotation { - RotationAnimation { - duration: 200 - easing.type: Easing.InOutCubic - } + RotationAnimation on rotation { + duration: 200 + easing.type: Easing.InOutCubic } } background: Rectangle { id: rect - border.color: control.hovered ? Theme.palette.primary : Theme.palette.base100 - Behavior on border.color { - ColorAnimation { - duration: 100 - } + border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200 + ColorAnimation on border.color { + duration: 100 } - border.width: 2 - color: control.hovered ? Theme.palette.primary : Theme.palette.base100 - Behavior on color { - ColorAnimation { - duration: 100 - } + border.width: 0 + color: control.hovered ? Theme.palette.primary : Theme.palette.base200 + ColorAnimation on color { + duration: 100 } radius: control.radius } diff --git a/components/StyledLabel.qml b/components/StyledLabel.qml index 4b9dd07..7dd00b2 100644 --- a/components/StyledLabel.qml +++ b/components/StyledLabel.qml @@ -6,11 +6,9 @@ WrapperRectangle { id: root margin: 8 radius: 8 - color: Theme.palette.base100 - Behavior on color { - ColorAnimation { - duration: 200 - easing.type: Easing.InOutQuad - } + color: Theme.palette.base200 + ColorAnimation on color { + duration: 200 + easing.type: Easing.InOutQuad } } diff --git a/components/StyledTextField.qml b/components/StyledTextField.qml index bae90ba..8e5083f 100644 --- a/components/StyledTextField.qml +++ b/components/StyledTextField.qml @@ -1,8 +1,9 @@ import qs.config +import QtQuick import QtQuick.Controls TextField { color: Theme.palette.basecontent - background: null + background: Item {} } diff --git a/components/StyledToolTip.qml b/components/StyledToolTip.qml index 0c09a95..074c129 100644 --- a/components/StyledToolTip.qml +++ b/components/StyledToolTip.qml @@ -14,6 +14,6 @@ ToolTip { background: Rectangle { radius: 8 - color: Theme.palette.base200 + color: Theme.palette.base100 } } diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index 19a70d1..5c73284 100644 --- a/components/StyledWrapperRectangle.qml +++ b/components/StyledWrapperRectangle.qml @@ -4,11 +4,9 @@ import Quickshell.Widgets WrapperRectangle { radius: 8 - color: Theme.palette.base300 - Behavior on color { - ColorAnimation { - duration: 200 - easing.type: Easing.InOutQuad - } + color: Theme.palette.base100 + ColorAnimation on color { + duration: 200 + easing.type: Easing.InOutQuad } } diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index c39e847..620823f 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.base300 + color: Theme.palette.base100 radius: Dimensions.radius border { - color: Theme.palette.base100 + color: Theme.palette.base200 width: Dimensions.bar.border pixelAligned: true } diff --git a/modules/bar/components/Caffeine.qml b/modules/bar/components/Caffeine.qml index 82861f9..47a80c4 100644 --- a/modules/bar/components/Caffeine.qml +++ b/modules/bar/components/Caffeine.qml @@ -6,7 +6,8 @@ import qs.services StyledIconButton { id: root - border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base100 + border.width: 2 + border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base300 text: Icons.coffee onClicked: { diff --git a/modules/drawers/dashboard/Dashboard.qml b/modules/drawers/dashboard/Dashboard.qml index b98647d..14bd318 100644 --- a/modules/drawers/dashboard/Dashboard.qml +++ b/modules/drawers/dashboard/Dashboard.qml @@ -4,13 +4,14 @@ import qs.components import qs.services import QtQuick import QtQuick.Layouts +import Quickshell.Widgets StyledDrawer { id: root visible: Visibility.dashboard - StyledWrapperRectangle { + WrapperItem { margin: 32 ColumnLayout { spacing: 8 diff --git a/modules/launcher/AppList.qml b/modules/launcher/AppList.qml index d8dbe22..cee2574 100644 --- a/modules/launcher/AppList.qml +++ b/modules/launcher/AppList.qml @@ -4,7 +4,6 @@ import "items" import "services" import qs.components import qs.config -import qs.widgets import Quickshell import QtQuick import QtQuick.Controls diff --git a/modules/launcher/Launcher.qml b/modules/launcher/Launcher.qml index 137c861..b64322c 100644 --- a/modules/launcher/Launcher.qml +++ b/modules/launcher/Launcher.qml @@ -1,6 +1,7 @@ pragma ComponentBehavior: Bound import "services" +import qs.config import qs.components import qs.constants import qs.services @@ -47,6 +48,8 @@ StyledWindow { Layout.alignment: Qt.AlignTop margin: 4 + color: Theme.palette.base200 + RowLayout { LucideIcon { id: icon diff --git a/modules/powermenu/PowerMenu.qml b/modules/powermenu/PowerMenu.qml index cea98f8..198c5ba 100644 --- a/modules/powermenu/PowerMenu.qml +++ b/modules/powermenu/PowerMenu.qml @@ -3,7 +3,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config import qs.services -import qs.widgets import Quickshell.Hyprland import Quickshell.Io import Quickshell.Wayland @@ -28,7 +27,6 @@ StyledWindow { StyledWrapperRectangle { id: rect - color: Theme.palette.base300 margin: 14 radius: 8 From 9fc91a92f775266f044e385797f498e99986d5fb Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 5 Sep 2025 15:48:24 -0400 Subject: [PATCH 2/2] add styling with animation speed --- components/LucideIcon.qml | 2 +- components/MprisController.qml | 1 - components/MprisPlayerSelector.qml | 5 ++--- components/StyledButton.qml | 12 ++++++++---- components/StyledIconButton.qml | 26 +++++++++++++++++--------- components/StyledLabel.qml | 7 ++++--- components/StyledListView.qml | 3 ++- components/StyledProgressBar.qml | 12 ++++++------ components/StyledSlider.qml | 4 ++-- components/StyledSwitch.qml | 3 +-- components/StyledText.qml | 6 ++++-- components/StyledToolTip.qml | 2 ++ components/StyledWrapperRectangle.qml | 7 ++++--- config/Styling.qml | 21 +++++++++++++++++++++ 14 files changed, 74 insertions(+), 37 deletions(-) create mode 100644 config/Styling.qml diff --git a/components/LucideIcon.qml b/components/LucideIcon.qml index 206d5b4..fa19612 100644 --- a/components/LucideIcon.qml +++ b/components/LucideIcon.qml @@ -5,7 +5,7 @@ Text { color: Theme.palette.basecontent Behavior on color { ColorAnimation { - duration: 100 + duration: Styling.animations.speed.fast } } font.family: Theme.lucide.font.family diff --git a/components/MprisController.qml b/components/MprisController.qml index 9b92b0a..bd05ee6 100644 --- a/components/MprisController.qml +++ b/components/MprisController.qml @@ -3,7 +3,6 @@ pragma ComponentBehavior: Bound import qs.components import qs.config import qs.constants -import qs.widgets import QtQuick import QtQuick.Layouts import Quickshell.Services.Mpris diff --git a/components/MprisPlayerSelector.qml b/components/MprisPlayerSelector.qml index 3a39693..c185145 100644 --- a/components/MprisPlayerSelector.qml +++ b/components/MprisPlayerSelector.qml @@ -1,7 +1,6 @@ import qs.components import qs.constants import qs.services -import qs.widgets import QtQuick import QtQuick.Layouts @@ -29,10 +28,10 @@ RowLayout { const player = Mpris.active; const displayName = player.identity ?? player.desktopEntry ?? player.dbusName ?? "unknown"; if (displayName.toLowerCase().includes('tidal')) { - return "Tidal"; + return "Tidal"; } if (displayName.toLowerCase().includes('zen')) { - return "Zen"; + return "Zen"; } return displayName; } diff --git a/components/StyledButton.qml b/components/StyledButton.qml index fb9be2b..95c66e9 100644 --- a/components/StyledButton.qml +++ b/components/StyledButton.qml @@ -12,12 +12,16 @@ Button { horizontalPadding: 8 palette.button: hovered ? Theme.palette.primary : Theme.palette.base200 - ColorAnimation on palette.button { - duration: 100 + Behavior on palette.button { + ColorAnimation { + duration: Styling.animations.speed.normal + } } palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent - ColorAnimation on palette.buttonText { - duration: 100 + Behavior on palette.buttonText { + ColorAnimation { + duration: Styling.animations.speed.normal + } } wheelEnabled: true diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml index 186cb5d..d472462 100644 --- a/components/StyledIconButton.qml +++ b/components/StyledIconButton.qml @@ -28,26 +28,34 @@ RoundButton { font: control.font text: control.text color: control.color - ColorAnimation on color { - duration: 100 + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.normal + } } rotation: control.rotation - RotationAnimation on rotation { - duration: 200 - easing.type: Easing.InOutCubic + Behavior on rotation { + RotationAnimation { + duration: Styling.animations.speed.slow + easing.type: Easing.InOutCubic + } } } background: Rectangle { id: rect border.color: control.hovered ? Theme.palette.base300 : Theme.palette.base200 - ColorAnimation on border.color { - duration: 100 + Behavior on border.color { + ColorAnimation { + duration: Styling.animations.speed.normal + } } border.width: 0 color: control.hovered ? Theme.palette.primary : Theme.palette.base200 - ColorAnimation on color { - duration: 100 + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.normal + } } radius: control.radius } diff --git a/components/StyledLabel.qml b/components/StyledLabel.qml index 7dd00b2..f654876 100644 --- a/components/StyledLabel.qml +++ b/components/StyledLabel.qml @@ -7,8 +7,9 @@ WrapperRectangle { margin: 8 radius: 8 color: Theme.palette.base200 - ColorAnimation on color { - duration: 200 - easing.type: Easing.InOutQuad + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.normal + } } } diff --git a/components/StyledListView.qml b/components/StyledListView.qml index 733d258..5c853b4 100644 --- a/components/StyledListView.qml +++ b/components/StyledListView.qml @@ -1,3 +1,4 @@ +import qs.config import QtQuick import QtQuick.Controls @@ -14,7 +15,7 @@ ListView { rebound: Transition { NumberAnimation { properties: "x,y" - duration: 400 + duration: Styling.animations.speed.slow easing.type: Easing.BezierSpline easing.bezierCurve: [0.2, 0, 0, 1, 1, 1] } diff --git a/components/StyledProgressBar.qml b/components/StyledProgressBar.qml index f0c0ef6..9132e83 100644 --- a/components/StyledProgressBar.qml +++ b/components/StyledProgressBar.qml @@ -40,15 +40,15 @@ ProgressBar { Row { Rectangle { - id: rect - color: Theme.palette.primary - width: 40 - height: control.height - } + id: rect + color: Theme.palette.primary + width: 40 + height: control.height + } XAnimator on x { from: control.width + rect.width to: -rect.width - duration: 1000 + duration: Styling.animations.speed.verySlow loops: Animation.Infinite running: control.indeterminate } diff --git a/components/StyledSlider.qml b/components/StyledSlider.qml index e0b0fca..e207c28 100644 --- a/components/StyledSlider.qml +++ b/components/StyledSlider.qml @@ -19,13 +19,13 @@ Slider { width: control.availableWidth height: implicitHeight radius: 8 - color: Theme.palette.base100 + color: Theme.palette.base200 Rectangle { width: control.visualPosition * parent.width Behavior on width { NumberAnimation { - duration: 75 + duration: Styling.animations.speed.fast } } height: parent.height diff --git a/components/StyledSwitch.qml b/components/StyledSwitch.qml index f1671b1..e2c222c 100644 --- a/components/StyledSwitch.qml +++ b/components/StyledSwitch.qml @@ -40,14 +40,13 @@ Switch { y: parent.height / 2 - height / 2 Behavior on x { NumberAnimation { - duration: 100 + duration: Styling.animations.speed.fast } } width: parent.width / 2 - indicator.padding height: parent.height - indicator.padding radius: 16 color: control.checked ? Theme.palette.primary : Theme.palette.basecontent - // border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999" } } diff --git a/components/StyledText.qml b/components/StyledText.qml index 4fe365e..2535777 100644 --- a/components/StyledText.qml +++ b/components/StyledText.qml @@ -4,7 +4,9 @@ import QtQuick Text { font.family: Theme.fontFamily color: Theme.palette.basecontent - ColorAnimation on color { - duration: 100 + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } } } diff --git a/components/StyledToolTip.qml b/components/StyledToolTip.qml index 074c129..544d55b 100644 --- a/components/StyledToolTip.qml +++ b/components/StyledToolTip.qml @@ -15,5 +15,7 @@ ToolTip { background: Rectangle { radius: 8 color: Theme.palette.base100 + border.color: Theme.palette.base200 + border.width: 2 } } diff --git a/components/StyledWrapperRectangle.qml b/components/StyledWrapperRectangle.qml index 5c73284..d056ff5 100644 --- a/components/StyledWrapperRectangle.qml +++ b/components/StyledWrapperRectangle.qml @@ -5,8 +5,9 @@ import Quickshell.Widgets WrapperRectangle { radius: 8 color: Theme.palette.base100 - ColorAnimation on color { - duration: 200 - easing.type: Easing.InOutQuad + Behavior on color { + ColorAnimation { + duration: Styling.animations.speed.fast + } } } diff --git a/config/Styling.qml b/config/Styling.qml new file mode 100644 index 0000000..be40e68 --- /dev/null +++ b/config/Styling.qml @@ -0,0 +1,21 @@ +pragma Singleton + +import QtQuick +import Quickshell + +Singleton { + id: root + + readonly property Animations animations: Animations {} + + component Animations: QtObject { + property AnimationSpeed speed: AnimationSpeed {} + } + component AnimationSpeed: QtObject { + property int veryFast: 50 + property int fast: 100 + property int normal: 200 + property int slow: 400 + property int verySlow: 1000 + } +}