Merge branch 'main' into feat/fullscreen-reveal-bar

Modules/Settings/Common/AudioDeviceList.qml

@@ -5,7 +5,8 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Services.Pipewire
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ItemList {
 	id: root
@@ -31,9 +32,9 @@ ItemList {
 		implicitHeight: deviceLayout.implicitHeight + deviceLayout.anchors.margins * 2
 
 		StateLayer {
-			bottomLeftRadius: device.index === root?.list.count - 1 ? Appearance.rounding.large : radius
-			bottomRightRadius: device.index === root?.list.count - 1 ? Appearance.rounding.large : radius
-			radius: Appearance.rounding.extraSmall
+			bottomLeftRadius: device.index === root?.list.count - 1 ? Tokens.rounding.large : radius
+			bottomRightRadius: device.index === root?.list.count - 1 ? Tokens.rounding.large : radius
+			radius: Tokens.rounding.extraSmall
 
 			onClicked: root.selected(device.modelData)
 		}
@@ -42,24 +43,24 @@ ItemList {
 			id: deviceLayout
 
 			anchors.fill: parent
-			anchors.leftMargin: Appearance.padding.largeIncreased
-			anchors.margins: Appearance.padding.large
-			anchors.rightMargin: Appearance.padding.largeIncreased
-			spacing: Appearance.spacing.normal
+			anchors.leftMargin: Tokens.padding.largeIncreased
+			anchors.margins: Tokens.padding.large
+			anchors.rightMargin: Tokens.padding.largeIncreased
+			spacing: Tokens.spacing.normal
 
 			CustomRect {
-				color: device.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
-				implicitHeight: devIcon.implicitHeight + Appearance.padding.normal * 2
+				color: device.active ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
+				implicitHeight: devIcon.implicitHeight + Tokens.padding.normal * 2
 				implicitWidth: implicitHeight
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 
 				MaterialIcon {
 					id: devIcon
 
 					anchors.centerIn: parent
-					color: device.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+					color: device.active ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
 					fill: device.active ? 1 : 0
-					font.pointSize: Appearance.font.size.large
+					font.pointSize: Tokens.font.size.large
 					text: root.iconName
 
 					Behavior on fill {
@@ -72,13 +73,13 @@ ItemList {
 			CustomText {
 				Layout.fillWidth: true
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.smaller
+				font.pointSize: Tokens.font.size.smaller
 				text: device.modelData?.description || device.modelData?.name || qsTr("Unknown")
 			}
 
 			MaterialIcon {
-				color: DynamicColors.palette.m3primary
-				font.pointSize: Appearance.font.size.large
+				color: Colors.palette.m3primary
+				font.pointSize: Tokens.font.size.large
 				opacity: device.active ? 1 : 0
 				text: "check"
 

Modules/Settings/Common/BlobPopup.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import ZShell.Blobs
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -15,7 +16,7 @@ Item {
 	property bool open
 	property int padding
 	property bool pressOverride
-	property int topMovement: Appearance.padding.large
+	property int topMovement: Tokens.padding.large
 
 	implicitHeight: btn.implicitHeight * 0.9
 	implicitWidth: btn.implicitWidth * 0.9
@@ -29,9 +30,9 @@ Item {
 	BlobGroup {
 		id: blobGroup
 
-		color: DynamicColors.palette.m3surfaceContainerHighest
+		color: Colors.palette.m3surfaceContainerHighest
 		cornerFill: false
-		smoothing: Appearance.rounding.medium
+		smoothing: Tokens.rounding.medium
 
 		Behavior on color {
 			CAnim {
@@ -43,9 +44,9 @@ Item {
 		id: btnRect
 
 		anchors.fill: parent
-		anchors.margins: (!(btn.pressed || root.pressOverride) && (btn.containsMouse || root.hoverOverride) ? -Appearance.padding.extraSmall : 0) + (root.open ? -Appearance.padding.extraSmall : 0)
+		anchors.margins: (!(btn.pressed || root.pressOverride) && (btn.containsMouse || root.hoverOverride) ? -Tokens.padding.extraSmall : 0) + (root.open ? -Tokens.padding.extraSmall : 0)
 		group: blobGroup
-		radius: root.open ? Appearance.rounding.large : Appearance.rounding.medium
+		radius: root.open ? Tokens.rounding.large : Tokens.rounding.medium
 
 		Behavior on anchors.margins {
 			Anim {
@@ -67,14 +68,14 @@ Item {
 		group: blobGroup
 		implicitHeight: parent.height
 		implicitWidth: parent.width
-		radius: Appearance.rounding.small + Appearance.padding.small
+		radius: Tokens.rounding.small + Tokens.padding.small
 
 		states: State {
 			name: "open"
 			when: root.open
 
 			PropertyChanges {
-				rect.anchors.rightMargin: root.width - Appearance.spacing.small
+				rect.anchors.rightMargin: root.width - Tokens.spacing.small
 				rect.anchors.topMargin: -root.topMovement
 				rect.implicitHeight: root.content.implicitHeight + root.padding * 2
 				rect.implicitWidth: root.content.implicitWidth + root.padding * 2
@@ -87,8 +88,8 @@ Item {
 			}
 
 			Anim {
-				duration: Appearance.anim.durations.expressiveFastEffects
-				easing.bezierCurve: Appearance.anim.curves.expressiveFastEffects
+				duration: Tokens.anim.durations.expressiveFastEffects
+				easing.bezierCurve: Tokens.anim.curves.expressiveFastEffects
 				properties: "topMargin,implicitHeight"
 			}
 
@@ -111,7 +112,7 @@ Item {
 		anchors.centerIn: parent
 		cursorShape: Qt.PointingHandCursor
 		hoverEnabled: true
-		implicitHeight: icon.implicitHeight + Appearance.padding.extraSmall * 2
+		implicitHeight: icon.implicitHeight + Tokens.padding.extraSmall * 2
 		implicitWidth: implicitHeight
 
 		onClicked: root.open = !root.open
@@ -120,8 +121,8 @@ Item {
 			id: icon
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.medium
+			color: Colors.palette.m3onSurfaceVariant
+			font.pointSize: Tokens.font.size.medium
 			text: "view_apps"
 		}
 	}

Modules/Settings/Common/ConnectedRect.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomRect {
 	id: root
@@ -13,12 +14,12 @@ CustomRect {
 		flash.restart();
 	}
 
-	bottomLeftRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
-	bottomRightRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
-	color: DynamicColors.tPalette.m3surfaceContainer
+	bottomLeftRadius: last ? Tokens.rounding.large : Tokens.rounding.extraSmall
+	bottomRightRadius: last ? Tokens.rounding.large : Tokens.rounding.extraSmall
+	color: Colors.tPalette.m3surfaceContainer
 	opacity: enabled && parent.enabled ? 1 : 0.5
-	topLeftRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
-	topRightRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
+	topLeftRadius: first ? Tokens.rounding.large : Tokens.rounding.extraSmall
+	topRightRadius: first ? Tokens.rounding.large : Tokens.rounding.extraSmall
 
 	Behavior on opacity {
 		Anim {
@@ -31,7 +32,7 @@ CustomRect {
 		anchors.fill: parent
 		bottomLeftRadius: parent.bottomLeftRadius
 		bottomRightRadius: parent.bottomRightRadius
-		color: DynamicColors.palette.m3primary
+		color: Colors.palette.m3primary
 		opacity: 0
 		radius: parent.radius
 		topLeftRadius: parent.topLeftRadius
@@ -41,28 +42,28 @@ CustomRect {
 			id: flash
 
 			Anim {
-				duration: Appearance.anim.durations.small
+				duration: Tokens.anim.durations.small
 				property: "opacity"
 				target: highlight
 				to: 0.2
 			}
 
 			Anim {
-				duration: Appearance.anim.durations.normal
+				duration: Tokens.anim.durations.normal
 				property: "opacity"
 				target: highlight
 				to: 0.08
 			}
 
 			Anim {
-				duration: Appearance.anim.durations.small
+				duration: Tokens.anim.durations.small
 				property: "opacity"
 				target: highlight
 				to: 0.2
 			}
 
 			Anim {
-				duration: Appearance.anim.durations.extraLarge
+				duration: Tokens.anim.durations.extraLarge
 				property: "opacity"
 				target: highlight
 				to: 0

Modules/Settings/Common/DialogRowButton.qml

@@ -4,7 +4,8 @@ import QtQuick
 import QtQuick.Layouts
 import ZShell.Blobs
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -40,7 +41,7 @@ Item {
 	BlobGroup {
 		id: blobGroup
 
-		color: root.open ? DynamicColors.palette.m3surfaceContainerHighest : DynamicColors.tPalette.m3surfaceContainer
+		color: root.open ? Colors.palette.m3surfaceContainerHighest : Colors.tPalette.m3surfaceContainer
 
 		Behavior on color {
 			CAnim {
@@ -72,9 +73,9 @@ Item {
 
 			PropertyChanges {
 				backdrop.enabled: true
-				dialogBg.bottomLeftRadius: Appearance.rounding.large
-				dialogBg.bottomRightRadius: Appearance.rounding.large
-				dialogBg.radius: Appearance.rounding.large
+				dialogBg.bottomLeftRadius: Tokens.rounding.large
+				dialogBg.bottomRightRadius: Tokens.rounding.large
+				dialogBg.radius: Tokens.rounding.large
 				dialogContent.opacity: 1
 				dialogWrapper.height: root.openHeight
 				dialogWrapper.width: root.openWidth
@@ -130,12 +131,12 @@ Item {
 			id: dialogBg
 
 			anchors.fill: parent
-			bottomLeftRadius: Appearance.rounding.large
-			bottomRightRadius: Appearance.rounding.large
+			bottomLeftRadius: Tokens.rounding.large
+			bottomRightRadius: Tokens.rounding.large
 			deformScale: 0
 			group: blobGroup
 			opacity: blobGroup.color.a * (root.enabled ? 1 : 0.5)
-			radius: Appearance.rounding.extraSmall
+			radius: Tokens.rounding.extraSmall
 		}
 
 		RowButton {
@@ -168,23 +169,23 @@ Item {
 				onWheel: event => event.accepted = true
 
 				ColumnLayout {
-					anchors.bottomMargin: Appearance.padding.largeIncreased
+					anchors.bottomMargin: Tokens.padding.largeIncreased
 					anchors.fill: parent
-					anchors.margins: Appearance.padding.extraLarge
+					anchors.margins: Tokens.padding.extraLarge
 					spacing: 0
 
 					CustomText {
-						font.pointSize: Appearance.font.size.large
+						font.pointSize: Tokens.font.size.large
 						text: root.header
 					}
 
 					Loader {
 						Layout.fillWidth: true
-						Layout.topMargin: Appearance.spacing.normal
+						Layout.topMargin: Tokens.spacing.normal
 						active: root.separateContent
 
 						sourceComponent: CustomRect {
-							color: DynamicColors.palette.m3outline
+							color: Colors.palette.m3outline
 							implicitHeight: 1
 						}
 					}
@@ -198,26 +199,26 @@ Item {
 					}
 
 					Loader {
-						Layout.bottomMargin: Appearance.spacing.normal
+						Layout.bottomMargin: Tokens.spacing.normal
 						Layout.fillWidth: true
 						active: root.separateContent
 
 						sourceComponent: CustomRect {
-							color: DynamicColors.palette.m3outline
+							color: Colors.palette.m3outline
 							implicitHeight: 1
 						}
 					}
 
 					RowLayout {
 						Layout.alignment: Qt.AlignRight
-						spacing: Appearance.spacing.extraSmall
+						spacing: Tokens.spacing.extraSmall
 
 						TextButton {
-							horizontalPadding: Appearance.padding.largeIncreased
+							horizontalPadding: Tokens.padding.largeIncreased
 							isRound: true
 							text: qsTr("Cancel")
 							type: TextButton.Text
-							verticalPadding: Appearance.padding.normal
+							verticalPadding: Tokens.padding.normal
 
 							onClicked: {
 								root.cancelled();
@@ -227,11 +228,11 @@ Item {
 
 						TextButton {
 							enabled: root.acceptAllowed
-							horizontalPadding: Appearance.padding.largeIncreased
+							horizontalPadding: Tokens.padding.largeIncreased
 							isRound: true
 							text: root.acceptLabel
 							type: TextButton.Text
-							verticalPadding: Appearance.padding.normal
+							verticalPadding: Tokens.padding.normal
 
 							onClicked: {
 								root.accepted();

Modules/Settings/Common/DialogSelectButton.qml

@@ -1,8 +1,9 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
 DialogRowButton {
 	id: root
@@ -19,15 +20,15 @@ DialogRowButton {
 	}
 
 	acceptAllowed: !!selectedItem
-	horizontalContentMargin: -Appearance.padding.small
+	horizontalContentMargin: -Tokens.padding.small
 	separateContent: true
 
 	content: Component {
 		VerticalFadeListView {
-			bottomMargin: Appearance.padding.large
+			bottomMargin: Tokens.padding.large
 			model: root.model
 			spacing: 0
-			topMargin: Appearance.padding.large
+			topMargin: Tokens.padding.large
 
 			delegate: CustomRect {
 				id: item
@@ -38,9 +39,9 @@ DialogRowButton {
 				anchors.left: ListView.view.contentItem.left
 				anchors.margins: 1 // Gets cut off for some reason without this
 				anchors.right: ListView.view.contentItem.right
-				color: Qt.alpha(DynamicColors.palette.m3tertiaryContainer, selected ? 1 : 0)
-				implicitHeight: label.implicitHeight + Appearance.padding.normal * 2
-				radius: stateLayer.pressed ? Appearance.rounding.extraSmall : selected ? Appearance.rounding.large : Appearance.rounding.normal
+				color: Qt.alpha(Colors.palette.m3tertiaryContainer, selected ? 1 : 0)
+				implicitHeight: label.implicitHeight + Tokens.padding.normal * 2
+				radius: stateLayer.pressed ? Tokens.rounding.extraSmall : selected ? Tokens.rounding.large : Tokens.rounding.normal
 
 				Behavior on radius {
 					Anim {
@@ -58,24 +59,24 @@ DialogRowButton {
 					id: label
 
 					anchors.left: parent.left
-					anchors.margins: Appearance.padding.large
+					anchors.margins: Tokens.padding.large
 					anchors.right: item.selected ? checkIcon.left : parent.right
-					anchors.rightMargin: item.selected ? Appearance.spacing.normal : anchors.margins
+					anchors.rightMargin: item.selected ? Tokens.spacing.normal : anchors.margins
 					anchors.verticalCenter: parent.verticalCenter
-					color: item.selected ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+					color: item.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
 					elide: Text.ElideRight
-					font.pointSize: Appearance.font.size.smaller
+					font.pointSize: Tokens.font.size.smaller
 					text: root.labelFor(item.modelData)
 				}
 
 				MaterialIcon {
 					id: checkIcon
 
-					anchors.margins: Appearance.padding.large
+					anchors.margins: Tokens.padding.large
 					anchors.right: parent.right
 					anchors.verticalCenter: parent.verticalCenter
-					color: DynamicColors.palette.m3onTertiaryContainer
-					font.pointSize: Appearance.font.size.medium
+					color: Colors.palette.m3onTertiaryContainer
+					font.pointSize: Tokens.font.size.medium
 					opacity: item.selected ? 1 : 0
 					text: "check"
 

Modules/Settings/Common/InfoRow.qml

@@ -3,13 +3,14 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ConnectedRect {
 	id: root
 
 	property string icon
-	property color iconColor: DynamicColors.palette.m3onSurfaceVariant
+	property color iconColor: Colors.palette.m3onSurfaceVariant
 	property alias label: label.text
 	property Component leadingComponent: icon ? iconComp : null
 	property string subtext
@@ -23,7 +24,7 @@ ConnectedRect {
 
 		MaterialIcon {
 			color: root.iconColor
-			font.pointSize: Appearance.font.size.small
+			font.pointSize: Tokens.font.size.small
 			text: root.icon
 		}
 	}
@@ -32,10 +33,10 @@ ConnectedRect {
 		id: rowLayout
 
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.largeIncreased
-		anchors.margins: Appearance.padding.larger
-		anchors.rightMargin: Appearance.padding.largeIncreased
-		spacing: Appearance.spacing.small
+		anchors.leftMargin: Tokens.padding.largeIncreased
+		anchors.margins: Tokens.padding.larger
+		anchors.rightMargin: Tokens.padding.largeIncreased
+		spacing: Tokens.spacing.small
 
 		Loader {
 			active: root.leadingComponent
@@ -52,14 +53,14 @@ ConnectedRect {
 
 				Layout.fillWidth: true
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 			}
 
 			CustomText {
 				Layout.fillWidth: true
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				text: root.subtext
 				visible: root.subtext
 			}
@@ -69,9 +70,9 @@ ConnectedRect {
 			id: value
 
 			Layout.maximumWidth: root.width / 2
-			color: DynamicColors.palette.m3onSurfaceVariant
+			color: Colors.palette.m3onSurfaceVariant
 			elide: Text.ElideRight
-			font.pointSize: Appearance.font.size.small
+			font.pointSize: Tokens.font.size.small
 			horizontalAlignment: Text.AlignRight
 		}
 	}

Modules/Settings/Common/ItemList.qml

@@ -3,7 +3,8 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ConnectedRect {
 	id: root
@@ -18,8 +19,8 @@ ConnectedRect {
 
 	Layout.fillWidth: true
 	clip: true
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: (showList && list.count > 0 ? list.contentHeight : placeholder.implicitHeight + Appearance.padding.extraLarge * 2) + extraHeight
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: (showList && list.count > 0 ? list.contentHeight : placeholder.implicitHeight + Tokens.padding.extraLarge * 2) + extraHeight
 
 	Behavior on implicitHeight {
 		Anim {
@@ -39,21 +40,21 @@ ConnectedRect {
 			}
 		}
 		sourceComponent: ColumnLayout {
-			spacing: Appearance.spacing.extraSmall
+			spacing: Tokens.spacing.extraSmall
 
 			MaterialIcon {
 				Layout.alignment: Qt.AlignHCenter
 				animate: true
-				color: DynamicColors.palette.m3outline
-				font.pointSize: Appearance.font.size.large
+				color: Colors.palette.m3outline
+				font.pointSize: Tokens.font.size.large
 				text: root.placeholderIcon
 			}
 
 			CustomText {
 				Layout.alignment: Qt.AlignHCenter
 				animate: true
-				color: DynamicColors.palette.m3outline
-				font.pointSize: Appearance.font.size.large
+				color: Colors.palette.m3outline
+				font.pointSize: Tokens.font.size.large
 				text: root.placeholderText
 			}
 		}

Modules/Settings/Common/ListEditor.qml

@@ -3,8 +3,9 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
 ListView {
 	id: root
@@ -31,7 +32,7 @@ ListView {
 	Layout.fillWidth: true
 	implicitHeight: contentHeight
 	interactive: false
-	spacing: Appearance.spacing.extraSmall / 2
+	spacing: Tokens.spacing.extraSmall / 2
 
 	add: Transition {
 		Anim {
@@ -93,7 +94,7 @@ ListView {
 		property int pressIndex
 		property point pressPos
 		property real radiusLerpProg
-		property real topRadius: root?.first && DelegateModel.itemsIndex === 0 ? Appearance.rounding.large : Appearance.rounding.extraSmall
+		property real topRadius: root?.first && DelegateModel.itemsIndex === 0 ? Tokens.rounding.large : Tokens.rounding.extraSmall
 
 		function lerpRadius(a: real, b: real): real {
 			return a + (b - a) * radiusLerpProg;
@@ -109,11 +110,11 @@ ListView {
 			name: "held"
 
 			PropertyChanges {
-				dragIcon.color: DynamicColors.palette.m3onPrimaryContainer
+				dragIcon.color: Colors.palette.m3onPrimaryContainer
 				elevation.opacity: 1
 				item.radiusLerpProg: 1
-				itemBg.color: DynamicColors.palette.m3primaryContainer
-				label.color: DynamicColors.palette.m3onPrimaryContainer
+				itemBg.color: Colors.palette.m3primaryContainer
+				label.color: Colors.palette.m3onPrimaryContainer
 				placeholder.opacity: 0.1
 			}
 		}
@@ -137,9 +138,9 @@ ListView {
 			id: placeholder
 
 			anchors.fill: parent
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			opacity: 0
-			radius: Appearance.rounding.extraSmall
+			radius: Tokens.rounding.extraSmall
 			topLeftRadius: item.topRadius
 			topRightRadius: item.topRadius
 		}
@@ -170,10 +171,11 @@ ListView {
 				item.held = true;
 
 				itemContent.x = Qt.binding(() => {
-					if (!root)
+					if (!root) {
 						return 0;
+					}
 
-					const maxOvershoot = Appearance.padding.extraExtraLarge;
+					const maxOvershoot = Tokens.padding.extraLargeIncreased;
 					const x = mouse.mouseX - item.pressPos.x;
 					return root.dampOvershoot(Math.abs(x), maxOvershoot) * Math.sign(x);
 				});
@@ -181,7 +183,7 @@ ListView {
 					if (!root)
 						return 0;
 
-					const maxOvershoot = Appearance.padding.extraLarge;
+					const maxOvershoot = Tokens.padding.extraLarge;
 					const yDiff = item.y - item.lastMoveY; // Extra offset if the y of the item changed between mouseY updates
 					const y = mouse.mouseY - item.pressPos.y - yDiff;
 					const absY = item.mapToItem(root.contentItem, 0, y).y;
@@ -235,10 +237,10 @@ ListView {
 				id: itemBg
 
 				anchors.fill: parent
-				color: DynamicColors.tPalette.m3surfaceContainer
-				radius: item.lerpRadius(Appearance.rounding.extraSmall, Appearance.rounding.large)
-				topLeftRadius: item.lerpRadius(item.topRadius, Appearance.rounding.large)
-				topRightRadius: item.lerpRadius(item.topRadius, Appearance.rounding.large)
+				color: Colors.tPalette.m3surfaceContainer
+				radius: item.lerpRadius(Tokens.rounding.extraSmall, Tokens.rounding.large)
+				topLeftRadius: item.lerpRadius(item.topRadius, Tokens.rounding.large)
+				topRightRadius: item.lerpRadius(item.topRadius, Tokens.rounding.large)
 			}
 
 			MouseArea {
@@ -251,7 +253,7 @@ ListView {
 
 				CustomRect {
 					anchors.fill: parent
-					color: DynamicColors.palette.m3onSurface
+					color: Colors.palette.m3onSurface
 					opacity: parent.containsMouse && !item.held ? 0.08 : 0
 					radius: itemBg.radius
 					topLeftRadius: itemBg.topLeftRadius
@@ -269,16 +271,16 @@ ListView {
 				id: row
 
 				anchors.fill: parent
-				anchors.leftMargin: Appearance.padding.largeIncreased
-				anchors.margins: Appearance.padding.normal
-				anchors.rightMargin: Appearance.padding.large
-				spacing: Appearance.spacing.normal
+				anchors.leftMargin: Tokens.padding.largeIncreased
+				anchors.margins: Tokens.padding.normal
+				anchors.rightMargin: Tokens.padding.large
+				spacing: Tokens.spacing.normal
 
 				MaterialIcon {
 					id: dragIcon
 
-					color: Qt.alpha(DynamicColors.palette.m3onSurfaceVariant, enabledSwitch.checked ? 1 : 0.5)
-					font.pointSize: Appearance.font.size.medium
+					color: Qt.alpha(Colors.palette.m3onSurfaceVariant, enabledSwitch.checked ? 1 : 0.5)
+					font.pointSize: Tokens.font.size.medium
 					text: "drag_indicator"
 				}
 
@@ -286,9 +288,9 @@ ListView {
 					id: label
 
 					Layout.fillWidth: true
-					color: Qt.alpha(DynamicColors.palette.m3onSurface, enabledSwitch.checked ? 1 : 0.5)
+					color: Qt.alpha(Colors.palette.m3onSurface, enabledSwitch.checked ? 1 : 0.5)
 					elide: Text.ElideRight
-					font.pointSize: Appearance.font.size.smaller
+					font.pointSize: Tokens.font.size.smaller
 					text: root.labelFor(item.modelData)
 				}
 
@@ -296,15 +298,15 @@ ListView {
 					id: enabledSwitch
 
 					checked: root.toggledFor(item.modelData)
-					font.pointSize: Appearance.font.size.medium
+					font.pointSize: Tokens.font.size.medium
 
 					onToggled: root.itemToggled(item.DelegateModel.itemsIndex, checked)
 				}
 
 				IconButton {
-					font.pointSize: Appearance.font.size.large
+					font.pointSize: Tokens.font.size.large
 					icon: "delete"
-					inactiveOnColor: DynamicColors.palette.m3error
+					inactiveOnColor: Colors.palette.m3error
 					isRound: true
 					label.fill: 0
 					type: IconButton.Text

Modules/Settings/Common/Logo.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import QtQuick.Shapes
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
 Item {
 	id: root
@@ -31,12 +32,12 @@ Item {
 				y2: shape.height
 
 				GradientStop {
-					color: DynamicColors.palette.m3primary
+					color: Colors.palette.m3primary
 					position: 0.0
 				}
 
 				GradientStop {
-					color: DynamicColors.palette.m3tertiary
+					color: Colors.palette.m3tertiary
 					position: 1.0
 				}
 			}

Modules/Settings/Common/NavRow.qml

@@ -3,7 +3,8 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ConnectedRect {
 	id: root
@@ -25,16 +26,16 @@ ConnectedRect {
 		id: navLayout
 
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.largeIncreased
-		anchors.margins: Appearance.padding.normal
-		anchors.rightMargin: Appearance.padding.largeIncreased
-		spacing: Appearance.spacing.normal
+		anchors.leftMargin: Tokens.padding.largeIncreased
+		anchors.margins: Tokens.padding.normal
+		anchors.rightMargin: Tokens.padding.largeIncreased
+		spacing: Tokens.spacing.normal
 
 		MaterialIcon {
 			id: icon
 
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.large
+			color: Colors.palette.m3onSurfaceVariant
+			font.pointSize: Tokens.font.size.large
 		}
 
 		ColumnLayout {
@@ -46,7 +47,7 @@ ConnectedRect {
 
 				Layout.fillWidth: true
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 			}
 
 			CustomText {
@@ -54,16 +55,16 @@ ConnectedRect {
 
 				Layout.fillWidth: true
 				animate: true
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				visible: text
 			}
 		}
 
 		MaterialIcon {
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.medium
+			color: Colors.palette.m3onSurfaceVariant
+			font.pointSize: Tokens.font.size.medium
 			text: "chevron_right"
 		}
 	}

Modules/Settings/Common/OverlayRow.qml

@@ -1,18 +1,19 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.Settings
+import qs.Services
 
 ConnectedRect {
 	id: root
 
 	property alias checked: switchButton.checked
-	property int horizontalPadding: Appearance.padding.largeIncreased
+	property int horizontalPadding: Tokens.padding.largeIncreased
 	required property Component popup
 	property alias subtext: subtext.text
 	property alias text: text.text
-	property int verticalPadding: Appearance.padding.normal
+	property int verticalPadding: Tokens.padding.normal
 
 	signal clicked(checked: bool)
 
@@ -25,20 +26,20 @@ ConnectedRect {
 		anchors.left: parent.left
 		anchors.leftMargin: root.horizontalPadding
 		anchors.right: icon.left
-		anchors.rightMargin: Appearance.padding.normal
+		anchors.rightMargin: Tokens.padding.normal
 		anchors.verticalCenter: parent.verticalCenter
 
 		CustomText {
 			id: text
 
-			font.pointSize: Appearance.font.size.smaller
+			font.pointSize: Tokens.font.size.smaller
 		}
 
 		CustomText {
 			id: subtext
 
-			color: DynamicColors.palette.m3outline
-			font.pointSize: Appearance.font.size.small
+			color: Colors.palette.m3outline
+			font.pointSize: Tokens.font.size.small
 			wrapMode: Text.WordWrap
 		}
 	}
@@ -47,7 +48,7 @@ ConnectedRect {
 		id: icon
 
 		anchors.right: switchButton.left
-		anchors.rightMargin: Appearance.spacing.normal
+		anchors.rightMargin: Tokens.spacing.normal
 		anchors.verticalCenter: parent.verticalCenter
 		text: "open_in_new"
 	}

Modules/Settings/Common/PageBase.qml

@@ -4,7 +4,8 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Modules.Settings
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ColumnLayout {
 	id: root
@@ -53,7 +54,7 @@ ColumnLayout {
 		if (!row)
 			return false;
 		const pos = row.mapToItem(flickable.contentItem, 0, 0);
-		const inset = flickable.height * flickable.fadeAmount + Appearance.padding.large;
+		const inset = flickable.height * flickable.fadeAmount + Tokens.padding.large;
 		const minY = -flickable.topMargin;
 		const maxY = Math.max(minY, flickable.contentHeight + flickable.bottomMargin - flickable.height);
 		const target = Math.max(minY, Math.min(pos.y - inset, maxY));
@@ -65,7 +66,7 @@ ColumnLayout {
 		return true;
 	}
 
-	spacing: Appearance.spacing.large
+	spacing: Tokens.spacing.large
 
 	Component.onCompleted: applySearchAnchor()
 
@@ -120,7 +121,7 @@ ColumnLayout {
 		RowLayout {
 			id: header
 
-			spacing: Appearance.spacing.large
+			spacing: Tokens.spacing.large
 
 			Loader {
 				active: root.isSubPage
@@ -129,8 +130,8 @@ ColumnLayout {
 
 				sourceComponent: IconButton {
 					icon: "arrow_back"
-					inactiveColor: DynamicColors.tPalette.m3surfaceContainerHigh
-					inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+					inactiveColor: Colors.tPalette.m3surfaceContainerHigh
+					inactiveOnColor: Colors.palette.m3onSurfaceVariant
 					isRound: true
 					type: IconButton.Tonal
 
@@ -141,7 +142,7 @@ ColumnLayout {
 			CustomText {
 				Layout.fillWidth: true
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.large
+				font.pointSize: Tokens.font.size.large
 				text: root.title
 			}
 		}
@@ -153,11 +154,11 @@ ColumnLayout {
 		Layout.fillHeight: true
 		Layout.fillWidth: true
 		Layout.topMargin: -topMargin
-		bottomMargin: Appearance.padding.extraLarge
+		bottomMargin: Tokens.padding.extraLarge
 		contentHeight: root.contentChild?.implicitHeight ?? 0
 		contentItem.children: [root.contentChild]
 		fadeAmount: 0.1
-		topMargin: Appearance.padding.large
+		topMargin: Tokens.padding.large
 
 		Behavior on contentY {
 			enabled: root.animateScroll

Modules/Settings/Common/PopupRow.qml

@@ -2,8 +2,9 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Drawers
+import qs.Services
 
 ConnectedRect {
 	id: root
@@ -30,16 +31,16 @@ ConnectedRect {
 		id: navLayout
 
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.largeIncreased
-		anchors.margins: Appearance.padding.normal
-		anchors.rightMargin: Appearance.padding.largeIncreased
-		spacing: Appearance.spacing.normal
+		anchors.leftMargin: Tokens.padding.largeIncreased
+		anchors.margins: Tokens.padding.normal
+		anchors.rightMargin: Tokens.padding.largeIncreased
+		spacing: Tokens.spacing.normal
 
 		MaterialIcon {
 			id: icon
 
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.larger
+			color: Colors.palette.m3onSurfaceVariant
+			font.pointSize: Tokens.font.size.larger
 		}
 
 		ColumnLayout {
@@ -51,7 +52,7 @@ ConnectedRect {
 
 				Layout.fillWidth: true
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 			}
 
 			CustomText {
@@ -59,9 +60,9 @@ ConnectedRect {
 
 				Layout.fillWidth: true
 				animate: true
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				visible: text
 			}
 		}
@@ -101,10 +102,10 @@ ConnectedRect {
 				BlobPopup {
 					id: popup
 
-					color: open || hovered || stateLayer.containsMouse ? DynamicColors.palette.m3secondaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					color: open || hovered || stateLayer.containsMouse ? Colors.palette.m3secondaryContainer : Colors.palette.m3surfaceContainerHighest
 					content: root.content
 					hoverOverride: stateLayer.containsMouse
-					padding: Appearance.padding.small
+					padding: Tokens.padding.small
 					pressOverride: stateLayer.pressed
 					x: {
 						tWatcher.transform;

Modules/Settings/Common/RowButton.qml

@@ -2,8 +2,9 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
 ConnectedRect {
 	id: root
@@ -20,7 +21,7 @@ ConnectedRect {
 	signal clicked(event: MouseEvent)
 
 	Layout.fillWidth: true
-	implicitHeight: row.implicitHeight + Appearance.padding.normal * 2
+	implicitHeight: row.implicitHeight + Tokens.padding.normal * 2
 
 	StateLayer {
 		id: stateLayer
@@ -32,11 +33,11 @@ ConnectedRect {
 		id: row
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.largeIncreased
+		anchors.margins: Tokens.padding.largeIncreased
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 		opacity: root.enabled ? 1 : 0.5
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		Behavior on opacity {
 			Anim {
@@ -46,9 +47,9 @@ ConnectedRect {
 		MaterialIcon {
 			id: iconLabel
 
-			color: DynamicColors.palette.m3onSurfaceVariant
+			color: Colors.palette.m3onSurfaceVariant
 			fill: 1
-			font.pointSize: Appearance.font.size.medium
+			font.pointSize: Tokens.font.size.medium
 		}
 
 		Column {
@@ -63,7 +64,7 @@ ConnectedRect {
 				anchors.left: parent.left
 				anchors.right: parent.right
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 			}
 
 			CustomText {
@@ -71,9 +72,9 @@ ConnectedRect {
 
 				anchors.left: parent.left
 				anchors.right: parent.right
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				visible: text
 			}
 		}
@@ -84,8 +85,8 @@ ConnectedRect {
 			visible: active
 
 			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.medium
+				color: Colors.palette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.medium
 				text: root.trailingIcon
 			}
 		}

Modules/Settings/Common/SectionHeader.qml

@@ -1,16 +1,17 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomText {
 	property bool first
 
-	Layout.bottomMargin: Appearance.spacing.extraSmall
+	Layout.bottomMargin: Tokens.spacing.extraSmall
 	Layout.fillWidth: true
-	Layout.leftMargin: Appearance.padding.small
-	Layout.topMargin: first ? 0 : Appearance.spacing.large - ((parent as ColumnLayout).spacing ?? 0)
-	color: DynamicColors.palette.m3onSurfaceVariant
+	Layout.leftMargin: Tokens.padding.small
+	Layout.topMargin: first ? 0 : Tokens.spacing.large - ((parent as ColumnLayout).spacing ?? 0)
+	color: Colors.palette.m3onSurfaceVariant
 	elide: Text.ElideRight
-	font.pointSize: Appearance.font.size.medium
+	font.pointSize: Tokens.font.size.medium
 }

Modules/Settings/Common/SelectRow.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ConnectedRect {
 	id: root
@@ -25,10 +26,10 @@ ConnectedRect {
 		id: rowLayout
 
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.largeIncreased
-		anchors.margins: Appearance.padding.normal
-		anchors.rightMargin: Appearance.padding.largeIncreased
-		spacing: Appearance.spacing.small
+		anchors.leftMargin: Tokens.padding.largeIncreased
+		anchors.margins: Tokens.padding.normal
+		anchors.rightMargin: Tokens.padding.largeIncreased
+		spacing: Tokens.spacing.small
 
 		ColumnLayout {
 			Layout.fillWidth: true
@@ -39,14 +40,14 @@ ConnectedRect {
 
 				Layout.fillWidth: true
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.smaller
+				font.pointSize: Tokens.font.size.smaller
 			}
 
 			CustomText {
 				Layout.fillWidth: true
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				text: root.subtext
 				visible: root.subtext
 			}

Modules/Settings/Common/SliderRow.qml

@@ -3,7 +3,8 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ConnectedRect {
 	id: root
@@ -22,31 +23,31 @@ ConnectedRect {
 		id: rowLayout
 
 		anchors.fill: parent
-		anchors.margins: Appearance.padding.largeIncreased
-		anchors.topMargin: Appearance.padding.large
-		spacing: Appearance.spacing.small
+		anchors.margins: Tokens.padding.largeIncreased
+		anchors.topMargin: Tokens.padding.large
+		spacing: Tokens.spacing.small
 
 		ColumnLayout {
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			RowLayout {
 				Layout.fillWidth: true
-				spacing: Appearance.spacing.small
+				spacing: Tokens.spacing.small
 
 				CustomText {
 					id: label
 
 					Layout.fillWidth: true
 					elide: Text.ElideRight
-					font.pointSize: Appearance.font.size.small
+					font.pointSize: Tokens.font.size.small
 				}
 
 				CustomText {
 					id: valueLabel
 
-					color: DynamicColors.palette.m3outline
-					font.pointSize: Appearance.font.size.small
+					color: Colors.palette.m3outline
+					font.pointSize: Tokens.font.size.small
 				}
 			}
 
@@ -60,7 +61,7 @@ ConnectedRect {
 				}
 
 				Layout.fillWidth: true
-				implicitHeight: Appearance.padding.larger * 3
+				implicitHeight: Tokens.padding.larger * 3
 
 				CustomSlider {
 					id: slider
@@ -70,7 +71,7 @@ ConnectedRect {
 					anchors.verticalCenter: parent.verticalCenter
 					enabled: root.enabled
 					implicitHeight: parent.implicitHeight
-					radius: Appearance.rounding.small
+					radius: Tokens.rounding.small
 					value: root.value
 
 					onInteraction: v => root.moved(v)

Modules/Settings/Common/SpinRow.qml

@@ -3,7 +3,8 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ConnectedRect {
 	id: root
@@ -24,10 +25,10 @@ ConnectedRect {
 		id: rowLayout
 
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.largeIncreased
-		anchors.margins: Appearance.padding.normal
-		anchors.rightMargin: Appearance.padding.largeIncreased
-		spacing: Appearance.spacing.small
+		anchors.leftMargin: Tokens.padding.largeIncreased
+		anchors.margins: Tokens.padding.normal
+		anchors.rightMargin: Tokens.padding.largeIncreased
+		spacing: Tokens.spacing.small
 
 		ColumnLayout {
 			Layout.fillWidth: true
@@ -38,14 +39,14 @@ ConnectedRect {
 
 				Layout.fillWidth: true
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.smaller
+				font.pointSize: Tokens.font.size.smaller
 			}
 
 			CustomText {
 				Layout.fillWidth: true
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				text: root.subtext
 				visible: root.subtext
 			}

Modules/Settings/Common/StackPage.qml

@@ -2,12 +2,12 @@ import QtQuick
 import QtQuick.Controls
 import qs.Components
 import qs.Modules.Settings
-import qs.Config
+import ZShell.Config
 
 StackView {
 	id: root
 
-	readonly property int animMovement: Appearance.padding.extraLarge * 2
+	readonly property int animMovement: Tokens.padding.extraLarge * 2
 	default property list<Component> pages
 	required property SettingsState sState
 
@@ -33,7 +33,7 @@ StackView {
 			}
 
 			PauseAnimation {
-				duration: Appearance.anim.durations.expressiveEffects
+				duration: Tokens.anim.durations.expressiveEffects
 			}
 
 			ParallelAnimation {
@@ -67,7 +67,7 @@ StackView {
 			}
 
 			PauseAnimation {
-				duration: Appearance.anim.durations.expressiveEffects
+				duration: Tokens.anim.durations.expressiveEffects
 			}
 
 			ParallelAnimation {

Modules/Settings/Common/TimeInput.qml

@@ -1,9 +1,10 @@
 import QtQuick
 import QtQuick.Layouts
 import ZShell.Components
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Helpers
+import qs.Services
 
 CustomClippingRect {
 	id: root
@@ -27,19 +28,19 @@ CustomClippingRect {
 		return hour * 60 + minute;
 	}
 
-	color: DynamicColors.palette.m3surfaceContainer
+	color: Colors.palette.m3surfaceContainer
 	implicitHeight: column.implicitHeight + column.anchors.margins * 2 + buttonRow.implicitHeight + buttonRow.anchors.topMargin
 	implicitWidth: column.implicitWidth + column.anchors.margins * 2
-	radius: Appearance.rounding.large
+	radius: Tokens.rounding.large
 
 	ColumnLayout {
 		id: column
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.largeIncreased
+		anchors.margins: Tokens.padding.largeIncreased
 		anchors.right: parent.right
 		anchors.top: parent.top
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		CustomText {
 			text: qsTr("Select time")
@@ -51,14 +52,14 @@ CustomClippingRect {
 
 				Layout.preferredHeight: 72
 				Layout.preferredWidth: 96
-				color: startHourField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+				color: startHourField.focus ? Colors.palette.m3onPrimaryContainer : Colors.palette.m3surfaceContainerHighest
 				implicitHeight: 72
 				implicitWidth: 96
-				radius: Appearance.rounding.small
+				radius: Tokens.rounding.small
 
 				CustomRect {
 					anchors.fill: parent
-					border.color: startHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					border.color: startHourField.focus ? Colors.palette.m3primaryContainer : Colors.palette.m3surfaceContainerHighest
 					border.width: startHourField.focus ? 2 : 0
 					radius: parent.radius - border.width
 
@@ -83,7 +84,7 @@ CustomClippingRect {
 					anchors.right: parent.right
 					anchors.verticalCenter: parent.verticalCenter
 					clip: true
-					color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+					color: focus ? Colors.palette.m3primaryContainer : Colors.palette.m3onSurface
 					font.family: "Roboto"
 					font.letterSpacing: -0.25
 					font.pixelSize: 56
@@ -161,7 +162,7 @@ CustomClippingRect {
 			CustomText {
 				id: startSeparator
 
-				font.pointSize: Appearance.font.size.extraLarge
+				font.pointSize: Tokens.font.size.extraLarge
 				text: ":"
 			}
 
@@ -170,14 +171,14 @@ CustomClippingRect {
 
 				Layout.preferredHeight: 72
 				Layout.preferredWidth: 96
-				color: startMinuteField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+				color: startMinuteField.focus ? Colors.palette.m3onPrimaryContainer : Colors.palette.m3surfaceContainerHighest
 				implicitHeight: 72
 				implicitWidth: 96
-				radius: Appearance.rounding.small
+				radius: Tokens.rounding.small
 
 				CustomRect {
 					anchors.fill: parent
-					border.color: startMinuteField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					border.color: startMinuteField.focus ? Colors.palette.m3primaryContainer : Colors.palette.m3surfaceContainerHighest
 					border.width: startMinuteField.focus ? 2 : 0
 					radius: parent.radius - border.width
 
@@ -202,7 +203,7 @@ CustomClippingRect {
 					anchors.right: parent.right
 					anchors.verticalCenter: parent.verticalCenter
 					clip: true
-					color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+					color: focus ? Colors.palette.m3primaryContainer : Colors.palette.m3onSurface
 					font.family: "Roboto"
 					font.letterSpacing: -0.25
 					font.pixelSize: 56
@@ -280,7 +281,7 @@ CustomClippingRect {
 			Item {
 				id: spacer
 
-				Layout.preferredWidth: Appearance.spacing.large
+				Layout.preferredWidth: Tokens.spacing.large
 			}
 
 			CustomRect {
@@ -288,14 +289,14 @@ CustomClippingRect {
 
 				Layout.preferredHeight: 72
 				Layout.preferredWidth: 96
-				color: endHourField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+				color: endHourField.focus ? Colors.palette.m3onPrimaryContainer : Colors.palette.m3surfaceContainerHighest
 				implicitHeight: 72
 				implicitWidth: 96
-				radius: Appearance.rounding.small
+				radius: Tokens.rounding.small
 
 				CustomRect {
 					anchors.fill: parent
-					border.color: endHourField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					border.color: endHourField.focus ? Colors.palette.m3primaryContainer : Colors.palette.m3surfaceContainerHighest
 					border.width: endHourField.focus ? 2 : 0
 					radius: parent.radius - border.width
 
@@ -320,7 +321,7 @@ CustomClippingRect {
 					anchors.right: parent.right
 					anchors.verticalCenter: parent.verticalCenter
 					clip: true
-					color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+					color: focus ? Colors.palette.m3primaryContainer : Colors.palette.m3onSurface
 					font.family: "Roboto"
 					font.letterSpacing: -0.25
 					font.pixelSize: 56
@@ -398,7 +399,7 @@ CustomClippingRect {
 			CustomText {
 				id: endSeparator
 
-				font.pointSize: Appearance.font.size.extraLarge
+				font.pointSize: Tokens.font.size.extraLarge
 				text: ":"
 			}
 
@@ -407,14 +408,14 @@ CustomClippingRect {
 
 				Layout.preferredHeight: 72
 				Layout.preferredWidth: 96
-				color: endMinuteField.focus ? DynamicColors.palette.m3onPrimaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+				color: endMinuteField.focus ? Colors.palette.m3onPrimaryContainer : Colors.palette.m3surfaceContainerHighest
 				implicitHeight: 72
 				implicitWidth: 96
-				radius: Appearance.rounding.small
+				radius: Tokens.rounding.small
 
 				CustomRect {
 					anchors.fill: parent
-					border.color: endMinuteField.focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3surfaceContainerHighest
+					border.color: endMinuteField.focus ? Colors.palette.m3primaryContainer : Colors.palette.m3surfaceContainerHighest
 					border.width: endMinuteField.focus ? 2 : 0
 					radius: parent.radius - border.width
 
@@ -439,7 +440,7 @@ CustomClippingRect {
 					anchors.right: parent.right
 					anchors.verticalCenter: parent.verticalCenter
 					clip: true
-					color: focus ? DynamicColors.palette.m3primaryContainer : DynamicColors.palette.m3onSurface
+					color: focus ? Colors.palette.m3primaryContainer : Colors.palette.m3onSurface
 					font.family: "Roboto"
 					font.letterSpacing: -0.25
 					font.pixelSize: 56
@@ -533,10 +534,10 @@ CustomClippingRect {
 
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.largeIncreased
+		anchors.margins: Tokens.padding.largeIncreased
 		anchors.right: parent.right
 		anchors.top: column.bottom
-		anchors.topMargin: Appearance.spacing.normal
+		anchors.topMargin: Tokens.spacing.normal
 
 		Item {
 			id: buttonSpacer
@@ -545,13 +546,13 @@ CustomClippingRect {
 		}
 
 		ButtonRow {
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			IconTextButton {
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				icon: "close"
-				inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
-				inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+				inactiveColor: Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
+				inactiveOnColor: Colors.palette.m3onSurfaceVariant
 				isRound: true
 				isToggle: false
 				shapeMorph: true
@@ -562,7 +563,7 @@ CustomClippingRect {
 			}
 
 			IconTextButton {
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				icon: "check"
 				isRound: true
 				isToggle: false

Modules/Settings/Common/ToggleRow.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomSwitch {
 	id: root
@@ -18,13 +19,13 @@ CustomSwitch {
 
 	Layout.fillWidth: true
 	cLayer: 2
-	horizontalPadding: Appearance.padding.largeIncreased
+	horizontalPadding: Tokens.padding.largeIncreased
 	implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + verticalPadding * 2
 	implicitWidth: implicitContentWidth + implicitIndicatorWidth + horizontalPadding * 2
 	indicator.anchors.right: right
 	indicator.anchors.rightMargin: root.horizontalPadding
 	indicator.anchors.verticalCenter: verticalCenter
-	verticalPadding: Appearance.padding.normal
+	verticalPadding: Tokens.padding.normal
 
 	background: ConnectedRect {
 		id: bg
@@ -39,7 +40,7 @@ CustomSwitch {
 		anchors.left: parent.left
 		anchors.leftMargin: root.horizontalPadding
 		anchors.right: root.indicator.left
-		anchors.rightMargin: Appearance.spacing.normal
+		anchors.rightMargin: Tokens.spacing.normal
 		implicitHeight: column.implicitHeight
 		implicitWidth: column.implicitWidth
 
@@ -57,11 +58,7 @@ CustomSwitch {
 				anchors.left: parent.left
 				anchors.right: parent.right
 				elide: Text.ElideRight
-				font: {
-					const f = Qt.font(label.font);
-					f.pointSize = Appearance.font.size.smaller;
-					return f;
-				}
+				font.pointSize: Tokens.font.size.smaller
 				opacity: root.enabled ? 1 : 0.5
 				text: root.text
 
@@ -76,13 +73,9 @@ CustomSwitch {
 
 				anchors.left: parent.left
 				anchors.right: parent.right
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				elide: Text.ElideRight
-				font: {
-					const f = Qt.font(subtext.font);
-					f.pointSize = Appearance.font.size.small;
-					return f;
-				}
+				font.pointSize: Tokens.font.size.small
 				opacity: root.enabled ? 1 : 0.5
 				text: root.subtext
 				visible: root.subtext

Modules/Settings/Common/WallItem.qml

@@ -4,7 +4,8 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -22,15 +23,15 @@ Item {
 		id: layout
 
 		anchors.fill: parent
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		CustomClippingRect {
 			id: imgWrapper
 
 			Layout.fillWidth: true
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: Colors.tPalette.m3surfaceContainer
 			implicitHeight: width
-			radius: Appearance.rounding.large
+			radius: Tokens.rounding.large
 
 			Loader {
 				active: opacity > 0
@@ -42,10 +43,10 @@ Item {
 					}
 				}
 				sourceComponent: CustomRect {
-					color: DynamicColors.palette.m3primaryContainer
-					implicitHeight: loadingIndicator.implicitSize + Appearance.padding.large * 2
-					implicitWidth: loadingIndicator.implicitSize + Appearance.padding.large * 2
-					radius: Appearance.rounding.full
+					color: Colors.palette.m3primaryContainer
+					implicitHeight: loadingIndicator.implicitSize + Tokens.padding.large * 2
+					implicitWidth: loadingIndicator.implicitSize + Tokens.padding.large * 2
+					radius: Tokens.rounding.full
 
 					LoadingIndicator {
 						id: loadingIndicator

Modules/Settings/Common/WallpaperCropper.qml

@@ -5,14 +5,15 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Hyprland
 import ZShell.Components
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Helpers
+import qs.Services
 
 Item {
 	id: wrapper
 
-	property int buttonRowHeight: Appearance.padding.large * 3
+	property int buttonRowHeight: Tokens.padding.large * 3
 	property bool changesMade: false
 	readonly property var currentScreen: screens.length > selectedScreenIndex ? screens[selectedScreenIndex] : null
 	property var screens: []
@@ -99,7 +100,7 @@ Item {
 	}
 
 	IconButton {
-		anchors.margins: Appearance.padding.normal
+		anchors.margins: Tokens.padding.normal
 		anchors.right: parent.right
 		anchors.top: parent.top
 		icon: "check"
@@ -126,13 +127,13 @@ Item {
 		id: screenSelector
 
 		anchors.bottom: scaledImg.top
-		anchors.bottomMargin: Appearance.spacing.normal
+		anchors.bottomMargin: Tokens.spacing.normal
 		anchors.left: parent.left
-		anchors.leftMargin: Appearance.padding.extraLarge * 2
+		anchors.leftMargin: Tokens.padding.extraLarge * 2
 		anchors.right: parent.right
-		anchors.rightMargin: Appearance.padding.extraLarge * 2
+		anchors.rightMargin: Tokens.padding.extraLarge * 2
 		anchors.top: parent.top
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		Repeater {
 			model: wrapper.screens
@@ -143,8 +144,8 @@ Item {
 				required property var modelData
 
 				fillWidth: true
-				inactiveColor: isCurrent ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3surfaceContainer, 0.7)
-				inactiveOnColor: isCurrent ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
+				inactiveColor: isCurrent ? Colors.palette.m3primary : Qt.alpha(Colors.palette.m3surfaceContainer, 0.7)
+				inactiveOnColor: isCurrent ? Colors.palette.m3onPrimary : Qt.alpha(Colors.palette.m3onSurface, 0.7)
 				isRound: true
 				shapeMorph: true
 				text: modelData.name
@@ -166,11 +167,11 @@ Item {
 			id: zoomSlider
 
 			Layout.fillWidth: true
-			Layout.leftMargin: Appearance.padding.normal
-			Layout.preferredHeight: Appearance.padding.larger * 3
-			Layout.rightMargin: Appearance.padding.normal
+			Layout.leftMargin: Tokens.padding.normal
+			Layout.preferredHeight: Tokens.padding.larger * 3
+			Layout.rightMargin: Tokens.padding.normal
 			from: 1.0
-			implicitHeight: Appearance.padding.larger * 3
+			implicitHeight: Tokens.padding.larger * 3
 			insetIcon: "crop"
 			to: 5.0
 			value: cropRectLoader.item ? cropRectLoader.item.zoom : 1.0
@@ -189,11 +190,11 @@ Item {
 		property real monitorScale: 1.0
 
 		anchors.bottom: sliderLayout.top
-		anchors.bottomMargin: Appearance.spacing.normal
+		anchors.bottomMargin: Tokens.spacing.normal
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: parent.top
-		anchors.topMargin: wrapper.buttonRowHeight + Appearance.spacing.normal
+		anchors.topMargin: wrapper.buttonRowHeight + Tokens.spacing.normal
 		// anchors.top: screenSelector.bottom
 		asynchronous: true
 		fillMode: Image.PreserveAspectFit
@@ -279,7 +280,7 @@ Item {
 						}
 					}
 
-					border.color: DynamicColors.palette.m3primary
+					border.color: Colors.palette.m3primary
 					border.width: 2
 					height: baseHeight / zoom
 					opacity: 1

Modules/Settings/Content.qml

@@ -3,12 +3,13 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import ZShell.Blobs
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomClippingRect {
 	id: root
 
-	property color blobColor: DynamicColors.tPalette.m3surfaceContainerLow
+	property color blobColor: Colors.tPalette.m3surfaceContainerLow
 	readonly property real ratio: 16.0 / 9.0
 	readonly property SettingsState sState: SettingsState {
 		id: sState
@@ -20,7 +21,7 @@ CustomClippingRect {
 
 	implicitHeight: sState.screen.height * 0.7
 	implicitWidth: implicitHeight * ratio
-	radius: Appearance.rounding.large + Appearance.padding.normal
+	radius: Tokens.rounding.large + Tokens.padding.normal
 
 	Behavior on blobColor {
 		CAnim {
@@ -35,18 +36,18 @@ CustomClippingRect {
 		id: blobGroup
 
 		color: root.blobColor
-		smoothing: Appearance.rounding.normal
+		smoothing: Tokens.rounding.normal
 	}
 
 	BlobInvertedRect {
 		anchors.fill: parent
-		borderBottom: Appearance.padding.normal
+		borderBottom: Tokens.padding.normal
 		borderLeft: navPane.width + navPane.anchors.margins * 2
-		borderRight: Appearance.padding.normal
-		borderTop: Appearance.padding.normal
+		borderRight: Tokens.padding.normal
+		borderTop: Tokens.padding.normal
 		group: blobGroup
 		opacity: root.blobColor.a
-		radius: Appearance.rounding.large
+		radius: Tokens.rounding.large
 	}
 
 	NavPane {
@@ -54,7 +55,7 @@ CustomClippingRect {
 
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.large
+		anchors.margins: Tokens.padding.large
 		anchors.top: parent.top
 		sState: root.sState
 		width: Math.min(600, Math.round(root.width / 3))
@@ -64,7 +65,7 @@ CustomClippingRect {
 		anchors.bottom: parent.bottom
 		anchors.left: navPane.right
 		anchors.leftMargin: navPane.anchors.margins + anchors.margins
-		anchors.margins: Appearance.padding.extraLarge
+		anchors.margins: Tokens.padding.extraLarge
 		anchors.right: parent.right
 		anchors.top: parent.top
 		sState: root.sState

Modules/Settings/NavPane.qml

@@ -2,27 +2,28 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Components
 import qs.Modules.Settings.NavPane
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ColumnLayout {
 	id: root
 
 	required property SettingsState sState
 
-	spacing: Appearance.spacing.large
+	spacing: Tokens.spacing.large
 
 	SearchBar {
 		id: searchField
 
 		Layout.fillWidth: true
-		bg.border.color: DynamicColors.palette.m3outlineVariant
-		bg.color: DynamicColors.tPalette.m3surfaceContainerLowest
-		clearIcon.font.pointSize: Appearance.font.size.large
-		clearIcon.padding: Appearance.padding.extraSmall
-		font.pointSize: Appearance.font.size.normal
+		bg.border.color: Colors.palette.m3outlineVariant
+		bg.color: Colors.tPalette.m3surfaceContainerLowest
+		clearIcon.font.pointSize: Tokens.font.size.large
+		clearIcon.padding: Tokens.padding.extraSmall
+		font.pointSize: Tokens.font.size.normal
 		placeholderText: qsTr("Search settings")
-		searchIcon.anchors.leftMargin: Appearance.padding.largeIncreased
-		searchIcon.font.pointSize: Appearance.font.size.large
+		searchIcon.anchors.leftMargin: Tokens.padding.largeIncreased
+		searchIcon.font.pointSize: Tokens.font.size.large
 
 		Behavior on bg.border.color {
 			CAnim {

Modules/Settings/NavPane/NavLocations.qml

@@ -4,8 +4,9 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings
+import qs.Services
 
 VerticalFadeFlickable {
 	id: root
@@ -38,10 +39,10 @@ VerticalFadeFlickable {
 	readonly property string search: sState.searchText
 	readonly property bool searching: search.length > 0
 
-	bottomMargin: Appearance.padding.large
+	bottomMargin: Tokens.padding.large
 	contentHeight: content.implicitHeight
 	fadeAmount: 0.1
-	topMargin: Appearance.padding.large
+	topMargin: Tokens.padding.large
 
 	TapHandler {
 		onTapped: root.focus = true
@@ -52,7 +53,7 @@ VerticalFadeFlickable {
 
 		anchors.left: parent.left
 		anchors.right: parent.right
-		spacing: Appearance.spacing.extraSmall
+		spacing: Tokens.spacing.extraSmall
 
 		Repeater {
 			id: list
@@ -69,16 +70,16 @@ VerticalFadeFlickable {
 				required property var modelData
 
 				Layout.fillWidth: true
-				Layout.topMargin: index !== 0 && isCategoryStart ? Appearance.spacing.small : 0
-				bottomLeftRadius: stateLayer.pressed ? Appearance.rounding.medium : isCurrentPage ? Appearance.rounding.large : isCategoryEnd ? Appearance.rounding.normal : Appearance.rounding.extraSmall
-				bottomRightRadius: stateLayer.pressed ? Appearance.rounding.medium : isCurrentPage ? Appearance.rounding.large : isCategoryEnd ? Appearance.rounding.normal : Appearance.rounding.extraSmall
-				color: isCurrentPage ? DynamicColors.palette.m3secondaryContainer : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+				Layout.topMargin: index !== 0 && isCategoryStart ? Tokens.spacing.small : 0
+				bottomLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.large : isCategoryEnd ? Tokens.rounding.normal : Tokens.rounding.extraSmall
+				bottomRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.large : isCategoryEnd ? Tokens.rounding.normal : Tokens.rounding.extraSmall
+				color: isCurrentPage ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
 				implicitHeight: {
 					const h = layout.implicitHeight + layout.anchors.margins * 2;
 					return h % 2 === 0 ? h : h + 1;
 				}
-				topLeftRadius: stateLayer.pressed ? Appearance.rounding.medium : isCurrentPage ? Appearance.rounding.large : isCategoryStart ? Appearance.rounding.normal : Appearance.rounding.extraSmall
-				topRightRadius: stateLayer.pressed ? Appearance.rounding.medium : isCurrentPage ? Appearance.rounding.large : isCategoryStart ? Appearance.rounding.normal : Appearance.rounding.extraSmall
+				topLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.large : isCategoryStart ? Tokens.rounding.normal : Tokens.rounding.extraSmall
+				topRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.large : isCategoryStart ? Tokens.rounding.normal : Tokens.rounding.extraSmall
 
 				RadiusBehavior on bottomLeftRadius {
 				}
@@ -105,23 +106,23 @@ VerticalFadeFlickable {
 					id: layout
 
 					anchors.fill: parent
-					anchors.margins: Appearance.padding.large
-					spacing: Appearance.spacing.small
+					anchors.margins: Tokens.padding.large
+					spacing: Tokens.spacing.small
 
 					CustomRect {
 						Layout.bottomMargin: -1
 						Layout.fillHeight: true
 						Layout.topMargin: -1
-						color: item.isCurrentPage ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+						color: item.isCurrentPage ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
 						implicitWidth: height
-						radius: Appearance.rounding.full
+						radius: Tokens.rounding.full
 
 						MaterialIcon {
 							anchors.centerIn: parent
 							anchors.verticalCenterOffset: 1
-							color: item.isCurrentPage ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+							color: item.isCurrentPage ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
 							fill: item.modelData.noFill ? 0 : 1
-							font.pointSize: Appearance.font.size.large
+							font.pointSize: Tokens.font.size.large
 							grade: 25
 							text: item.modelData.icon
 						}
@@ -139,7 +140,7 @@ VerticalFadeFlickable {
 
 						CustomText {
 							Layout.fillWidth: true
-							color: DynamicColors.palette.m3onSurfaceVariant
+							color: Colors.palette.m3onSurfaceVariant
 							elide: Text.ElideRight
 							text: item.modelData.description
 						}
@@ -152,7 +153,7 @@ VerticalFadeFlickable {
 			id: resultList
 
 			Layout.fillWidth: true
-			spacing: Appearance.padding.large
+			spacing: Tokens.padding.large
 
 			add: Transition {
 				Anim {
@@ -186,26 +187,26 @@ VerticalFadeFlickable {
 					required property int index
 					required property var modelData
 
-					spacing: Appearance.spacing.small
+					spacing: Tokens.spacing.small
 					width: resultList.width
 
 					RowLayout {
 						Layout.fillWidth: true
-						Layout.leftMargin: Appearance.padding.small
-						spacing: Appearance.spacing.small
+						Layout.leftMargin: Tokens.padding.small
+						spacing: Tokens.spacing.small
 
 						MaterialIcon {
-							color: DynamicColors.palette.m3primary
+							color: Colors.palette.m3primary
 							fill: 1
-							font.pointSize: Appearance.font.size.large
+							font.pointSize: Tokens.font.size.large
 							text: group.modelData.icon
 						}
 
 						CustomText {
 							Layout.fillWidth: true
-							color: DynamicColors.palette.m3secondary
+							color: Colors.palette.m3secondary
 							elide: Text.ElideRight
-							font.pointSize: Appearance.font.size.large
+							font.pointSize: Tokens.font.size.large
 							text: group.modelData.page
 						}
 					}
@@ -214,7 +215,7 @@ VerticalFadeFlickable {
 						id: cardList
 
 						Layout.fillWidth: true
-						spacing: Appearance.spacing.extraSmall / 2
+						spacing: Tokens.spacing.extraSmall / 2
 
 						add: Transition {
 							Anim {
@@ -250,15 +251,15 @@ VerticalFadeFlickable {
 								readonly property bool isLast: index === group.modelData.entries.length - 1
 								required property var modelData
 
-								bottomLeftRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
-								bottomRightRadius: layer.pressed ? Appearance.rounding.medium : isLast ? Appearance.rounding.large : Appearance.rounding.extraSmall
-								color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+								bottomLeftRadius: layer.pressed ? Tokens.rounding.medium : isLast ? Tokens.rounding.large : Tokens.rounding.extraSmall
+								bottomRightRadius: layer.pressed ? Tokens.rounding.medium : isLast ? Tokens.rounding.large : Tokens.rounding.extraSmall
+								color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
 								implicitHeight: {
 									const h = resultLayout.implicitHeight + resultLayout.anchors.margins * 2;
 									return h % 2 === 0 ? h : h + 1;
 								}
-								topLeftRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
-								topRightRadius: layer.pressed ? Appearance.rounding.medium : isFirst ? Appearance.rounding.large : Appearance.rounding.extraSmall
+								topLeftRadius: layer.pressed ? Tokens.rounding.medium : isFirst ? Tokens.rounding.large : Tokens.rounding.extraSmall
+								topRightRadius: layer.pressed ? Tokens.rounding.medium : isFirst ? Tokens.rounding.large : Tokens.rounding.extraSmall
 								width: cardList.width
 
 								RadiusBehavior on bottomLeftRadius {
@@ -274,15 +275,15 @@ VerticalFadeFlickable {
 									id: resultLayout
 
 									anchors.fill: parent
-									anchors.margins: Appearance.padding.large
-									anchors.rightMargin: result.modelData.togglePath ? toggle.width + Appearance.padding.large * 2 : Appearance.padding.large
-									spacing: Appearance.spacing.small / 2
+									anchors.margins: Tokens.padding.large
+									anchors.rightMargin: result.modelData.togglePath ? toggle.width + Tokens.padding.large * 2 : Tokens.padding.large
+									spacing: Tokens.spacing.small / 2
 
 									CustomText {
 										Layout.fillWidth: true
-										color: DynamicColors.palette.m3onSurfaceVariant
+										color: Colors.palette.m3onSurfaceVariant
 										elide: Text.ElideRight
-										font.pointSize: Appearance.font.size.small
+										font.pointSize: Tokens.font.size.small
 										text: {
 											const labels = result.modelData.crumbLabels.slice(1);
 											const section = result.modelData.section;
@@ -294,19 +295,19 @@ VerticalFadeFlickable {
 
 									CustomText {
 										Layout.fillWidth: true
-										color: DynamicColors.palette.m3onSurface
+										color: Colors.palette.m3onSurface
 										elide: Text.ElideRight
-										font.pointSize: Appearance.font.size.medium
-										text: SettingsSearcher.highlight(result.modelData.title, root.search, DynamicColors.palette.m3primary)
+										font.pointSize: Tokens.font.size.medium
+										text: SettingsSearcher.highlight(result.modelData.title, root.search, Colors.palette.m3primary)
 										textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
 									}
 
 									CustomText {
 										Layout.fillWidth: true
-										color: DynamicColors.palette.m3outline
+										color: Colors.palette.m3outline
 										elide: Text.ElideRight
-										font.pointSize: Appearance.font.size.small
-										text: SettingsSearcher.highlight(result.modelData.subtext, root.search, DynamicColors.palette.m3primary)
+										font.pointSize: Tokens.font.size.small
+										text: SettingsSearcher.highlight(result.modelData.subtext, root.search, Colors.palette.m3primary)
 										textFormat: text.includes("<font") ? Text.StyledText : Text.PlainText
 										visible: result.modelData.subtext.length > 0
 									}
@@ -326,7 +327,7 @@ VerticalFadeFlickable {
 									id: toggle
 
 									anchors.right: parent.right
-									anchors.rightMargin: Appearance.padding.large
+									anchors.rightMargin: Tokens.padding.large
 									anchors.verticalCenter: parent.verticalCenter
 									cLayer: 3
 									checked: result.modelData.toggleValue
@@ -346,9 +347,9 @@ VerticalFadeFlickable {
 
 		CustomText {
 			Layout.fillWidth: true
-			Layout.topMargin: Appearance.padding.large
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.medium
+			Layout.topMargin: Tokens.padding.large
+			color: Colors.palette.m3onSurfaceVariant
+			font.pointSize: Tokens.font.size.medium
 			horizontalAlignment: Text.AlignHCenter
 			text: qsTr("No matching settings")
 			visible: root.searching && root.results.length === 0

Modules/Settings/PageCompRegistry.qml

@@ -3,7 +3,7 @@ pragma Singleton
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
 import qs.Modules.Settings.Pages
 import qs.Modules.Settings.Pages.Wallpaper
@@ -12,6 +12,7 @@ import qs.Modules.Settings.Pages.Apps
 import qs.Modules.Settings.Pages.Panels
 import qs.Modules.Settings.Pages.Panels.Bar
 import qs.Modules.Settings.Pages.Services
+import qs.Services
 
 QtObject {
 	id: root
@@ -172,24 +173,24 @@ QtObject {
 
 		ColumnLayout {
 			anchors.centerIn: parent
-			spacing: Appearance.padding.extraSmall
+			spacing: Tokens.padding.extraSmall
 
 			MaterialIcon {
 				Layout.alignment: Qt.AlignHCenter
-				color: DynamicColors.palette.m3outlineVariant
-				font.pointSize: Appearance.font.size.extraLarge
+				color: Colors.palette.m3outlineVariant
+				font.pointSize: Tokens.font.size.extraLarge
 				text: "handyman"
 			}
 
 			CustomText {
 				Layout.alignment: Qt.AlignHCenter
-				color: DynamicColors.palette.m3outlineVariant
+				color: Colors.palette.m3outlineVariant
 				text: qsTr("Page under construction")
 			}
 
 			CustomText {
 				Layout.alignment: Qt.AlignHCenter
-				color: DynamicColors.palette.m3outlineVariant
+				color: Colors.palette.m3outlineVariant
 				text: qsTr("This page will be available in a future update.")
 			}
 		}

Modules/Settings/Pages.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
@@ -46,7 +46,7 @@ Item {
 	Connections {
 		function onCurrentPageIdxChanged(): void {
 			switchAnim.complete();
-			root.animOff = Appearance.padding.normal * (root.sState.currentPageIdx > root.lastPageIdx ? 1 : -1);
+			root.animOff = Tokens.padding.normal * (root.sState.currentPageIdx > root.lastPageIdx ? 1 : -1);
 			switchAnim.start();
 			root.lastPageIdx = root.sState.currentPageIdx;
 		}

Modules/Settings/Pages/AboutPage.qml

@@ -3,9 +3,10 @@ import QtQuick.Layouts
 import Quickshell.Io
 import ZShell
 import qs.Modules.Settings.Common
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Components
+import qs.Services
 
 PageBase {
 	id: root
@@ -19,7 +20,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		Process {
@@ -34,15 +35,15 @@ PageBase {
 		ConnectedRect {
 			Layout.fillWidth: true
 			first: true
-			implicitHeight: hero.implicitHeight + Appearance.padding.extraLarge * 2
+			implicitHeight: hero.implicitHeight + Tokens.padding.extraLarge * 2
 			last: true
 
 			ColumnLayout {
 				id: hero
 
 				anchors.centerIn: parent
-				spacing: Appearance.spacing.small
-				width: parent.width - Appearance.padding.largeIncreased * 2
+				spacing: Tokens.spacing.small
+				width: parent.width - Tokens.padding.largeIncreased * 2
 
 				Logo {
 					Layout.alignment: Qt.AlignHCenter
@@ -54,15 +55,15 @@ PageBase {
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
-					Layout.topMargin: Appearance.spacing.small
-					font.pointSize: Appearance.font.size.large
+					Layout.topMargin: Tokens.spacing.small
+					font.pointSize: Tokens.font.size.large
 					text: "ZShell"
 				}
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.medium
+					color: Colors.palette.m3onSurfaceVariant
+					font.pointSize: Tokens.font.size.medium
 					text: ZUtils.version ? `v${ZUtils.version}` : "…"
 				}
 			}

Modules/Settings/Pages/Apps/AllApps.qml

@@ -5,9 +5,10 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Modules.Settings.Common
+import qs.Services
 
 PageBase {
 	id: root
@@ -18,7 +19,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		Repeater {
@@ -48,14 +49,14 @@ PageBase {
 					id: appRow
 
 					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.largeIncreased
-					anchors.margins: Appearance.padding.normal
-					anchors.rightMargin: Appearance.padding.largeIncreased
-					spacing: Appearance.spacing.small
+					anchors.leftMargin: Tokens.padding.largeIncreased
+					anchors.margins: Tokens.padding.normal
+					anchors.rightMargin: Tokens.padding.largeIncreased
+					spacing: Tokens.spacing.small
 
 					IconImage {
 						asynchronous: true
-						implicitSize: Math.round(Appearance.font.size.large * 1.8)
+						implicitSize: Math.round(Tokens.font.size.large * 1.8)
 						source: Quickshell.iconPath(appItem.modelData.icon, "image-missing")
 					}
 
@@ -66,31 +67,31 @@ PageBase {
 						CustomText {
 							Layout.fillWidth: true
 							elide: Text.ElideRight
-							font.pointSize: Appearance.font.size.small
+							font.pointSize: Tokens.font.size.small
 							text: appItem.modelData.name
 						}
 
 						CustomText {
 							Layout.fillWidth: true
-							color: DynamicColors.palette.m3outline
+							color: Colors.palette.m3outline
 							elide: Text.ElideRight
-							font.pointSize: Appearance.font.size.small
+							font.pointSize: Tokens.font.size.small
 							text: (appItem.modelData.comment || appItem.modelData.genericName) ?? ""
 							visible: text
 						}
 					}
 
 					MaterialIcon {
-						color: DynamicColors.palette.m3primary
+						color: Colors.palette.m3primary
 						fill: 1
-						font.pointSize: Appearance.font.size.small
+						font.pointSize: Tokens.font.size.small
 						text: "favorite"
 						visible: Strings.testRegexList(Config.launcher.favoriteApps, appItem.modelData.id)
 					}
 
 					MaterialIcon {
-						color: DynamicColors.palette.m3onSurfaceVariant
-						font.pointSize: Appearance.font.size.medium
+						color: Colors.palette.m3onSurfaceVariant
+						font.pointSize: Tokens.font.size.medium
 						text: "chevron_right"
 					}
 				}

Modules/Settings/Pages/Apps/AppInfo.qml

@@ -3,9 +3,10 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Modules.Settings.Common
+import qs.Services
 
 PageBase {
 	id: root
@@ -34,37 +35,37 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// Header
 		RowLayout {
-			Layout.bottomMargin: Appearance.spacing.large
+			Layout.bottomMargin: Tokens.spacing.large
 			Layout.fillWidth: true
-			Layout.leftMargin: Appearance.padding.small
-			spacing: Appearance.spacing.large
+			Layout.leftMargin: Tokens.padding.small
+			spacing: Tokens.spacing.large
 
 			IconImage {
 				asynchronous: true
-				implicitSize: Math.round(Appearance.font.size.large * 3)
+				implicitSize: Math.round(Tokens.font.size.large * 3)
 				source: Quickshell.iconPath(root.app?.icon, "image-missing")
 			}
 
 			ColumnLayout {
 				Layout.fillWidth: true
-				spacing: Appearance.spacing.extraSmall / 2
+				spacing: Tokens.spacing.extraSmall / 2
 
 				CustomText {
 					Layout.fillWidth: true
-					font.pointSize: Appearance.font.size.medium
+					font.pointSize: Tokens.font.size.medium
 					text: root.app?.name ?? ""
 					wrapMode: Text.WordWrap
 				}
 
 				CustomText {
 					Layout.fillWidth: true
-					color: DynamicColors.palette.m3outline
-					font.pointSize: Appearance.font.size.small
+					color: Colors.palette.m3outline
+					font.pointSize: Tokens.font.size.small
 					text: (root.app?.comment || root.app?.genericName) ?? ""
 					visible: text
 					wrapMode: Text.WordWrap
@@ -142,16 +143,16 @@ PageBase {
 			id: rowLayout
 
 			anchors.fill: parent
-			anchors.leftMargin: Appearance.padding.largeIncreased
-			anchors.margins: Appearance.padding.normal
-			anchors.rightMargin: Appearance.padding.largeIncreased
-			spacing: Appearance.spacing.small
+			anchors.leftMargin: Tokens.padding.largeIncreased
+			anchors.margins: Tokens.padding.normal
+			anchors.rightMargin: Tokens.padding.largeIncreased
+			spacing: Tokens.spacing.small
 
 			CustomText {
 				id: label
 
 				Layout.alignment: Qt.AlignTop
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 			}
 
 			Item {
@@ -163,8 +164,8 @@ PageBase {
 
 				Layout.fillWidth: true
 				Layout.maximumWidth: implicitWidth + 1 // Whyyyyyyyyy
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.small
+				color: Colors.palette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.small
 				wrapMode: Text.WrapAtWordBoundaryOrAnywhere
 			}
 		}

Modules/Settings/Pages/AppsPage.qml

@@ -7,8 +7,9 @@ import Quickshell.Widgets
 import ZShell
 import qs.Helpers
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
+import qs.Services
 
 PageBase {
 	id: root
@@ -18,7 +19,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// Default applications
@@ -85,7 +86,7 @@ PageBase {
 	component DefaultRow: PopupRow {
 		id: row
 
-		readonly property int popupHeight: root.flickable.height - y + root.flickable.contentY - Appearance.padding.large - Appearance.padding.extraLarge
+		readonly property int popupHeight: root.flickable.height - y + root.flickable.contentY - Tokens.padding.large - Tokens.padding.extraLarge
 
 		signal selected(app: DesktopEntry)
 
@@ -98,7 +99,7 @@ PageBase {
 				p = p.parent;
 			return p?.opacity < 1;
 		}
-		popup.topMovement: Appearance.padding.large
+		popup.topMovement: Tokens.padding.large
 
 		Loader {
 			active: row.popup.animDriver > 0
@@ -126,7 +127,7 @@ PageBase {
 					anchors.left: list.contentItem.left
 					anchors.right: list.contentItem.right
 					implicitHeight: itemLayout.implicitHeight + itemLayout.anchors.margins * 2
-					radius: Appearance.rounding.small
+					radius: Tokens.rounding.small
 
 					onClicked: {
 						row.popup.open = false;
@@ -137,12 +138,12 @@ PageBase {
 						id: itemLayout
 
 						anchors.fill: parent
-						anchors.margins: Appearance.padding.normal
-						spacing: Appearance.spacing.small
+						anchors.margins: Tokens.padding.normal
+						spacing: Tokens.spacing.small
 
 						IconImage {
 							asynchronous: true
-							implicitSize: Math.round(Appearance.font.size.large * 1.8)
+							implicitSize: Math.round(Tokens.font.size.large * 1.8)
 							source: Quickshell.iconPath(appItem.modelData.icon, "image-missing")
 						}
 
@@ -153,24 +154,24 @@ PageBase {
 							CustomText {
 								Layout.fillWidth: true
 								elide: Text.ElideRight
-								font.pointSize: Appearance.font.size.small
+								font.pointSize: Tokens.font.size.small
 								text: appItem.modelData.name
 							}
 
 							CustomText {
 								Layout.fillWidth: true
-								color: DynamicColors.palette.m3outline
+								color: Colors.palette.m3outline
 								elide: Text.ElideRight
-								font.pointSize: Appearance.font.size.small
+								font.pointSize: Tokens.font.size.small
 								text: (appItem.modelData.comment || appItem.modelData.genericName) ?? ""
 								visible: text
 							}
 						}
 
 						MaterialIcon {
-							color: DynamicColors.palette.m3primary
+							color: Colors.palette.m3primary
 							fill: 1
-							font.pointSize: Appearance.font.size.small
+							font.pointSize: Tokens.font.size.small
 							text: "favorite"
 							visible: Strings.testRegexList(Config.launcher.favoriteApps, appItem.modelData.id)
 						}

Modules/Settings/Pages/Audio/AppVolumes.qml

@@ -7,8 +7,9 @@ import Quickshell.Services.Pipewire
 import qs.Modules.Settings.Common
 import qs.Helpers
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Daemons
+import qs.Services
 
 PageBase {
 	id: root
@@ -19,15 +20,15 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		CustomText {
-			Layout.bottomMargin: Appearance.spacing.small
+			Layout.bottomMargin: Tokens.spacing.small
 			Layout.fillWidth: true
-			Layout.leftMargin: Appearance.padding.small
-			color: DynamicColors.palette.m3outline
-			font.pointSize: Appearance.font.size.small
+			Layout.leftMargin: Tokens.padding.small
+			color: Colors.palette.m3outline
+			font.pointSize: Tokens.font.size.small
 			text: qsTr("Adjust the volume of individual apps currently playing audio.")
 			wrapMode: Text.WordWrap
 		}
@@ -35,10 +36,10 @@ PageBase {
 		ItemList {
 			id: streamList
 
-			color: list.count === 0 ? DynamicColors.tPalette.m3surfaceContainer : "transparent"
+			color: list.count === 0 ? Colors.tPalette.m3surfaceContainer : "transparent"
 			first: true
 			last: true
-			list.spacing: Appearance.spacing.extraSmall / 2
+			list.spacing: Tokens.spacing.extraSmall / 2
 			placeholderIcon: "music_off"
 			placeholderText: qsTr("No apps playing audio")
 			showList: true

Modules/Settings/Pages/AudioPage.qml

@@ -3,10 +3,11 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import qs.Daemons
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.Settings.Common
 import qs.Helpers
+import qs.Services
 
 PageBase {
 	id: root
@@ -16,7 +17,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// Output
@@ -51,7 +52,7 @@ PageBase {
 
 		// Input
 		SliderRow {
-			Layout.topMargin: Appearance.spacing.large - parent.spacing
+			Layout.topMargin: Tokens.spacing.large - parent.spacing
 			enabled: !Audio.sourceMuted
 			first: true
 			icon: Icons.getMicVolumeIcon(Audio.sourceVolume, Audio.sourceMuted)
@@ -83,7 +84,7 @@ PageBase {
 		// Per-app volumes
 		ConnectedRect {
 			Layout.fillWidth: true
-			Layout.topMargin: Appearance.spacing.large - parent.spacing
+			Layout.topMargin: Tokens.spacing.large - parent.spacing
 			first: true
 			implicitHeight: appLayout.implicitHeight + appLayout.anchors.margins * 2
 			last: true
@@ -96,13 +97,13 @@ PageBase {
 				id: appLayout
 
 				anchors.fill: parent
-				anchors.leftMargin: Appearance.padding.largeIncreased
-				anchors.margins: Appearance.padding.normal
-				anchors.rightMargin: Appearance.padding.largeIncreased
-				spacing: Appearance.spacing.small
+				anchors.leftMargin: Tokens.padding.largeIncreased
+				anchors.margins: Tokens.padding.normal
+				anchors.rightMargin: Tokens.padding.largeIncreased
+				spacing: Tokens.spacing.small
 
 				MaterialIcon {
-					font.pointSize: Appearance.font.size.medium
+					font.pointSize: Tokens.font.size.medium
 					text: "tune"
 				}
 
@@ -113,23 +114,23 @@ PageBase {
 					CustomText {
 						Layout.fillWidth: true
 						elide: Text.ElideRight
-						font.pointSize: Appearance.font.size.small
+						font.pointSize: Tokens.font.size.small
 						text: qsTr("App volumes")
 					}
 
 					CustomText {
 						Layout.fillWidth: true
 						animate: true
-						color: DynamicColors.palette.m3outline
+						color: Colors.palette.m3outline
 						elide: Text.ElideRight
-						font.pointSize: Appearance.font.size.small
+						font.pointSize: Tokens.font.size.small
 						text: Audio.streams.length === 0 ? qsTr("No apps playing audio") : Audio.streams.length === 1 ? qsTr("1 app playing audio") : qsTr("%1 apps playing audio").arg(Audio.streams.length)
 					}
 				}
 
 				MaterialIcon {
-					color: DynamicColors.palette.m3onSurfaceVariant
-					font.pointSize: Appearance.font.size.medium
+					color: Colors.palette.m3onSurfaceVariant
+					font.pointSize: Tokens.font.size.medium
 					text: "chevron_right"
 				}
 			}

Modules/Settings/Pages/Panels/Bar/BarClock.qml

@@ -1,7 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.Settings.Common
 
@@ -41,11 +41,11 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		SelectRow {
-			Layout.topMargin: Appearance.spacing.extraSmall / 2 - parent.spacing
+			Layout.topMargin: Tokens.spacing.extraSmall / 2 - parent.spacing
 			active: root.clockFormats.find(item => item.value === Config.general.dateFormat)
 			first: true
 			menuItems: root.clockFormats

Modules/Settings/Pages/Panels/Bar/BarStatusIcons.qml

@@ -1,7 +1,5 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
 
 PageBase {
@@ -19,7 +17,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// Visible icons
@@ -42,42 +40,24 @@ PageBase {
 			}
 
 			first: true
-			values: Config.bar.tray.statusIcons
+			values: Config.bar.tray.statusIcons.values
 			z: 1
 
-			onItemMoved: (from, to) => {
-				const icons = Config.bar.tray.statusIcons.slice();
-				const [moved] = icons.splice(from, 1);
-				icons.splice(to, 0, moved);
-				Config.bar.tray.statusIcons = icons;
-			}
-			onItemRemoved: index => {
-				const icons = Config.bar.tray.statusIcons.slice();
-				icons.splice(index, 1);
-				Config.bar.tray.statusIcons = icons;
-			}
-			onItemToggled: (index, checked) => {
-				const icons = Config.bar.tray.statusIcons.slice();
-				icons[index] = Object.assign({}, icons[index], {
-					enabled: checked
-				});
-				Config.bar.tray.statusIcons = icons;
-			}
+			onItemMoved: (from, to) => Config.bar.tray.statusIcons.move(from, to)
+			onItemRemoved: index => Config.bar.tray.statusIcons.remove(index)
+			onItemToggled: (index, checked) => Config.bar.tray.statusIcons.at(index).enabled = checked
 		}
 
 		DialogSelectButton {
 			id: addItemContainer
 
 			acceptLabel: qsTr("Add")
-			enabled: {
-				console.log(Object.keys(model).length);
-				return Object.keys(model).length > 0;
-			}
+			enabled: Object.keys(model).length > 0
 			header: qsTr("Add new entry")
 			icon: "add"
 			label: qsTr("Add entry")
 			model: {
-				const present = new Set(Config.bar.tray.statusIcons.map(item => item.id));
+				const present = new Set(Config.bar.tray.statusIcons.values.map(item => item.id));
 				return Object.keys(root.builtinIcons).filter(id => !present.has(id)).map(id => ({
 							id: id,
 							label: root.builtinIcons[id]
@@ -89,12 +69,10 @@ PageBase {
 				if (!selectedItem)
 					return;
 
-				const icons = Config.bar.tray.statusIcons.slice();
-				icons.push({
+				Config.bar.tray.statusIcons.insert({
 					id: selectedItem,
 					enabled: true
 				});
-				Config.bar.tray.statusIcons = icons;
 			}
 		}
 
@@ -106,6 +84,7 @@ PageBase {
 		ToggleRow {
 			checked: Config.bar.popouts.statusIcons
 			first: true
+			last: true
 			settingAnchor: "bar-status-popout-on-hover"
 			subtext: qsTr("Show a details popout when hovering the status icons")
 			text: qsTr("Popout on hover")

Modules/Settings/Pages/Panels/Bar/BarTray.qml

@@ -1,7 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
 
 PageBase {
@@ -13,7 +13,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		SpinRow {

Modules/Settings/Pages/Panels/BarPanel.qml

@@ -1,7 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
 
 PageBase {
@@ -13,7 +13,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// Behavior

Modules/Settings/Pages/Panels/DashboardPanel.qml

@@ -2,7 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.Settings.Common
 
@@ -15,7 +15,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// General

Modules/Settings/Pages/Panels/LauncherPanel.qml

@@ -2,7 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.Settings.Common
 
@@ -15,7 +15,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// General

Modules/Settings/Pages/Panels/ResourcesPanel.qml

@@ -2,7 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.Settings.Common
 
@@ -15,7 +15,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// General

Modules/Settings/Pages/Panels/SidebarPanel.qml

@@ -2,7 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.Settings.Common
 
@@ -15,7 +15,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		SectionHeader {

Modules/Settings/Pages/PanelsPage.qml

@@ -1,5 +1,5 @@
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
 
 PageBase {
@@ -10,7 +10,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		NavRow {

Modules/Settings/Pages/ScreenshotPage.qml

@@ -5,7 +5,7 @@ import QtQuick.Layouts
 import ZShell.Components
 import qs.Helpers
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings
 import qs.Modules.Settings.Common
 
@@ -17,7 +17,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		SectionHeader {

Modules/Settings/Pages/Services/NotificationsPage.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.Settings.Common
 
@@ -13,7 +13,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// Notifications

Modules/Settings/Pages/ServicesPage.qml

@@ -4,7 +4,7 @@ import Quickshell
 import ZShell.Services
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
 
 PageBase {
@@ -43,7 +43,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// Detected running players, used as default-player options

Modules/Settings/Pages/Wallpaper/WallpaperSelect.qml

@@ -6,8 +6,9 @@ import ZShell.Models
 import qs.Paths
 import qs.Helpers
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
+import qs.Services
 
 PageBase {
 	id: root
@@ -19,20 +20,20 @@ PageBase {
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: parent.top
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 		width: root.cappedWidth
 
 		CustomText {
-			Layout.topMargin: Appearance.spacing.large
-			font.pointSize: Appearance.font.size.large
+			Layout.topMargin: Tokens.spacing.large
+			font.pointSize: Tokens.font.size.large
 			text: qsTr("Wallpapers")
 		}
 
 		GridLayout {
 			Layout.fillWidth: true
-			columnSpacing: Appearance.spacing.extraSmall
+			columnSpacing: Tokens.spacing.extraSmall
 			columns: 4
-			rowSpacing: Appearance.spacing.extraSmall
+			rowSpacing: Tokens.spacing.extraSmall
 			visible: localWalls.count > 0
 
 			Repeater {
@@ -91,25 +92,25 @@ PageBase {
 			visible: active
 
 			sourceComponent: CustomRect {
-				color: DynamicColors.tPalette.m3surfaceContainer
-				implicitHeight: noWallsLayout.implicitHeight + Appearance.padding.extraLarge * 3
-				radius: Appearance.rounding.large
+				color: Colors.tPalette.m3surfaceContainer
+				implicitHeight: noWallsLayout.implicitHeight + Tokens.padding.extraLarge * 3
+				radius: Tokens.rounding.large
 
 				ColumnLayout {
 					id: noWallsLayout
 
 					anchors.centerIn: parent
-					spacing: Appearance.spacing.extraSmall
+					spacing: Tokens.spacing.extraSmall
 
 					MaterialIcon {
 						Layout.alignment: Qt.AlignHCenter
-						color: DynamicColors.palette.m3outline
+						color: Colors.palette.m3outline
 						text: "hide_image"
 					}
 
 					CustomText {
 						Layout.alignment: Qt.AlignHCenter
-						color: DynamicColors.palette.m3outline
+						color: Colors.palette.m3outline
 						text: qsTr("No local wallpapers found")
 					}
 				}

Modules/Settings/Pages/WallpaperPage.qml

@@ -5,9 +5,10 @@ import QtQuick.Layouts
 import ZShell.Components
 import qs.Helpers
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings
 import qs.Modules.Settings.Common
+import qs.Services
 
 PageBase {
 	id: root
@@ -17,7 +18,7 @@ PageBase {
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.large
+		spacing: Tokens.spacing.large
 		width: root.cappedWidth
 
 		Item {
@@ -35,13 +36,13 @@ PageBase {
 		IconTextButton {
 			Layout.alignment: Qt.AlignHCenter
 			enabled: Config.background.enabled
-			horizontalPadding: Appearance.padding.extraLarge
+			horizontalPadding: Tokens.padding.extraLarge
 			icon: "wallpaper"
 			isRound: true
 			shapeMorph: true
 			text: qsTr("Wallpapers")
 			type: IconTextButton.Tonal
-			verticalPadding: Appearance.padding.normal
+			verticalPadding: Tokens.padding.normal
 
 			onClicked: root.sState.openSubPage(1) // Wallpaper page
 		}
@@ -56,23 +57,23 @@ PageBase {
 		}
 
 		ToggleRow {
-			Layout.topMargin: Appearance.spacing.extraSmall / 2 - parent.spacing
-			checked: DynamicColors.transparency.enabled
+			Layout.topMargin: Tokens.spacing.extraSmall / 2 - parent.spacing
+			checked: Colors.transparency.enabled
 			settingAnchor: "style-transparency"
-			subtext: qsTr("Base %1, layers %2").arg(DynamicColors.transparency.base).arg(DynamicColors.transparency.layers)
+			subtext: qsTr("Base %1, layers %2").arg(Colors.transparency.base).arg(Colors.transparency.layers)
 			text: qsTr("Transparency")
 
 			onToggled: Config.appearance.transparency.enabled = checked
 		}
 
 		ToggleRow {
-			Layout.topMargin: Appearance.spacing.extraSmall / 2 - parent.spacing
-			checked: !DynamicColors.light
+			Layout.topMargin: Tokens.spacing.extraSmall / 2 - parent.spacing
+			checked: !Colors.light
 			last: true
 			settingAnchor: "style-dark-theme"
 			text: qsTr("Dark theme")
 
-			onToggled: DynamicColors.setMode(checked ? "dark" : "light")
+			onToggled: Colors.setMode(checked ? "dark" : "light")
 		}
 
 		OverlayRow {
@@ -130,7 +131,7 @@ PageBase {
 				return Qt.formatTime(d, "hh:mm AP");
 			}
 
-			Layout.topMargin: Appearance.spacing.extraSmall / 2 - parent.spacing
+			Layout.topMargin: Tokens.spacing.extraSmall / 2 - parent.spacing
 			checked: Config.general.color.scheduleHyprsunset
 			last: true
 			settingAnchor: "style-schedule-hyprsunset"

Modules/Settings/PopupOverlay.qml

@@ -1,6 +1,7 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
 CustomRect {
 	id: root
@@ -9,7 +10,7 @@ CustomRect {
 	readonly property var currentPopup: PopupManager.currentPopup
 	property bool shouldBeVisible: loader.status === Loader.Ready
 
-	color: Qt.alpha(DynamicColors.palette.m3shadow, 0.3)
+	color: Qt.alpha(Colors.palette.m3shadow, 0.3)
 	opacity: shouldBeVisible && !closing ? 1 : 0
 	visible: opacity > 0
 

Modules/Settings/SettingsSearcher.qml

@@ -4,7 +4,7 @@ import "../../scripts/fzf.js" as Fzf
 import QtQuick
 import Quickshell
 import ZShell
-import qs.Config
+import ZShell.Config
 
 Singleton {
 	id: root

Modules/Settings/Wrapper.qml

@@ -1,7 +1,7 @@
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 
 Item {
@@ -20,8 +20,8 @@ Item {
 
 	Behavior on offsetScale {
 		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			duration: Tokens.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 		}
 	}