Merge branch 'main' into feat/reposition-bar

Modules/Settings/Pages/AboutPage.qml

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

Modules/Settings/Pages/Apps/AllApps.qml

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

Modules/Settings/Pages/Apps/AppInfo.qml

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

Modules/Settings/Pages/AppsPage.qml

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

Modules/Settings/Pages/Audio/AppVolumes.qml

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

Modules/Settings/Pages/AudioPage.qml

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

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

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

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

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

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

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

Modules/Settings/Pages/Panels/BarPanel.qml

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

Modules/Settings/Pages/Panels/DashboardPanel.qml

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

Modules/Settings/Pages/Panels/LauncherPanel.qml

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

Modules/Settings/Pages/Panels/ResourcesPanel.qml

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

Modules/Settings/Pages/Panels/SidebarPanel.qml

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

Modules/Settings/Pages/PanelsPage.qml

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

Modules/Settings/Pages/ScreenshotPage.qml

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

Modules/Settings/Pages/Services/NotificationsPage.qml

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

Modules/Settings/Pages/ServicesPage.qml

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

Modules/Settings/Pages/Wallpaper/WallpaperSelect.qml

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

Modules/Settings/Pages/WallpaperPage.qml

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