Merge branch 'main' into module/wifi

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,11 +14,17 @@ CustomRect {
 		flash.restart();
 	}
 
-	bottomLeftRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
-	bottomRightRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
-	color: DynamicColors.tPalette.m3surfaceContainer
-	topLeftRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
-	topRightRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
+	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 ? Tokens.rounding.large : Tokens.rounding.extraSmall
+	topRightRadius: first ? Tokens.rounding.large : Tokens.rounding.extraSmall
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
 
 	CustomRect {
 		id: highlight
@@ -25,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
@@ -35,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

@@ -0,0 +1,250 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Blobs
+import qs.Components
+import ZShell.Config
+import qs.Services
+
+Item {
+	id: root
+
+	property bool acceptAllowed: true
+	required property string acceptLabel
+	required property Component content
+	required property string header
+	property int horizontalContentMargin
+	required property string icon
+	required property string label
+	property bool open
+	property real openHeight: Math.min(rootParent.height * 0.8, 600)
+	property real openWidth: Math.min(rootParent.width * 0.8, 400)
+	required property Item rootParent
+	property bool separateContent
+
+	signal accepted
+	signal cancelled
+
+	function reparentWrapper(): void {
+		const newParent = open ? rootParent : root;
+		const pos = dialogWrapper.mapToItem(newParent, 0, 0);
+		dialogWrapper.parent = newParent;
+		dialogWrapper.x = pos.x;
+		dialogWrapper.y = pos.y;
+	}
+
+	Layout.fillWidth: true
+	implicitHeight: openButton.implicitHeight
+	z: open || dialogTransition.running ? 2 : 0
+
+	BlobGroup {
+		id: blobGroup
+
+		color: root.open ? Colors.palette.m3surfaceContainerHighest : Colors.tPalette.m3surfaceContainer
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+	}
+
+	MouseArea {
+		id: backdrop
+
+		anchors.fill: parent
+		enabled: false
+		hoverEnabled: enabled
+		parent: root.open ? root.rootParent : root
+
+		onClicked: root.open = false
+	}
+
+	Item {
+		id: dialogWrapper
+
+		height: openButton.implicitHeight
+		width: root.width
+		z: 1
+
+		states: State {
+			name: "open"
+			when: root.open
+
+			PropertyChanges {
+				backdrop.enabled: true
+				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
+				dialogWrapper.x: (root.rootParent.width - root.openWidth) / 2
+				dialogWrapper.y: (root.rootParent.height - root.openHeight) / 2
+				elevation.opacity: 1
+				openButton.opacity: 0
+			}
+		}
+		transitions: Transition {
+			id: dialogTransition
+
+			SequentialAnimation {
+				ScriptAction {
+					script: root.reparentWrapper()
+				}
+
+				Anim {
+					properties: "x,y"
+				}
+			}
+
+			PropertyAction {
+				property: "enabled"
+			}
+
+			Anim {
+				properties: "opacity,radius,bottomLeftRadius,bottomRightRadius"
+				type: Anim.DefaultEffects
+			}
+
+			Anim {
+				properties: "width,height"
+			}
+		}
+
+		Elevation {
+			id: elevation
+
+			anchors.fill: parent
+			bottomLeftRadius: dialogBg.bottomLeftRadius
+			bottomRightRadius: dialogBg.bottomRightRadius
+			level: 4
+			opacity: 0
+			radius: dialogBg.radius
+
+			transform: Matrix4x4 {
+				matrix: dialogBg.deformMatrix
+			}
+		}
+
+		BlobRect {
+			id: dialogBg
+
+			anchors.fill: parent
+			bottomLeftRadius: Tokens.rounding.large
+			bottomRightRadius: Tokens.rounding.large
+			deformScale: 0
+			group: blobGroup
+			opacity: blobGroup.color.a * (root.enabled ? 1 : 0.5)
+			radius: Tokens.rounding.extraSmall
+		}
+
+		RowButton {
+			id: openButton
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			color: "transparent"
+			height: Math.min(implicitHeight, parent.height) // Clamp to parent height due to overshoot anim
+			icon: root.icon
+			last: true
+			text: root.label
+
+			transform: Matrix4x4 {
+				matrix: dialogBg.deformMatrix
+			}
+
+			onClicked: root.open = true
+		}
+
+		Loader {
+			id: dialogContent
+
+			active: opacity > 0
+			anchors.fill: parent
+			asynchronous: true
+			opacity: 0
+
+			sourceComponent: MouseArea {
+				onWheel: event => event.accepted = true
+
+				ColumnLayout {
+					anchors.bottomMargin: Tokens.padding.largeIncreased
+					anchors.fill: parent
+					anchors.margins: Tokens.padding.extraLarge
+					spacing: 0
+
+					CustomText {
+						font.pointSize: Tokens.font.size.large
+						text: root.header
+					}
+
+					Loader {
+						Layout.fillWidth: true
+						Layout.topMargin: Tokens.spacing.normal
+						active: root.separateContent
+
+						sourceComponent: CustomRect {
+							color: Colors.palette.m3outline
+							implicitHeight: 1
+						}
+					}
+
+					Loader {
+						Layout.fillHeight: true
+						Layout.fillWidth: true
+						Layout.leftMargin: root.horizontalContentMargin
+						Layout.rightMargin: root.horizontalContentMargin
+						sourceComponent: root.content
+					}
+
+					Loader {
+						Layout.bottomMargin: Tokens.spacing.normal
+						Layout.fillWidth: true
+						active: root.separateContent
+
+						sourceComponent: CustomRect {
+							color: Colors.palette.m3outline
+							implicitHeight: 1
+						}
+					}
+
+					RowLayout {
+						Layout.alignment: Qt.AlignRight
+						spacing: Tokens.spacing.extraSmall
+
+						TextButton {
+							horizontalPadding: Tokens.padding.largeIncreased
+							isRound: true
+							text: qsTr("Cancel")
+							type: TextButton.Text
+							verticalPadding: Tokens.padding.normal
+
+							onClicked: {
+								root.cancelled();
+								root.open = false;
+							}
+						}
+
+						TextButton {
+							enabled: root.acceptAllowed
+							horizontalPadding: Tokens.padding.largeIncreased
+							isRound: true
+							text: root.acceptLabel
+							type: TextButton.Text
+							verticalPadding: Tokens.padding.normal
+
+							onClicked: {
+								root.accepted();
+								root.open = false;
+							}
+						}
+					}
+				}
+			}
+			transform: Matrix4x4 {
+				matrix: dialogBg.deformMatrix
+			}
+		}
+	}
+}

Modules/Settings/Common/DialogSelectButton.qml

@@ -0,0 +1,97 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import ZShell.Config
+import qs.Components
+import qs.Services
+
+DialogRowButton {
+	id: root
+
+	required property var model
+	property var selectedItem
+
+	function keyFor(item: var): string {
+		return item.id;
+	}
+
+	function labelFor(item: var): string {
+		return item.label;
+	}
+
+	acceptAllowed: !!selectedItem
+	horizontalContentMargin: -Tokens.padding.small
+	separateContent: true
+
+	content: Component {
+		VerticalFadeListView {
+			bottomMargin: Tokens.padding.large
+			model: root.model
+			spacing: 0
+			topMargin: Tokens.padding.large
+
+			delegate: CustomRect {
+				id: item
+
+				required property var modelData
+				readonly property bool selected: root.selectedItem === root.keyFor(modelData)
+
+				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(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 {
+						type: Anim.SlowEffects
+					}
+				}
+
+				StateLayer {
+					id: stateLayer
+
+					onClicked: root.selectedItem = root.keyFor(item.modelData)
+				}
+
+				CustomText {
+					id: label
+
+					anchors.left: parent.left
+					anchors.margins: Tokens.padding.large
+					anchors.right: item.selected ? checkIcon.left : parent.right
+					anchors.rightMargin: item.selected ? Tokens.spacing.normal : anchors.margins
+					anchors.verticalCenter: parent.verticalCenter
+					color: item.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
+					elide: Text.ElideRight
+					font.pointSize: Tokens.font.size.smaller
+					text: root.labelFor(item.modelData)
+				}
+
+				MaterialIcon {
+					id: checkIcon
+
+					anchors.margins: Tokens.padding.large
+					anchors.right: parent.right
+					anchors.verticalCenter: parent.verticalCenter
+					color: Colors.palette.m3onTertiaryContainer
+					font.pointSize: Tokens.font.size.medium
+					opacity: item.selected ? 1 : 0
+					text: "check"
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.SlowEffects
+						}
+					}
+				}
+			}
+		}
+	}
+
+	onOpenChanged: {
+		if (open)
+			selectedItem = null;
+	}
+}

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

