Merge branch 'main' into feat/peripheral-integration

Modules/SysTray/Common/BatteryIcon.qml

@@ -1,18 +1,19 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 import qs.Components
 import qs.Helpers
 
 Row {
 	id: root
 
-	property real batHeight: Appearance.padding.smaller * 2
-	property real batWidth: Appearance.padding.larger * 2
+	property real batHeight: Tokens.padding.smaller * 2
+	property real batWidth: Tokens.padding.larger * 2
 	required property string devState
-	property real nubHeight: Appearance.padding.small
+	property real nubHeight: Tokens.padding.small
 	property real nubWidth: 2
 	required property real percentage
-	property real radius: Appearance.rounding.smallest / 2
+	property real radius: Tokens.rounding.smallest / 2
 
 	spacing: 1
 
@@ -27,7 +28,7 @@ Row {
 
 		CustomText {
 			color: Battery.getColors(root.percentage, root.devState).fg
-			font.pointSize: Appearance.font.size.larger / 1.5
+			font.pointSize: Tokens.font.size.larger / 1.5
 			font.weight: 800
 			height: track.height
 			horizontalAlignment: Text.AlignHCenter
@@ -59,7 +60,7 @@ Row {
 
 					clip: true
 					color: Battery.getColors(root.percentage, root.devState).bg
-					font.pointSize: Appearance.font.size.larger / 1.5
+					font.pointSize: Tokens.font.size.larger / 1.5
 					font.weight: 800
 					height: track.height
 					horizontalAlignment: Text.AlignHCenter

Modules/SysTray/Popouts/AudioPopout.qml

@@ -6,34 +6,33 @@ import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Daemons
 import qs.Helpers
+import qs.Services
 
 Item {
 	id: root
 
-	readonly property int rounding: Appearance.rounding.small - Appearance.padding.small
+	readonly property int rounding: Tokens.rounding.small - Tokens.padding.small
 	readonly property int topMargin: 0
 	required property var wrapper
 
-	implicitHeight: vol.implicitHeight + Appearance.padding.small * 2
-	implicitWidth: 500 + Appearance.padding.small * 2
+	implicitHeight: vol.implicitHeight + Tokens.padding.small * 2
+	implicitWidth: 500 + Tokens.padding.small * 2
 
 	CustomRect {
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: parent.top
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: parent.implicitHeight
-		radius: Appearance.rounding.small
+		radius: Tokens.rounding.small
 		y: parent.y
 
 		Behavior on implicitHeight {
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
 			}
 		}
 	}
@@ -42,7 +41,7 @@ Item {
 		id: vol
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
+		anchors.margins: Tokens.padding.small
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 	}
@@ -52,17 +51,17 @@ Item {
 
 		CustomRect {
 			Layout.fillWidth: true
-			Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
+			Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
 			Layout.topMargin: root.topMargin
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: Colors.tPalette.m3surfaceContainer
 			radius: root.rounding
 
 			ColumnLayout {
-				anchors.bottomMargin: Appearance.padding.smaller
+				anchors.bottomMargin: Tokens.padding.smaller
 				anchors.fill: parent
-				anchors.leftMargin: Appearance.padding.larger
-				anchors.rightMargin: Appearance.padding.larger
-				anchors.topMargin: Appearance.padding.smaller
+				anchors.leftMargin: Tokens.padding.larger
+				anchors.rightMargin: Tokens.padding.larger
+				anchors.topMargin: Tokens.padding.smaller
 
 				RowLayout {
 					Layout.fillHeight: true
@@ -76,27 +75,27 @@ Item {
 
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
+						color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
 						font.bold: true
 						text: qsTr("%1").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
 					}
 				}
 
 				RowLayout {
-					spacing: Appearance.spacing.large
+					spacing: Tokens.spacing.large
 
 					CustomMouseArea {
-						Layout.bottomMargin: Appearance.padding.normal
+						Layout.bottomMargin: Tokens.padding.normal
 						Layout.fillWidth: true
-						Layout.preferredHeight: Appearance.padding.larger * 3
+						Layout.preferredHeight: Tokens.padding.larger * 3
 
 						CustomSlider {
 							anchors.left: parent.left
 							anchors.right: parent.right
-							bgColor: Audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
-							fgColor: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+							bgColor: Audio.muted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+							fgColor: Audio.muted ? Colors.palette.m3error : Colors.palette.m3primary
 							implicitHeight: parent.height
-							insetColor: Audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+							insetColor: Audio.muted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
 							insetIcon: Audio.muted || Audio.volume < 0.001 ? "volume_off" : "volume_up"
 							value: Audio.volume
 
@@ -110,7 +109,7 @@ Item {
 					}
 
 					CustomSwitch {
-						Layout.bottomMargin: Appearance.padding.normal
+						Layout.bottomMargin: Tokens.padding.normal
 						checked: !Audio.muted
 
 						onToggled: {
@@ -125,9 +124,9 @@ Item {
 
 		CustomClippingRect {
 			Layout.fillWidth: true
-			Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
+			Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
 			Layout.topMargin: root.topMargin
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: Colors.tPalette.m3surfaceContainer
 			radius: root.rounding
 
 			PwNodePeakMonitor {
@@ -142,22 +141,21 @@ Item {
 				anchors.bottom: parent.bottom
 				anchors.left: parent.left
 				anchors.top: parent.top
-				color: Qt.alpha(DynamicColors.palette.m3primary, 0.15)
+				color: Qt.alpha(Colors.palette.m3primary, 0.15)
 				implicitWidth: parent.width * sourcePeak.peak
 
 				Behavior on implicitWidth {
 					Anim {
-						duration: MaterialEasing.expressiveEffectsTime
 					}
 				}
 			}
 
 			ColumnLayout {
-				anchors.bottomMargin: Appearance.padding.smaller
+				anchors.bottomMargin: Tokens.padding.smaller
 				anchors.fill: parent
-				anchors.leftMargin: Appearance.padding.larger
-				anchors.rightMargin: Appearance.padding.larger
-				anchors.topMargin: Appearance.padding.smaller
+				anchors.leftMargin: Tokens.padding.larger
+				anchors.rightMargin: Tokens.padding.larger
+				anchors.topMargin: Tokens.padding.smaller
 
 				RowLayout {
 					Layout.fillHeight: true
@@ -171,27 +169,27 @@ Item {
 
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
+						color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
 						font.bold: true
 						text: qsTr("%1").arg(Audio.sourceMuted ? qsTr("Muted") : `${Math.round(Audio.sourceVolume * 100)}%`)
 					}
 				}
 
 				RowLayout {
-					spacing: Appearance.spacing.large
+					spacing: Tokens.spacing.large
 
 					CustomMouseArea {
-						Layout.bottomMargin: Appearance.padding.normal
+						Layout.bottomMargin: Tokens.padding.normal
 						Layout.fillWidth: true
-						Layout.preferredHeight: Appearance.padding.larger * 3
+						Layout.preferredHeight: Tokens.padding.larger * 3
 
 						CustomSlider {
 							anchors.left: parent.left
 							anchors.right: parent.right
-							bgColor: Audio.sourceMuted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
-							fgColor: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+							bgColor: Audio.sourceMuted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+							fgColor: Audio.sourceMuted ? Colors.palette.m3error : Colors.palette.m3primary
 							implicitHeight: parent.height
-							insetColor: Audio.sourceMuted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+							insetColor: Audio.sourceMuted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
 							insetIcon: Audio.sourceMuted || Audio.sourceVolume < 0.001 ? "mic_off" : "mic"
 							value: Audio.sourceVolume
 
@@ -205,7 +203,7 @@ Item {
 					}
 
 					CustomSwitch {
-						Layout.bottomMargin: Appearance.padding.normal
+						Layout.bottomMargin: Tokens.padding.normal
 						checked: !Audio.sourceMuted
 
 						onToggled: {
@@ -222,7 +220,7 @@ Item {
 			Layout.fillWidth: true
 			Layout.preferredHeight: 1
 			Layout.topMargin: root.topMargin
-			color: DynamicColors.tPalette.m3outline
+			color: Colors.tPalette.m3outline
 			visible: appTracks.model.length > 0
 		}
 
@@ -238,9 +236,9 @@ Item {
 				required property var modelData
 
 				Layout.fillWidth: true
-				Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
+				Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
 				Layout.topMargin: root.topMargin
-				color: DynamicColors.tPalette.m3surfaceContainer
+				color: Colors.tPalette.m3surfaceContainer
 				radius: root.rounding
 
 				PwNodePeakMonitor {
@@ -255,12 +253,11 @@ Item {
 					anchors.bottom: parent.bottom
 					anchors.left: parent.left
 					anchors.top: parent.top
-					color: Qt.alpha(DynamicColors.palette.m3primary, 0.15)
+					color: Qt.alpha(Colors.palette.m3primary, 0.15)
 					implicitWidth: parent.width * peak.peak
 
 					Behavior on implicitWidth {
 						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
 						}
 					}
 				}
@@ -274,11 +271,11 @@ Item {
 				}
 
 				ColumnLayout {
-					anchors.bottomMargin: Appearance.padding.smaller
+					anchors.bottomMargin: Tokens.padding.smaller
 					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.larger
-					anchors.rightMargin: Appearance.padding.larger
-					anchors.topMargin: Appearance.padding.smaller
+					anchors.leftMargin: Tokens.padding.larger
+					anchors.rightMargin: Tokens.padding.larger
+					anchors.topMargin: Tokens.padding.smaller
 
 					RowLayout {
 						Layout.fillHeight: true
@@ -293,27 +290,27 @@ Item {
 
 						CustomText {
 							Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-							color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
+							color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
 							font.bold: true
 							text: qsTr("%1").arg(appBox.modelData.audio.muted ? qsTr("Muted") : `${Math.round(appBox.modelData.audio.volume * 100)}%`)
 						}
 					}
 
 					RowLayout {
-						spacing: Appearance.spacing.large
+						spacing: Tokens.spacing.large
 
 						CustomMouseArea {
-							Layout.bottomMargin: Appearance.padding.normal
+							Layout.bottomMargin: Tokens.padding.normal
 							Layout.fillWidth: true
-							Layout.preferredHeight: Appearance.padding.larger * 3
+							Layout.preferredHeight: Tokens.padding.larger * 3
 
 							CustomSlider {
 								anchors.left: parent.left
 								anchors.right: parent.right
-								bgColor: appBox.modelData.audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
-								fgColor: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+								bgColor: appBox.modelData.audio.muted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+								fgColor: appBox.modelData.audio.muted ? Colors.palette.m3error : Colors.palette.m3primary
 								implicitHeight: parent.height
-								insetColor: appBox.modelData.audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+								insetColor: appBox.modelData.audio.muted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
 								insetIcon: appBox.modelData.audio.muted || appBox.modelData.audio.volume < 0.001 ? "volume_off" : "volume_up"
 								value: appBox.modelData.audio.volume
 
@@ -327,7 +324,7 @@ Item {
 						}
 
 						CustomSwitch {
-							Layout.bottomMargin: Appearance.padding.normal
+							Layout.bottomMargin: Tokens.padding.normal
 							checked: !appBox.modelData.audio.muted
 
 							onToggled: {

Modules/SysTray/Popouts/TrayMenuPopout.qml

@@ -8,13 +8,14 @@ import QtQuick.Controls
 import QtQuick.Effects
 import qs.Components
 import qs.Modules
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 StackView {
 	id: root
 
 	readonly property int itemHeight: 30
-	readonly property int panelRadius: ((itemHeight / 2) + Appearance.padding.small) * Appearance.rounding.scale
+	readonly property int panelRadius: ((itemHeight / 2) + Tokens.padding.small) * Tokens.rounding.scale
 	required property PopoutState popouts
 	property int rootWidth: 0
 	required property QsMenuHandle trayItem
@@ -55,7 +56,7 @@ StackView {
 
 		opacity: shown ? 1 : 0
 		scale: shown ? 1 : 0.8
-		spacing: Appearance.spacing.extraSmall
+		spacing: Tokens.spacing.extraSmall
 
 		Behavior on opacity {
 			Anim {
@@ -87,12 +88,12 @@ StackView {
 				required property QsMenuEntry modelData
 
 				Layout.fillWidth: true
-				Layout.leftMargin: modelData.isSeparator ? Appearance.padding.normal : 0
-				Layout.rightMargin: modelData.isSeparator ? Appearance.padding.normal : 0
-				color: modelData.isSeparator ? DynamicColors.palette.m3outlineVariant : "transparent"
+				Layout.leftMargin: modelData.isSeparator ? Tokens.padding.normal : 0
+				Layout.rightMargin: modelData.isSeparator ? Tokens.padding.normal : 0
+				color: modelData.isSeparator ? Colors.palette.m3outlineVariant : "transparent"
 				implicitHeight: modelData.isSeparator ? (visible ? 1 : 0) : childrenLoader.item.implicitHeight
 				implicitWidth: childrenLoader.item?.implicitWidth ?? 0
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 				visible: index !== (menuOpener.children.values.length - 1) ? true : (modelData.isSeparator ? false : true)
 
 				Loader {
@@ -103,7 +104,7 @@ StackView {
 					asynchronous: true
 
 					sourceComponent: Item {
-						property int iconWidth: icon.active ? icon.width + Appearance.spacing.normal + icon.anchors.rightMargin : 0
+						property int iconWidth: icon.active ? icon.width + Tokens.spacing.normal + icon.anchors.rightMargin : 0
 
 						implicitHeight: root.itemHeight
 						implicitWidth: label.width + label.anchors.leftMargin * 2 + iconWidth + (expand.item?.width ?? 0)
@@ -150,7 +151,7 @@ StackView {
 								MultiEffect {
 									anchors.fill: iconImage
 									colorization: 1.0
-									colorizationColor: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+									colorizationColor: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
 									source: iconImage
 								}
 							}
@@ -162,7 +163,7 @@ StackView {
 							anchors.left: parent.left
 							anchors.leftMargin: 10
 							anchors.verticalCenter: parent.verticalCenter
-							color: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+							color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
 							text: item.modelData.text
 						}
 
@@ -175,7 +176,7 @@ StackView {
 							asynchronous: true
 
 							sourceComponent: MaterialIcon {
-								color: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+								color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
 								text: "chevron_right"
 							}
 						}
@@ -201,11 +202,11 @@ StackView {
 
 					CustomRect {
 						anchors.fill: parent
-						color: DynamicColors.palette.m3secondaryContainer
-						radius: Appearance.rounding.full
+						color: Colors.palette.m3secondaryContainer
+						radius: Tokens.rounding.full
 
 						StateLayer {
-							color: DynamicColors.palette.m3onSecondaryContainer
+							color: Colors.palette.m3onSecondaryContainer
 							radius: parent.radius
 
 							onClicked: {
@@ -221,13 +222,13 @@ StackView {
 
 						MaterialIcon {
 							anchors.verticalCenter: parent.verticalCenter
-							color: DynamicColors.palette.m3onSecondaryContainer
+							color: Colors.palette.m3onSecondaryContainer
 							text: "chevron_left"
 						}
 
 						CustomText {
 							anchors.verticalCenter: parent.verticalCenter
-							color: DynamicColors.palette.m3onSecondaryContainer
+							color: Colors.palette.m3onSecondaryContainer
 							text: qsTr("Back")
 						}
 					}

Modules/SysTray/Popouts/UPowerPopout.qml

@@ -3,17 +3,18 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.UPower
+import ZShell.Config
 import qs.Modules.SysTray.Common
-import qs.Config
 import qs.Helpers
 import qs.Components
+import qs.Services
 
 Column {
 	id: root
 
-	readonly property int panelRadius: ((profiles.height / 2) + Appearance.padding.small) * Appearance.rounding.scale
+	readonly property int panelRadius: ((profiles.height / 2) + Tokens.padding.small) * Tokens.rounding.scale
 
-	spacing: Appearance.spacing.normal
+	spacing: Tokens.spacing.normal
 
 	Loader {
 		active: Battery.isLaptop
@@ -32,9 +33,9 @@ Column {
 			required property var modelData
 
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.normal
+			anchors.leftMargin: Tokens.padding.normal
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.normal
+			anchors.rightMargin: Tokens.padding.normal
 
 			CustomText {
 				Layout.fillWidth: true
@@ -66,7 +67,7 @@ Column {
 		}
 
 		anchors.left: parent.left
-		anchors.leftMargin: Appearance.padding.normal
+		anchors.leftMargin: Tokens.padding.normal
 		text: Battery.isLaptop ? qsTr("Time %1: %2").arg(Battery.onBattery ? "remaining" : "until charged").arg(Battery.onBattery ? formatSeconds(Battery.timeToEmpty, "Calculating...") : formatSeconds(Battery.timeToFull, "Fully charged!")) : qsTr("Power profile: %1").arg(PowerProfile.toString(PowerProfiles.profile))
 	}
 
@@ -77,10 +78,10 @@ Column {
 		height: active ? ((item as Item)?.implicitHeight ?? 0) : 0
 
 		sourceComponent: CustomRect {
-			color: DynamicColors.palette.m3error
-			implicitHeight: child.implicitHeight + Appearance.padding.large
-			implicitWidth: child.implicitWidth + Appearance.padding.larger * 2
-			radius: Appearance.rounding.large
+			color: Colors.palette.m3error
+			implicitHeight: child.implicitHeight + Tokens.padding.large
+			implicitWidth: child.implicitWidth + Tokens.padding.larger * 2
+			radius: Tokens.rounding.large
 
 			Column {
 				id: child
@@ -89,33 +90,33 @@ Column {
 
 				Row {
 					anchors.horizontalCenter: parent.horizontalCenter
-					spacing: Appearance.spacing.small
+					spacing: Tokens.spacing.small
 
 					MaterialIcon {
 						anchors.verticalCenter: parent.verticalCenter
 						anchors.verticalCenterOffset: -font.pointSize / 10
-						color: DynamicColors.palette.m3onError
+						color: Colors.palette.m3onError
 						text: "warning"
 					}
 
 					CustomText {
 						anchors.verticalCenter: parent.verticalCenter
-						color: DynamicColors.palette.m3onError
-						font.family: Appearance.font.family.mono
+						color: Colors.palette.m3onError
+						font.family: Config.appearance.font.family.mono
 						text: qsTr("Performance Degraded")
 					}
 
 					MaterialIcon {
 						anchors.verticalCenter: parent.verticalCenter
 						anchors.verticalCenterOffset: -font.pointSize / 10
-						color: DynamicColors.palette.m3onError
+						color: Colors.palette.m3onError
 						text: "warning"
 					}
 				}
 
 				CustomText {
 					anchors.horizontalCenter: parent.horizontalCenter
-					color: DynamicColors.palette.m3onError
+					color: Colors.palette.m3onError
 					text: qsTr("Reason: %1").arg(PerformanceDegradationReason.toString(PowerProfiles.degradationReason))
 				}
 			}
@@ -135,16 +136,16 @@ Column {
 		}
 
 		anchors.horizontalCenter: parent.horizontalCenter
-		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: indicator.height + Appearance.padding.extraSmall * 2
-		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Appearance.padding.larger * 2 + Appearance.spacing.small * 8
-		radius: Appearance.rounding.full
+		color: Colors.tPalette.m3surfaceContainer
+		implicitHeight: indicator.height + Tokens.padding.extraSmall * 2
+		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Tokens.padding.larger * 2 + Tokens.spacing.small * 8
+		radius: Tokens.rounding.full
 
 		CustomRect {
 			id: indicator
 
-			color: DynamicColors.palette.m3primary
-			radius: Appearance.rounding.full
+			color: Colors.palette.m3primary
+			radius: Tokens.rounding.full
 			state: profiles.current
 
 			states: [
@@ -180,7 +181,7 @@ Column {
 			id: saver
 
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.extraSmall
+			anchors.leftMargin: Tokens.padding.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
 			icon: "energy_savings_leaf"
 			profile: PowerProfile.PowerSaver
@@ -198,7 +199,7 @@ Column {
 			id: perf
 
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.extraSmall
+			anchors.rightMargin: Tokens.padding.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
 			icon: "bolt"
 			profile: PowerProfile.Performance
@@ -218,12 +219,12 @@ Column {
 		required property string icon
 		required property int profile
 
-		implicitHeight: icon.implicitHeight + Appearance.padding.small
-		implicitWidth: icon.implicitHeight + Appearance.padding.small
+		implicitHeight: icon.implicitHeight + Tokens.padding.small
+		implicitWidth: icon.implicitHeight + Tokens.padding.small
 
 		StateLayer {
-			color: profiles.current === parent.icon ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			radius: Appearance.rounding.full
+			color: profiles.current === parent.icon ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			radius: Tokens.rounding.full
 
 			onClicked: {
 				PowerProfiles.profile = parent.profile;
@@ -234,10 +235,10 @@ Column {
 			id: icon
 
 			anchors.centerIn: parent
-			color: profiles.current === text ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+			color: profiles.current === text ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 			fill: profiles.current === text ? 1 : 0
-			font.pointSize: Appearance.font.size.large * 2
-			grade: DynamicColors.light ? 0 : (text === "balance" ? -25 : 0)
+			font.pointSize: Tokens.font.size.large * 2
+			grade: Colors.light ? 0 : (text === "balance" ? -25 : 0)
 			text: parent.icon
 
 			Behavior on fill {

Modules/SysTray/StatusIcons.qml

@@ -0,0 +1,129 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Helpers
+import qs.Modules.SysTray.Widgets
+import ZShell.Config
+import qs.Components
+import qs.Services
+
+CustomClippingRect {
+	id: root
+
+	readonly property int firstPresent: {
+		const values = model.values;
+		for (let i = 0; i < values.length; i++)
+			if (!collapsed(values[i]))
+				return i;
+		return -1;
+	}
+
+	// Index of the first/last entry that isn't collapsed, for edge margin gating
+	readonly property alias items: row
+	readonly property int lastPresent: {
+		const values = model.values;
+		for (let i = values.length - 1; i >= 0; i--)
+			if (!collapsed(values[i]))
+				return i;
+		return -1;
+	}
+	readonly property int spacing: Tokens.spacing.normal / 2
+
+	// Entries that can shrink to nothing, spacing included
+	function collapsed(entry: var): bool {
+		if (entry.id === "lockStatus")
+			return !Hypr.capsLock && !Hypr.numLock;
+		return false;
+	}
+
+	bottomLeftRadius: Tokens.rounding.smallest / 2
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Tokens.padding.smallest * 2
+	implicitWidth: row.implicitWidth + Tokens.padding.small * 2
+	radius: Tokens.rounding.full
+	topLeftRadius: Tokens.rounding.smallest / 2
+
+	RowLayout {
+		id: row
+
+		anchors.fill: parent
+		anchors.leftMargin: Tokens.padding.small
+		anchors.rightMargin: Tokens.padding.small
+
+		Repeater {
+			model: ScriptModel {
+				id: model
+
+				values: Config.bar.tray.statusIcons.values.filter(e => e.enabled)
+			}
+
+			DelegateChooser {
+				role: "id"
+
+				DelegateChoice {
+					roleValue: "audio"
+
+					delegate: EntryWrapper {
+						name: "audio"
+
+						AudioWidget {
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "microphone"
+
+					delegate: EntryWrapper {
+						name: "audio"
+
+						MicWidget {
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "power"
+
+					delegate: EntryWrapper {
+						name: "upower"
+
+						UPowerWidget {
+						}
+					}
+				}
+			}
+		}
+	}
+
+	component EntryWrapper: Item {
+		required property int index
+		default property Item item
+		property real leftGap: present && index !== root.lastPresent ? margin : 0
+		property int margin: root.spacing / 2
+		required property var modelData
+		property string name: modelData.id.toLowerCase()
+		readonly property bool present: !root.collapsed(modelData)
+		property real rightGap: present && index !== root.firstPresent ? margin : 0
+
+		Layout.alignment: Qt.AlignHCenter
+		Layout.leftMargin: Math.round(leftGap)
+		Layout.rightMargin: Math.round(rightGap)
+		children: item
+		implicitHeight: item?.implicitHeight ?? 0
+		implicitWidth: item?.implicitWidth ?? 0
+
+		Behavior on leftGap {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+		Behavior on rightGap {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+	}
+}

Modules/SysTray/TrayIcons.qml

@@ -0,0 +1,54 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.SystemTray
+import qs.Components
+import ZShell.Config
+import qs.Modules.SysTray.Widgets
+import qs.Modules
+import qs.Services
+
+CustomClippingRect {
+	id: root
+
+	readonly property alias items: repeater
+	readonly property alias layout: sysRow
+	required property RowLayout loader
+	readonly property int padding: Tokens.padding.small
+	required property Wrapper popouts
+
+	bottomRightRadius: Tokens.rounding.smallest / 2
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Tokens.padding.smallest * 2
+	implicitWidth: sysRow.implicitWidth + Tokens.padding.small * 2
+	radius: Tokens.rounding.full
+	topRightRadius: Tokens.rounding.smallest / 2
+
+	RowLayout {
+		id: sysRow
+
+		anchors.centerIn: parent
+		spacing: 0
+
+		Repeater {
+			id: repeater
+
+			model: SystemTray.items
+
+			TrayItem {
+				id: trayItem
+
+				required property int index
+				required property SystemTrayItem modelData
+
+				implicitHeight: 34
+				implicitWidth: 34
+				ind: index
+				item: modelData
+				loader: root.loader
+				popouts: root.popouts
+			}
+		}
+	}
+}

Modules/SysTray/TrayItem.qml

@@ -6,7 +6,8 @@ import Quickshell.Services.SystemTray
 import qs.Helpers
 import qs.Modules
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -45,14 +46,14 @@ Item {
 	CustomRect {
 		anchors.fill: parent
 		anchors.margins: 3
-		color: icon.layer.enabled && enabled && root.current ? DynamicColors.palette.m3primary : "transparent"
+		color: icon.layer.enabled && enabled && root.current ? Colors.palette.m3primary : "transparent"
 		enabled: !Config.bar.tray.showOnHover
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		StateLayer {
 			acceptedButtons: Qt.LeftButton | Qt.RightButton
 			anchors.fill: parent
-			color: icon.layer.enabled && root.current ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+			color: icon.layer.enabled && root.current ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 
 			onClicked: mouse => {
 				if (mouse.button === Qt.LeftButton) {
@@ -77,7 +78,7 @@ Item {
 
 		anchors.centerIn: parent
 		antialiasing: true
-		color: root.current && !Config.bar.tray.showOnHover ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		color: root.current && !Config.bar.tray.showOnHover ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 		implicitSize: Config.bar.tray.trayIconSize * root.dpr
 		layer.enabled: Config.bar.tray.recolorIcons
 		scale: 1 / root.dpr

Modules/SysTray/TrayWidget.qml

@@ -4,9 +4,10 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.SystemTray
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules.SysTray.Widgets
 import qs.Modules
+import qs.Services
 
 RowLayout {
 	id: root
@@ -44,15 +45,20 @@ RowLayout {
 	function getHoveredSubItem(localX, localY) {
 		let modPos = mapToItem(sysTrayMod, localX, localY);
 		if (sysTrayMod.contains(Qt.point(modPos.x, modPos.y))) {
-			let modRowPos = sysTrayMod.mapToItem(sysModRow, modPos.x, modPos.y);
-			let child = closestRowChild(sysModRow, modRowPos.x);
+			let modRowPos = sysTrayMod.mapToItem(sysIcons, modPos.x, modPos.y);
+			let child = closestRowChild(sysIcons, modRowPos.x);
 			if (child) {
-				if (child.objectName === "audioWidget" && Config.bar.popouts.audio)
+				if (child.objectName === "audio" && Config.bar.popouts.audio)
 					return {
 						id: "audio",
 						item: child
 					};
-				if (child.objectName === "upowerWidget" && Config.bar.popouts.upower)
+				if (child.objectName === "microphone" && Config.bar.popouts.audio)
+					return {
+						id: "audio",
+						item: child
+					};
+				if (child.objectName === "upower" && Config.bar.popouts.upower)
 					return {
 						id: "upower",
 						item: child
@@ -75,19 +81,19 @@ RowLayout {
 		return null;
 	}
 
-	height: Config.bar.height + Appearance.padding.smallest * 2
-	spacing: Appearance.padding.small
-	width: sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small
+	height: Config.bar.height + Tokens.padding.smallest * 2
+	spacing: Tokens.padding.small
+	width: sysTray.implicitWidth + sysTrayMod.implicitWidth + Tokens.padding.small
 
 	CustomClippingRect {
 		id: sysTray
 
 		Layout.fillHeight: true
-		bottomRightRadius: Appearance.rounding.smallest / 2
-		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitWidth: sysRow.width + Appearance.padding.small * 2
-		radius: Appearance.rounding.full
-		topRightRadius: Appearance.rounding.smallest / 2
+		bottomRightRadius: Tokens.rounding.smallest / 2
+		color: Colors.tPalette.m3surfaceContainer
+		implicitWidth: sysRow.width + Tokens.padding.small * 2
+		radius: Tokens.rounding.full
+		topRightRadius: Tokens.rounding.smallest / 2
 
 		Row {
 			id: sysRow
@@ -121,35 +127,18 @@ RowLayout {
 		id: sysTrayMod
 
 		Layout.fillHeight: true
-		bottomLeftRadius: Appearance.rounding.smallest / 2
-		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitWidth: sysModRow.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal
-		radius: Appearance.rounding.full
-		topLeftRadius: Appearance.rounding.smallest / 2
+		bottomLeftRadius: Tokens.rounding.smallest / 2
+		color: Colors.tPalette.m3surfaceContainer
+		implicitWidth: sysIcons.implicitWidth + Tokens.padding.smaller + Tokens.padding.normal
+		radius: Tokens.rounding.full
+		topLeftRadius: Tokens.rounding.smallest / 2
 
-		RowLayout {
-			id: sysModRow
+		StatusIcons {
+			id: sysIcons
 
 			anchors.fill: parent
-			anchors.leftMargin: Appearance.padding.smaller
-			anchors.rightMargin: Appearance.padding.normal
-
-			AudioWidget {
-				Layout.fillHeight: true
-				Layout.rightMargin: hasContent ? Appearance.spacing.extraSmall / 2 : 0
-				objectName: "audioWidget"
-
-				Behavior on Layout.rightMargin {
-					Anim {
-						type: Anim.FastEffects
-					}
-				}
-			}
-
-			UPowerWidget {
-				Layout.fillHeight: true
-				objectName: "upowerWidget"
-			}
+			anchors.leftMargin: Tokens.padding.smaller
+			anchors.rightMargin: Tokens.padding.normal
 		}
 	}
 }

Modules/SysTray/Widgets/AudioWidget.qml

@@ -4,75 +4,29 @@ import Quickshell.Io
 import Quickshell.Services.Pipewire
 import qs.Daemons
 import qs.Modules
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
-RowLayout {
-	id: root
+MaterialIcon {
+	id: speaker
 
-	property color barColor: DynamicColors.palette.m3primary
-	readonly property bool hasContent: mic.visible || speaker.visible
-	property color textColor: DynamicColors.palette.m3onSurface
+	animate: true
+	color: Audio.muted ? Colors.palette.m3error : Colors.palette.m3onSurface
+	fill: 1
+	font.pointSize: Tokens.font.size.larger
+	text: Audio.muted ? "volume_off" : "volume_up"
 
-	width: hasContent ? implicitWidth : 0
-
-	MaterialIcon {
-		id: mic
-
-		readonly property bool shouldBeVisible: Config.bar.tray.showMicrophone
-
-		Layout.alignment: Qt.AlignVCenter
-		Layout.maximumWidth: shouldBeVisible ? implicitWidth : 0
-		animate: true
-		color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : root.textColor
-		fill: 1
-		font.pointSize: Appearance.font.size.larger
-		opacity: shouldBeVisible ? 1 : 0
-		scale: shouldBeVisible ? 1 : 0
-		text: Audio.sourceMuted ? "mic_off" : "mic"
-		visible: opacity > 0
-
-		Behavior on Layout.maximumWidth {
-			Anim {
-			}
-		}
-		Behavior on opacity {
-			Anim {
-			}
-		}
-		Behavior on scale {
-			Anim {
-			}
+	Behavior on Layout.maximumWidth {
+		Anim {
 		}
 	}
-
-	MaterialIcon {
-		id: speaker
-
-		readonly property bool shouldBeVisible: Config.bar.tray.showAudio
-
-		Layout.alignment: Qt.AlignVCenter
-		Layout.maximumWidth: shouldBeVisible ? implicitWidth : 0
-		animate: true
-		color: Audio.muted ? DynamicColors.palette.m3error : root.textColor
-		fill: 1
-		font.pointSize: Appearance.font.size.larger
-		opacity: shouldBeVisible ? 1 : 0
-		scale: shouldBeVisible ? 1 : 0
-		text: Audio.muted ? "volume_off" : "volume_up"
-		visible: opacity > 0
-
-		Behavior on Layout.maximumWidth {
-			Anim {
-			}
+	Behavior on opacity {
+		Anim {
 		}
-		Behavior on opacity {
-			Anim {
-			}
-		}
-		Behavior on scale {
-			Anim {
-			}
+	}
+	Behavior on scale {
+		Anim {
 		}
 	}
 }

Modules/SysTray/Widgets/MicWidget.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell.Services.Pipewire
+import qs.Daemons
+import qs.Modules
+import ZShell.Config
+import qs.Components
+import qs.Services
+
+MaterialIcon {
+	id: mic
+
+	animate: true
+	color: (Audio.sourceMuted ?? false) ? Colors.palette.m3error : Colors.palette.m3onSurface
+	fill: 1
+	font.pointSize: Tokens.font.size.larger
+	text: Audio.sourceMuted ? "mic_off" : "mic"
+
+	Behavior on Layout.maximumWidth {
+		Anim {
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+}

Modules/SysTray/Widgets/UPowerWidget.qml

@@ -3,21 +3,15 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Modules.SysTray.Common
 import qs.Components
-import qs.Config
 import qs.Helpers
 
 Item {
 	id: root
 
 	readonly property Item currentItem: batteryIconLoader?.item ?? peripheralIconLoader?.item ?? upowerIconLoader.item
-	readonly property bool shouldBeActive: Config.bar.tray.showPower
 
-	Layout.preferredHeight: shouldBeActive ? implicitHeight : 0
-	Layout.preferredWidth: shouldBeActive ? implicitWidth : 0
 	implicitHeight: currentItem?.implicitHeight ?? 0
 	implicitWidth: currentItem?.implicitWidth ?? 0
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0
 	visible: opacity > 0
 
 	Behavior on Layout.preferredHeight {