baobeld/lux-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move theme to styling

Browse source
This commit is contained in:
Benjamin Palko 2025-09-05 17:30:09 -04:00
parent 467c9bc0e3
commit 4375f6e13d
36 changed files with 68 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/LucideIcon.qml
View file

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

4
components/StyledButton.qml
View file

@ -11,13 +11,13 @@ Button {
verticalPadding: 6 verticalPadding: 6
horizontalPadding: 8 horizontalPadding: 8
palette.button: hovered ? Theme.palette.primary : Theme.palette.base200 palette.button: hovered ? Styling.theme.primary : Styling.theme.base200
Behavior on palette.button { Behavior on palette.button {
ColorAnimation { ColorAnimation {
duration: Styling.animations.speed.normal 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 { Behavior on palette.buttonText {
ColorAnimation { ColorAnimation {
duration: Styling.animations.speed.normal duration: Styling.animations.speed.normal

2
components/StyledDrawer.qml
View file

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

6
components/StyledIconButton.qml
View file

@ -6,7 +6,7 @@ RoundButton {
id: control id: control
property alias border: rect.border 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 property int rotation: 0
font.family: Styling.lucide.font.family font.family: Styling.lucide.font.family
@ -39,14 +39,14 @@ RoundButton {
background: Rectangle { background: Rectangle {
id: rect 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 { Behavior on border.color {
ColorAnimation { ColorAnimation {
duration: Styling.animations.speed.normal duration: Styling.animations.speed.normal
} }
} }
border.width: 0 border.width: 0
color: control.hovered ? Theme.palette.primary : Theme.palette.base200 color: control.hovered ? Styling.theme.primary : Styling.theme.base200
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: Styling.animations.speed.normal duration: Styling.animations.speed.normal

2
components/StyledLabel.qml
View file

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

4
components/StyledMenu.qml
View file

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

6
components/StyledMenuItem.qml
View file

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

6
components/StyledMenuSeparator.qml
View file

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

2
components/StyledPopup.qml
View file

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

6
components/StyledProgressBar.qml
View file

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

4
components/StyledSlider.qml
View file

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

6
components/StyledSwitch.qml
View file

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

2
components/StyledText.qml
View file

@ -3,7 +3,7 @@ import QtQuick
Text { Text {
font.family: Theme.fontFamily font.family: Theme.fontFamily
color: Theme.palette.basecontent color: Styling.theme.basecontent
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: Styling.animations.speed.fast duration: Styling.animations.speed.fast

2
components/StyledTextField.qml
View file

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

6
components/StyledToolTip.qml
View file

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

2
components/StyledWrapperRectangle.qml
View file

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

1
config/Styling.qml
View file

@ -8,6 +8,7 @@ Singleton {
readonly property Lucide lucide: Lucide {} readonly property Lucide lucide: Lucide {}
readonly property Animations animations: Animations {} readonly property Animations animations: Animations {}
readonly property var theme: Theme.palette
component Animations: QtObject { component Animations: QtObject {
property AnimationSpeed speed: AnimationSpeed {} property AnimationSpeed speed: AnimationSpeed {}

4
modules/bar/Bar.qml
View file

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

2
modules/bar/components/Caffeine.qml
View file

@ -6,7 +6,7 @@ StyledIconButton {
id: root id: root
border.width: 2 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 text: Styling.lucide.icons.coffee
onClicked: { onClicked: {

4
modules/bar/components/Cpu.qml
View file

@ -24,7 +24,7 @@ StyledButton {
} }
LucideIcon { LucideIcon {
text: Styling.lucide.icons.cpu text: Styling.lucide.icons.cpu
color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
} }
StyledText { StyledText {
@ -32,7 +32,7 @@ StyledButton {
font.pixelSize: Dimensions.cpu.fontSize font.pixelSize: Dimensions.cpu.fontSize
text: ` ${(SystemInfo.cpuPerc * 100).toFixed().toString().padStart(2, "_")}%` 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: [ states: [
State { State {

4
modules/bar/components/Gpu.qml
View file

@ -24,7 +24,7 @@ StyledButton {
} }
LucideIcon { LucideIcon {
text: Styling.lucide.icons.gpu text: Styling.lucide.icons.gpu
color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent color: root.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
} }
StyledText { StyledText {
@ -32,7 +32,7 @@ StyledButton {
font.pixelSize: Dimensions.gpu.fontSize font.pixelSize: Dimensions.gpu.fontSize
text: ` ${(SystemInfo.gpuPerc * 100).toFixed().toString().padStart(2, "_")}%` 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: [ states: [
State { State {

2
modules/bar/components/Pipewire.qml
View file

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

12
modules/bar/components/Power.qml
View file

@ -15,12 +15,12 @@ StyledButton {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: { color: {
if (root.isCritical) { if (root.isCritical) {
return Theme.palette.error; return Styling.theme.error;
} }
if (root.hovered) { if (root.hovered) {
return Theme.palette.primarycontent; return Styling.theme.primarycontent;
} }
return Theme.palette.basecontent; return Styling.theme.basecontent;
} }
font.pixelSize: 16 font.pixelSize: 16
text: { text: {
@ -44,12 +44,12 @@ StyledButton {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: { color: {
if (root.isCritical) { if (root.isCritical) {
return Theme.palette.error; return Styling.theme.error;
} }
if (root.hovered) { 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)}%` text: `${(root.laptopBattery?.percentage.toFixed(2) * 100)}%`
} }

2
modules/bar/components/bluetooth/BluetoothMenu.qml
View file

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

4
modules/bar/components/bluetooth/ConnectedDevice.qml
View file

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

2
modules/bar/components/bluetooth/PairedDevice.qml
View file

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

4
modules/bar/components/hyprland/Workspace.qml
View file

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

4
modules/bar/components/notifications/NotificationMenu.qml
View file

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

4
modules/bar/components/tray/menu/Menu.qml
View file

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

2
modules/launcher/AppList.qml
View file

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

2
modules/launcher/Launcher.qml
View file

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

4
modules/launcher/items/AppItem.qml
View file

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

6
modules/pomodoro/Pomodoro.qml
View file

@ -53,10 +53,10 @@ StyledWindow {
Circle { Circle {
id: circle id: circle
radius: 150 radius: 150
borderColor: Theme.palette.base100 borderColor: Styling.theme.base100
strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning strokeColor: Pomodoro.state == "timer" ? Styling.theme.primary : Styling.theme.warning
strokeWidth: 12 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 percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
} }

4
modules/powermenu/PowerMenu.qml
View file

@ -76,7 +76,7 @@ StyledWindow {
highlightResizeDuration: 0 highlightResizeDuration: 0
highlight: Rectangle { highlight: Rectangle {
radius: 8 radius: 8
color: Theme.palette.primary color: Styling.theme.primary
} }
onCurrentItemChanged: { onCurrentItemChanged: {
@ -103,7 +103,7 @@ StyledWindow {
} }
padding: 16 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 text: modelData.text
font.pixelSize: 18 font.pixelSize: 18
font.bold: true font.bold: true

2
modules/storybook/Storybook.qml
View file

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

4
widgets/Circle.qml
View file

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