@@ -0,0 +1,319 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import ZShell.Config
+import qs.Components
+import qs.Services
+
+ListView {
+	id: root
+
+	property bool first
+	property alias values: valuesModel.values
+
+	signal itemMoved(from: int, to: int)
+	signal itemRemoved(index: int)
+	signal itemToggled(index: int, checked: bool)
+
+	function dampOvershoot(overshoot: real, maxOvershoot: real): real {
+		return overshoot / (1 + overshoot / maxOvershoot);
+	}
+
+	function labelFor(item: var): string {
+		return item.label;
+	}
+
+	function toggledFor(item: var): bool {
+		return false;
+	}
+
+	Layout.fillWidth: true
+	implicitHeight: contentHeight
+	interactive: false
+	spacing: Tokens.spacing.extraSmall / 2
+
+	add: Transition {
+		Anim {
+			from: 0
+			properties: "opacity"
+			to: 1
+			type: Anim.DefaultEffects
+		}
+	}
+	displaced: Transition {
+		Anim {
+			properties: "opacity"
+			to: 1
+			type: Anim.DefaultEffects
+		}
+
+		Anim {
+			properties: "y"
+		}
+	}
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
+	model: DelegateModel {
+		id: visualModel
+
+		delegate: ListRow {
+		}
+		model: ScriptModel {
+			id: valuesModel
+		}
+	}
+	move: Transition {
+		Anim {
+			properties: "opacity"
+			to: 1
+			type: Anim.DefaultEffects
+		}
+
+		Anim {
+			properties: "y"
+		}
+	}
+	remove: Transition {
+		Anim {
+			properties: "opacity"
+			to: 0
+			type: Anim.DefaultEffects
+		}
+	}
+
+	component ListRow: Item {
+		id: item
+
+		property bool held
+		property real lastMoveY
+		required property var modelData
+		property int pressIndex
+		property point pressPos
+		property real radiusLerpProg
+		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;
+		}
+
+		anchors.left: root?.contentItem.left
+		anchors.right: root?.contentItem.right
+		implicitHeight: row.implicitHeight + row.anchors.margins * 2
+		state: held ? "held" : ""
+		z: held || returnAnim.running ? 1 : 0
+
+		states: State {
+			name: "held"
+
+			PropertyChanges {
+				dragIcon.color: Colors.palette.m3onPrimaryContainer
+				elevation.opacity: 1
+				item.radiusLerpProg: 1
+				itemBg.color: Colors.palette.m3primaryContainer
+				label.color: Colors.palette.m3onPrimaryContainer
+				placeholder.opacity: 0.1
+			}
+		}
+		Behavior on topRadius {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+		transitions: Transition {
+			Anim {
+				properties: "opacity,radiusLerpProg"
+				type: Anim.SlowEffects
+			}
+
+			PropertyAction {
+				properties: "color,inactiveOnColor"
+			}
+		}
+
+		CustomRect {
+			id: placeholder
+
+			anchors.fill: parent
+			color: Colors.palette.m3primary
+			opacity: 0
+			radius: Tokens.rounding.extraSmall
+			topLeftRadius: item.topRadius
+			topRightRadius: item.topRadius
+		}
+
+		MouseArea {
+			id: mouse
+
+			anchors.fill: parent
+			preventStealing: true
+
+			onPositionChanged: e => {
+				item.lastMoveY = item.y;
+				const absY = item.mapToItem(root.contentItem, 0, e.y).y;
+
+				const swap = root.itemAt(0, absY);
+				if (!swap || swap === item)
+					return;
+
+				const idx = item.DelegateModel.itemsIndex;
+				const swapIdx = swap.DelegateModel.itemsIndex;
+				visualModel.items.move(idx, swapIdx);
+			}
+			onPressed: e => {
+				returnAnim.stop();
+				item.pressPos = Qt.point(e.x, e.y);
+				item.pressIndex = item.DelegateModel.itemsIndex;
+				item.lastMoveY = item.y;
+				item.held = true;
+
+				itemContent.x = Qt.binding(() => {
+					if (!root) {
+						return 0;
+					}
+
+					const maxOvershoot = Tokens.padding.extraLargeIncreased;
+					const x = mouse.mouseX - item.pressPos.x;
+					return root.dampOvershoot(Math.abs(x), maxOvershoot) * Math.sign(x);
+				});
+				itemContent.y = Qt.binding(() => {
+					if (!root)
+						return 0;
+
+					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;
+					const maxY = root.implicitHeight - item.implicitHeight;
+					if (absY < 0)
+						return y - absY - root.dampOvershoot(-absY, maxOvershoot);
+					if (absY > maxY)
+						return y - absY + maxY + root.dampOvershoot(absY - maxY, maxOvershoot);
+					return y;
+				});
+			}
+			onReleased: e => {
+				// Break bindings
+				itemContent.x = itemContent.x;
+				itemContent.y = itemContent.y;
+				returnAnim.start();
+				item.held = false;
+
+				const idx = item.DelegateModel.itemsIndex;
+				if (idx !== item.pressIndex)
+					root.itemMoved(item.pressIndex, idx);
+			}
+		}
+
+		Anim {
+			id: returnAnim
+
+			properties: "x,y"
+			target: itemContent
+			to: 0
+		}
+
+		Item {
+			id: itemContent
+
+			implicitHeight: item.implicitHeight
+			implicitWidth: item.width
+
+			Elevation {
+				id: elevation
+
+				anchors.fill: parent
+				level: 3
+				opacity: 0
+				radius: itemBg.radius
+				topLeftRadius: itemBg.topLeftRadius
+				topRightRadius: itemBg.topRightRadius
+			}
+
+			CustomRect {
+				id: itemBg
+
+				anchors.fill: parent
+				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 {
+				id: stateLayer
+
+				acceptedButtons: Qt.NoButton
+				anchors.fill: parent
+				cursorShape: mouse.pressed ? Qt.ClosedHandCursor : Qt.OpenHandCursor
+				hoverEnabled: true
+
+				CustomRect {
+					anchors.fill: parent
+					color: Colors.palette.m3onSurface
+					opacity: parent.containsMouse && !item.held ? 0.08 : 0
+					radius: itemBg.radius
+					topLeftRadius: itemBg.topLeftRadius
+					topRightRadius: itemBg.topRightRadius
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
+				}
+			}
+
+			RowLayout {
+				id: row
+
+				anchors.fill: parent
+				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(Colors.palette.m3onSurfaceVariant, enabledSwitch.checked ? 1 : 0.5)
+					font.pointSize: Tokens.font.size.medium
+					text: "drag_indicator"
+				}
+
+				CustomText {
+					id: label
+
+					Layout.fillWidth: true
+					color: Qt.alpha(Colors.palette.m3onSurface, enabledSwitch.checked ? 1 : 0.5)
+					elide: Text.ElideRight
+					font.pointSize: Tokens.font.size.smaller
+					text: root.labelFor(item.modelData)
+				}
+
+				CustomSwitch {
+					id: enabledSwitch
+
+					checked: root.toggledFor(item.modelData)
+					font.pointSize: Tokens.font.size.medium
+
+					onToggled: root.itemToggled(item.DelegateModel.itemsIndex, checked)
+				}
+
+				IconButton {
+					font.pointSize: Tokens.font.size.large
+					icon: "delete"
+					inactiveOnColor: Colors.palette.m3error
+					isRound: true
+					label.fill: 0
+					type: IconButton.Text
+
+					onClicked: root.itemRemoved(item.DelegateModel.itemsIndex)
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,94 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Components
+import qs.Services
+
+ConnectedRect {
+	id: root
+
+	property alias icon: iconLabel.text
+	readonly property alias iconLabel: iconLabel
+	readonly property alias label: label
+	property alias stateEnabled: stateLayer.enabled
+	readonly property alias subLabel: subLabel
+	property alias subtext: subLabel.text
+	property alias text: label.text
+	property string trailingIcon
+
+	signal clicked(event: MouseEvent)
+
+	Layout.fillWidth: true
+	implicitHeight: row.implicitHeight + Tokens.padding.normal * 2
+
+	StateLayer {
+		id: stateLayer
+
+		onClicked: e => root.clicked(e)
+	}
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Tokens.padding.largeIncreased
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		opacity: root.enabled ? 1 : 0.5
+		spacing: Tokens.spacing.normal
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+
+		MaterialIcon {
+			id: iconLabel
+
+			color: Colors.palette.m3onSurfaceVariant
+			fill: 1
+			font.pointSize: Tokens.font.size.medium
+		}
+
+		Column {
+			id: column
+
+			Layout.fillWidth: true
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				elide: Text.ElideRight
+				font.pointSize: Tokens.font.size.small
+			}
+
+			CustomText {
+				id: subLabel
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				color: Colors.palette.m3outline
+				elide: Text.ElideRight
+				font.pointSize: Tokens.font.size.small
+				visible: text
+			}
+		}
+
+		Loader {
+			active: root.trailingIcon
+			asynchronous: true
+			visible: active
+
+			sourceComponent: MaterialIcon {
+				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,12 +58,14 @@ 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
+
+				Behavior on opacity {
+					Anim {
+					}
+				}
 			}
 
 			CustomText {
@@ -70,15 +73,17 @@ 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
+
+				Behavior on opacity {
+					Anim {
+					}
+				}
 			}
 		}
 	}

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/PageRegistry.qml

@@ -15,9 +15,9 @@ Singleton {
 			category: "appearance"
 		},
 		{
-			name: qsTr("Screenshot"),
+			name: qsTr("Screenshots"),
 			icon: "screenshot_region",
-			description: qsTr("Set screenshot effects"),
+			description: qsTr("Set screenshot options and effects"),
 			category: "appearance"
 		},
 

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/NetworkPage.qml

@@ -0,0 +1,239 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Modules.Settings.Common
+import qs.Modules.SysTray.Popouts.Network
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+PageBase {
+	id: root
+
+	title: qsTr("Network")
+
+	ColumnLayout {
+		id: networkContent
+
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.top
+		spacing: Appearance.spacing.extraSmall / 2
+		width: root.cappedWidth
+
+		Toggle {
+			Layout.preferredHeight: visible ? implicitHeight : 0
+			checked: Network.wifiEnabled
+			first: true
+			last: connected.count === 0
+			subtext: qsTr("Toggle WiFi device state")
+			text: checked ? qsTr("Enabled") : qsTr("Disabled")
+
+			onToggled: Network.setWifi(checked)
+		}
+
+		Repeater {
+			id: connected
+
+			visible: Network.connectedNetworks.length > 0
+
+			model: ScriptModel {
+				values: [...Network.connectedNetworks].sort((a, b) => {
+					return b.signalStrength - a.signalStrength;
+				})
+			}
+
+			NetworkItem {
+				first: false
+				known: true
+				repeater: connected
+			}
+		}
+	}
+
+	component NetworkItem: ConnectedRect {
+		id: networkItem
+
+		readonly property bool connecting: Network.connectingNetwork === modelData
+		property int horizontalPadding: Appearance.padding.largeIncreased
+		required property int index
+		readonly property bool isSecure: Network.isSecure(modelData.security)
+		required property bool known
+		required property var modelData
+		required property Repeater repeater
+
+		Layout.fillWidth: true
+		Layout.preferredHeight: visible ? rowLayout.implicitHeight + Appearance.padding.smaller * 2 : 0
+		first: index === 0
+		last: index === (repeater.count - 1)
+		radius: Appearance.rounding.small
+
+		RowLayout {
+			id: rowLayout
+
+			anchors.fill: parent
+			anchors.leftMargin: networkItem.horizontalPadding
+			anchors.rightMargin: networkItem.horizontalPadding
+
+			Column {
+				id: column
+
+				Layout.fillWidth: true
+
+				CustomText {
+					Layout.fillWidth: true
+					Layout.leftMargin: Appearance.spacing.extraSmall
+					Layout.rightMargin: Appearance.spacing.extraSmall
+					color: networkItem.modelData.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+					elide: Text.ElideRight
+					text: networkItem.modelData.name
+				}
+
+				CustomText {
+					id: subtext
+
+					anchors.left: parent.left
+					anchors.right: parent.right
+					color: DynamicColors.palette.m3outline
+					elide: Text.ElideRight
+					font.pointSize: Appearance.font.size.small
+					text: qsTr("%1 strength").arg(Math.round(networkItem.modelData.signalStrength * 100) + "%")
+				}
+			}
+
+			Item {
+				Layout.alignment: Qt.AlignRight
+				implicitHeight: icon.height
+				implicitWidth: icon.width
+
+				MaterialIcon {
+					id: icon
+
+					color: networkItem.modelData.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+					font.pointSize: Appearance.font.size.large
+					opacity: networkItem.connecting ? 0 : 1
+					text: Icons.getNetworkIcon(networkItem.modelData.signalStrength * 100, networkItem.isSecure)
+
+					Behavior on opacity {
+						Anim {
+						}
+					}
+				}
+
+				Loader {
+					active: opacity > 0
+					anchors.fill: parent
+					opacity: networkItem.connecting ? 1 : 0
+
+					Behavior on opacity {
+						Anim {
+						}
+					}
+					sourceComponent: CircularIndicator {
+						bgColor: "transparent"
+						running: true
+					}
+				}
+			}
+		}
+
+		StateLayer {
+			color: networkItem.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+
+			onClicked: {
+				if (networkItem.isSecure && !networkItem.known) {
+					PopupManager.requestOpen(Qt.resolvedUrl("Network/PSKOverlay.qml"), {
+						network: networkItem.modelData
+					});
+				} else {
+					Network.requestConnect(networkItem.modelData);
+				}
+			}
+		}
+	}
+	component Spacer: Item {
+		id: spacer
+
+		required property Repeater repeater
+
+		Layout.preferredHeight: repeater.count > 0 ? Appearance.spacing.extraSmall : 0
+	}
+	component Toggle: CustomSwitch {
+		id: toggleItem
+
+		readonly property alias bg: bg
+		property alias first: bg.first
+		property alias last: bg.last
+		property string subtext
+
+		Layout.fillWidth: true
+		cLayer: 2
+		horizontalPadding: Appearance.padding.largeIncreased
+		implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + verticalPadding * 2
+		implicitWidth: implicitContentWidth + implicitIndicatorWidth + horizontalPadding * 2
+		indicator.anchors.right: right
+		indicator.anchors.rightMargin: toggleItem.horizontalPadding
+		indicator.anchors.verticalCenter: verticalCenter
+		verticalPadding: Appearance.padding.normal
+
+		background: ConnectedRect {
+			id: bg
+
+			StateLayer {
+				id: stateLayer
+
+				manualPressOverride: toggleItem.pressed
+			}
+		}
+		contentItem: Item {
+			anchors.left: parent.left
+			anchors.leftMargin: toggleItem.horizontalPadding
+			anchors.right: toggleItem.indicator.left
+			anchors.rightMargin: Appearance.spacing.normal
+			implicitHeight: column.implicitHeight
+			implicitWidth: column.implicitWidth
+
+			Column {
+				id: column
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				anchors.verticalCenter: parent.verticalCenter
+				spacing: 0
+
+				CustomText {
+					id: label
+
+					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;
+					}
+					text: toggleItem.text
+				}
+
+				CustomText {
+					id: subtext
+
+					anchors.left: parent.left
+					anchors.right: parent.right
+					color: DynamicColors.palette.m3outline
+					elide: Text.ElideRight
+					font: {
+						const f = Qt.font(subtext.font);
+						f.pointSize = Appearance.font.size.small;
+						return f;
+					}
+					text: toggleItem.subtext
+					visible: toggleItem.subtext
+				}
+			}
+		}
+
+		onPressed: stateLayer.press(stateLayer.mouseX, stateLayer.mouseY)
+	}
+}

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,19 +1,25 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Modules.Settings.Common
 
 PageBase {
 	id: root
 
+	readonly property var builtinIcons: ({
+			audio: qsTr("Speakers"),
+			microphone: qsTr("Microphone"),
+			power: qsTr("Battery"),
+			network: qsTr("Network"),
+			bluetooth: qsTr("Bluetooth")
+		})
+
 	isSubPage: true
 	title: qsTr("System icons")
 
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		// Visible icons
@@ -22,78 +28,70 @@ PageBase {
 			text: qsTr("Visible icons")
 		}
 
-		ToggleRow {
-			checked: Config.bar.tray.showAudio
+		ListEditor {
+			function labelFor(item: var): string {
+				const prettyName = root.builtinIcons[item.id];
+				if (prettyName)
+					return prettyName;
+				const label = item.id.replace(/([A-Z])/g, " $1");
+				return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
+			}
+
+			function toggledFor(item: var): bool {
+				return item.enabled;
+			}
+
 			first: true
-			settingAnchor: "bar-status-speakers"
-			text: qsTr("Speakers")
+			values: Config.bar.tray.statusIcons.values
+			z: 1
 
-			onToggled: Config.bar.tray.showAudio = checked
+			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
 		}
 
-		ToggleRow {
-			checked: Config.bar.tray.showMicrophone
-			settingAnchor: "bar-status-mic"
-			text: qsTr("Microphone")
+		DialogSelectButton {
+			id: addItemContainer
 
-			onToggled: Config.bar.tray.showMicrophone = checked
+			acceptLabel: qsTr("Add")
+			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.values.map(item => item.id));
+				return Object.keys(root.builtinIcons).filter(id => !present.has(id)).map(id => ({
+							id: id,
+							label: root.builtinIcons[id]
+						}));
+			}
+			rootParent: root.flickable
+
+			onAccepted: {
+				if (!selectedItem)
+					return;
+
+				Config.bar.tray.statusIcons.insert({
+					id: selectedItem,
+					enabled: true
+				});
+			}
 		}
 
-		ToggleRow {
-			checked: Config.bar.tray.showNetwork
-			text: qsTr("Network")
-
-			onToggled: Config.bar.tray.showNetwork = checked
-		}
-
-		//////// FOR LATER:
-		//
-		// ToggleRow {
-		// 	checked: Config.bar.tray.showWifi
-		// 	text: qsTr("Wi-Fi")
-		//
-		// 	onToggled: Config.bar.tray.showWifi = checked
-		// }
-		//
-		// ToggleRow {
-		// 	checked: Config.bar.tray.showBluetooth
-		// 	text: qsTr("Bluetooth")
-		//
-		// 	onToggled: Config.bar.tray.showBluetooth = checked
-		// }
-
-		ToggleRow {
-			checked: Config.bar.tray.showPower
-			last: true
-			settingAnchor: "bar-status-power"
-			text: qsTr("Battery")
-
-			onToggled: Config.bar.tray.showPower = checked
-		}
-
-		// Behaviour
+		// Behavior
 		SectionHeader {
 			text: qsTr("Behavior")
 		}
 
 		ToggleRow {
-			checked: Config.bar.popouts.audio
+			checked: Config.bar.popouts.statusIcons
 			first: true
-			settingAnchor: "bar-status-audio-popout"
-			subtext: qsTr("Show a details popout when hovering the audio icons")
-			text: qsTr("Audio popout on hover")
-
-			onToggled: Config.bar.popouts.audio = checked
-		}
-
-		ToggleRow {
-			checked: Config.bar.popouts.upower
 			last: true
-			settingAnchor: "bar-status-power-popout"
-			subtext: qsTr("Show a details popout when hovering the power icon")
-			text: qsTr("Power popout on hover")
+			settingAnchor: "bar-status-popout-on-hover"
+			subtext: qsTr("Show a details popout when hovering the status icons")
+			text: qsTr("Popout on hover")
 
-			onToggled: Config.bar.popouts.upower = checked
+			onToggled: Config.bar.popouts.statusIcons = checked
 		}
 
 		ToggleRow {

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 {
@@ -28,8 +28,18 @@ PageBase {
 			onMoved: value => Config.bar.tray.trayIconSize = value
 		}
 
+		ToggleRow {
+			checked: Config.bar.popouts.tray
+			settingAnchor: "bar-tray-enable-tray-popouts"
+			subtext: Config.bar.popouts.tray ? qsTr("Enabled") : qsTr("Disabled")
+			text: qsTr("Enable tray menu popouts")
+
+			onToggled: Config.bar.popouts.tray = checked
+		}
+
 		ToggleRow {
 			checked: Config.bar.tray.showOnHover
+			enabled: Config.bar.popouts.tray
 			settingAnchor: "bar-tray-show-popout-on-hover"
 			subtext: Config.bar.tray.showOnHover ? qsTr("Will show context menu on hover") : qsTr("Will show context menu on right-click")
 			text: qsTr("Show popout on hover")

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,23 +5,38 @@ 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
 
 PageBase {
 	id: root
 
-	title: qsTr("Screenshot effects")
+	title: qsTr("Screenshots")
 
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		spacing: Appearance.spacing.extraSmall / 2
+		spacing: Tokens.spacing.extraSmall / 2
 		width: root.cappedWidth
 
 		SectionHeader {
 			first: true
+			text: qsTr("Behavior")
+		}
+
+		ToggleRow {
+			checked: Config.screenshot.saveOnCopy
+			first: true
+			last: true
+			settingAnchor: "screenshot-save-on-copy"
+			subtext: qsTr("Also save screenshot to disk when copying to clipboard")
+			text: qsTr("Save on copy")
+
+			onToggled: Config.screenshot.saveOnCopy = checked
+		}
+
+		SectionHeader {
 			text: qsTr("Effects")
 		}
 

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
 		}
 	}