Merge branch 'main' into feat/peripheral-integration

Modules/Bar/Bar.qml

@@ -4,7 +4,7 @@ import Quickshell
 import QtQuick
 import QtQuick.Layouts
 import qs.Modules
-import qs.Config
+import ZShell.Config
 import qs.Modules.SysTray
 import qs.Modules.Network
 import qs.Modules.Updates
@@ -12,17 +12,18 @@ import qs.Modules.Updates
 RowLayout {
 	id: root
 
+	required property bool fullscreen
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
 	required property ShellScreen screen
-	required property bool fullscreen
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
 	function checkPopout(x: real): void {
-		const ch = childAt(x, height / 2) as WrappedLoader;
+		const ch = childAt(x, height / 2) as EntryWrapper;
+		const id = ch?.entryId;
 
-		if (!ch || ch?.id === "spacer") {
+		if (!ch || id === undefined) {
 			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover)
 				popouts.hasCurrent = false;
 			return;
@@ -31,42 +32,50 @@ RowLayout {
 		if (visibilities.sidebar || visibilities.dashboard || visibilities.resources || visibilities.settings)
 			return;
 
-		if (ch.id === "tray") {
-			const tray = ch.item;
-			const localPos = tray.mapFromItem(root, x, height / 2);
-			const sub = tray.getHoveredSubItem(localPos.x, localPos.y);
-			if (sub) {
-				popouts.currentName = sub.id;
+		if (id === "statusIcons" && Config.bar.popouts.statusIcons) {
+			const items = (ch.item as StatusIcons).items;
+			const localX = mapToItem(items, x, 0).x;
+			const icon = items.childAt(localX, items.height / 2);
+			if (icon) {
+				popouts.currentName = icon.name;
+				popouts.currentCenter = Qt.binding(() => icon.mapToItem(root, icon.implicitWidth / 2, 0).x);
+				popouts.hasCurrent = true;
+			}
+		} else if (id === "tray" && Config.bar.popouts.tray && Config.bar.tray.showOnHover) {
+			const tray = ch.item as TrayIcons;
+			const layout = tray.layout;
+			const localX = mapToItem(layout, x, 0).x;
+			const trayItem = layout.childAt(localX, layout.height / 2);
+
+			if (trayItem) {
+				const idx = trayItem.index;
+				popouts.currentName = `traymenu${idx}`;
 				popouts.currentCenter = Qt.binding(() => {
-					const centerX = sub.item.mapToItem(root, sub.item.width / 2, 0).x;
-					return centerX;
+					const it = tray.items.itemAt(idx);
+					return it ? it.mapToItem(root, it.implicitWidth / 2, 0).x : popouts.currentCenter;
 				});
 				popouts.hasCurrent = true;
-				return;
 			}
 
-			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover)
+			if (!popouts.currentName.startsWith("traymenu"))
 				popouts.hasCurrent = false;
 		}
 
-		const id = ch.id;
-		const top = ch.x;
-		const item = ch.item;
-		const itemWidth = item.implicitWidth;
-
 		if (id === "updates") {
 			popouts.currentName = "updates";
-			popouts.currentCenter = Qt.binding(() => item.mapToItem(root, itemWidth / 2, 0).x);
+			popouts.currentCenter = Qt.binding(() => ch.item.mapToItem(root, (ch.item as Item).implicitWidth / 2, 0).x);
 			popouts.hasCurrent = true;
 		}
 	}
 
-	spacing: Appearance.spacing.small
+	spacing: Tokens.spacing.small
 
 	Repeater {
 		id: repeater
 
-		model: Config.bar.entries
+		model: ScriptModel {
+			values: Config.bar.entries.values.filter(e => e.enabled)
+		}
 
 		DelegateChooser {
 			role: "id"
@@ -74,8 +83,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "hyprsunset"
 
-				delegate: WrappedLoader {
-					sourceComponent: HyprsunsetWidget {
+				delegate: EntryWrapper {
+					HyprsunsetWidget {
 						visible: !root.fullscreen
 					}
 				}
@@ -84,7 +93,7 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "spacer"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
 					Layout.fillWidth: true
 				}
 			}
@@ -92,8 +101,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "workspaces"
 
-				delegate: WrappedLoader {
-					sourceComponent: Workspaces {
+				delegate: EntryWrapper {
+					Workspaces {
 						screen: root.screen
 						visible: !root.fullscreen
 					}
@@ -103,8 +112,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "tray"
 
-				delegate: WrappedLoader {
-					sourceComponent: TrayWidget {
+				delegate: EntryWrapper {
+					TrayIcons {
 						loader: root
 						popouts: root.popouts
 						visible: !root.fullscreen
@@ -112,11 +121,20 @@ RowLayout {
 				}
 			}
 
+			DelegateChoice {
+				roleValue: "statusIcons"
+
+				delegate: EntryWrapper {
+					StatusIcons {
+					}
+				}
+			}
+
 			DelegateChoice {
 				roleValue: "resources"
 
-				delegate: WrappedLoader {
-					sourceComponent: Resources {
+				delegate: EntryWrapper {
+					Resources {
 						visibilities: root.visibilities
 						visible: !root.fullscreen
 					}
@@ -126,8 +144,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "updates"
 
-				delegate: WrappedLoader {
-					sourceComponent: UpdatesWidget {
+				delegate: EntryWrapper {
+					UpdatesWidget {
 						visible: !root.fullscreen
 					}
 				}
@@ -136,8 +154,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "notifBell"
 
-				delegate: WrappedLoader {
-					sourceComponent: NotifBell {
+				delegate: EntryWrapper {
+					NotifBell {
 						popouts: root.popouts
 						visibilities: root.visibilities
 						visible: !root.fullscreen
@@ -148,8 +166,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "clock"
 
-				delegate: WrappedLoader {
-					sourceComponent: Clock {
+				delegate: EntryWrapper {
+					Clock {
 						loader: root
 						popouts: root.popouts
 						visibilities: root.visibilities
@@ -161,8 +179,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "activeWindow"
 
-				delegate: WrappedLoader {
-					sourceComponent: WindowTitle {
+				delegate: EntryWrapper {
+					WindowTitle {
 						bar: root
 						visible: !root.fullscreen
 					}
@@ -172,8 +190,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "network"
 
-				delegate: WrappedLoader {
-					sourceComponent: NetworkWidget {
+				delegate: EntryWrapper {
+					NetworkWidget {
 					}
 				}
 			}
@@ -181,8 +199,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "media"
 
-				delegate: WrappedLoader {
-					sourceComponent: MediaWidget {
+				delegate: EntryWrapper {
+					MediaWidget {
 						visible: !root.fullscreen
 					}
 				}
@@ -190,34 +208,17 @@ RowLayout {
 		}
 	}
 
-	component WrappedLoader: Loader {
-		required property bool enabled
-		required property string id
+	component EntryWrapper: Item {
+		readonly property string entryId: modelData.id
 		required property int index
-
-		function findFirstEnabled(): Item {
-			const count = repeater.count;
-			for (let i = 0; i < count; i++) {
-				const item = repeater.itemAt(i);
-				if (item?.enabled)
-					return item;
-			}
-			return null;
-		}
-
-		function findLastEnabled(): Item {
-			for (let i = repeater.count - 1; i >= 0; i--) {
-				const item = repeater.itemAt(i);
-				if (item?.enabled)
-					return item;
-			}
-			return null;
-		}
+		default property Item item
+		required property var modelData
 
 		Layout.alignment: Qt.AlignVCenter
-		Layout.leftMargin: findFirstEnabled() === this ? root.vPadding : 0
-		Layout.rightMargin: findLastEnabled() === this ? root.vPadding : 0
-		active: enabled
-		visible: enabled
+		Layout.leftMargin: index === 0 ? root.vPadding : (entryId === "statusIcons") ? -root.spacing + Tokens.spacing.extraSmall : 0
+		Layout.rightMargin: index === repeater.count - 1 ? root.vPadding : 0
+		children: item
+		implicitHeight: item?.implicitHeight ?? 0
+		implicitWidth: item?.implicitWidth ?? 0
 	}
 }

Modules/Bar/BarLoader.qml

@@ -6,7 +6,7 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Components
 import qs.Modules
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Modules.SysTray
 import qs.Modules.SysTray.Widgets
@@ -19,7 +19,7 @@ Item {
 	readonly property int exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentHeight
 	required property bool fullscreen
 	property bool isHovered
-	readonly property int padding: Math.max(Appearance.padding.smaller, Config.bar.border)
+	readonly property int padding: Math.max(Tokens.padding.smaller, Config.bar.border)
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
 	required property ShellScreen screen
@@ -48,8 +48,6 @@ Item {
 			to: "visible"
 
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
 				property: "implicitHeight"
 				target: root
 			}
@@ -59,8 +57,6 @@ Item {
 			to: ""
 
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
 				property: "implicitHeight"
 				target: root
 			}

Modules/Bar/Border.qml

@@ -3,8 +3,9 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import QtQuick.Effects
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
 Item {
 	id: root
@@ -17,7 +18,7 @@ Item {
 	CustomRect {
 		anchors.fill: parent
 		anchors.margins: -1
-		color: DynamicColors.palette.m3surface
+		color: Colors.palette.m3surface
 		layer.enabled: true
 
 		layer.effect: MultiEffect {

Modules/ClipWrapper.qml

@@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root

Modules/Clipboard/Content.qml

@@ -6,7 +6,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -30,9 +31,9 @@ Item {
 		anchors.left: parent.left
 		anchors.right: entries.right
 		anchors.top: parent.top
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: 50
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		SearchBar {
 			id: searchField
@@ -41,7 +42,7 @@ Item {
 			anchors.left: parent.left
 			anchors.right: parent.right
 			anchors.top: parent.top
-			color: DynamicColors.palette.m3onSurface
+			color: Colors.palette.m3onSurface
 			placeholderText: "Search clipboard history..."
 
 			Keys.onDownPressed: view.incrementCurrentIndex()
@@ -58,10 +59,10 @@ Item {
 
 		anchors.bottom: parent.bottom
 		anchors.left: entries.right
-		anchors.leftMargin: Appearance.spacing.normal
+		anchors.leftMargin: Tokens.spacing.normal
 		anchors.top: parent.top
-		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitWidth: ClipHistory.previewIsImage ? Math.max(Math.min(imagePreview.sourceSize.width + Appearance.padding.large * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth) : Math.max(Math.min(textPreviewColumn.width + textPreviewColumn.anchors.margins * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth)
+		color: Colors.tPalette.m3surfaceContainer
+		implicitWidth: ClipHistory.previewIsImage ? Math.max(Math.min(imagePreview.sourceSize.width + Tokens.padding.large * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth) : Math.max(Math.min(textPreviewColumn.width + textPreviewColumn.anchors.margins * 2, Config.clipboard.sizes.previewWidth), Config.clipboard.sizes.minPreviewWidth)
 		radius: 25
 
 		Behavior on implicitWidth {
@@ -74,7 +75,7 @@ Item {
 
 			anchors.left: parent.left
 			anchors.leftMargin: 0
-			anchors.margins: Appearance.padding.normal
+			anchors.margins: Tokens.padding.normal
 			anchors.top: parent.top
 			visible: !ClipHistory.previewIsImage
 
@@ -89,21 +90,21 @@ Item {
 					required property int index
 					required property var modelData
 
-					spacing: Appearance.spacing.normal
+					spacing: Tokens.spacing.normal
 
 					CustomRect {
-						color: lineRow.index % 2 ? DynamicColors.tPalette.m3surfaceContainer : "transparent"
-						implicitHeight: lineText.paintedHeight + Appearance.padding.extraSmall * 2
+						color: lineRow.index % 2 ? Colors.tPalette.m3surfaceContainer : "transparent"
+						implicitHeight: lineText.paintedHeight + Tokens.padding.extraSmall * 2
 						implicitWidth: 50
 
 						CustomText {
 							id: number
 
-							anchors.margins: Appearance.padding.large
+							anchors.margins: Tokens.padding.large
 							anchors.right: parent.right
 							anchors.verticalCenter: parent.verticalCenter
-							color: DynamicColors.palette.m3onSurfaceVariant
-							font.pointSize: Appearance.font.size.small
+							color: Colors.palette.m3onSurfaceVariant
+							font.pointSize: Tokens.font.size.small
 							text: lineRow.modelData.line
 						}
 					}
@@ -113,7 +114,7 @@ Item {
 
 						RowLayout {
 							height: lineText.height
-							width: lineText.height + Appearance.spacing.extraSmall
+							width: lineText.height + Tokens.spacing.extraSmall
 
 							Item {
 								Layout.fillHeight: true
@@ -121,10 +122,10 @@ Item {
 
 								CustomRect {
 									anchors.centerIn: parent
-									color: DynamicColors.tPalette.m3surfaceContainer
+									color: Colors.tPalette.m3surfaceContainer
 									implicitHeight: parent.height / 8
 									implicitWidth: parent.height / 8
-									radius: Appearance.rounding.full
+									radius: Tokens.rounding.full
 								}
 							}
 
@@ -134,10 +135,10 @@ Item {
 
 								CustomRect {
 									anchors.centerIn: parent
-									color: DynamicColors.tPalette.m3surfaceContainer
+									color: Colors.tPalette.m3surfaceContainer
 									implicitHeight: parent.height / 8
 									implicitWidth: parent.height / 8
-									radius: Appearance.rounding.full
+									radius: Tokens.rounding.full
 								}
 							}
 
@@ -147,10 +148,10 @@ Item {
 
 								CustomRect {
 									anchors.centerIn: parent
-									color: DynamicColors.tPalette.m3surfaceContainer
+									color: Colors.tPalette.m3surfaceContainer
 									implicitHeight: parent.height / 8
 									implicitWidth: parent.height / 8
-									radius: Appearance.rounding.full
+									radius: Tokens.rounding.full
 								}
 							}
 						}
@@ -159,8 +160,8 @@ Item {
 					CustomText {
 						id: lineText
 
-						color: DynamicColors.palette.m3onSurface
-						height: lineText.paintedHeight + Appearance.padding.extraSmall * 2
+						color: Colors.palette.m3onSurface
+						height: lineText.paintedHeight + Tokens.padding.extraSmall * 2
 						text: lineRow.modelData.text.trim()
 						verticalAlignment: Text.AlignVCenter
 						wrapMode: Text.Wrap
@@ -191,7 +192,7 @@ Item {
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		anchors.top: search.bottom
-		anchors.topMargin: Appearance.spacing.normal
+		anchors.topMargin: Tokens.spacing.normal
 		implicitWidth: Config.clipboard.sizes.width
 
 		CustomListView {
@@ -203,7 +204,7 @@ Item {
 			highlightRangeMode: ListView.ApplyRange
 			preferredHighlightBegin: 0
 			preferredHighlightEnd: height
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			CustomScrollBar.vertical: CustomScrollBar {
 				flickable: view
@@ -217,7 +218,7 @@ Item {
 
 				implicitHeight: root.itemHeight
 				implicitWidth: view.width
-				radius: textLayer.pressed ? (Appearance.rounding.small / 2) : Appearance.rounding.small
+				radius: textLayer.pressed ? (Tokens.rounding.small / 2) : Tokens.rounding.small
 
 				Behavior on radius {
 					Anim {
@@ -227,7 +228,7 @@ Item {
 
 				RowLayout {
 					anchors.fill: parent
-					spacing: Appearance.spacing.small
+					spacing: Tokens.spacing.small
 
 					CustomClippingRect {
 						id: textRect
@@ -249,9 +250,9 @@ Item {
 								id: icon
 
 								anchors.left: parent.left
-								anchors.margins: Appearance.padding.normal
+								anchors.margins: Tokens.padding.normal
 								anchors.verticalCenter: parent.verticalCenter
-								font.pointSize: Appearance.font.size.large
+								font.pointSize: Tokens.font.size.large
 								text: clipItem.isImage ? "image" : "text_fields"
 							}
 
@@ -259,7 +260,7 @@ Item {
 								id: text
 
 								anchors.left: icon.right
-								anchors.margins: Appearance.spacing.normal
+								anchors.margins: Tokens.spacing.normal
 								anchors.verticalCenter: parent.verticalCenter
 								elide: Text.ElideRight
 								text: clipItem.isImage ? qsTr("Image") : ClipHistory.displayText(clipItem.modelData)
@@ -291,11 +292,11 @@ Item {
 
 					IconButton {
 						Layout.fillHeight: true
-						Layout.margins: Appearance.padding.normal
+						Layout.margins: Tokens.padding.normal
 						Layout.preferredWidth: height
 						icon: "delete"
-						inactiveColor: Qt.alpha(DynamicColors.palette.m3error, 0.8)
-						inactiveOnColor: DynamicColors.palette.m3onError
+						inactiveColor: Qt.alpha(Colors.palette.m3error, 0.8)
+						inactiveOnColor: Colors.palette.m3onError
 						isToggle: false
 
 						onClicked: ClipHistory.deleteEntry(clipItem.modelData)
@@ -309,17 +310,17 @@ Item {
 				}
 			}
 			highlight: CustomRect {
-				color: DynamicColors.palette.m3onSurface
+				color: Colors.palette.m3onSurface
 				implicitHeight: view.currentItem?.height ?? 0
 				implicitWidth: view.width
 				opacity: 0.08
-				radius: Appearance.rounding.small
+				radius: Tokens.rounding.small
 				y: view.currentItem?.y ?? 0
 
 				Behavior on y {
 					Anim {
-						duration: Appearance.anim.durations.small
-						easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+						duration: Tokens.anim.durations.small
+						easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 					}
 				}
 			}
@@ -341,7 +342,7 @@ Item {
 			CustomClippingWrapperRect {
 				anchors.fill: parent
 				child: view.contentItem
-				radius: Appearance.rounding.small
+				radius: Tokens.rounding.small
 			}
 		}
 	}

Modules/Clipboard/Wrapper.qml

@@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
@@ -15,15 +15,15 @@ Item {
 	required property PersistentProperties visibilities
 
 	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
-	implicitHeight: content.implicitHeight + Appearance.padding.normal * 2
-	implicitWidth: content.implicitWidth + Appearance.padding.normal * 2 || 400
+	implicitHeight: content.implicitHeight + Tokens.padding.normal * 2
+	implicitWidth: content.implicitWidth + Tokens.padding.normal * 2 || 400
 	opacity: 1 - offsetScale
 	visible: offsetScale < 1
 
 	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
 		}
 	}
 

Modules/Clock.qml

@@ -1,10 +1,11 @@
 import Quickshell
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Modules
 import qs.Helpers
 import qs.Components
+import qs.Services
 
 CustomRect {
 	id: root
@@ -13,17 +14,17 @@ CustomRect {
 	required property Wrapper popouts
 	required property PersistentProperties visibilities
 
-	color: visibilities.dashboard ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
-	implicitWidth: timeText.contentWidth + Appearance.padding.normal * 2
-	radius: Appearance.rounding.full
+	color: visibilities.dashboard ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Tokens.padding.smallest * 2
+	implicitWidth: timeText.contentWidth + Tokens.padding.normal * 2
+	radius: Tokens.rounding.full
 
 	CustomText {
 		id: timeText
 
 		anchors.centerIn: parent
-		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-		font: Appearance.font.family.mono // qmllint disable incompatible-type
+		color: root.visibilities.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+		font: Config.appearance.font.family.mono
 		text: Time.dateStr
 
 		Behavior on color {
@@ -34,7 +35,7 @@ CustomRect {
 
 	StateLayer {
 		acceptedButtons: Qt.LeftButton
-		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		color: root.visibilities.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 
 		onClicked: {
 			root.visibilities.dashboard = !root.visibilities.dashboard;

Modules/Content.qml

@@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import Quickshell.Services.SystemTray
 import QtQuick
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Modules.WSOverview
 import qs.Modules.Network
@@ -17,8 +17,8 @@ Item {
 	readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null
 	required property PopoutState popouts
 
-	implicitHeight: (currentPopout?.implicitHeight ?? 0) + Appearance.padding.small * 2
-	implicitWidth: (currentPopout?.implicitWidth ?? 0) + Appearance.padding.small * 2
+	implicitHeight: (currentPopout?.implicitHeight ?? 0) + Tokens.padding.small * 2
+	implicitWidth: (currentPopout?.implicitWidth ?? 0) + Tokens.padding.small * 2
 
 	Item {
 		id: content
@@ -124,7 +124,6 @@ Item {
 
 				SequentialAnimation {
 					Anim {
-						duration: MaterialEasing.expressiveEffectsTime
 						properties: "opacity,scale"
 					}
 

Modules/Dashboard/Content.qml

@@ -4,7 +4,7 @@ import Quickshell
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
 import qs.Components
 
 Item {
@@ -20,14 +20,10 @@ Item {
 
 	Behavior on implicitHeight {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
-			easing.bezierCurve: MaterialEasing.expressiveEffects
 		}
 	}
 	Behavior on implicitWidth {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
-			easing.bezierCurve: MaterialEasing.expressiveEffects
 		}
 	}
 
@@ -36,11 +32,11 @@ Item {
 
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.smaller
+		anchors.margins: Tokens.padding.smaller
 		anchors.right: parent.right
 		anchors.top: parent.top
 		color: "transparent"
-		radius: Appearance.rounding.normal - anchors.margins
+		radius: Tokens.rounding.normal - anchors.margins
 
 		Item {
 			id: view

Modules/Dashboard/Dash.qml

@@ -4,19 +4,20 @@ import QtQuick.Layouts
 import qs.Helpers
 import qs.Components
 import qs.Modules
-import qs.Config
+import ZShell.Config
 import qs.Modules.Dashboard.Dash
+import qs.Services
 
 GridLayout {
 	id: root
 
 	required property PersistentProperties dashState
 	readonly property bool dashboardVisible: visibilities.dashboard
-	property int radius: Appearance.rounding.smallest
+	property int radius: Tokens.rounding.smallest
 	required property PersistentProperties visibilities
 
-	columnSpacing: Appearance.spacing.smaller
-	rowSpacing: Appearance.spacing.smaller
+	columnSpacing: Tokens.spacing.smaller
+	rowSpacing: Tokens.spacing.smaller
 
 	ParallelAnimation {
 		id: openAnim
@@ -117,6 +118,6 @@ GridLayout {
 	}
 
 	component Rect: CustomRect {
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
 	}
 }

Modules/Dashboard/Dash/Calendar.qml

@@ -5,7 +5,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomMouseArea {
 	id: root
@@ -120,18 +121,18 @@ CustomMouseArea {
 		id: inner
 
 		anchors.fill: parent
-		anchors.margins: Appearance.padding.large
-		spacing: Appearance.spacing.extraSmall
+		anchors.margins: Tokens.padding.large
+		spacing: Tokens.spacing.extraSmall
 
 		RowLayout {
 			id: monthNavigationRow
 
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.extraSmall
+			spacing: Tokens.spacing.extraSmall
 
 			IconButton {
 				icon: "chevron_left"
-				padding: Appearance.padding.small
+				padding: Tokens.padding.small
 				type: IconButton.Text
 
 				onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1)
@@ -140,16 +141,16 @@ CustomMouseArea {
 			Item {
 				Layout.fillHeight: true
 				Layout.fillWidth: true
-				implicitHeight: monthYearDisplay1.implicitHeight + Appearance.padding.extraSmall * 2
-				implicitWidth: monthYearDisplay1.implicitWidth + Appearance.padding.large * 2
+				implicitHeight: monthYearDisplay1.implicitHeight + Tokens.padding.extraSmall * 2
+				implicitWidth: monthYearDisplay1.implicitWidth + Tokens.padding.large * 2
 
 				StateLayer {
-					color: DynamicColors.palette.m3primary
+					color: Colors.palette.m3primary
 					enabled: {
 						const now = new Date();
 						return root.realCurrMonth !== now.getMonth() || root.realCurrYear !== now.getFullYear();
 					}
-					radius: pressed ? Appearance.rounding.small : Appearance.rounding.large
+					radius: pressed ? Tokens.rounding.small : Tokens.rounding.large
 
 					Behavior on radius {
 						Anim {
@@ -171,7 +172,7 @@ CustomMouseArea {
 
 						anchors.centerIn: parent
 						// qmllint enable missing-property
-						color: DynamicColors.palette.m3primary
+						color: Colors.palette.m3primary
 
 						// qmllint disable missing-property
 						text: grid1.item ? grid1.item.title : ""
@@ -187,7 +188,7 @@ CustomMouseArea {
 
 						anchors.centerIn: parent
 						// qmllint enable missing-property
-						color: DynamicColors.palette.m3primary
+						color: Colors.palette.m3primary
 
 						// qmllint disable missing-property
 						text: grid2.item ? grid2.item.title : ""
@@ -202,7 +203,7 @@ CustomMouseArea {
 
 			IconButton {
 				icon: "chevron_right"
-				padding: Appearance.padding.small
+				padding: Tokens.padding.small
 				type: IconButton.Text
 
 				onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1)
@@ -218,7 +219,7 @@ CustomMouseArea {
 			delegate: CustomText {
 				required property var model
 
-				color: (model.day === 0) ? DynamicColors.palette.m3tertiary : DynamicColors.palette.m3onSurface
+				color: (model.day === 0) ? Colors.palette.m3tertiary : Colors.palette.m3onSurface
 				horizontalAlignment: Text.AlignHCenter
 				text: Qt.locale("en_US").standaloneDayName(model.day, Locale.ShortFormat)
 			}
@@ -258,7 +259,7 @@ CustomMouseArea {
 
 							required property var model
 
-							implicitHeight: text.implicitHeight + Appearance.padding.normal * 2
+							implicitHeight: text.implicitHeight + Tokens.padding.normal * 2
 							implicitWidth: implicitHeight
 
 							CustomText {
@@ -268,9 +269,9 @@ CustomMouseArea {
 								color: {
 									const dayOfWeek = dayItem.model.date.getDay();
 									if (dayOfWeek === 0)
-										return DynamicColors.palette.m3tertiary;
+										return Colors.palette.m3tertiary;
 
-									return DynamicColors.palette.m3onSurfaceVariant;
+									return Colors.palette.m3onSurfaceVariant;
 								}
 								horizontalAlignment: Text.AlignHCenter
 								opacity: dayItem.model.today || dayItem.model.month === internalGrid.month ? 1 : 0.4
@@ -286,14 +287,14 @@ CustomMouseArea {
 						readonly property Item todayItem: internalGrid.contentItem.children.find(c => c.model.today) ?? null
 
 						clip: true
-						color: DynamicColors.palette.m3primary
+						color: Colors.palette.m3primary
 						implicitHeight: width
-						implicitWidth: today ? (Math.max(today.implicitWidth, today.implicitHeight) - Appearance.padding.extraSmall) : 0
+						implicitWidth: today ? (Math.max(today.implicitWidth, today.implicitHeight) - Tokens.padding.extraSmall) : 0
 						opacity: todayItem ? 1 : 0
-						radius: Appearance.rounding.full
+						radius: Tokens.rounding.full
 						scale: todayItem ? 1 : 0.7
 						x: today ? today.x + (today.width - implicitWidth) / 2 : 0
-						y: today ? today.y + Appearance.padding.extraSmall / 2 : 0
+						y: today ? today.y + Tokens.padding.extraSmall / 2 : 0
 
 						Behavior on opacity {
 							Anim {
@@ -320,11 +321,11 @@ CustomMouseArea {
 						}
 
 						Coloriser {
-							colorizationColor: DynamicColors.palette.m3onPrimary
+							colorizationColor: Colors.palette.m3onPrimary
 							implicitHeight: internalGrid.height
 							implicitWidth: internalGrid.width
 							source: internalGrid
-							sourceColor: DynamicColors.palette.m3onSurface
+							sourceColor: Colors.palette.m3onSurface
 							x: -todayIndicator.x
 							y: -todayIndicator.y
 						}

Modules/Dashboard/Dash/DateTime.qml

@@ -3,8 +3,9 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
+import qs.Services
 
 Item {
 	id: root
@@ -22,7 +23,7 @@ Item {
 		CustomText {
 			Layout.alignment: Qt.AlignHCenter
 			Layout.bottomMargin: -(font.pointSize * 0.4)
-			color: DynamicColors.palette.m3secondary
+			color: Colors.palette.m3secondary
 			font.family: "Rubik"
 			font.pointSize: 18
 			font.weight: 600
@@ -31,7 +32,7 @@ Item {
 
 		CustomText {
 			Layout.alignment: Qt.AlignHCenter
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			font.family: "Rubik"
 			font.pointSize: 18 * 0.9
 			text: "•••"
@@ -40,7 +41,7 @@ Item {
 		CustomText {
 			Layout.alignment: Qt.AlignHCenter
 			Layout.topMargin: -(font.pointSize * 0.4)
-			color: DynamicColors.palette.m3secondary
+			color: Colors.palette.m3secondary
 			font.family: "Rubik"
 			font.pointSize: 18
 			font.weight: 600

Modules/Dashboard/Dash/Media.qml

@@ -6,10 +6,11 @@ import QtQuick.Layouts
 import QtQuick.Shapes
 import QtQuick.Effects
 import ZShell.Services
+import ZShell.Config
 import qs.Daemons
 import qs.Components
-import qs.Config
 import qs.Helpers
+import qs.Services
 
 Item {
 	id: root
@@ -18,7 +19,7 @@ Item {
 		const active = Players.active;
 		return active?.length ? (active.position % active.length) / active.length : 0;
 	}
-	property int rowHeight: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
+	property int rowHeight: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small
 
 	anchors.left: parent.left
 	anchors.right: parent.right
@@ -26,7 +27,7 @@ Item {
 
 	Behavior on playerProgress {
 		Anim {
-			duration: Appearance.anim.durations.large
+			duration: Tokens.anim.durations.large
 		}
 	}
 
@@ -47,7 +48,7 @@ Item {
 		id: visualizer
 
 		readonly property int bars: Config.services.visualizerBars
-		property color color: DynamicColors.palette.m3tertiary
+		property color color: Colors.palette.m3tertiary
 		property color fillColor: Qt.alpha(color, 0.25)
 
 		anchors.fill: layout
@@ -117,7 +118,7 @@ Item {
 	CustomRect {
 		anchors.fill: visualizer
 
-		color: Qt.alpha(DynamicColors.palette.m3shadow, 0.2)
+		color: Qt.alpha(Colors.palette.m3shadow, 0.2)
 		layer.enabled: true
 		layer.effect: MultiEffect {
 			maskEnabled: true
@@ -129,9 +130,9 @@ Item {
 		preferredRendererType: Shape.CurveRenderer
 
 		ShapePath {
-			capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+			capStyle: Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
 			fillColor: "transparent"
-			strokeColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+			strokeColor: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
 			strokeWidth: Config.dashboard.sizes.mediaProgressThickness
 
 			Behavior on strokeColor {
@@ -142,17 +143,17 @@ Item {
 			PathAngleArc {
 				centerX: cover.x + cover.width / 2
 				centerY: cover.y + cover.height / 2
-				radiusX: (cover.width + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
-				radiusY: (cover.height + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
+				radiusX: (cover.width + Config.dashboard.sizes.mediaProgressThickness) / 2 + Tokens.spacing.small
+				radiusY: (cover.height + Config.dashboard.sizes.mediaProgressThickness) / 2 + Tokens.spacing.small
 				startAngle: -90 - Config.dashboard.sizes.mediaProgressSweep / 2
 				sweepAngle: Config.dashboard.sizes.mediaProgressSweep
 			}
 		}
 
 		ShapePath {
-			capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+			capStyle: Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
 			fillColor: "transparent"
-			strokeColor: DynamicColors.palette.m3primary
+			strokeColor: Colors.palette.m3primary
 			strokeWidth: Config.dashboard.sizes.mediaProgressThickness
 
 			Behavior on strokeColor {
@@ -163,8 +164,8 @@ Item {
 			PathAngleArc {
 				centerX: cover.x + cover.width / 2
 				centerY: cover.y + cover.height / 2
-				radiusX: (cover.width + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
-				radiusY: (cover.height + Config.dashboard.sizes.mediaProgressThickness) / 2 + Appearance.spacing.small
+				radiusX: (cover.width + Config.dashboard.sizes.mediaProgressThickness) / 2 + Tokens.spacing.small
+				radiusY: (cover.height + Config.dashboard.sizes.mediaProgressThickness) / 2 + Tokens.spacing.small
 				startAngle: -90 - Config.dashboard.sizes.mediaProgressSweep / 2
 				sweepAngle: Config.dashboard.sizes.mediaProgressSweep * root.playerProgress
 			}
@@ -182,17 +183,17 @@ Item {
 			id: cover
 
 			Layout.alignment: Qt.AlignLeft
-			Layout.bottomMargin: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
-			Layout.leftMargin: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
+			Layout.bottomMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small
+			Layout.leftMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small
 			Layout.preferredHeight: Config.dashboard.sizes.mediaCoverArtSize
 			Layout.preferredWidth: Config.dashboard.sizes.mediaCoverArtSize
-			Layout.topMargin: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
-			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			Layout.topMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small
+			color: Colors.tPalette.m3surfaceContainerHigh
 			radius: Infinity
 
 			MaterialIcon {
 				anchors.centerIn: parent
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				font.pointSize: (parent.width * 0.4) || 1
 				grade: 200
 				text: "art_track"
@@ -219,12 +220,12 @@ Item {
 
 				anchors.horizontalCenter: parent.horizontalCenter
 				anchors.top: parent.top
-				color: DynamicColors.palette.m3primary
-				font.pointSize: Appearance.font.size.normal
+				color: Colors.palette.m3primary
+				font.pointSize: Tokens.font.size.normal
 				horizontalAlignment: Text.AlignHCenter
 				pauseMs: 4000
 				text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
-				width: parent.width - Appearance.padding.large * 4
+				width: parent.width - Tokens.padding.large * 4
 			}
 
 			MarqueeText {
@@ -232,13 +233,13 @@ Item {
 
 				anchors.horizontalCenter: parent.horizontalCenter
 				anchors.top: title.bottom
-				anchors.topMargin: Appearance.spacing.small
-				color: DynamicColors.palette.m3outline
-				font.pointSize: Appearance.font.size.small
+				anchors.topMargin: Tokens.spacing.small
+				color: Colors.palette.m3outline
+				font.pointSize: Tokens.font.size.small
 				horizontalAlignment: Text.AlignHCenter
 				pauseMs: 4000
 				text: (Players.active?.trackAlbum ?? qsTr("No media")) || qsTr("Unknown album")
-				width: parent.width - Appearance.padding.large * 4
+				width: parent.width - Tokens.padding.large * 4
 			}
 
 			MarqueeText {
@@ -246,12 +247,12 @@ Item {
 
 				anchors.horizontalCenter: parent.horizontalCenter
 				anchors.top: album.bottom
-				anchors.topMargin: Appearance.spacing.small
-				color: DynamicColors.palette.m3secondary
+				anchors.topMargin: Tokens.spacing.small
+				color: Colors.palette.m3secondary
 				horizontalAlignment: Text.AlignHCenter
 				pauseMs: 4000
 				text: (Players.active?.trackArtist ?? qsTr("No media")) || qsTr("Unknown artist")
-				width: parent.width - Appearance.padding.large * 4
+				width: parent.width - Tokens.padding.large * 4
 			}
 
 			RowLayout {
@@ -259,8 +260,8 @@ Item {
 
 				anchors.horizontalCenter: parent.horizontalCenter
 				anchors.top: artist.bottom
-				anchors.topMargin: Appearance.spacing.smaller
-				spacing: Appearance.spacing.small
+				anchors.topMargin: Tokens.spacing.smaller
+				spacing: Tokens.spacing.small
 
 				Control {
 					function onClicked(): void {
@@ -303,22 +304,22 @@ Item {
 		function onClicked(): void {
 		}
 
-		Layout.preferredWidth: implicitWidth + (controlState.pressed ? Appearance.padding.normal * 2 : 0)
-		color: canUse ? DynamicColors.palette[`m3${set_color.toLowerCase()}`] : DynamicColors.palette[`m3${set_color.toLowerCase()}Container`]
+		Layout.preferredWidth: implicitWidth + (controlState.pressed ? Tokens.padding.normal * 2 : 0)
+		color: canUse ? Colors.palette[`m3${set_color.toLowerCase()}`] : Colors.palette[`m3${set_color.toLowerCase()}Container`]
 		implicitHeight: implicitWidth
-		implicitWidth: Math.max(icon.implicitHeight, icon.implicitHeight) + Appearance.padding.small
-		radius: Appearance.rounding.full
+		implicitWidth: Math.max(icon.implicitHeight, icon.implicitHeight) + Tokens.padding.small
+		radius: Tokens.rounding.full
 
 		Behavior on Layout.preferredWidth {
 			Anim {
-				duration: Appearance.anim.durations.expressiveFastSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+				duration: Tokens.anim.durations.expressiveFastSpatial
+				easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
 			}
 		}
 		Behavior on radius {
 			Anim {
-				duration: Appearance.anim.durations.expressiveFastSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+				duration: Tokens.anim.durations.expressiveFastSpatial
+				easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
 			}
 		}
 
@@ -332,13 +333,13 @@ Item {
 		StateLayer {
 			id: controlState
 
-			color: control.canUse ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
+			color: control.canUse ? Colors.palette[`m3on${control.set_color}`] : Colors.palette[`m3on${control.set_color}Container`]
 			enabled: control.canUse
 
 			onClicked: {
 				control.onClicked();
 			}
-			// radius: Appearance.rounding.full
+			// radius: Tokens.rounding.full
 		}
 
 		MaterialIcon {
@@ -347,9 +348,9 @@ Item {
 			anchors.centerIn: parent
 			anchors.verticalCenterOffset: font.pointSize * 0.05
 			animate: true
-			color: control.canUse ? DynamicColors.palette[`m3on${control.set_color}`] : DynamicColors.palette[`m3on${control.set_color}Container`]
+			color: control.canUse ? Colors.palette[`m3on${control.set_color}`] : Colors.palette[`m3on${control.set_color}Container`]
 			fill: control.canUse ? 1 : 0
-			font.pointSize: Appearance.font.size.large
+			font.pointSize: Tokens.font.size.large
 			text: control.icon
 		}
 	}

Modules/Dashboard/Dash/Resources.qml

@@ -1,9 +1,9 @@
 import QtQuick
 import QtQuick.Layouts
 import ZShell.Services
+import ZShell.Config
 import qs.Components
-import qs.Helpers
-import qs.Config
+import qs.Services
 
 Item {
 	id: root
@@ -33,36 +33,36 @@ Item {
 
 		anchors.bottom: parent.bottom
 		anchors.horizontalCenter: parent.horizontalCenter
-		anchors.margins: Appearance.padding.large
+		anchors.margins: Tokens.padding.large
 		anchors.top: parent.top
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		Resource {
-			fgColor: DynamicColors.palette.m3primary
+			fgColor: Colors.palette.m3primary
 			icon: "memory"
 			value: Cpu.percentage
 		}
 
 		Resource {
-			fgColor: DynamicColors.palette.m3secondary
+			fgColor: Colors.palette.m3secondary
 			icon: "memory_alt"
 			value: Memory.percentage
 		}
 
 		Resource {
-			fgColor: DynamicColors.palette.m3tertiary
+			fgColor: Colors.palette.m3tertiary
 			icon: "gamepad"
 			value: Gpu.percentage
 		}
 
 		Resource {
-			fgColor: DynamicColors.palette.m3primary
+			fgColor: Colors.palette.m3primary
 			icon: "host"
 			value: Gpu.memoryUsed / Gpu.memoryTotal
 		}
 
 		Resource {
-			fgColor: DynamicColors.palette.m3secondary
+			fgColor: Colors.palette.m3secondary
 			icon: "hard_disk"
 			value: Storage.percentage
 		}

Modules/Dashboard/Dash/User.qml

@@ -1,10 +1,10 @@
-import qs.Components
-import qs.Config
-import qs.Paths
-import qs.Helpers
-import qs.Modules
 import Quickshell
 import QtQuick
+import ZShell.Config
+import qs.Services
+import qs.Components
+import qs.Paths
+import qs.Helpers
 
 Row {
 	id: root
@@ -15,10 +15,10 @@ Row {
 	spacing: 12
 
 	CustomClippingRect {
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+		color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
 		implicitHeight: info.implicitHeight
 		implicitWidth: info.implicitHeight
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.smallest
 
 		MaterialIcon {
 			anchors.centerIn: parent
@@ -53,7 +53,7 @@ Row {
 
 				anchors.left: parent.left
 				anchors.leftMargin: (Config.dashboard.sizes.infoIconSize - implicitWidth) / 2
-				color: DynamicColors.palette.m3primary
+				color: Colors.palette.m3primary
 				implicitSize: Math.floor(13 * 1.34)
 				source: SystemInfo.osLogo
 			}
@@ -72,7 +72,7 @@ Row {
 		}
 
 		InfoLine {
-			colour: DynamicColors.palette.m3secondary
+			colour: Colors.palette.m3secondary
 			icon: "select_window_2"
 			text: SystemInfo.wm
 		}
@@ -80,7 +80,7 @@ Row {
 		InfoLine {
 			id: uptime
 
-			colour: DynamicColors.palette.m3tertiary
+			colour: Colors.palette.m3tertiary
 			icon: "timer"
 			text: qsTr("%1").arg(SystemInfo.uptime)
 		}

Modules/Dashboard/Dash/Weather.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import qs.Helpers
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -17,7 +18,7 @@ Item {
 		anchors.left: parent.left
 		anchors.verticalCenter: parent.verticalCenter
 		animate: true
-		color: DynamicColors.palette.m3secondary
+		color: Colors.palette.m3secondary
 		font.pointSize: 54
 		text: Weather.icon
 	}
@@ -26,15 +27,15 @@ Item {
 		id: info
 
 		anchors.left: icon.right
-		anchors.leftMargin: Appearance.spacing.large
+		anchors.leftMargin: Tokens.spacing.large
 		anchors.verticalCenter: parent.verticalCenter
 		spacing: 8
 
 		CustomText {
 			anchors.horizontalCenter: parent.horizontalCenter
 			animate: true
-			color: DynamicColors.palette.m3primary
-			font.pointSize: Appearance.font.size.extraLarge
+			color: Colors.palette.m3primary
+			font.pointSize: Tokens.font.size.extraLarge
 			font.weight: 500
 			text: Weather.temp
 		}

Modules/Dashboard/Tabs.qml

@@ -1,13 +1,14 @@
 pragma ComponentBehavior: Bound
 
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Modules
 import Quickshell
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Controls
+import qs.Services
 
 Item {
 	id: root
@@ -81,9 +82,9 @@ Item {
 			anchors.left: parent.left
 			anchors.right: parent.right
 			anchors.top: parent.top
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			implicitHeight: parent.implicitHeight * 2
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 	}
 
@@ -93,7 +94,7 @@ Item {
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: indicator.bottom
-		color: DynamicColors.palette.m3outlineVariant
+		color: Colors.palette.m3outlineVariant
 		implicitHeight: 1
 	}
 
@@ -158,8 +159,6 @@ Item {
 				}
 
 				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
 					from: 0
 					properties: "implicitWidth,implicitHeight"
 					target: ripple
@@ -167,8 +166,6 @@ Item {
 				}
 
 				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
 					easing.type: Easing.BezierSpline
 					property: "opacity"
 					target: ripple
@@ -184,13 +181,13 @@ Item {
 				anchors.verticalCenter: parent.verticalCenter
 				color: "transparent"
 				implicitHeight: parent.height + 8 * 2
-				radius: Appearance.rounding.smallest
+				radius: Tokens.rounding.smallest
 
 				CustomRect {
 					id: stateLayer
 
 					anchors.fill: parent
-					color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+					color: tab.current ? Colors.palette.m3primary : Colors.palette.m3onSurface
 					opacity: mouse.pressed ? 0.1 : tab.hovered ? 0.08 : 0
 
 					Behavior on opacity {
@@ -202,9 +199,9 @@ Item {
 				CustomRect {
 					id: ripple
 
-					color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+					color: tab.current ? Colors.palette.m3primary : Colors.palette.m3onSurface
 					opacity: 0
-					radius: Appearance.rounding.full
+					radius: Tokens.rounding.full
 
 					transform: Translate {
 						x: -ripple.width / 2
@@ -218,7 +215,7 @@ Item {
 
 				anchors.bottom: label.top
 				anchors.horizontalCenter: parent.horizontalCenter
-				color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+				color: tab.current ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
 				fill: tab.current ? 1 : 0
 				font.pointSize: 18
 				text: tab.iconName
@@ -234,7 +231,7 @@ Item {
 
 				anchors.bottom: parent.bottom
 				anchors.horizontalCenter: parent.horizontalCenter
-				color: tab.current ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+				color: tab.current ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
 				text: tab.text
 			}
 		}

Modules/Dashboard/Wrapper.qml

@@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root

Modules/DesktopIcons/BackgroundContextMenu.qml

@@ -4,9 +4,10 @@ import Quickshell
 import Quickshell.Widgets
 import Quickshell.Hyprland
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Paths
 import qs.Helpers
+import qs.Services
 
 Item {
     id: root
@@ -30,8 +31,8 @@ Item {
         x: root.menuX
         y: root.menuY
 
-        color: DynamicColors.tPalette.m3surface
-        radius: Appearance.rounding.normal
+        color: Colors.tPalette.m3surface
+        radius: Tokens.rounding.normal
 
         implicitWidth: menuLayout.implicitWidth + padding * 2
         implicitHeight: menuLayout.implicitHeight + padding * 2
@@ -47,13 +48,13 @@ Item {
             CustomRect {
                 Layout.preferredWidth: 200
                 radius: popupBackground.radius - popupBackground.padding
-                implicitHeight: openTerminalRow.implicitHeight + Appearance.padding.small * 2
+                implicitHeight: openTerminalRow.implicitHeight + Tokens.padding.small * 2
 
                 RowLayout {
                     id: openTerminalRow
                     spacing: 8
                     anchors.fill: parent
-                    anchors.leftMargin: Appearance.padding.smaller
+                    anchors.leftMargin: Tokens.padding.smaller
 
                     MaterialIcon { text: "terminal"; font.pointSize: 20 }
                     CustomText { text: "Open terminal"; Layout.fillWidth: true }
@@ -72,7 +73,7 @@ Item {
             CustomRect {
                 Layout.fillWidth: true
                 implicitHeight: 1
-                color: DynamicColors.palette.m3outlineVariant
+                color: Colors.palette.m3outlineVariant
                 Layout.topMargin: 4
                 Layout.bottomMargin: 4
             }
@@ -80,13 +81,13 @@ Item {
             CustomRect {
                 Layout.fillWidth: true
                 radius: popupBackground.radius - popupBackground.padding
-                implicitHeight: settingsRow.implicitHeight + Appearance.padding.small * 2
+                implicitHeight: settingsRow.implicitHeight + Tokens.padding.small * 2
 
                 RowLayout {
                     id: settingsRow
                     spacing: 8
                     anchors.fill: parent
-                    anchors.leftMargin: Appearance.padding.smaller
+                    anchors.leftMargin: Tokens.padding.smaller
 
                     MaterialIcon { text: "settings"; font.pointSize: 20 }
                     CustomText { text: "ZShell settings"; Layout.fillWidth: true }
@@ -106,7 +107,7 @@ Item {
             CustomRect {
                 Layout.fillWidth: true
                 implicitHeight: 1
-                color: DynamicColors.palette.m3outlineVariant
+                color: Colors.palette.m3outlineVariant
                 Layout.topMargin: 4
                 Layout.bottomMargin: 4
             }
@@ -114,13 +115,13 @@ Item {
             CustomRect {
                 Layout.fillWidth: true
                 radius: popupBackground.radius - popupBackground.padding
-                implicitHeight: logoutRow.implicitHeight + Appearance.padding.small * 2
+                implicitHeight: logoutRow.implicitHeight + Tokens.padding.small * 2
 
                 RowLayout {
                     id: logoutRow
                     spacing: 8
                     anchors.fill: parent
-                    anchors.leftMargin: Appearance.padding.smaller
+                    anchors.leftMargin: Tokens.padding.smaller
 
                     MaterialIcon { text: "logout"; font.pointSize: 20 }
                     CustomText { text: "Logout"; Layout.fillWidth: true }
@@ -139,7 +140,7 @@ Item {
             // CustomRect {
             //     Layout.fillWidth: true
             //     implicitHeight: 1
-            //     color: DynamicColors.palette.m3outlineVariant
+            //     color: Colors.palette.m3outlineVariant
             //     Layout.topMargin: 4
             //     Layout.bottomMargin: 4
             // }
@@ -147,13 +148,13 @@ Item {
             // CustomRect {
             //     Layout.fillWidth: true
             //     radius: popupBackground.radius - popupBackground.padding
-            //     implicitHeight: desktopIconsRow.implicitHeight + Appearance.padding.small * 2
+            //     implicitHeight: desktopIconsRow.implicitHeight + Tokens.padding.small * 2
             //
             //     RowLayout {
             //         id: desktopIconsRow
             //         spacing: 8
             //         anchors.fill: parent
-            //         anchors.leftMargin: Appearance.padding.smaller
+            //         anchors.leftMargin: Tokens.padding.smaller
             //
             //         MaterialIcon { text: Config.options.background.showDesktopIcons ? "visibility_off" : "visibility"; font.pointSize: 20 }
             //         CustomText { text: Config.options.background.showDesktopIcons ? "Hide icons" : "Show icons"; Layout.fillWidth: true }

Modules/DesktopIcons/DesktopIconContextMenu.qml

@@ -3,7 +3,8 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: contextMenu
@@ -42,13 +43,13 @@ Item {
 	CustomClippingRect {
 		id: popupBackground
 
-		readonly property real padding: Appearance.padding.small
+		readonly property real padding: Tokens.padding.small
 
-		color: DynamicColors.tPalette.m3surface
+		color: Colors.tPalette.m3surface
 		implicitHeight: menuLayout.implicitHeight + padding * 2
 		implicitWidth: menuLayout.implicitWidth + padding * 2
 		opacity: contextMenu.visible ? 1 : 0
-		radius: Appearance.rounding.normal
+		radius: Tokens.rounding.normal
 		x: contextMenu.menuX
 		y: contextMenu.menuY
 
@@ -65,14 +66,14 @@ Item {
 
 			CustomRect {
 				Layout.preferredWidth: 160
-				implicitHeight: openRow.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: openRow.implicitHeight + Tokens.padding.small * 2
 				radius: popupBackground.radius - popupBackground.padding
 
 				RowLayout {
 					id: openRow
 
 					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.smaller
+					anchors.leftMargin: Tokens.padding.smaller
 					spacing: 8
 
 					MaterialIcon {
@@ -108,14 +109,14 @@ Item {
 
 			CustomRect {
 				Layout.fillWidth: true
-				implicitHeight: openWithRow.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: openWithRow.implicitHeight + Tokens.padding.small * 2
 				radius: popupBackground.radius - popupBackground.padding
 
 				RowLayout {
 					id: openWithRow
 
 					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.smaller
+					anchors.leftMargin: Tokens.padding.smaller
 					spacing: 8
 
 					MaterialIcon {
@@ -147,20 +148,20 @@ Item {
 				Layout.bottomMargin: 4
 				Layout.fillWidth: true
 				Layout.topMargin: 4
-				color: DynamicColors.palette.m3outlineVariant
+				color: Colors.palette.m3outlineVariant
 				implicitHeight: 1
 			}
 
 			CustomRect {
 				Layout.fillWidth: true
-				implicitHeight: copyPathRow.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: copyPathRow.implicitHeight + Tokens.padding.small * 2
 				radius: popupBackground.radius - popupBackground.padding
 
 				RowLayout {
 					id: copyPathRow
 
 					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.smaller
+					anchors.leftMargin: Tokens.padding.smaller
 					spacing: 8
 
 					MaterialIcon {
@@ -186,7 +187,7 @@ Item {
 
 			CustomRect {
 				Layout.fillWidth: true
-				implicitHeight: renameRow.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: renameRow.implicitHeight + Tokens.padding.small * 2
 				radius: popupBackground.radius - popupBackground.padding
 				visible: contextMenu.targetPaths.length === 1
 
@@ -194,7 +195,7 @@ Item {
 					id: renameRow
 
 					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.smaller
+					anchors.leftMargin: Tokens.padding.smaller
 					spacing: 8
 
 					MaterialIcon {
@@ -222,31 +223,31 @@ Item {
 				Layout.bottomMargin: 4
 				Layout.fillWidth: true
 				Layout.topMargin: 4
-				color: DynamicColors.palette.m3outlineVariant
+				color: Colors.palette.m3outlineVariant
 				implicitHeight: 1
 			}
 
 			CustomRect {
 				Layout.fillWidth: true
-				implicitHeight: deleteRow.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: deleteRow.implicitHeight + Tokens.padding.small * 2
 				radius: popupBackground.radius - popupBackground.padding
 
 				RowLayout {
 					id: deleteRow
 
 					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.smaller
+					anchors.leftMargin: Tokens.padding.smaller
 					spacing: 8
 
 					MaterialIcon {
-						color: deleteButton.hovered ? DynamicColors.palette.m3onError : DynamicColors.palette.m3error
+						color: deleteButton.hovered ? Colors.palette.m3onError : Colors.palette.m3error
 						font.pointSize: 20
 						text: "delete"
 					}
 
 					CustomText {
 						Layout.fillWidth: true
-						color: deleteButton.hovered ? DynamicColors.palette.m3onError : DynamicColors.palette.m3error
+						color: deleteButton.hovered ? Colors.palette.m3onError : Colors.palette.m3error
 						text: "Move to trash"
 					}
 				}
@@ -255,7 +256,7 @@ Item {
 					id: deleteButton
 
 					anchors.fill: parent
-					color: DynamicColors.tPalette.m3error
+					color: Colors.tPalette.m3error
 
 					onClicked: {
 						let cmd = ["gio", "trash"].concat(contextMenu.targetPaths);

Modules/DesktopIcons/DesktopIconDelegate.qml

@@ -1,7 +1,7 @@
 import QtQuick
 import Quickshell
 import Quickshell.Widgets
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Helpers
 
@@ -205,7 +205,7 @@ Item {
 			anchors.margins: 4
 			color: "white"
 			opacity: root.iconsRoot.selectedIcons.includes(root.filePath) ? 0.2 : 0.0
-			radius: Appearance.rounding.smallest
+			radius: Tokens.rounding.smallest
 
 			Behavior on opacity {
 				Anim {
@@ -265,7 +265,7 @@ Item {
 				anchors.margins: 4
 				color: "white"
 				opacity: parent.containsMouse ? 0.1 : 0.0
-				radius: Appearance.rounding.smallest
+				radius: Tokens.rounding.smallest
 
 				Behavior on opacity {
 					Anim {

Modules/DesktopIcons/DesktopIcons.qml

@@ -4,7 +4,8 @@ import QtQuick
 import Quickshell
 import ZShell.Services
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 import qs.Components
 import qs.Paths
 
@@ -116,12 +117,12 @@ Item {
 			fadeIn.start();
 		}
 
-		border.color: DynamicColors.palette.m3primary
+		border.color: Colors.palette.m3primary
 		border.pixelAligned: true
 		border.width: 1
-		color: DynamicColors.tPalette.m3primary
+		color: Colors.tPalette.m3primary
 		opacity: 0
-		radius: Appearance.rounding.small
+		radius: Tokens.rounding.small
 		visible: false
 		z: 99
 

Modules/Dock/Content.qml

@@ -6,7 +6,7 @@ import QtQml.Models
 import qs.Modules.Dock.Parts
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
@@ -22,10 +22,10 @@ Item {
 	property string draggedAppId: ""
 	property var draggedModelData: null
 	property bool dropAnimating: false
-	readonly property int padding: Appearance.padding.small
+	readonly property int padding: Tokens.padding.small
 	required property var panels
 	property var pendingCommitIds: []
-	readonly property int rounding: Appearance.rounding.large
+	readonly property int rounding: Tokens.rounding.large
 	required property ShellScreen screen
 	required property PersistentProperties visibilities
 	property var visualIds: []
@@ -119,7 +119,7 @@ Item {
 		Anim {
 			id: settleX
 
-			duration: Appearance.anim.durations.normal
+			duration: Tokens.anim.durations.normal
 			property: "dragX"
 			target: root
 		}
@@ -127,7 +127,7 @@ Item {
 		Anim {
 			id: settleY
 
-			duration: Appearance.anim.durations.normal
+			duration: Tokens.anim.durations.normal
 			property: "dragY"
 			target: root
 		}
@@ -247,7 +247,7 @@ Item {
 		property bool enableAddAnimation: false
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
+		anchors.margins: Tokens.padding.small
 		anchors.top: parent.top
 		boundsBehavior: Flickable.StopAtBounds
 		height: Config.dock.height
@@ -255,19 +255,19 @@ Item {
 		interactive: !(root.dragActive || root.dropAnimating)
 		model: visualModel
 		orientation: ListView.Horizontal
-		spacing: Appearance.padding.smaller
+		spacing: Tokens.padding.smaller
 
 		add: Transition {
 			ParallelAnimation {
 				Anim {
-					duration: dockRow.enableAddAnimation ? Appearance.anim.durations.normal : 0
+					duration: dockRow.enableAddAnimation ? Tokens.anim.durations.normal : 0
 					from: 0
 					property: "opacity"
 					to: 1
 				}
 
 				Anim {
-					duration: dockRow.enableAddAnimation ? Appearance.anim.durations.normal : 0
+					duration: dockRow.enableAddAnimation ? Tokens.anim.durations.normal : 0
 					from: 0.5
 					property: "scale"
 					to: 1
@@ -276,13 +276,13 @@ Item {
 		}
 		displaced: Transition {
 			Anim {
-				duration: Appearance.anim.durations.small
+				duration: Tokens.anim.durations.small
 				properties: "x,y"
 			}
 		}
 		move: Transition {
 			Anim {
-				duration: Appearance.anim.durations.small
+				duration: Tokens.anim.durations.small
 				properties: "x,y"
 			}
 		}

Modules/Dock/Parts/DockAppButton.qml

@@ -4,7 +4,8 @@ import Quickshell
 import Quickshell.Widgets
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomRect {
 	id: root
@@ -22,7 +23,7 @@ CustomRect {
 
 	implicitHeight: Config.dock.height
 	implicitWidth: isSeparator ? 1 : implicitHeight
-	radius: Appearance.rounding.normal - Appearance.padding.small
+	radius: Tokens.rounding.normal - Tokens.padding.small
 
 	Loader {
 		active: !isSeparator
@@ -47,10 +48,10 @@ CustomRect {
 					delegate: Rectangle {
 						required property int index
 
-						color: appIsActive ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3primary
+						color: appIsActive ? Colors.palette.m3primary : Colors.tPalette.m3primary
 						implicitHeight: root.countDotHeight
 						implicitWidth: (appToplevel?.toplevels.length <= 3) ? root.countDotWidth : root.countDotHeight // Circles when too many
-						radius: Appearance.rounding.full
+						radius: Tokens.rounding.full
 					}
 				}
 			}

Modules/Dock/Parts/DockSeparator.qml

@@ -1,12 +1,13 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomRect {
-	Layout.bottomMargin: dockRow.padding + Appearance.rounding.normal
+	Layout.bottomMargin: dockRow.padding + Tokens.rounding.normal
 	Layout.fillHeight: true
-	Layout.topMargin: dockRow.padding + Appearance.rounding.normal
-	color: DynamicColors.palette.m3outlineVariant
+	Layout.topMargin: dockRow.padding + Tokens.rounding.normal
+	color: Colors.palette.m3outlineVariant
 	implicitWidth: 1
 }

Modules/Dock/Wrapper.qml

@@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
@@ -23,8 +23,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
 		}
 	}
 

Modules/Drawing/Content.qml

@@ -2,8 +2,9 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import ZShell.Components
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
 Item {
 	id: root
@@ -32,8 +33,8 @@ Item {
 		drawing.drawingState.penColor = Qt.hsva(huePicker.currentHue, saturationSlider.value, brightnessSlider.value, drawing.drawingState.penColor.a);
 	}
 
-	implicitHeight: column.height + Appearance.padding.larger * 2
-	implicitWidth: huePicker.implicitWidth + Appearance.padding.normal * 2
+	implicitHeight: column.height + Tokens.padding.larger * 2
+	implicitWidth: huePicker.implicitWidth + Tokens.padding.normal * 2
 
 	Component.onCompleted: syncFromPenColor()
 
@@ -96,7 +97,7 @@ Item {
 
 			anchors.left: parent.left
 			anchors.right: parent.right
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			Repeater {
 				model: root.colors1
@@ -112,7 +113,7 @@ Item {
 
 			anchors.left: parent.left
 			anchors.right: parent.right
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			Repeater {
 				model: root.colors2
@@ -140,14 +141,14 @@ Item {
 		ButtonRow {
 			anchors.left: parent.left
 			anchors.right: parent.right
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			IconTextButton {
 				fillWidth: true
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				icon: "close"
-				inactiveColor: DynamicColors.palette.m3error
-				inactiveOnColor: DynamicColors.palette.m3onError
+				inactiveColor: Colors.palette.m3error
+				inactiveOnColor: Colors.palette.m3onError
 				isRound: true
 				shapeMorph: true
 				text: "Exit"
@@ -157,10 +158,10 @@ Item {
 
 			IconTextButton {
 				fillWidth: true
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				icon: "ink_eraser"
-				inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
-				inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+				inactiveColor: Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
+				inactiveOnColor: Colors.palette.m3onSurfaceVariant
 				isRound: true
 				shapeMorph: true
 				text: "Clear"
@@ -171,7 +172,7 @@ Item {
 	}
 
 	IconButton {
-		anchors.margins: Appearance.padding.normal
+		anchors.margins: Tokens.padding.normal
 		anchors.right: parent.right
 		anchors.top: parent.top
 		checked: root.wrapper.pinned
@@ -192,12 +193,12 @@ Item {
 		required property ButtonRow row
 
 		fillWidth: false
-		font.pointSize: Appearance.font.size.normal
+		font.pointSize: Tokens.font.size.normal
 		icon: ""
 		implicitHeight: buttonSize
 		implicitWidth: buttonSize
 		inactiveColor: modelData
-		inactiveOnColor: DynamicColors.on(modelData)
+		inactiveOnColor: Colors.on(modelData)
 		isRound: true
 		shapeMorph: true
 		shapeMorphExpansion: pressed ? 12 : 0

Modules/Drawing/Wrapper.qml

@@ -4,7 +4,7 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Daemons
 
 Item {
@@ -48,14 +48,14 @@ Item {
 
 	Behavior on implicitWidth {
 		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			duration: Tokens.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 		}
 	}
 	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
 		}
 	}
 
@@ -78,7 +78,7 @@ Item {
 			}
 		}
 		sourceComponent: MaterialIcon {
-			font.pointSize: Appearance.font.size.larger
+			font.pointSize: Tokens.font.size.larger
 			text: "arrow_forward_ios"
 		}
 	}

Modules/HyprsunsetWidget.qml

@@ -1,17 +1,18 @@
 import QtQuick
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomRect {
 	id: root
 
 	property bool tempEnabled: Hyprsunset.enabled
 
-	color: root.tempEnabled ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	color: root.tempEnabled ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Tokens.padding.smallest * 2
 	implicitWidth: implicitHeight
-	radius: Appearance.rounding.full
+	radius: Tokens.rounding.full
 
 	StateLayer {
 		onClicked: {
@@ -23,7 +24,7 @@ CustomRect {
 	MaterialIcon {
 		anchors.centerIn: parent
 		animate: true
-		color: root.tempEnabled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		color: root.tempEnabled ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 		fill: root.tempEnabled ? 1 : 0
 		text: root.tempEnabled ? "lightbulb" : "light_off"
 

Modules/Launcher/AppList.qml

@@ -5,7 +5,8 @@ import QtQuick
 import qs.Modules.Launcher.Services
 import qs.Modules.Launcher.Items
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomListView {
 	id: root
@@ -19,7 +20,7 @@ CustomListView {
 	orientation: Qt.Vertical
 	preferredHighlightBegin: 0
 	preferredHighlightEnd: height
-	spacing: Appearance.spacing.small
+	spacing: Tokens.spacing.small
 	state: {
 		const text = search.text;
 		const prefix = Config.launcher.actionPrefix;
@@ -49,7 +50,7 @@ CustomListView {
 	}
 	addDisplaced: Transition {
 		Anim {
-			duration: Appearance.anim.durations.small
+			duration: Tokens.anim.durations.small
 			property: "y"
 		}
 
@@ -69,17 +70,17 @@ CustomListView {
 		}
 	}
 	highlight: CustomRect {
-		color: DynamicColors.palette.m3onSurface
+		color: Colors.palette.m3onSurface
 		implicitHeight: root.currentItem?.implicitHeight ?? 0
 		implicitWidth: root.width
 		opacity: 0.08
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.smallest
 		y: root.currentItem?.y ?? 0
 
 		Behavior on y {
 			Anim {
-				duration: Appearance.anim.durations.small
-				easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+				duration: Tokens.anim.durations.small
+				easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 			}
 		}
 	}
@@ -145,8 +146,8 @@ CustomListView {
 		SequentialAnimation {
 			ParallelAnimation {
 				Anim {
-					duration: Appearance.anim.durations.small
-					easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					duration: Tokens.anim.durations.small
+					easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 					from: 1
 					property: "opacity"
 					target: root
@@ -154,8 +155,8 @@ CustomListView {
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.small
-					easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					duration: Tokens.anim.durations.small
+					easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 					from: 1
 					property: "scale"
 					target: root
@@ -170,8 +171,8 @@ CustomListView {
 
 			ParallelAnimation {
 				Anim {
-					duration: Appearance.anim.durations.small
-					easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					duration: Tokens.anim.durations.small
+					easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 					from: 0
 					property: "opacity"
 					target: root
@@ -179,8 +180,8 @@ CustomListView {
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.small
-					easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					duration: Tokens.anim.durations.small
+					easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 					from: 0.9
 					property: "scale"
 					target: root

Modules/Launcher/Content.qml

@@ -5,15 +5,16 @@ import QtQuick
 import qs.Modules.Launcher.Services
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
 
 	required property real maxHeight
-	readonly property int padding: Appearance.padding.small
+	readonly property int padding: Tokens.padding.small
 	required property var panels
-	readonly property int rounding: Appearance.rounding.large
+	readonly property int rounding: Tokens.rounding.large
 	required property PersistentProperties visibilities
 
 	implicitHeight: search.height + listWrapper.height + padding * 2
@@ -48,9 +49,9 @@ Item {
 		anchors.left: parent.left
 		anchors.margins: root.padding
 		anchors.right: parent.right
-		bottomPadding: Appearance.padding.larger
+		bottomPadding: Tokens.padding.larger
 		placeholderText: qsTr("Type \"%1\" for commands").arg(Config.launcher.actionPrefix)
-		topPadding: Appearance.padding.larger
+		topPadding: Tokens.padding.larger
 
 		Component.onCompleted: forceActiveFocus()
 		Keys.onDownPressed: list.currentList?.decrementCurrentIndex()
@@ -77,7 +78,7 @@ Item {
 			const currentItem = list.currentList?.currentItem;
 			if (currentItem) {
 				if (list.showWallpapers) {
-					if (DynamicColors.scheme === "dynamic" && currentItem.modelData.path !== Wallpapers.actualCurrent)
+					if (Colors.scheme === "dynamic" && currentItem.modelData.path !== Wallpapers.actualCurrent)
 						Wallpapers.previewColourLock = true;
 					Wallpapers.setWallpaper(currentItem.modelData.path);
 					root.visibilities.launcher = false;

Modules/Launcher/ContentList.qml

@@ -6,7 +6,8 @@ import qs.Paths
 import qs.Modules
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -30,22 +31,22 @@ Item {
 		enabled: root.visibilities.launcher
 
 		Anim {
-			duration: Appearance.anim.durations.small
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+			duration: Tokens.anim.durations.small
+			easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 		}
 	}
 	Behavior on implicitWidth {
 		enabled: root.visibilities.launcher
 
 		Anim {
-			duration: Appearance.anim.durations.small
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+			duration: Tokens.anim.durations.small
+			easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 		}
 	}
 	Behavior on state {
 		SequentialAnimation {
 			Anim {
-				duration: Appearance.anim.durations.small
+				duration: Tokens.anim.durations.small
 				from: 1
 				property: "opacity"
 				target: root
@@ -56,7 +57,7 @@ Item {
 			}
 
 			Anim {
-				duration: Appearance.anim.durations.small
+				duration: Tokens.anim.durations.small
 				from: 0
 				property: "opacity"
 				target: root
@@ -124,9 +125,9 @@ Item {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.verticalCenter: parent.verticalCenter
 		opacity: root.currentList?.count === 0 ? 1 : 0
-		padding: Appearance.padding.large
+		padding: Tokens.padding.large
 		scale: root.currentList?.count === 0 ? 1 : 0.5
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		Behavior on opacity {
 			Anim {
@@ -139,8 +140,8 @@ Item {
 
 		MaterialIcon {
 			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.extraLarge
+			color: Colors.palette.m3onSurfaceVariant
+			font.pointSize: Tokens.font.size.extraLarge
 			text: root.state === "wallpapers" ? "wallpaper_slideshow" : "manage_search"
 		}
 
@@ -148,15 +149,15 @@ Item {
 			anchors.verticalCenter: parent.verticalCenter
 
 			CustomText {
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.larger
+				color: Colors.palette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.larger
 				font.weight: 500
 				text: root.state === "wallpapers" ? qsTr("No wallpapers found") : qsTr("No results")
 			}
 
 			CustomText {
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.normal
+				color: Colors.palette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.normal
 				text: root.state === "wallpapers" && Wallpapers.list.length === 0 ? qsTr("Try putting some wallpapers in %1").arg(Paths.shortenHome(Paths.wallsdir)) : qsTr("Try searching for something else")
 			}
 		}

Modules/Launcher/Items/ActionItem.qml

@@ -2,7 +2,8 @@ import QtQuick
 import qs.Modules.Launcher.Services
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -15,7 +16,7 @@ Item {
 	implicitHeight: Config.launcher.sizes.itemHeight
 
 	StateLayer {
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.smallest
 
 		onClicked: {
 			root.modelData?.onClicked(root.list);
@@ -24,21 +25,21 @@ Item {
 
 	Item {
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.larger
-		anchors.margins: Appearance.padding.smaller
-		anchors.rightMargin: Appearance.padding.larger
+		anchors.leftMargin: Tokens.padding.larger
+		anchors.margins: Tokens.padding.smaller
+		anchors.rightMargin: Tokens.padding.larger
 
 		MaterialIcon {
 			id: icon
 
 			anchors.verticalCenter: parent.verticalCenter
-			font.pointSize: Appearance.font.size.extraLarge
+			font.pointSize: Tokens.font.size.extraLarge
 			text: root.modelData?.icon ?? ""
 		}
 
 		Item {
 			anchors.left: icon.right
-			anchors.leftMargin: Appearance.spacing.normal
+			anchors.leftMargin: Tokens.spacing.normal
 			anchors.verticalCenter: icon.verticalCenter
 			implicitHeight: name.implicitHeight + desc.implicitHeight
 			implicitWidth: parent.width - icon.width
@@ -46,7 +47,7 @@ Item {
 			CustomText {
 				id: name
 
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				text: root.modelData?.name ?? ""
 			}
 
@@ -54,11 +55,11 @@ Item {
 				id: desc
 
 				anchors.top: name.bottom
-				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.modelData?.desc ?? ""
-				width: root.width - icon.width - Appearance.rounding.normal * 2
+				width: root.width - icon.width - Tokens.rounding.normal * 2
 			}
 		}
 	}

Modules/Launcher/Items/AppItem.qml

@@ -4,8 +4,9 @@ import QtQuick
 import qs.Modules.Launcher.Services
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Modules
+import qs.Services
 
 Item {
 	id: root
@@ -18,7 +19,7 @@ Item {
 	implicitHeight: Config.launcher.sizes.itemHeight
 
 	StateLayer {
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.smallest
 
 		onClicked: {
 			Apps.launch(root.modelData);
@@ -28,9 +29,9 @@ Item {
 
 	Item {
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.larger
-		anchors.margins: Appearance.padding.smaller
-		anchors.rightMargin: Appearance.padding.larger
+		anchors.leftMargin: Tokens.padding.larger
+		anchors.margins: Tokens.padding.smaller
+		anchors.rightMargin: Tokens.padding.larger
 
 		IconImage {
 			id: icon
@@ -42,7 +43,7 @@ Item {
 
 		Item {
 			anchors.left: icon.right
-			anchors.leftMargin: Appearance.spacing.normal
+			anchors.leftMargin: Tokens.spacing.normal
 			anchors.verticalCenter: icon.verticalCenter
 			implicitHeight: name.implicitHeight + comment.implicitHeight
 			implicitWidth: parent.width - icon.width
@@ -50,7 +51,7 @@ Item {
 			CustomText {
 				id: name
 
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				text: root.modelData?.name ?? ""
 			}
 
@@ -58,11 +59,11 @@ Item {
 				id: comment
 
 				anchors.top: name.bottom
-				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.modelData?.comment || root.modelData?.genericName || root.modelData?.name) ?? ""
-				width: root.width - icon.width - Appearance.rounding.normal * 2
+				width: root.width - icon.width - Tokens.rounding.normal * 2
 			}
 		}
 
@@ -75,7 +76,7 @@ Item {
 			asynchronous: true
 
 			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3primary
+				color: Colors.palette.m3primary
 				fill: 1
 				text: "favorite"
 			}

Modules/Launcher/Items/CalcItem.qml

@@ -5,7 +5,8 @@ import QtQuick.Layouts
 import qs.Components
 import qs.Modules
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -23,7 +24,7 @@ Item {
 	implicitHeight: Config.launcher.sizes.itemHeight
 
 	StateLayer {
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.smallest
 
 		onClicked: {
 			root.onClicked();
@@ -32,14 +33,14 @@ Item {
 
 	RowLayout {
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.larger
+		anchors.margins: Tokens.padding.larger
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		MaterialIcon {
 			Layout.alignment: Qt.AlignVCenter
-			font.pointSize: Appearance.font.size.extraLarge
+			font.pointSize: Tokens.font.size.extraLarge
 			text: "function"
 		}
 
@@ -50,10 +51,10 @@ Item {
 			Layout.fillWidth: true
 			color: {
 				if (text.includes("error: ") || text.includes("warning: "))
-					return DynamicColors.palette.m3error;
+					return Colors.palette.m3error;
 				if (!root.math)
-					return DynamicColors.palette.m3onSurfaceVariant;
-				return DynamicColors.palette.m3onSurface;
+					return Colors.palette.m3onSurfaceVariant;
+				return Colors.palette.m3onSurface;
 			}
 			elide: Text.ElideLeft
 			text: root.math.length > 0 ? Qalculator.eval(root.math) : qsTr("Type an expression to calculate")
@@ -62,21 +63,21 @@ Item {
 		CustomRect {
 			Layout.alignment: Qt.AlignVCenter
 			clip: true
-			color: DynamicColors.palette.m3tertiary
-			implicitHeight: Math.max(label.implicitHeight, icon.implicitHeight) + Appearance.padding.small * 2
-			implicitWidth: (stateLayer.containsMouse ? label.implicitWidth + label.anchors.rightMargin : 0) + icon.implicitWidth + Appearance.padding.normal * 2
-			radius: Appearance.rounding.normal
+			color: Colors.palette.m3tertiary
+			implicitHeight: Math.max(label.implicitHeight, icon.implicitHeight) + Tokens.padding.small * 2
+			implicitWidth: (stateLayer.containsMouse ? label.implicitWidth + label.anchors.rightMargin : 0) + icon.implicitWidth + Tokens.padding.normal * 2
+			radius: Tokens.rounding.normal
 
 			Behavior on implicitWidth {
 				Anim {
-					easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 				}
 			}
 
 			StateLayer {
 				id: stateLayer
 
-				color: DynamicColors.palette.m3onTertiary
+				color: Colors.palette.m3onTertiary
 
 				onClicked: {
 					Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.terminal, "fish", "-C", `exec qalc -i '${root.math}'`]);
@@ -88,10 +89,10 @@ Item {
 				id: label
 
 				anchors.right: icon.left
-				anchors.rightMargin: Appearance.spacing.small
+				anchors.rightMargin: Tokens.spacing.small
 				anchors.verticalCenter: parent.verticalCenter
-				color: DynamicColors.palette.m3onTertiary
-				font.pointSize: Appearance.font.size.normal
+				color: Colors.palette.m3onTertiary
+				font.pointSize: Tokens.font.size.normal
 				opacity: stateLayer.containsMouse ? 1 : 0
 				text: qsTr("Open in calculator")
 
@@ -105,10 +106,10 @@ Item {
 				id: icon
 
 				anchors.right: parent.right
-				anchors.rightMargin: Appearance.padding.normal
+				anchors.rightMargin: Tokens.padding.normal
 				anchors.verticalCenter: parent.verticalCenter
-				color: DynamicColors.palette.m3onTertiary
-				font.pointSize: Appearance.font.size.large
+				color: Colors.palette.m3onTertiary
+				font.pointSize: Tokens.font.size.large
 				text: "open_in_new"
 			}
 		}

Modules/Launcher/Items/VariantItem.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import qs.Components
 import qs.Modules.Launcher.Services
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -14,7 +15,7 @@ Item {
 	implicitHeight: Config.launcher.sizes.itemHeight
 
 	StateLayer {
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.smallest
 
 		onClicked: {
 			root.modelData?.onClicked(root.list);
@@ -23,36 +24,36 @@ Item {
 
 	Item {
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.larger
-		anchors.margins: Appearance.padding.smaller
-		anchors.rightMargin: Appearance.padding.larger
+		anchors.leftMargin: Tokens.padding.larger
+		anchors.margins: Tokens.padding.smaller
+		anchors.rightMargin: Tokens.padding.larger
 
 		MaterialIcon {
 			id: icon
 
 			anchors.verticalCenter: parent.verticalCenter
-			font.pointSize: Appearance.font.size.extraLarge
+			font.pointSize: Tokens.font.size.extraLarge
 			text: root.modelData?.icon ?? ""
 		}
 
 		Column {
 			anchors.left: icon.right
-			anchors.leftMargin: Appearance.spacing.larger
+			anchors.leftMargin: Tokens.spacing.larger
 			anchors.verticalCenter: icon.verticalCenter
 			spacing: 0
-			width: parent.width - icon.width - anchors.leftMargin - (current.active ? current.width + Appearance.spacing.normal : 0)
+			width: parent.width - icon.width - anchors.leftMargin - (current.active ? current.width + Tokens.spacing.normal : 0)
 
 			CustomText {
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				text: root.modelData?.name ?? ""
 			}
 
 			CustomText {
 				anchors.left: parent.left
 				anchors.right: parent.right
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				text: root.modelData?.description ?? ""
 			}
 		}
@@ -65,8 +66,8 @@ Item {
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
+				color: Colors.palette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.large
 				text: "check"
 			}
 		}

Modules/Launcher/Items/WallpaperItem.qml

@@ -3,8 +3,9 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Modules
+import qs.Services
 
 Item {
 	id: root
@@ -12,8 +13,8 @@ Item {
 	required property FileSystemEntry modelData
 	required property PersistentProperties visibilities
 
-	implicitHeight: image.height + label.height + Appearance.spacing.small / 2 + Appearance.padding.large + Appearance.padding.normal
-	implicitWidth: image.width + Appearance.padding.larger * 2
+	implicitHeight: image.height + label.height + Tokens.spacing.small / 2 + Tokens.padding.large + Tokens.padding.normal
+	implicitWidth: image.width + Tokens.padding.larger * 2
 	opacity: 0
 	scale: 0.5
 	z: PathView.z ?? 0
@@ -33,7 +34,7 @@ Item {
 	}
 
 	StateLayer {
-		radius: Appearance.rounding.normal
+		radius: Tokens.rounding.normal
 
 		onClicked: {
 			Wallpapers.setWallpaper(root.modelData.path);
@@ -57,16 +58,16 @@ Item {
 		id: image
 
 		anchors.horizontalCenter: parent.horizontalCenter
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: implicitWidth / 16 * 9
 		implicitWidth: Config.launcher.sizes.wallpaperWidth
-		radius: Appearance.rounding.small
-		y: Appearance.padding.large
+		radius: Tokens.rounding.small
+		y: Tokens.padding.large
 
 		MaterialIcon {
 			anchors.centerIn: parent
-			color: DynamicColors.tPalette.m3outline
-			font.pointSize: Appearance.font.size.extraLarge * 2
+			color: Colors.tPalette.m3outline
+			font.pointSize: Tokens.font.size.extraLarge * 2
 			font.weight: 600
 			text: "image"
 		}
@@ -84,12 +85,12 @@ Item {
 
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: image.bottom
-		anchors.topMargin: Appearance.spacing.small / 2
+		anchors.topMargin: Tokens.spacing.small / 2
 		elide: Text.ElideRight
-		font.pointSize: Appearance.font.size.normal
+		font.pointSize: Tokens.font.size.normal
 		horizontalAlignment: Text.AlignHCenter
 		renderType: Text.QtRendering
 		text: root.modelData.relativePath
-		width: image.width - Appearance.padding.normal * 2
+		width: image.width - Tokens.padding.normal * 2
 	}
 }

Modules/Launcher/Services/Actions.qml

@@ -2,9 +2,10 @@ pragma Singleton
 
 import qs.Modules.Launcher
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import Quickshell
 import QtQuick
+import qs.Services
 
 Searcher {
 	id: root
@@ -19,7 +20,7 @@ Searcher {
 	Variants {
 		id: variants
 
-		model: Config.launcher.actions.filter(a => (a.enabled ?? true) && (Config.launcher.enableDangerousActions || !(a.dangerous ?? false)))
+		model: Config.launcher.actions.values.filter(a => (a.enabled ?? true) && (Config.launcher.enableDangerousActions || !(a.dangerous ?? false)))
 
 		Action {
 		}
@@ -42,7 +43,7 @@ Searcher {
 				list.search.text = `${Config.launcher.actionPrefix}${command[1]} `;
 			} else if (command[0] === "setMode" && command.length > 1) {
 				list.visibilities.launcher = false;
-				DynamicColors.setMode(command[1]);
+				Colors.setMode(command[1]);
 			} else {
 				list.visibilities.launcher = false;
 				Quickshell.execDetached(command);

Modules/Launcher/Services/Apps.qml

@@ -2,7 +2,7 @@ pragma Singleton
 
 import ZShell
 import Quickshell
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Paths
 

Modules/Launcher/Services/SchemeVariants.qml

@@ -3,7 +3,7 @@ pragma Singleton
 import Quickshell
 import QtQuick
 import qs.Modules.Launcher
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 
 Searcher {

Modules/Launcher/WallpaperList.qml

@@ -4,14 +4,14 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Modules.Launcher.Items
 
 PathView {
 	id: root
 
 	required property var content
-	readonly property int itemWidth: Config.launcher.sizes.wallpaperWidth * 0.9 + Appearance.padding.larger * 2
+	readonly property int itemWidth: Config.launcher.sizes.wallpaperWidth * 0.9 + Tokens.padding.larger * 2
 	readonly property int numItems: {
 		const screen = QsWindow.window?.screen;
 		if (!screen)

Modules/Launcher/Wrapper.qml

@@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules.Launcher.Services
 
 Item {
@@ -11,7 +11,7 @@ Item {
 
 	property int contentHeight
 	readonly property real maxHeight: {
-		let max = screen.height - Appearance.spacing.large * 2;
+		let max = screen.height - Tokens.spacing.large * 2;
 		if (visibilities.resources && panels.resourcesWrapper.x + panels.resourcesWrapper.width > root.x)
 			max -= panels.resources.nonAnimHeight;
 		if (panels.popouts.hasCurrent)
@@ -33,8 +33,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
 		}
 	}
 

Modules/Lock/Center.qml

@@ -5,8 +5,9 @@ import QtQuick.Layouts
 import qs.Paths
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Modules
+import qs.Services
 
 ColumnLayout {
 	id: root
@@ -18,61 +19,61 @@ ColumnLayout {
 	Layout.fillHeight: true
 	Layout.fillWidth: false
 	Layout.preferredWidth: centerWidth
-	spacing: Appearance.spacing.large * 2
+	spacing: Tokens.spacing.large * 2
 
 	RowLayout {
 		Layout.alignment: Qt.AlignHCenter
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		CustomText {
 			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3secondary
+			color: Colors.palette.m3secondary
 			font.bold: true
 			font.family: Appearance.font.family.clock
-			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
 			text: Time.hourStr
 		}
 
 		CustomText {
 			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			font.bold: true
 			font.family: Appearance.font.family.clock
-			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
 			text: ":"
 		}
 
 		CustomText {
 			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3secondary
+			color: Colors.palette.m3secondary
 			font.bold: true
 			font.family: Appearance.font.family.clock
-			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
 			text: Time.minuteStr
 		}
 	}
 
 	CustomText {
 		Layout.alignment: Qt.AlignHCenter
-		Layout.topMargin: -Appearance.padding.large * 2
-		color: DynamicColors.palette.m3tertiary
+		Layout.topMargin: -Tokens.padding.large * 2
+		color: Colors.palette.m3tertiary
 		font.bold: true
 		font.family: Appearance.font.family.mono
-		font.pointSize: Math.floor(Appearance.font.size.extraLarge * root.centerScale)
+		font.pointSize: Math.floor(Tokens.font.size.extraLarge * root.centerScale)
 		text: Time.format("dddd, d MMMM yyyy")
 	}
 
 	CustomClippingRect {
 		Layout.alignment: Qt.AlignHCenter
-		Layout.topMargin: Appearance.spacing.large * 2
-		color: DynamicColors.tPalette.m3surfaceContainer
+		Layout.topMargin: Tokens.spacing.large * 2
+		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: root.centerWidth / 2
 		implicitWidth: root.centerWidth / 2
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		MaterialIcon {
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onSurfaceVariant
+			color: Colors.palette.m3onSurfaceVariant
 			font.pointSize: Math.floor(root.centerWidth / 4)
 			text: "person"
 		}
@@ -87,11 +88,11 @@ ColumnLayout {
 
 	CustomRect {
 		Layout.alignment: Qt.AlignHCenter
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
 		focus: true
-		implicitHeight: input.implicitHeight + Appearance.padding.small * 2
+		implicitHeight: input.implicitHeight + Tokens.padding.small * 2
 		implicitWidth: root.centerWidth * 0.8
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Keys.onPressed: event => {
 			if (root.lock.unlocking)
@@ -120,11 +121,11 @@ ColumnLayout {
 			id: input
 
 			anchors.fill: parent
-			anchors.margins: Appearance.padding.small
-			spacing: Appearance.spacing.normal
+			anchors.margins: Tokens.padding.small
+			spacing: Tokens.spacing.normal
 
 			Item {
-				implicitHeight: fprintIcon.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: fprintIcon.implicitHeight + Tokens.padding.small * 2
 				implicitWidth: implicitHeight
 
 				MaterialIcon {
@@ -132,7 +133,7 @@ ColumnLayout {
 
 					anchors.centerIn: parent
 					animate: true
-					color: root.lock.pam.fprint.tries >= Config.lock.maxFprintTries ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+					color: root.lock.pam.fprint.tries >= Config.lock.maxFprintTries ? Colors.palette.m3error : Colors.palette.m3onSurface
 					opacity: root.lock.pam.passwd.active ? 0 : 1
 					text: {
 						if (root.lock.pam.fprint.tries >= Config.lock.maxFprintTries)
@@ -161,13 +162,13 @@ ColumnLayout {
 			}
 
 			CustomRect {
-				color: root.lock.pam.buffer ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-				implicitHeight: enterIcon.implicitHeight + Appearance.padding.small * 2
+				color: root.lock.pam.buffer ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
+				implicitHeight: enterIcon.implicitHeight + Tokens.padding.small * 2
 				implicitWidth: implicitHeight
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 
 				StateLayer {
-					color: root.lock.pam.buffer ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					color: root.lock.pam.buffer ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 
 					onClicked: {
 						root.lock.pam.passwd.start();
@@ -178,7 +179,7 @@ ColumnLayout {
 					id: enterIcon
 
 					anchors.centerIn: parent
-					color: root.lock.pam.buffer ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					color: root.lock.pam.buffer ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 					font.weight: 500
 					text: "arrow_forward"
 				}
@@ -188,7 +189,7 @@ ColumnLayout {
 
 	Item {
 		Layout.fillWidth: true
-		Layout.topMargin: -Appearance.spacing.large
+		Layout.topMargin: -Tokens.spacing.large
 		implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight)
 
 		Behavior on implicitHeight {
@@ -224,7 +225,7 @@ ColumnLayout {
 			anchors.left: parent.left
 			anchors.right: parent.right
 			animateProp: "opacity"
-			color: DynamicColors.palette.m3onSurfaceVariant
+			color: Colors.palette.m3onSurfaceVariant
 			font.family: Appearance.font.family.mono
 			horizontalAlignment: Qt.AlignHCenter
 			lineHeight: 1.2
@@ -293,9 +294,9 @@ ColumnLayout {
 
 			anchors.left: parent.left
 			anchors.right: parent.right
-			color: DynamicColors.palette.m3error
+			color: Colors.palette.m3error
 			font.family: Appearance.font.family.mono
-			font.pointSize: Appearance.font.size.small
+			font.pointSize: Tokens.font.size.small
 			horizontalAlignment: Qt.AlignHCenter
 			opacity: 0
 			scale: 0.7
@@ -365,14 +366,14 @@ ColumnLayout {
 				id: exitAnim
 
 				Anim {
-					duration: Appearance.anim.durations.large
+					duration: Tokens.anim.durations.large
 					property: "scale"
 					target: message
 					to: 0.7
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.large
+					duration: Tokens.anim.durations.large
 					property: "opacity"
 					target: message
 					to: 0
@@ -382,7 +383,7 @@ ColumnLayout {
 	}
 
 	component FlashAnim: NumberAnimation {
-		duration: Appearance.anim.durations.small
+		duration: Tokens.anim.durations.small
 		easing.type: Easing.Linear
 		property: "opacity"
 		target: message

Modules/Lock/Content.qml

@@ -2,7 +2,8 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomClippingRect {
 	id: root
@@ -11,17 +12,17 @@ CustomClippingRect {
 
 	implicitHeight: layout.implicitHeight
 	implicitWidth: layout.implicitWidth
-	radius: Appearance.rounding.large
+	radius: Tokens.rounding.large
 
 	RowLayout {
 		id: layout
 
 		anchors.fill: parent
-		spacing: Appearance.spacing.large * 2
+		spacing: Tokens.spacing.large * 2
 
 		ColumnLayout {
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			WeatherInfo {
 				id: weather
@@ -51,15 +52,15 @@ CustomClippingRect {
 
 		ColumnLayout {
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			CustomRect {
 				Layout.fillHeight: true
 				Layout.fillWidth: true
-				bottomRightRadius: Appearance.rounding.large
-				color: DynamicColors.tPalette.m3surfaceContainer
-				radius: Appearance.rounding.small
-				topRightRadius: Appearance.rounding.large
+				bottomRightRadius: Tokens.rounding.large
+				color: Colors.tPalette.m3surfaceContainer
+				radius: Tokens.rounding.small
+				topRightRadius: Tokens.rounding.large
 
 				NotifDock {
 					lock: root.lock

Modules/Lock/Fetch.qml

@@ -1,161 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell.Services.UPower
-import QtQuick
-import QtQuick.Layouts
-import qs.Modules
-import qs.Components
-import qs.Helpers
-import qs.Config
-
-ColumnLayout {
-	id: root
-
-	anchors.fill: parent
-	anchors.margins: Appearance.padding.large * 2
-	anchors.topMargin: Appearance.padding.large
-	spacing: Appearance.spacing.small
-
-	RowLayout {
-		Layout.fillHeight: false
-		Layout.fillWidth: true
-		spacing: Appearance.spacing.normal
-
-		CustomRect {
-			color: DynamicColors.palette.m3primary
-			implicitHeight: prompt.implicitHeight + Appearance.padding.normal * 2
-			implicitWidth: prompt.implicitWidth + Appearance.padding.normal * 2
-			radius: Appearance.rounding.small
-
-			MonoText {
-				id: prompt
-
-				anchors.centerIn: parent
-				color: DynamicColors.palette.m3onPrimary
-				font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
-				text: ">"
-			}
-		}
-
-		MonoText {
-			Layout.fillWidth: true
-			elide: Text.ElideRight
-			font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
-			text: "caelestiafetch.sh"
-		}
-
-		WrappedLoader {
-			Layout.fillHeight: true
-			active: !iconLoader.active
-
-			sourceComponent: OsLogo {
-			}
-		}
-	}
-
-	RowLayout {
-		Layout.fillHeight: false
-		Layout.fillWidth: true
-		spacing: height * 0.15
-
-		WrappedLoader {
-			id: iconLoader
-
-			Layout.fillHeight: true
-			active: root.width > 320
-
-			sourceComponent: OsLogo {
-			}
-		}
-
-		ColumnLayout {
-			Layout.bottomMargin: Appearance.padding.normal
-			Layout.fillWidth: true
-			Layout.leftMargin: iconLoader.active ? 0 : width * 0.1
-			Layout.topMargin: Appearance.padding.normal
-			spacing: Appearance.spacing.normal
-
-			WrappedLoader {
-				Layout.fillWidth: true
-				active: !batLoader.active && root.height > 200
-
-				sourceComponent: FetchText {
-					text: `OS  : ${SystemInfo.osPrettyName || SysInfo.osName}`
-				}
-			}
-
-			WrappedLoader {
-				Layout.fillWidth: true
-				active: root.height > (batLoader.active ? 200 : 110)
-
-				sourceComponent: FetchText {
-					text: `WM  : ${SystemInfo.wm}`
-				}
-			}
-
-			WrappedLoader {
-				Layout.fillWidth: true
-				active: !batLoader.active || root.height > 110
-
-				sourceComponent: FetchText {
-					text: `USER: ${SystemInfo.user}`
-				}
-			}
-
-			FetchText {
-				text: `UP  : ${SystemInfo.uptime}`
-			}
-
-			WrappedLoader {
-				id: batLoader
-
-				Layout.fillWidth: true
-				active: UPower.displayDevice.isLaptopBattery
-
-				sourceComponent: FetchText {
-					text: `BATT: ${[UPowerDeviceState.Charging, UPowerDeviceState.FullyCharged, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state) ? "(+) " : ""}${Math.round(UPower.displayDevice.percentage * 100)}%`
-				}
-			}
-		}
-	}
-
-	WrappedLoader {
-		Layout.alignment: Qt.AlignHCenter
-		active: root.height > 180
-
-		sourceComponent: RowLayout {
-			spacing: Appearance.spacing.large
-
-			Repeater {
-				model: Math.max(0, Math.min(8, root.width / (Appearance.font.size.larger * 2 + Appearance.spacing.large)))
-
-				CustomRect {
-					required property int index
-
-					color: DynamicColors.palette[`term${index}`]
-					implicitHeight: Appearance.font.size.larger * 2
-					implicitWidth: implicitHeight
-					radius: Appearance.rounding.small
-				}
-			}
-		}
-	}
-
-	component FetchText: MonoText {
-		Layout.fillWidth: true
-		elide: Text.ElideRight
-		font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
-	}
-	component MonoText: CustomText {
-		font.family: Appearance.font.family.mono
-	}
-	component OsLogo: ColoredIcon {
-		color: DynamicColors.palette.m3primary
-		implicitSize: height
-		layer.enabled: Config.lock.recolorLogo || SystemInfo.isDefaultLogo
-		source: SystemInfo.osLogo
-	}
-	component WrappedLoader: Loader {
-		visible: active
-	}
-}

Modules/Lock/IdleMonitors.qml

@@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import Quickshell.Wayland
 import ZShell.Internal
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 
 Scope {

Modules/Lock/InputField.qml

@@ -6,7 +6,8 @@ import QtQuick.Layouts
 import qs.Modules
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -39,9 +40,9 @@ Item {
 
 		anchors.centerIn: parent
 		animate: true
-		color: root.pam.passwd.active ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3outline
+		color: root.pam.passwd.active ? Colors.palette.m3secondary : Colors.palette.m3outline
 		font.family: Appearance.font.family.mono
-		font.pointSize: Appearance.font.size.normal
+		font.pointSize: Tokens.font.size.normal
 		opacity: root.buffer ? 0 : 1
 		text: {
 			if (root.pam.passwd.active)
@@ -70,20 +71,20 @@ Item {
 
 		anchors.centerIn: parent
 		anchors.horizontalCenterOffset: implicitWidth > root.width ? -(implicitWidth - root.width) / 2 : 0
-		implicitHeight: Appearance.font.size.normal
+		implicitHeight: Tokens.font.size.normal
 		implicitWidth: fullWidth
 		interactive: false
 		orientation: Qt.Horizontal
-		spacing: Appearance.spacing.small / 2
+		spacing: Tokens.spacing.small / 2
 
 		delegate: CustomRect {
 			id: ch
 
-			color: DynamicColors.palette.m3onSurface
+			color: Colors.palette.m3onSurface
 			implicitHeight: charList.implicitHeight
 			implicitWidth: implicitHeight
 			opacity: 0
-			radius: Appearance.rounding.small / 2
+			radius: Tokens.rounding.small / 2
 			scale: 0
 
 			Behavior on opacity {
@@ -92,8 +93,8 @@ Item {
 			}
 			Behavior on scale {
 				Anim {
-					duration: Appearance.anim.durations.expressiveFastSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+					duration: Tokens.anim.durations.expressiveFastSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
 				}
 			}
 

Modules/Lock/LockSurface.qml

@@ -3,9 +3,10 @@ pragma ComponentBehavior: Bound
 import Quickshell.Wayland
 import QtQuick
 import QtQuick.Effects
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Components
+import qs.Services
 
 WlSessionLockSurface {
 	id: root
@@ -29,8 +30,8 @@ WlSessionLockSurface {
 
 		ParallelAnimation {
 			Anim {
-				duration: Appearance.anim.durations.expressiveDefaultSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+				duration: Tokens.anim.durations.expressiveDefaultSpatial
+				easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 				properties: "implicitWidth,implicitHeight"
 				target: lockContent
 				to: lockContent.size
@@ -43,22 +44,22 @@ WlSessionLockSurface {
 			}
 
 			Anim {
-				duration: Appearance.anim.durations.expressiveDefaultSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+				duration: Tokens.anim.durations.expressiveDefaultSpatial
+				easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 				property: "scale"
 				target: content
 				to: 0
 			}
 
 			Anim {
-				duration: Appearance.anim.durations.small
+				duration: Tokens.anim.durations.small
 				property: "opacity"
 				target: content
 				to: 0
 			}
 
 			Anim {
-				duration: Appearance.anim.durations.large
+				duration: Tokens.anim.durations.large
 				property: "opacity"
 				target: lockIcon
 				to: 1
@@ -66,7 +67,7 @@ WlSessionLockSurface {
 
 			SequentialAnimation {
 				PauseAnimation {
-					duration: Appearance.anim.durations.small
+					duration: Tokens.anim.durations.small
 				}
 
 				Anim {
@@ -92,8 +93,8 @@ WlSessionLockSurface {
 		SequentialAnimation {
 			ParallelAnimation {
 				Anim {
-					duration: Appearance.anim.durations.expressiveFastSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+					duration: Tokens.anim.durations.expressiveFastSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
 					property: "scale"
 					target: lockContent
 					to: 1
@@ -114,8 +115,8 @@ WlSessionLockSurface {
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 					property: "scale"
 					target: content
 					to: 1
@@ -124,20 +125,20 @@ WlSessionLockSurface {
 				Anim {
 					property: "radius"
 					target: lockBg
-					to: Appearance.rounding.large * 1.5
+					to: Tokens.rounding.large * 1.5
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 					property: "implicitWidth"
 					target: lockContent
 					to: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult * Config.lock.sizes.ratio
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 					property: "implicitHeight"
 					target: lockContent
 					to: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult
@@ -184,8 +185,8 @@ WlSessionLockSurface {
 
 		property int positionIndex: 0
 		readonly property var positions: [Qt.point(0, 0), Qt.point(4, 0), Qt.point(4, 4), Qt.point(0, 4), Qt.point(-4, 4), Qt.point(-4, 0), Qt.point(-4, -4), Qt.point(0, -4), Qt.point(4, -4),]
-		readonly property int radius: size / 4 * Appearance.rounding.scale
-		readonly property int size: lockIcon.implicitHeight + Appearance.padding.large * 4
+		readonly property int radius: size / 4 * Tokens.rounding.scale
+		readonly property int size: lockIcon.implicitHeight + Tokens.padding.large * 4
 
 		anchors.centerIn: parent
 		anchors.horizontalCenterOffset: positions[positionIndex].x
@@ -219,14 +220,14 @@ WlSessionLockSurface {
 			id: lockBg
 
 			anchors.fill: parent
-			color: DynamicColors.palette.m3surface
+			color: Colors.palette.m3surface
 			layer.enabled: true
-			opacity: DynamicColors.transparency.enabled ? DynamicColors.transparency.base : 1
+			opacity: Colors.transparency.enabled ? Colors.transparency.base : 1
 			radius: lockContent.radius
 
 			layer.effect: MultiEffect {
 				blurMax: 15
-				shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, 0.7)
+				shadowColor: Qt.alpha(Colors.palette.m3shadow, 0.7)
 				shadowEnabled: true
 			}
 		}
@@ -236,7 +237,7 @@ WlSessionLockSurface {
 
 			anchors.centerIn: parent
 			font.bold: true
-			font.pointSize: Appearance.font.size.extraLarge * 4
+			font.pointSize: Tokens.font.size.extraLarge * 4
 			text: "lock"
 		}
 
@@ -244,11 +245,11 @@ WlSessionLockSurface {
 			id: content
 
 			anchors.centerIn: parent
-			height: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult - Appearance.padding.large * 2
+			height: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult - Tokens.padding.large * 2
 			lock: root
 			opacity: 0
 			scale: 0
-			width: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult * Config.lock.sizes.ratio - Appearance.padding.large * 2
+			width: (root.screen?.height ?? 0) * Config.lock.sizes.heightMult * Config.lock.sizes.ratio - Tokens.padding.large * 2
 		}
 	}
 }

Modules/Lock/Media.qml

@@ -3,17 +3,18 @@ import QtQuick.Layouts
 import Quickshell
 import ZShell.Components
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
+import qs.Services
 
 CustomClippingRect {
 	id: root
 
 	required property var lock
 
-	color: DynamicColors.tPalette.m3surfaceContainer
+	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
-	radius: Appearance.rounding.small
+	radius: Tokens.rounding.small
 
 	FadeImage {
 		id: image
@@ -37,7 +38,7 @@ CustomClippingRect {
 
 		CustomRect {
 			anchors.fill: parent
-			color: DynamicColors.palette.m3surface
+			color: Colors.palette.m3surface
 			opacity: 0.7
 		}
 	}
@@ -46,17 +47,17 @@ CustomClippingRect {
 		id: layout
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.extraLarge
+		anchors.margins: Tokens.padding.extraLarge
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.extraSmall
+		spacing: Tokens.spacing.extraSmall
 
 		CustomText {
 			Layout.fillWidth: true
 			animate: true
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			elide: Text.ElideRight
-			font.pointSize: Appearance.font.size.medium
+			font.pointSize: Tokens.font.size.medium
 			horizontalAlignment: Text.AlignHCenter
 			text: (Players.active?.trackTitle ?? qsTr("Nothing playing")) || qsTr("Unknown track")
 		}
@@ -64,17 +65,17 @@ CustomClippingRect {
 		CustomText {
 			Layout.fillWidth: true
 			animate: true
-			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.AlignHCenter
 			text: (Players.active?.trackArtist ?? qsTr("Try playing some music!")) || qsTr("Unknown artist")
 		}
 
 		ButtonRow {
 			Layout.alignment: Qt.AlignHCenter
-			Layout.topMargin: Appearance.spacing.small
-			spacing: Appearance.spacing.extraSmall
+			Layout.topMargin: Tokens.spacing.small
+			spacing: Tokens.spacing.extraSmall
 
 			IconButton {
 				enabled: Players.active?.canGoPrevious
@@ -90,7 +91,7 @@ CustomClippingRect {
 				checked: Players.active?.isPlaying ?? false
 				enabled: Players.active?.canTogglePlaying
 				icon: Players.active?.isPlaying ? "pause" : "play_arrow"
-				implicitWidth: implicitHeight + Appearance.padding.largeIncreased * 2
+				implicitWidth: implicitHeight + Tokens.padding.largeIncreased * 2
 				isRound: true
 				shapeMorph: true
 

Modules/Lock/NotifDock.qml

@@ -7,8 +7,9 @@ import QtQuick.Layouts
 import qs.Modules
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Daemons
+import qs.Services
 
 ColumnLayout {
 	id: root
@@ -16,12 +17,12 @@ ColumnLayout {
 	required property var lock
 
 	anchors.fill: parent
-	anchors.margins: Appearance.padding.large
-	spacing: Appearance.spacing.smaller
+	anchors.margins: Tokens.padding.large
+	spacing: Tokens.spacing.smaller
 
 	CustomText {
 		Layout.fillWidth: true
-		color: DynamicColors.palette.m3outline
+		color: Colors.palette.m3outline
 		elide: Text.ElideRight
 		font.family: Appearance.font.family.mono
 		font.weight: 500
@@ -34,7 +35,7 @@ ColumnLayout {
 		Layout.fillHeight: true
 		Layout.fillWidth: true
 		color: "transparent"
-		radius: Appearance.rounding.small
+		radius: Tokens.rounding.small
 
 		Loader {
 			active: opacity > 0
@@ -43,11 +44,11 @@ ColumnLayout {
 
 			Behavior on opacity {
 				Anim {
-					duration: Appearance.anim.durations.extraLarge
+					duration: Tokens.anim.durations.extraLarge
 				}
 			}
 			sourceComponent: ColumnLayout {
-				spacing: Appearance.spacing.large
+				spacing: Tokens.spacing.large
 
 				Image {
 					asynchronous: true
@@ -58,15 +59,15 @@ ColumnLayout {
 
 					layer.effect: Coloriser {
 						brightness: 1
-						colorizationColor: DynamicColors.palette.m3outlineVariant
+						colorizationColor: Colors.palette.m3outlineVariant
 					}
 				}
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
-					color: DynamicColors.palette.m3outlineVariant
+					color: Colors.palette.m3outlineVariant
 					font.family: Appearance.font.family.mono
-					font.pointSize: Appearance.font.size.large
+					font.pointSize: Tokens.font.size.large
 					font.weight: 500
 					text: qsTr("No Notifications")
 				}
@@ -76,7 +77,7 @@ ColumnLayout {
 		CustomListView {
 			anchors.fill: parent
 			clip: true
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			add: Transition {
 				Anim {
@@ -86,8 +87,8 @@ ColumnLayout {
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 					from: 0
 					property: "scale"
 					to: 1
@@ -102,8 +103,8 @@ ColumnLayout {
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 					property: "y"
 				}
 			}
@@ -120,8 +121,8 @@ ColumnLayout {
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 					property: "y"
 				}
 			}

Modules/Lock/NotifGroup.qml

@@ -8,8 +8,9 @@ import QtQuick.Layouts
 import qs.Modules
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Daemons
+import qs.Services
 
 CustomRect {
 	id: root
@@ -24,14 +25,14 @@ CustomRect {
 	anchors.left: parent?.left
 	anchors.right: parent?.right
 	clip: true
-	color: root.urgency === "critical" ? DynamicColors.palette.m3secondaryContainer : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-	implicitHeight: content.implicitHeight + Appearance.padding.normal * 2
-	radius: Appearance.rounding.normal
+	color: root.urgency === "critical" ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
+	implicitHeight: content.implicitHeight + Tokens.padding.normal * 2
+	radius: Tokens.rounding.normal
 
 	Behavior on implicitHeight {
 		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			duration: Tokens.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
@@ -39,10 +40,10 @@ CustomRect {
 		id: content
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.normal
+		anchors.margins: Tokens.padding.normal
 		anchors.right: parent.right
 		anchors.top: parent.top
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		Item {
 			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
@@ -67,7 +68,7 @@ CustomRect {
 				id: appIconComp
 
 				ColoredIcon {
-					color: root.urgency === "critical" ? DynamicColors.palette.m3onError : root.urgency === "low" ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer
+					color: root.urgency === "critical" ? Colors.palette.m3onError : root.urgency === "low" ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
 					implicitSize: Math.round(Config.notifs.sizes.image * 0.6)
 					layer.enabled: root.appIcon.endsWith("symbolic")
 					source: Quickshell.iconPath(root.appIcon)
@@ -78,16 +79,16 @@ CustomRect {
 				id: materialIconComp
 
 				MaterialIcon {
-					color: root.urgency === "critical" ? DynamicColors.palette.m3onError : root.urgency === "low" ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer
-					font.pointSize: Appearance.font.size.large
+					color: root.urgency === "critical" ? Colors.palette.m3onError : root.urgency === "low" ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
+					font.pointSize: Tokens.font.size.large
 					text: Icons.getNotifIcon(root.notifs[0]?.summary, root.urgency)
 				}
 			}
 
 			ClippingRectangle {
 				anchors.fill: parent
-				color: root.urgency === "critical" ? DynamicColors.palette.m3error : root.urgency === "low" ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 3) : DynamicColors.palette.m3secondaryContainer
-				radius: Appearance.rounding.full
+				color: root.urgency === "critical" ? Colors.palette.m3error : root.urgency === "low" ? Colors.layer(Colors.palette.m3surfaceContainerHighest, 3) : Colors.palette.m3secondaryContainer
+				radius: Tokens.rounding.full
 
 				Loader {
 					anchors.centerIn: parent
@@ -101,14 +102,14 @@ CustomRect {
 				anchors.right: parent.right
 
 				sourceComponent: CustomRect {
-					color: root.urgency === "critical" ? DynamicColors.palette.m3error : root.urgency === "low" ? DynamicColors.palette.m3surfaceContainerHighest : DynamicColors.palette.m3secondaryContainer
+					color: root.urgency === "critical" ? Colors.palette.m3error : root.urgency === "low" ? Colors.palette.m3surfaceContainerHighest : Colors.palette.m3secondaryContainer
 					implicitHeight: Config.notifs.sizes.badge
 					implicitWidth: Config.notifs.sizes.badge
-					radius: Appearance.rounding.full
+					radius: Tokens.rounding.full
 
 					ColoredIcon {
 						anchors.centerIn: parent
-						color: root.urgency === "critical" ? DynamicColors.palette.m3onError : root.urgency === "low" ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer
+						color: root.urgency === "critical" ? Colors.palette.m3onError : root.urgency === "low" ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
 						implicitSize: Math.round(Config.notifs.sizes.badge * 0.6)
 						layer.enabled: root.appIcon.endsWith("symbolic")
 						source: Quickshell.iconPath(root.appIcon)
@@ -118,38 +119,38 @@ CustomRect {
 		}
 
 		ColumnLayout {
-			Layout.bottomMargin: -Appearance.padding.small / 2 - (root.expanded ? 0 : spacing)
+			Layout.bottomMargin: -Tokens.padding.small / 2 - (root.expanded ? 0 : spacing)
 			Layout.fillWidth: true
-			Layout.topMargin: -Appearance.padding.small
-			spacing: Math.round(Appearance.spacing.small / 2)
+			Layout.topMargin: -Tokens.padding.small
+			spacing: Math.round(Tokens.spacing.small / 2)
 
 			RowLayout {
 				Layout.bottomMargin: -parent.spacing
 				Layout.fillWidth: true
-				spacing: Appearance.spacing.smaller
+				spacing: Tokens.spacing.smaller
 
 				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: root.modelData
 				}
 
 				CustomText {
 					animate: true
-					color: DynamicColors.palette.m3outline
-					font.pointSize: Appearance.font.size.small
+					color: Colors.palette.m3outline
+					font.pointSize: Tokens.font.size.small
 					text: root.notifs[0]?.timeStr ?? ""
 				}
 
 				CustomRect {
 					Layout.preferredWidth: root.notifs.length > Config.notifs.groupPreviewNum ? implicitWidth : 0
-					color: root.urgency === "critical" ? DynamicColors.palette.m3error : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
-					implicitHeight: groupCount.implicitHeight + Appearance.padding.small
-					implicitWidth: expandBtn.implicitWidth + Appearance.padding.smaller * 2
+					color: root.urgency === "critical" ? Colors.palette.m3error : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
+					implicitHeight: groupCount.implicitHeight + Tokens.padding.small
+					implicitWidth: expandBtn.implicitWidth + Tokens.padding.smaller * 2
 					opacity: root.notifs.length > Config.notifs.groupPreviewNum ? 1 : 0
-					radius: Appearance.rounding.full
+					radius: Tokens.rounding.full
 
 					Behavior on Layout.preferredWidth {
 						Anim {
@@ -161,7 +162,7 @@ CustomRect {
 					}
 
 					StateLayer {
-						color: root.urgency === "critical" ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
+						color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface
 
 						onClicked: {
 							root.expanded = !root.expanded;
@@ -172,22 +173,22 @@ CustomRect {
 						id: expandBtn
 
 						anchors.centerIn: parent
-						spacing: Appearance.spacing.small / 2
+						spacing: Tokens.spacing.small / 2
 
 						CustomText {
 							id: groupCount
 
-							Layout.leftMargin: Appearance.padding.small / 2
+							Layout.leftMargin: Tokens.padding.small / 2
 							animate: true
-							color: root.urgency === "critical" ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
-							font.pointSize: Appearance.font.size.small
+							color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface
+							font.pointSize: Tokens.font.size.small
 							text: root.notifs.length
 						}
 
 						MaterialIcon {
-							Layout.rightMargin: -Appearance.padding.small / 2
+							Layout.rightMargin: -Tokens.padding.small / 2
 							animate: true
-							color: root.urgency === "critical" ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
+							color: root.urgency === "critical" ? Colors.palette.m3onError : Colors.palette.m3onSurface
 							text: root.expanded ? "expand_less" : "expand_more"
 						}
 					}
@@ -283,13 +284,13 @@ CustomRect {
 		required property NotifServer.Notif modelData
 
 		Layout.fillWidth: true
-		color: root.urgency === "critical" ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+		color: root.urgency === "critical" ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurface
 		text: {
 			if (!Config.lock.showNotifContent)
 				return "Unlock to view";
 			const summary = modelData.summary.replace(/\n/g, " ");
 			const body = modelData.body.replace(/\n/g, " ");
-			const color = root.urgency === "critical" ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3outline;
+			const color = root.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3outline;
 
 			if (metrics.text === metrics.elidedText)
 				return `${summary} <span style='color:${color}'>${body}</span>`;

Modules/Lock/Pam.qml

@@ -3,7 +3,7 @@ import Quickshell.Io
 import Quickshell.Wayland
 import Quickshell.Services.Pam
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 Scope {
 	id: root

Modules/Lock/Resources.qml

@@ -4,9 +4,10 @@ import QtQuick
 import QtQuick.Layouts
 import M3Shapes
 import ZShell.Services
+import ZShell.Config
 import qs.Components
-import qs.Config
 import qs.Effects
+import qs.Services
 
 CustomRect {
 	id: root
@@ -16,9 +17,9 @@ CustomRect {
 		return 1 + Math.pow(Math.abs(diff), 0.8) * Math.sign(diff);
 	}
 
-	color: DynamicColors.tPalette.m3surfaceContainer
+	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
-	radius: Appearance.rounding.small
+	radius: Tokens.rounding.small
 
 	ServiceRef {
 		service: Cpu
@@ -36,25 +37,25 @@ CustomRect {
 		id: layout
 
 		anchors.fill: parent
-		anchors.margins: Appearance.padding.large
-		spacing: Appearance.spacing.large
+		anchors.margins: Tokens.padding.large
+		spacing: Tokens.spacing.large
 
 		Resource {
 			id: cpu
 
-			fgColor: DynamicColors.palette.m3primary
+			fgColor: Colors.palette.m3primary
 			icon: "memory"
 			value: Cpu.percentage
 		}
 
 		Resource {
-			fgColor: DynamicColors.palette.m3tertiary
+			fgColor: Colors.palette.m3tertiary
 			icon: "memory_alt"
 			value: Memory.percentage
 		}
 
 		Resource {
-			fgColor: DynamicColors.palette.m3secondary
+			fgColor: Colors.palette.m3secondary
 			icon: "hard_disk"
 			value: Storage.percentage
 		}
@@ -76,7 +77,7 @@ CustomRect {
 		MaterialIcon {
 			anchors.centerIn: parent
 			color: res.fgColor
-			font.pointSize: Appearance.font.size.extraLarge
+			font.pointSize: Tokens.font.size.extraLarge
 			text: res.icon
 		}
 	}

Modules/Lock/UserImage.qml

@@ -8,7 +8,7 @@ Item {
 
 	ClippingRectangle {
 		anchors.fill: parent
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Image {
 			id: userImage

Modules/Lock/Weather/BriefInfo.qml

@@ -1,40 +1,41 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
+import qs.Services
 
 ColumnLayout {
 	id: root
 
 	required property int rootHeight
 
-	spacing: Appearance.spacing.extraSmall
+	spacing: Tokens.spacing.extraSmall
 
 	CustomText {
 		Layout.alignment: Qt.AlignHCenter
 		animate: true
-		color: DynamicColors.palette.m3onSurfaceVariant
-		font.pointSize: Appearance.font.size.large
+		color: Colors.palette.m3onSurfaceVariant
+		font.pointSize: Tokens.font.size.large
 		text: Weather.description
 	}
 
 	RowLayout {
 		Layout.alignment: Qt.AlignHCenter
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		CustomText {
 			id: temp
 
 			animate: true
-			color: DynamicColors.palette.m3primary
-			font.pointSize: Appearance.font.size.large
+			color: Colors.palette.m3primary
+			font.pointSize: Tokens.font.size.large
 			text: Weather.temp
 		}
 
 		MaterialIcon {
 			animate: true
-			color: DynamicColors.palette.m3secondary
+			color: Colors.palette.m3secondary
 			text: Weather.icon
 		}
 	}
@@ -42,8 +43,8 @@ ColumnLayout {
 	CustomText {
 		Layout.alignment: Qt.AlignHCenter
 		animate: true
-		color: DynamicColors.palette.m3onSurfaceVariant
-		font.pointSize: Appearance.font.size.large
+		color: Colors.palette.m3onSurfaceVariant
+		font.pointSize: Tokens.font.size.large
 		text: qsTr("Feels like %1").arg(Weather.temp)
 		visible: root.rootHeight > 550
 	}
@@ -51,8 +52,8 @@ ColumnLayout {
 	CustomText {
 		Layout.alignment: Qt.AlignHCenter
 		animate: true
-		color: DynamicColors.palette.m3onSurfaceVariant
-		font.pointSize: Appearance.font.size.medium
+		color: Colors.palette.m3onSurfaceVariant
+		font.pointSize: Tokens.font.size.medium
 		text: {
 			const today = Weather.forecast[0];
 			return qsTr("High %1 • Low %2").arg(Weather.formatTemp(today?.maxTempC)).arg(Weather.formatTemp(today?.minTempC));

Modules/Lock/Weather/Forecast.qml

@@ -4,33 +4,34 @@ import M3Shapes
 import ZShell
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomRect {
 	id: root
 
-	color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-	implicitHeight: header.anchors.margins + header.implicitHeight + Appearance.spacing.small + layout.implicitHeight + layout.anchors.bottomMargin
-	radius: Appearance.rounding.small
+	color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
+	implicitHeight: header.anchors.margins + header.implicitHeight + Tokens.spacing.small + layout.implicitHeight + layout.anchors.bottomMargin
+	radius: Tokens.rounding.small
 
 	RowLayout {
 		id: header
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.largeIncreased
+		anchors.margins: Tokens.padding.largeIncreased
 		anchors.top: parent.top
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		MaterialIcon {
 			Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
-			font.pointSize: Appearance.font.size.medium
+			font.pointSize: Tokens.font.size.medium
 			text: "schedule"
 		}
 
 		CustomText {
 			id: title
 
-			font.pointSize: Appearance.font.size.medium
+			font.pointSize: Tokens.font.size.medium
 			text: qsTr("Hourly forecast")
 		}
 	}
@@ -39,14 +40,14 @@ CustomRect {
 		id: layout
 
 		anchors.bottom: parent.bottom
-		anchors.bottomMargin: Appearance.padding.largeIncreased
+		anchors.bottomMargin: Tokens.padding.largeIncreased
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.large
+		anchors.margins: Tokens.padding.large
 		anchors.right: parent.right
 		implicitHeight: contentItem.childrenRect.height
 		model: Weather.hourlyForecast
 		orientation: VerticalFadeListView.Horizontal
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		delegate: ColumnLayout {
 			id: hour
@@ -55,12 +56,12 @@ CustomRect {
 			required property int index
 			required property var modelData
 
-			spacing: Appearance.spacing.extraSmall
+			spacing: Tokens.spacing.extraSmall
 
 			MaterialShape {
 				Layout.alignment: Qt.AlignHCenter
-				color: Qt.alpha(DynamicColors.palette.m3primary, hour.index === 0 ? 1 : 0)
-				implicitSize: temp.implicitHeight + Appearance.padding.normal * 2
+				color: Qt.alpha(Colors.palette.m3primary, hour.index === 0 ? 1 : 0)
+				implicitSize: temp.implicitHeight + Tokens.padding.normal * 2
 				shape: MaterialShape.Cookie4Sided
 
 				Behavior on color {
@@ -72,30 +73,30 @@ CustomRect {
 					id: temp
 
 					anchors.centerIn: parent
-					color: hour.index === 0 ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-					font.pointSize: Appearance.font.size.medium
+					color: hour.index === 0 ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+					font.pointSize: Tokens.font.size.medium
 					text: Weather.formatTemp(hour.cond.tempC).slice(0, -1) // Remove C/F
 				}
 			}
 
 			MaterialIcon {
 				Layout.alignment: Qt.AlignHCenter
-				color: DynamicColors.palette.m3secondary
-				font.pointSize: Appearance.font.size.extraLarge
+				color: Colors.palette.m3secondary
+				font.pointSize: Tokens.font.size.extraLarge
 				text: hour.cond.icon
 			}
 
 			CustomText {
 				Layout.alignment: Qt.AlignHCenter
-				color: DynamicColors.palette.m3primary
+				color: Colors.palette.m3primary
 				text: hour.cond.precipChance + "%"
 			}
 
 			CustomText {
 				Layout.alignment: Qt.AlignHCenter
-				Layout.topMargin: Appearance.spacing.extraSmall
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.small
+				Layout.topMargin: Tokens.spacing.extraSmall
+				color: Colors.palette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.small
 				text: hour.index === 0 ? qsTr("Now") : Qt.formatDateTime(new Date(hour.cond.timestamp.replace("T", " ")), Config.services.useTwelveHourClock ? "ha" : "hh:00")
 			}
 		}

Modules/Lock/WeatherInfo.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import qs.Modules.Lock.Weather
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Helpers
+import qs.Services
 
 CustomRect {
 	id: root
@@ -10,14 +11,14 @@ CustomRect {
 	required property int rootHeight
 	readonly property bool showForecast: rootHeight >= 700
 
-	color: DynamicColors.tPalette.m3surfaceContainer
+	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: {
 		const base = brief.implicitHeight + brief.anchors.topMargin;
 		if (showForecast)
-			return base + Appearance.spacing.large + forecast.implicitHeight + forecast.anchors.margins;
+			return base + Tokens.spacing.large + forecast.implicitHeight + forecast.anchors.margins;
 		return base + brief.anchors.topMargin;
 	}
-	radius: Appearance.rounding.small
+	radius: Tokens.rounding.small
 
 	Timer {
 		interval: 900000 // 15 minutes
@@ -33,7 +34,7 @@ CustomRect {
 
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		anchors.topMargin: Appearance.padding.extraLarge
+		anchors.topMargin: Tokens.padding.extraLarge
 		rootHeight: root.rootHeight
 	}
 
@@ -43,7 +44,7 @@ CustomRect {
 		active: root.showForecast
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.large
+		anchors.margins: Tokens.padding.large
 		anchors.right: parent.right
 		asynchronous: true
 

Modules/MediaWidget.qml

@@ -2,8 +2,9 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Components
 import qs.Daemons
-import qs.Config
+import ZShell.Config
 import qs.Helpers
+import qs.Services
 
 CustomRect {
 	id: root
@@ -11,10 +12,10 @@ CustomRect {
 	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
 	readonly property int textWidth: Math.min(metrics.width, 200)
 
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
-	implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2
-	radius: Appearance.rounding.full
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Tokens.padding.smallest * 2
+	implicitWidth: layout.implicitWidth + Tokens.padding.normal * 2
+	radius: Tokens.rounding.full
 
 	Behavior on implicitWidth {
 		Anim {
@@ -40,8 +41,8 @@ CustomRect {
 
 		MaterialIcon {
 			animate: true
-			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
-			font.pointSize: Appearance.font.size.larger
+			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
+			font.pointSize: Tokens.font.size.larger
 			text: Players.active?.isPlaying ? "music_note" : "music_off"
 		}
 
@@ -50,8 +51,8 @@ CustomRect {
 
 			Layout.preferredWidth: root.textWidth
 			animate: true
-			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
-			font.pointSize: Appearance.font.size.normal
+			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
+			font.pointSize: Tokens.font.size.normal
 			horizontalAlignment: Text.AlignHCenter
 			marqueeEnabled: false
 			pauseMs: 4000

Modules/Network/NetworkPopout.qml

@@ -5,7 +5,7 @@ import Quickshell.Networking
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules
 import qs.Helpers as Helpers
 

Modules/NotifBell.qml

@@ -1,8 +1,9 @@
 import Quickshell
 import QtQuick
-import qs.Config
+import ZShell.Config
 import qs.Daemons
 import qs.Components
+import qs.Services
 
 CustomRect {
 	id: root
@@ -10,19 +11,19 @@ CustomRect {
 	required property Wrapper popouts
 	required property PersistentProperties visibilities
 
-	color: visibilities.sidebar ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	color: visibilities.sidebar ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Tokens.padding.smallest * 2
 	implicitWidth: implicitHeight
-	radius: Appearance.rounding.full
+	radius: Tokens.rounding.full
 
 	MaterialIcon {
 		id: notificationCenterIcon
 
 		anchors.centerIn: parent
-		color: root.visibilities.sidebar ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		color: root.visibilities.sidebar ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 		fill: root.visibilities.sidebar ? 1 : 0
 		font.family: "Material Symbols Rounded"
-		font.pointSize: Appearance.font.size.larger
+		font.pointSize: Tokens.font.size.larger
 		text: NotifServer.list.length ? "\uf4fe" : "\ue7f4"
 
 		Behavior on color {
@@ -36,7 +37,7 @@ CustomRect {
 	}
 
 	StateLayer {
-		color: root.visibilities.sidebar ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		color: root.visibilities.sidebar ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 
 		onClicked: {
 			root.visibilities.sidebar = !root.visibilities.sidebar;

Modules/Notifications/Content.qml

@@ -4,14 +4,14 @@ import Quickshell
 import Quickshell.Widgets
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Daemons
 import qs.Helpers
 
 Item {
 	id: root
 
-	readonly property int padding: Appearance.padding.smaller
+	readonly property int padding: Tokens.padding.smaller
 	required property Item panels
 	required property PersistentProperties visibilities
 
@@ -23,7 +23,7 @@ Item {
 		if (count === 0)
 			return 0;
 
-		let height = (count - 1) * Appearance.spacing.small;
+		let height = (count - 1) * Tokens.spacing.small;
 		for (let i = 0; i < count; i++)
 			height += (list.itemAtIndex(i) as NotifWrapper)?.nonAnimHeight ?? 0;
 
@@ -31,13 +31,13 @@ Item {
 			return 0;
 
 		if (visibilities.osd) {
-			const h = panels.osd.y - Appearance.spacing.small * 2 - padding * 2;
+			const h = panels.osd.y - Tokens.spacing.small * 2 - padding * 2;
 			if (height > h)
 				height = h;
 		}
 
 		if (visibilities.session) {
-			const h = panels.session.y - Appearance.spacing.small * 2 - padding * 2;
+			const h = panels.session.y - Tokens.spacing.small * 2 - padding * 2;
 			if (height > h)
 				height = h;
 		}
@@ -55,7 +55,7 @@ Item {
 		anchors.fill: parent
 		anchors.margins: root.padding
 		color: "transparent"
-		radius: Appearance.rounding.normal - root.padding
+		radius: Tokens.rounding.normal - root.padding
 
 		CustomListView {
 			id: list
@@ -92,8 +92,8 @@ Item {
 	}
 
 	component Anim: NumberAnimation {
-		duration: Appearance.anim.durations.expressiveDefaultSpatial
-		easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		duration: Tokens.anim.durations.expressiveDefaultSpatial
+		easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 	}
 	component NotifWrapper: Item {
 		id: wrapper
@@ -103,7 +103,7 @@ Item {
 		required property NotifServer.Notif modelData
 		readonly property alias nonAnimHeight: notif.nonAnimHeight
 
-		implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : Appearance.spacing.small)
+		implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : Tokens.spacing.small)
 		implicitWidth: notif.implicitWidth
 
 		ListView.onRemove: removeAnim.start()
@@ -140,8 +140,6 @@ Item {
 			}
 
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
 				property: "x"
 				target: notif
 				to: (notif.x >= 0 ? Config.notifs.sizes.width : -Config.notifs.sizes.width) * 2
@@ -160,7 +158,7 @@ Item {
 			color: "transparent"
 			implicitHeight: notif.implicitHeight
 			implicitWidth: notif.implicitWidth
-			radius: Appearance.rounding.small
+			radius: Tokens.rounding.small
 
 			Notification {
 				id: notif

Modules/Notifications/Notification.qml

@@ -7,8 +7,9 @@ import Quickshell.Services.Notifications
 import ZShell.Components
 import qs.Daemons
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Components
+import qs.Services
 
 CustomRect {
 	id: root
@@ -17,16 +18,16 @@ CustomRect {
 	readonly property bool hasAppIcon: modelData.appIcon.length > 0
 	readonly property bool hasImage: modelData.image.length > 0
 	required property NotifServer.Notif modelData
-	readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? Appearance.spacing.extraSmall * 2 + appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
+	readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? Tokens.spacing.extraSmall * 2 + appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
 
-	color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondaryContainer : DynamicColors.tPalette.m3surfaceContainer
+	color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondaryContainer : Colors.tPalette.m3surfaceContainer
 	implicitHeight: inner.implicitHeight
-	radius: Appearance.rounding.small
+	radius: Tokens.rounding.small
 	x: implicitWidth
 
 	Behavior on x {
 		Anim {
-			easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
+			easing.bezierCurve: Tokens.anim.curves.emphasizedDecel
 		}
 	}
 
@@ -87,7 +88,7 @@ CustomRect {
 			id: inner
 
 			anchors.left: parent.left
-			anchors.margins: Appearance.padding.normal
+			anchors.margins: Tokens.padding.normal
 			anchors.right: parent.right
 			anchors.top: parent.top
 			implicitHeight: root.nonAnimHeight
@@ -109,10 +110,10 @@ CustomRect {
 				width: Config.notifs.sizes.image
 
 				sourceComponent: CustomClippingRect {
-					color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2) : DynamicColors.palette.m3secondaryContainer
+					color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colors.layer(Colors.palette.m3surfaceContainerHighest, 2) : Colors.palette.m3secondaryContainer
 					implicitHeight: Config.notifs.sizes.image
 					implicitWidth: Config.notifs.sizes.image
-					radius: Appearance.rounding.full
+					radius: Tokens.rounding.full
 
 					Image {
 						anchors.fill: parent
@@ -139,10 +140,10 @@ CustomRect {
 				asynchronous: true
 
 				sourceComponent: CustomRect {
-					color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2) : DynamicColors.palette.m3secondaryContainer
+					color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colors.layer(Colors.palette.m3surfaceContainerHighest, 2) : Colors.palette.m3secondaryContainer
 					implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
 					implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
-					radius: Appearance.rounding.full
+					radius: Tokens.rounding.full
 
 					Loader {
 						id: icon
@@ -155,7 +156,7 @@ CustomRect {
 
 						sourceComponent: ColoredIcon {
 							anchors.fill: parent
-							color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer
+							color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
 							layer.enabled: root.modelData.appIcon.endsWith("symbolic")
 							source: Quickshell.iconPath(root.modelData.appIcon)
 						}
@@ -168,7 +169,7 @@ CustomRect {
 						asynchronous: true
 
 						sourceComponent: MaterialIcon {
-							color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer
+							color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
 							text: Icons.getNotifIcon(root.modelData.summary, root.modelData.urgency)
 						}
 					}
@@ -188,7 +189,7 @@ CustomRect {
 
 					capStyle: ShapePath.RoundCap
 					fillColor: "transparent"
-					strokeColor: DynamicColors.palette.m3primary
+					strokeColor: Colors.palette.m3primary
 					strokeWidth: 2
 
 					PathAngleArc {
@@ -196,14 +197,14 @@ CustomRect {
 
 						centerX: progressIndicator.width / 2
 						centerY: progressIndicator.height / 2
-						radiusX: progressIndicator.width / 2 - Appearance.padding.extraSmall / 2
-						radiusY: progressIndicator.height / 2 - Appearance.padding.extraSmall / 2
+						radiusX: progressIndicator.width / 2 - Tokens.padding.extraSmall / 2
+						radiusY: progressIndicator.height / 2 - Tokens.padding.extraSmall / 2
 						startAngle: -90
 						sweepAngle: ((root.modelData.hints.value ?? 0) / 100) * 360
 
 						Behavior on sweepAngle {
 							Anim {
-								easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
+								easing.bezierCurve: Tokens.anim.curves.emphasizedDecel
 							}
 						}
 					}
@@ -214,10 +215,10 @@ CustomRect {
 				id: appName
 
 				anchors.left: image.right
-				anchors.leftMargin: Appearance.spacing.small
+				anchors.leftMargin: Tokens.spacing.small
 				anchors.top: parent.top
 				animate: true
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				maximumLineCount: 1
 				opacity: root.expanded ? 1 : 0
 				text: appNameMetrics.elidedText
@@ -233,7 +234,7 @@ CustomRect {
 				id: appNameMetrics
 
 				elide: Text.ElideRight
-				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Appearance.spacing.small * 3
+				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Tokens.spacing.small * 3
 				font: appName.font
 				text: root.modelData.appName
 			}
@@ -242,10 +243,10 @@ CustomRect {
 				id: summary
 
 				anchors.left: image.right
-				anchors.leftMargin: Appearance.spacing.small
+				anchors.leftMargin: Tokens.spacing.small
 				anchors.top: parent.top
 				animate: true
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				height: implicitHeight
 				maximumLineCount: 1
 				text: summaryMetrics.elidedText
@@ -259,9 +260,9 @@ CustomRect {
 					when: root.expanded
 
 					PropertyChanges {
-						body.anchors.topMargin: Appearance.spacing.extraSmall
-						bodyPreview.anchors.topMargin: Appearance.spacing.extraSmall
-						summary.anchors.topMargin: Appearance.spacing.extraSmall
+						body.anchors.topMargin: Tokens.spacing.extraSmall
+						bodyPreview.anchors.topMargin: Tokens.spacing.extraSmall
+						summary.anchors.topMargin: Tokens.spacing.extraSmall
 						summary.maximumLineCount: undefined
 					}
 
@@ -289,7 +290,7 @@ CustomRect {
 				id: summaryMetrics
 
 				elide: Text.ElideRight
-				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Appearance.spacing.small * 3
+				elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Tokens.spacing.small * 3
 				font: summary.font
 				text: root.modelData.summary
 			}
@@ -298,9 +299,9 @@ CustomRect {
 				id: timeSep
 
 				anchors.left: summary.right
-				anchors.leftMargin: Appearance.spacing.small
+				anchors.leftMargin: Tokens.spacing.small
 				anchors.top: parent.top
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				text: "•"
 
 				states: State {
@@ -322,11 +323,11 @@ CustomRect {
 				id: time
 
 				anchors.left: timeSep.right
-				anchors.leftMargin: Appearance.spacing.small
+				anchors.leftMargin: Tokens.spacing.small
 				anchors.top: parent.top
 				animate: true
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.small
+				color: Colors.palette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.small
 				horizontalAlignment: Text.AlignLeft
 				text: root.modelData.timeStr
 			}
@@ -336,13 +337,13 @@ CustomRect {
 
 				anchors.right: parent.right
 				anchors.top: parent.top
-				anchors.topMargin: -Appearance.padding.extraSmall
+				anchors.topMargin: -Tokens.padding.extraSmall
 				implicitHeight: expandIcon.implicitHeight
 				implicitWidth: expandIcon.implicitHeight
 
 				StateLayer {
-					color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-					radius: Appearance.rounding.full
+					color: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurface
+					radius: Tokens.rounding.full
 
 					onClicked: root.expanded = !root.expanded
 				}
@@ -371,11 +372,11 @@ CustomRect {
 
 				anchors.left: summary.left
 				anchors.right: expandBtn.left
-				anchors.rightMargin: Appearance.spacing.small
+				anchors.rightMargin: Tokens.spacing.small
 				anchors.top: summary.bottom
 				animate: true
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.small
+				color: Colors.palette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.small
 				opacity: root.expanded ? 0 : 1
 				text: bodyPreviewMetrics.elidedText
 				textFormat: Text.MarkdownText
@@ -401,10 +402,10 @@ CustomRect {
 
 				anchors.left: summary.left
 				anchors.right: expandBtn.left
-				anchors.rightMargin: Appearance.spacing.small
+				anchors.rightMargin: Tokens.spacing.small
 				anchors.top: summary.bottom
 				animate: true
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				height: text ? implicitHeight : 0
 				opacity: root.expanded ? 1 : 0
 				text: root.modelData.body
@@ -432,9 +433,9 @@ CustomRect {
 				anchors.left: parent.left
 				anchors.right: parent.right
 				anchors.top: body.bottom
-				anchors.topMargin: Appearance.spacing.small
+				anchors.topMargin: Tokens.spacing.small
 				opacity: root.expanded ? 1 : 0
-				spacing: Appearance.spacing.extraSmall
+				spacing: Tokens.spacing.extraSmall
 
 				Behavior on opacity {
 					Anim {
@@ -446,10 +447,10 @@ CustomRect {
 					enabled: root.expanded
 					fillWidth: root.modelData.actions.length === 0
 					icon: "close"
-					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
-					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurfaceVariant
+					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
+					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
 					isRound: true
-					padding: Appearance.padding.extraSmall
+					padding: Tokens.padding.extraSmall
 					shapeMorph: true
 
 					onClicked: root.modelData.close()
@@ -465,16 +466,16 @@ CustomRect {
 						fillWidth: true
 						font: {
 							const f = Qt.font(font);
-							f.pointSize = Appearance.font.size.small;
+							f.pointSize = Tokens.font.size.small;
 							return f;
 						}
 						implicitWidth: label.implicitWidth
-						inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
-						inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurfaceVariant
+						inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
+						inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
 						isRound: true
 						label.anchors.centerIn: undefined
 						label.anchors.left: left
-						label.anchors.margins: Appearance.padding.normal
+						label.anchors.margins: Tokens.padding.normal
 						label.anchors.right: right
 						label.anchors.verticalCenter: verticalCenter
 						label.elide: Text.ElideRight
@@ -490,11 +491,11 @@ CustomRect {
 					enabled: root.expanded
 					fillWidth: root.modelData.actions.length === 0
 					icon: copyTimer.running ? "inventory" : "content_copy"
-					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
-					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurfaceVariant
+					inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
+					inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
 					isRound: true
 					label.animate: true
-					padding: Appearance.padding.extraSmall
+					padding: Tokens.padding.extraSmall
 					shapeMorph: true
 
 					onClicked: {

Modules/Notifications/Sidebar/Content.qml

@@ -1,7 +1,8 @@
 import qs.Components
-import qs.Config
+import ZShell.Config
 import QtQuick
 import QtQuick.Layouts
+import qs.Services
 
 Item {
 	id: root
@@ -13,13 +14,13 @@ Item {
 		id: layout
 
 		anchors.fill: parent
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		CustomRect {
 			Layout.fillHeight: true
 			Layout.fillWidth: true
-			color: DynamicColors.tPalette.m3surfaceContainerLow
-			radius: Appearance.rounding.smallest
+			color: Colors.tPalette.m3surfaceContainerLow
+			radius: Tokens.rounding.smallest
 
 			NotifDock {
 				props: root.props
@@ -29,8 +30,8 @@ Item {
 
 		CustomRect {
 			Layout.fillWidth: true
-			Layout.topMargin: Appearance.padding.normal - layout.spacing
-			color: DynamicColors.tPalette.m3outlineVariant
+			Layout.topMargin: Tokens.padding.normal - layout.spacing
+			color: Colors.tPalette.m3outlineVariant
 			implicitHeight: 1
 		}
 	}

Modules/Notifications/Sidebar/Notif.qml

@@ -1,12 +1,13 @@
 pragma ComponentBehavior: Bound
 
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Daemons
 import qs.Modules
 import Quickshell
 import QtQuick
 import QtQuick.Layouts
+import qs.Services
 
 CustomRect {
 	id: root
@@ -19,7 +20,7 @@ CustomRect {
 	required property var visibilities
 
 	color: {
-		const c = root.modelData?.urgency === "critical" ? DynamicColors.palette.m3secondaryContainer : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
+		const c = root.modelData?.urgency === "critical" ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2);
 		return expanded ? c : Qt.alpha(c, 0);
 	}
 	implicitHeight: nonAnimHeight
@@ -28,8 +29,6 @@ CustomRect {
 
 	Behavior on implicitHeight {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
-			easing.bezierCurve: MaterialEasing.expressiveEffects
 		}
 	}
 	states: State {
@@ -63,7 +62,7 @@ CustomRect {
 
 		anchors.left: parent.left
 		anchors.top: parent.top
-		color: root.modelData?.urgency === "critical" ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+		color: root.modelData?.urgency === "critical" ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurface
 		elide: Text.ElideRight
 		maximumLineCount: 1
 		text: root.modelData?.summary ?? ""
@@ -90,7 +89,7 @@ CustomRect {
 		shouldBeActive: !root.expanded
 
 		sourceComponent: CustomText {
-			color: root.modelData?.urgency === "critical" ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3outline
+			color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3outline
 			elide: Text.ElideRight
 			text: String(root.modelData?.body ?? "").replace(/\n/g, " ")
 			textFormat: Text.StyledText
@@ -106,7 +105,7 @@ CustomRect {
 
 		sourceComponent: CustomText {
 			animate: true
-			color: DynamicColors.palette.m3outline
+			color: Colors.palette.m3outline
 			font.pointSize: 11
 			text: root.modelData?.timeStr ?? ""
 		}
@@ -130,7 +129,7 @@ CustomRect {
 				id: body
 
 				Layout.fillWidth: true
-				color: root.modelData?.urgency === "critical" ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3onSurface
+				color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3onSurface
 				text: String(root.modelData?.body ?? "").replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body given")
 				textFormat: Text.MarkdownText
 				wrapMode: Text.WordWrap

Modules/Notifications/Sidebar/NotifActionList.qml

@@ -1,13 +1,14 @@
 pragma ComponentBehavior: Bound
 
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules
 import qs.Daemons
 import Quickshell
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import qs.Services
 
 Item {
 	id: root
@@ -49,21 +50,17 @@ Item {
 					Layout.fillHeight: true
 					Layout.fillWidth: true
 					Layout.preferredWidth: implicitWidth + (actionStateLayer.pressed ? 18 : 0)
-					color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 4)
+					color: Colors.layer(Colors.palette.m3surfaceContainerHighest, 4)
 					implicitHeight: actionInner.implicitHeight + 5 * 2
 					implicitWidth: actionInner.implicitWidth + 5 * 2
 					radius: actionStateLayer.pressed ? 6 / 2 : 6
 
 					Behavior on Layout.preferredWidth {
 						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
-							easing.bezierCurve: MaterialEasing.expressiveEffects
 						}
 					}
 					Behavior on radius {
 						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
-							easing.bezierCurve: MaterialEasing.expressiveEffects
 						}
 					}
 
@@ -105,7 +102,7 @@ Item {
 
 						MaterialIcon {
 							animate: action.modelData.isCopy ?? false
-							color: DynamicColors.palette.m3onSurfaceVariant
+							color: Colors.palette.m3onSurfaceVariant
 							text: action.modelData.isCopy ? "content_copy" : "close"
 						}
 					}
@@ -122,7 +119,7 @@ Item {
 						id: textComp
 
 						CustomText {
-							color: DynamicColors.palette.m3onSurfaceVariant
+							color: Colors.palette.m3onSurfaceVariant
 							text: action.modelData.text
 						}
 					}

Modules/Notifications/Sidebar/NotifDock.qml

@@ -1,13 +1,14 @@
 pragma ComponentBehavior: Bound
 
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules
 import qs.Daemons
 import Quickshell
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import qs.Services
 
 Item {
 	id: root
@@ -17,7 +18,7 @@ Item {
 	required property var visibilities
 
 	anchors.fill: parent
-	anchors.margins: Appearance.padding.normal
+	anchors.margins: Tokens.padding.normal
 
 	Component.onCompleted: NotifServer.list.forEach(n => n.popup = false)
 
@@ -36,7 +37,7 @@ Item {
 			anchors.left: parent.left
 			anchors.leftMargin: root.notifCount > 0 ? 0 : -width - titleText.anchors.leftMargin
 			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.palette.m3outline
+			color: Colors.palette.m3outline
 			font.family: "CaskaydiaCove NF"
 			font.pointSize: 13
 			font.weight: 500
@@ -60,7 +61,7 @@ Item {
 			anchors.leftMargin: 7
 			anchors.right: parent.right
 			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.palette.m3outline
+			color: Colors.palette.m3outline
 			elide: Text.ElideRight
 			font.family: "CaskaydiaCove NF"
 			font.pointSize: 13
@@ -87,7 +88,6 @@ Item {
 
 			Behavior on opacity {
 				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
 				}
 			}
 			sourceComponent: ColumnLayout {
@@ -95,7 +95,7 @@ Item {
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
-					color: DynamicColors.palette.m3outlineVariant
+					color: Colors.palette.m3outlineVariant
 					font.family: "CaskaydiaCove NF"
 					font.pointSize: 18
 					font.weight: 500
@@ -156,20 +156,17 @@ Item {
 	Loader {
 		active: opacity > 0
 		anchors.bottom: parent.bottom
-		anchors.margins: Appearance.padding.normal
+		anchors.margins: Tokens.padding.normal
 		anchors.right: parent.right
 		opacity: root.notifCount > 0 ? 1 : 0
 		scale: root.notifCount > 0 ? 1 : 0.5
 
 		Behavior on opacity {
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
 			}
 		}
 		Behavior on scale {
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
 			}
 		}
 		sourceComponent: IconButton {
@@ -178,7 +175,7 @@ Item {
 			font.pointSize: Math.round(18 * 1.2)
 			icon: "clear_all"
 			padding: 8
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			onClicked: clearTimer.start()
 

Modules/Notifications/Sidebar/NotifDockList.qml

@@ -4,7 +4,7 @@ import Quickshell
 import QtQuick
 import ZShell.Components
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules
 import qs.Daemons
 
@@ -21,8 +21,8 @@ LazyListView {
 	cacheBuffer: 400
 	implicitHeight: contentHeight
 	readyDelay: 1
-	removeDuration: Appearance.anim.durations.normal
-	spacing: Appearance.spacing.small
+	removeDuration: Tokens.anim.durations.normal
+	spacing: Tokens.spacing.small
 	useCustomViewport: true
 	viewport: Qt.rect(0, container.contentY, width, container.height)
 
@@ -59,22 +59,22 @@ LazyListView {
 			}
 			Behavior on scale {
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 				}
 			}
 			Behavior on x {
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 				}
 			}
 			Behavior on y {
 				enabled: notif.LazyListView.ready
 
 				Anim {
-					duration: Appearance.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+					duration: Tokens.anim.durations.expressiveDefaultSpatial
+					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 				}
 			}
 
@@ -153,8 +153,8 @@ LazyListView {
 	Anim {
 		id: contentYAnim
 
-		duration: Appearance.anim.durations.expressiveDefaultSpatial
-		easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		duration: Tokens.anim.durations.expressiveDefaultSpatial
+		easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 		property: "contentY"
 		target: root.container
 	}

Modules/Notifications/Sidebar/NotifGroup.qml

@@ -1,7 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules
 import qs.Daemons
 import qs.Helpers
@@ -9,6 +9,7 @@ import Quickshell
 import Quickshell.Services.Notifications
 import QtQuick
 import QtQuick.Layouts
+import qs.Services
 
 CustomRect {
 	id: root
@@ -41,9 +42,9 @@ CustomRect {
 	anchors.left: parent?.left
 	anchors.right: parent?.right
 	clip: true
-	color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+	color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
 	implicitHeight: content.implicitHeight + 10 * 2
-	radius: Appearance.rounding.smallest
+	radius: Tokens.rounding.smallest
 
 	Component.onDestruction: {
 		if (notifCount === 0 && expanded)
@@ -91,7 +92,7 @@ CustomRect {
 				id: materialIconComp
 
 				MaterialIcon {
-					color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : root.urgency === NotificationUrgency.Low ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer
+					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
 					font.pointSize: 18
 					text: Icons.getNotifIcon(root.notifs[0]?.summary, root.urgency)
 				}
@@ -99,8 +100,8 @@ CustomRect {
 
 			CustomClippingRect {
 				anchors.fill: parent
-				color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3error : root.urgency === NotificationUrgency.Low ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 3) : DynamicColors.palette.m3secondaryContainer
-				radius: Appearance.rounding.full
+				color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.urgency === NotificationUrgency.Low ? Colors.layer(Colors.palette.m3surfaceContainerHigh, 3) : Colors.palette.m3secondaryContainer
+				radius: Tokens.rounding.full
 
 				Loader {
 					anchors.centerIn: parent
@@ -114,10 +115,10 @@ CustomRect {
 				anchors.right: parent.right
 
 				sourceComponent: CustomRect {
-					color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3error : root.urgency === NotificationUrgency.Low ? DynamicColors.palette.m3surfaceContainerHigh : DynamicColors.palette.m3secondaryContainer
+					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.urgency === NotificationUrgency.Low ? Colors.palette.m3surfaceContainerHigh : Colors.palette.m3secondaryContainer
 					implicitHeight: Config.notifs.sizes.badge
 					implicitWidth: Config.notifs.sizes.badge
-					radius: Appearance.rounding.full
+					radius: Tokens.rounding.full
 
 					CustomIcon {
 						anchors.centerIn: parent
@@ -151,7 +152,7 @@ CustomRect {
 
 				CustomText {
 					Layout.fillWidth: true
-					color: DynamicColors.palette.m3onSurfaceVariant
+					color: Colors.palette.m3onSurfaceVariant
 					elide: Text.ElideRight
 					font.pointSize: 11
 					text: root.modelData
@@ -159,19 +160,19 @@ CustomRect {
 
 				CustomText {
 					animate: true
-					color: DynamicColors.palette.m3outline
+					color: Colors.palette.m3outline
 					font.pointSize: 11
 					text: root.notifs.find(n => !n.closed)?.timeStr ?? ""
 				}
 
 				CustomRect {
-					color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3error : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 3)
-					implicitHeight: groupCount.implicitHeight + Appearance.padding.small
+					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : Colors.layer(Colors.palette.m3surfaceContainerHigh, 3)
+					implicitHeight: groupCount.implicitHeight + Tokens.padding.small
 					implicitWidth: expandBtn.implicitWidth + 7 * 2
-					radius: Appearance.rounding.full
+					radius: Tokens.rounding.full
 
 					StateLayer {
-						color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
+						color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface
 
 						onClicked: {
 							root.toggleExpand(!root.expanded);
@@ -189,7 +190,7 @@ CustomRect {
 
 							Layout.leftMargin: 10 / 2
 							animate: true
-							color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
+							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface
 							font.pointSize: 11
 							text: root.notifCount
 						}
@@ -197,20 +198,16 @@ CustomRect {
 						MaterialIcon {
 							Layout.rightMargin: -10 / 2
 							// Layout.topMargin: root.expanded ? -Math.floor(7 / 2) : 0
-							color: root.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onSurface
+							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface
 							rotation: root.expanded ? 180 : 0
 							text: "expand_more"
 
 							Behavior on Layout.topMargin {
 								Anim {
-									duration: MaterialEasing.expressiveEffectsTime
-									easing.bezierCurve: MaterialEasing.expressiveEffects
 								}
 							}
 							Behavior on rotation {
 								Anim {
-									duration: MaterialEasing.expressiveEffectsTime
-									easing.bezierCurve: MaterialEasing.expressiveEffects
 								}
 							}
 						}

Modules/Notifications/Sidebar/NotifGroupList.qml

@@ -5,7 +5,7 @@ import QtQuick
 import QtQuick.Layouts
 import ZShell.Components
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Modules
 import qs.Daemons
 
@@ -25,8 +25,8 @@ LazyListView {
 	cacheBuffer: 400
 	implicitHeight: contentHeight
 	readyDelay: 1
-	removeDuration: Appearance.anim.durations.normal
-	spacing: Math.round(Appearance.spacing.small / 2)
+	removeDuration: Tokens.anim.durations.normal
+	spacing: Math.round(Tokens.spacing.small / 2)
 	useCustomViewport: true
 	viewport: {
 		tWatcher.transform; // mapToItem is not reactive so use this to trigger updates
@@ -64,16 +64,12 @@ LazyListView {
 			}
 			Behavior on x {
 				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
 				}
 			}
 			Behavior on y {
 				enabled: notif.LazyListView.ready
 
 				Anim {
-					duration: MaterialEasing.expressiveEffectsTime
-					easing.bezierCurve: MaterialEasing.expressiveEffects
 				}
 			}
 

Modules/Notifications/Sidebar/Utils/Background.qml

@@ -1,7 +1,8 @@
 import qs.Components
-import qs.Config
+import ZShell.Config
 import QtQuick
 import QtQuick.Shapes
+import qs.Services
 
 ShapePath {
 	id: root
@@ -12,7 +13,7 @@ ShapePath {
 	required property var sidebar
 	required property Wrapper wrapper
 
-	fillColor: DynamicColors.palette.m3surface
+	fillColor: Colors.palette.m3surface
 	strokeWidth: -1
 
 	Behavior on fillColor {

Modules/Notifications/Sidebar/Utils/Cards/Record.qml

@@ -4,8 +4,9 @@ import Quickshell
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
+import qs.Services
 
 CustomRect {
 	id: root
@@ -14,29 +15,29 @@ CustomRect {
 	required property PersistentProperties visibilities
 
 	Layout.fillWidth: true
-	color: DynamicColors.tPalette.m3surfaceContainer
+	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
-	radius: Appearance.rounding.smallest
+	radius: Tokens.rounding.smallest
 
 	ColumnLayout {
 		id: layout
 
 		anchors.fill: parent
-		anchors.margins: Appearance.padding.large
-		spacing: Appearance.spacing.normal
+		anchors.margins: Tokens.padding.large
+		spacing: Tokens.spacing.normal
 
 		RowLayout {
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 			z: 1
 
 			CustomRect {
-				color: Recorder.running ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3secondaryContainer
+				color: Recorder.running ? Colors.palette.m3secondary : Colors.palette.m3secondaryContainer
 				implicitHeight: {
-					const h = icon.implicitHeight + Appearance.padding.smaller * 2;
+					const h = icon.implicitHeight + Tokens.padding.smaller * 2;
 					return h - (h % 2);
 				}
 				implicitWidth: implicitHeight
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 
 				MaterialIcon {
 					id: icon
@@ -44,8 +45,8 @@ CustomRect {
 					anchors.centerIn: parent
 					anchors.horizontalCenterOffset: -0.5
 					anchors.verticalCenterOffset: 1.5
-					color: Recorder.running ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSecondaryContainer
-					font.pointSize: Appearance.font.size.large
+					color: Recorder.running ? Colors.palette.m3onSecondary : Colors.palette.m3onSecondaryContainer
+					font.pointSize: Tokens.font.size.large
 					text: "screen_record"
 				}
 			}
@@ -57,15 +58,15 @@ CustomRect {
 				CustomText {
 					Layout.fillWidth: true
 					elide: Text.ElideRight
-					font.pointSize: Appearance.font.size.normal
+					font.pointSize: Tokens.font.size.normal
 					text: qsTr("Screen Recorder")
 				}
 
 				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: Recorder.paused ? qsTr("Recording paused") : Recorder.running ? qsTr("Recording running") : qsTr("Recording off")
 				}
 			}
@@ -132,16 +133,16 @@ CustomRect {
 				SequentialAnimation {
 					ParallelAnimation {
 						Anim {
-							duration: Appearance.anim.durations.small
-							easing.bezierCurve: Appearance.anim.curves.standardAccel
+							duration: Tokens.anim.durations.small
+							easing.bezierCurve: Tokens.anim.curves.standardAccel
 							property: "scale"
 							target: listOrControls
 							to: 0.7
 						}
 
 						Anim {
-							duration: Appearance.anim.durations.small
-							easing.bezierCurve: Appearance.anim.curves.standardAccel
+							duration: Tokens.anim.durations.small
+							easing.bezierCurve: Tokens.anim.curves.standardAccel
 							property: "opacity"
 							target: listOrControls
 							to: 0
@@ -165,16 +166,16 @@ CustomRect {
 
 					ParallelAnimation {
 						Anim {
-							duration: Appearance.anim.durations.small
-							easing.bezierCurve: Appearance.anim.curves.standardDecel
+							duration: Tokens.anim.durations.small
+							easing.bezierCurve: Tokens.anim.curves.standardDecel
 							property: "scale"
 							target: listOrControls
 							to: 1
 						}
 
 						Anim {
-							duration: Appearance.anim.durations.small
-							easing.bezierCurve: Appearance.anim.curves.standardDecel
+							duration: Tokens.anim.durations.small
+							easing.bezierCurve: Tokens.anim.curves.standardDecel
 							property: "opacity"
 							target: listOrControls
 							to: 1
@@ -198,13 +199,13 @@ CustomRect {
 		id: recordingControls
 
 		RowLayout {
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			CustomRect {
-				color: Recorder.paused ? DynamicColors.palette.m3tertiary : DynamicColors.palette.m3error
-				implicitHeight: recText.implicitHeight + Appearance.padding.smaller * 2
-				implicitWidth: recText.implicitWidth + Appearance.padding.normal * 2
-				radius: Appearance.rounding.full
+				color: Recorder.paused ? Colors.palette.m3tertiary : Colors.palette.m3error
+				implicitHeight: recText.implicitHeight + Tokens.padding.smaller * 2
+				implicitWidth: recText.implicitWidth + Tokens.padding.normal * 2
+				radius: Tokens.rounding.full
 
 				Behavior on implicitWidth {
 					Anim {
@@ -216,15 +217,15 @@ CustomRect {
 					running: !Recorder.paused
 
 					Anim {
-						duration: Appearance.anim.durations.large
-						easing.bezierCurve: Appearance.anim.curves.emphasizedAccel
+						duration: Tokens.anim.durations.large
+						easing.bezierCurve: Tokens.anim.curves.emphasizedAccel
 						from: 1
 						to: 0
 					}
 
 					Anim {
-						duration: Appearance.anim.durations.extraLarge
-						easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
+						duration: Tokens.anim.durations.extraLarge
+						easing.bezierCurve: Tokens.anim.curves.emphasizedDecel
 						from: 0
 						to: 1
 					}
@@ -235,14 +236,14 @@ CustomRect {
 
 					anchors.centerIn: parent
 					animate: true
-					color: Recorder.paused ? DynamicColors.palette.m3onTertiary : DynamicColors.palette.m3onError
+					color: Recorder.paused ? Colors.palette.m3onTertiary : Colors.palette.m3onError
 					font.family: Appearance.font.family.mono
 					text: Recorder.paused ? "PAUSED" : "REC"
 				}
 			}
 
 			CustomText {
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				text: {
 					const elapsed = Recorder.elapsed;
 
@@ -266,7 +267,7 @@ CustomRect {
 
 			IconButton {
 				checked: Recorder.paused
-				font.pointSize: Appearance.font.size.large
+				font.pointSize: Tokens.font.size.large
 				icon: Recorder.paused ? "play_arrow" : "pause"
 				isToggle: true
 				label.animate: true
@@ -279,10 +280,10 @@ CustomRect {
 			}
 
 			IconButton {
-				font.pointSize: Appearance.font.size.large
+				font.pointSize: Tokens.font.size.large
 				icon: "stop"
-				inactiveColor: DynamicColors.palette.m3error
-				inactiveOnColor: DynamicColors.palette.m3onError
+				inactiveColor: Colors.palette.m3error
+				inactiveOnColor: Colors.palette.m3onError
 
 				onClicked: Recorder.stop()
 			}

Modules/Notifications/Sidebar/Utils/Cards/RecordingList.qml

@@ -8,7 +8,8 @@ import ZShell.Models
 import qs.Components
 import qs.Helpers
 import qs.Paths
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ColumnLayout {
 	id: root
@@ -25,18 +26,18 @@ ColumnLayout {
 		onClicked: root.props.recordingListExpanded = !root.props.recordingListExpanded
 
 		RowLayout {
-			spacing: Appearance.spacing.smaller
+			spacing: Tokens.spacing.smaller
 
 			MaterialIcon {
 				Layout.alignment: Qt.AlignVCenter
-				font.pointSize: Appearance.font.size.large
+				font.pointSize: Tokens.font.size.large
 				text: "list"
 			}
 
 			CustomText {
 				Layout.alignment: Qt.AlignVCenter
 				Layout.fillWidth: true
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				text: qsTr("Recordings")
 			}
 
@@ -54,9 +55,9 @@ ColumnLayout {
 		id: list
 
 		Layout.fillWidth: true
-		Layout.rightMargin: -Appearance.spacing.small
+		Layout.rightMargin: -Tokens.spacing.small
 		clip: true
-		implicitHeight: (Appearance.font.size.larger + Appearance.padding.small) * (root.props.recordingListExpanded ? 10 : 3)
+		implicitHeight: (Tokens.font.size.larger + Tokens.padding.small) * (root.props.recordingListExpanded ? 10 : 3)
 
 		CustomScrollBar.vertical: CustomScrollBar {
 			flickable: list
@@ -82,15 +83,15 @@ ColumnLayout {
 
 			anchors.left: list.contentItem.left
 			anchors.right: list.contentItem.right
-			anchors.rightMargin: Appearance.spacing.small
-			spacing: Appearance.spacing.small / 2
+			anchors.rightMargin: Tokens.spacing.small
+			spacing: Tokens.spacing.small / 2
 
 			Component.onCompleted: baseName = modelData.baseName
 
 			CustomText {
 				Layout.fillWidth: true
-				Layout.rightMargin: Appearance.spacing.small / 2
-				color: DynamicColors.palette.m3onSurfaceVariant
+				Layout.rightMargin: Tokens.spacing.small / 2
+				color: Colors.palette.m3onSurfaceVariant
 				elide: Text.ElideRight
 				text: {
 					const time = recording.baseName;
@@ -165,13 +166,13 @@ ColumnLayout {
 				}
 			}
 			sourceComponent: ColumnLayout {
-				spacing: Appearance.spacing.small
+				spacing: Tokens.spacing.small
 
 				MaterialIcon {
 					Layout.alignment: Qt.AlignHCenter
 					Layout.preferredHeight: root.props.recordingListExpanded ? implicitHeight : 0
-					color: DynamicColors.palette.m3outline
-					font.pointSize: Appearance.font.size.extraLarge
+					color: Colors.palette.m3outline
+					font.pointSize: Tokens.font.size.extraLarge
 					opacity: root.props.recordingListExpanded ? 1 : 0
 					scale: root.props.recordingListExpanded ? 1 : 0
 					text: "scan_delete"
@@ -191,12 +192,12 @@ ColumnLayout {
 				}
 
 				RowLayout {
-					spacing: Appearance.spacing.smaller
+					spacing: Tokens.spacing.smaller
 
 					MaterialIcon {
 						Layout.alignment: Qt.AlignHCenter
 						Layout.preferredWidth: !root.props.recordingListExpanded ? implicitWidth : 0
-						color: DynamicColors.palette.m3outline
+						color: Colors.palette.m3outline
 						opacity: !root.props.recordingListExpanded ? 1 : 0
 						scale: !root.props.recordingListExpanded ? 1 : 0
 						text: "scan_delete"
@@ -216,7 +217,7 @@ ColumnLayout {
 					}
 
 					CustomText {
-						color: DynamicColors.palette.m3outline
+						color: Colors.palette.m3outline
 						text: qsTr("No recordings found")
 					}
 				}

Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml

@@ -4,9 +4,10 @@ import QtQuick
 import QtQuick.Layouts
 import ZShell.Components
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Daemons
+import qs.Services
 
 CustomRect {
 	id: root
@@ -15,16 +16,16 @@ CustomRect {
 	required property var visibilities
 
 	Layout.fillWidth: true
-	color: DynamicColors.tPalette.m3surfaceContainer
+	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + 18 * 2
-	radius: Appearance.rounding.smallest
+	radius: Tokens.rounding.smallest
 
 	ButtonRow {
 		id: layout
 
 		anchors.fill: parent
 		anchors.margins: 18
-		spacing: Appearance.spacing.extraSmall
+		spacing: Tokens.spacing.extraSmall
 
 		Toggle {
 			checked: Network.wifiEnabled

Modules/Notifications/Sidebar/Utils/Content.qml

@@ -2,7 +2,7 @@ import Quickshell
 import QtQuick
 import QtQuick.Layouts
 import qs.Modules.Notifications.Sidebar.Utils.Cards
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root

Modules/Notifications/Sidebar/Utils/IdleInhibit.qml

@@ -1,22 +1,21 @@
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import QtQuick
 import QtQuick.Layouts
+import qs.Services
 
 CustomRect {
 	id: root
 
 	Layout.fillWidth: true
 	clip: true
-	color: DynamicColors.tPalette.m3surfaceContainer
+	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + (IdleInhibitor.enabled ? activeChip.implicitHeight + activeChip.anchors.topMargin : 0) + 18 * 2
-	radius: Appearance.rounding.smallest
+	radius: Tokens.rounding.smallest
 
 	Behavior on implicitHeight {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
-			easing.bezierCurve: MaterialEasing.expressiveEffects
 		}
 	}
 
@@ -30,16 +29,16 @@ CustomRect {
 		spacing: 10
 
 		CustomRect {
-			color: IdleInhibitor.enabled ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3secondaryContainer
+			color: IdleInhibitor.enabled ? Colors.palette.m3secondary : Colors.palette.m3secondaryContainer
 			implicitHeight: icon.implicitHeight + 7 * 2
 			implicitWidth: implicitHeight
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			MaterialIcon {
 				id: icon
 
 				anchors.centerIn: parent
-				color: IdleInhibitor.enabled ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSecondaryContainer
+				color: IdleInhibitor.enabled ? Colors.palette.m3onSecondary : Colors.palette.m3onSecondaryContainer
 				font.pointSize: 18
 				text: "coffee"
 			}
@@ -58,7 +57,7 @@ CustomRect {
 
 			CustomText {
 				Layout.fillWidth: true
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				elide: Text.ElideRight
 				font.pointSize: 11
 				text: IdleInhibitor.enabled ? qsTr("Preventing sleep mode") : qsTr("Normal power management")
@@ -85,13 +84,10 @@ CustomRect {
 
 		Behavior on anchors.bottomMargin {
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
 			}
 		}
 		Behavior on opacity {
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
 			}
 		}
 		Behavior on scale {
@@ -99,16 +95,16 @@ CustomRect {
 			}
 		}
 		sourceComponent: CustomRect {
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			implicitHeight: activeText.implicitHeight + 10 * 2
 			implicitWidth: activeText.implicitWidth + 10 * 2
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			CustomText {
 				id: activeText
 
 				anchors.centerIn: parent
-				color: DynamicColors.palette.m3onPrimary
+				color: Colors.palette.m3onPrimary
 				font.pointSize: Math.round(11 * 0.9)
 				text: qsTr("Active since %1").arg(Qt.formatTime(IdleInhibitor.enabledSince, Config.services.useTwelveHourClock ? "hh:mm a" : "hh:mm"))
 			}

Modules/Notifications/Sidebar/Utils/Wrapper.qml

@@ -1,7 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.Components
-import qs.Config
+import ZShell.Config
 import Quickshell
 import QtQuick
 
@@ -30,8 +30,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
 		}
 	}
 

Modules/Notifications/Sidebar/Wrapper.qml

@@ -1,7 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.Components
-import qs.Config
+import ZShell.Config
 import QtQuick
 
 Item {
@@ -21,8 +21,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
 		}
 	}
 
@@ -37,7 +37,7 @@ Item {
 		anchors.top: parent.top
 
 		sourceComponent: Content {
-			implicitWidth: Config.sidebar.sizes.width - Appearance.padding.smaller * 2
+			implicitWidth: Config.sidebar.sizes.width - Tokens.padding.smaller * 2
 			props: root.props
 			visibilities: root.visibilities
 		}

Modules/Notifications/Wrapper.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root

Modules/Osd/Content.qml

@@ -4,8 +4,9 @@ import QtQuick
 import QtQuick.Layouts
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Daemons
+import qs.Services
 
 Item {
 	id: root
@@ -18,14 +19,14 @@ Item {
 	required property var visibilities
 	required property real volume
 
-	implicitHeight: layout.implicitHeight + Appearance.padding.small * 2
-	implicitWidth: layout.implicitWidth + Appearance.padding.small * 2
+	implicitHeight: layout.implicitHeight + Tokens.padding.small * 2
+	implicitWidth: layout.implicitWidth + Tokens.padding.small * 2
 
 	ColumnLayout {
 		id: layout
 
 		anchors.centerIn: parent
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		// Speaker volume
 		CustomMouseArea {
@@ -41,7 +42,7 @@ Item {
 
 			FilledSlider {
 				anchors.fill: parent
-				color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3secondary
+				color: Audio.muted ? Colors.palette.m3error : Colors.palette.m3secondary
 				icon: Icons.getVolumeIcon(value, root.muted)
 				to: Config.services.maxVolume
 				value: root.volume
@@ -67,7 +68,7 @@ Item {
 
 				FilledSlider {
 					anchors.fill: parent
-					color: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3secondary
+					color: Audio.sourceMuted ? Colors.palette.m3error : Colors.palette.m3secondary
 					icon: Icons.getMicVolumeIcon(value, root.sourceMuted)
 					to: Config.services.maxVolume
 					value: root.sourceVolume
@@ -126,7 +127,7 @@ Item {
 
 		Behavior on Layout.preferredHeight {
 			Anim {
-				easing.bezierCurve: Appearance.anim.curves.emphasized
+				easing.bezierCurve: Tokens.anim.curves.emphasized
 			}
 		}
 		Behavior on opacity {

Modules/Osd/Wrapper.qml

@@ -4,7 +4,7 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
 import qs.Daemons
 
 Item {
@@ -38,8 +38,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
 		}
 	}
 

Modules/Polkit/Polkit.qml

@@ -8,7 +8,8 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import qs.Components
 import qs.Modules
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Scope {
 	id: root
@@ -43,7 +44,6 @@ Scope {
 		Anim {
 			id: openAnim
 
-			duration: MaterialEasing.expressiveEffectsTime
 			property: "opacity"
 			target: inputPanel
 			to: 1
@@ -52,7 +52,6 @@ Scope {
 		Anim {
 			id: closeAnim
 
-			duration: MaterialEasing.expressiveEffectsTime
 			property: "opacity"
 			target: inputPanel
 			to: 0
@@ -78,11 +77,11 @@ Scope {
 			id: inputPanel
 
 			anchors.centerIn: parent
-			color: DynamicColors.tPalette.m3surface
+			color: Colors.tPalette.m3surface
 			implicitHeight: layout.childrenRect.height + 28
 			implicitWidth: layout.childrenRect.width + 32
 			opacity: 0
-			radius: Appearance.rounding.small * 2
+			radius: Tokens.rounding.small * 2
 
 			ColumnLayout {
 				id: layout
@@ -138,7 +137,7 @@ Scope {
 						CustomText {
 							Layout.alignment: Qt.AlignLeft
 							Layout.preferredWidth: Math.min(600, contentWidth)
-							color: DynamicColors.tPalette.m3onSurfaceVariant
+							color: Colors.tPalette.m3onSurfaceVariant
 							font.bold: true
 							font.pointSize: 12
 							text: polkitAgent.flow?.supplementaryMessage || "No Additional Information"
@@ -150,16 +149,16 @@ Scope {
 
 							Layout.preferredHeight: 40
 							Layout.preferredWidth: contentColumn.implicitWidth
-							color: DynamicColors.palette.m3onSurfaceVariant
+							color: Colors.palette.m3onSurfaceVariant
 							echoMode: polkitAgent.flow?.responseVisible ? TextInput.Normal : TextInput.Password
 							placeholderText: polkitAgent.flow?.failed ? " Incorrect Password" : " Input Password"
-							placeholderTextColor: polkitAgent.flow?.failed ? DynamicColors.palette.m3onError : DynamicColors.tPalette.m3onSurfaceVariant
+							placeholderTextColor: polkitAgent.flow?.failed ? Colors.palette.m3onError : Colors.tPalette.m3onSurfaceVariant
 							selectByMouse: true
 
 							background: CustomRect {
-								color: (polkitAgent.flow?.failed && passInput.text === "") ? DynamicColors.palette.m3error : DynamicColors.tPalette.m3surfaceVariant
+								color: (polkitAgent.flow?.failed && passInput.text === "") ? Colors.palette.m3error : Colors.tPalette.m3surfaceVariant
 								implicitHeight: 40
-								radius: Appearance.rounding.smallest
+								radius: Tokens.rounding.smallest
 							}
 
 							onAccepted: okButton.clicked()
@@ -188,7 +187,7 @@ Scope {
 					Layout.fillWidth: true
 					Layout.preferredHeight: implicitHeight
 					clip: true
-					color: DynamicColors.tPalette.m3surfaceContainerLow
+					color: Colors.tPalette.m3surfaceContainerLow
 					implicitHeight: 0
 					radius: 16
 					visible: true
@@ -196,21 +195,18 @@ Scope {
 					Behavior on open {
 						ParallelAnimation {
 							Anim {
-								duration: MaterialEasing.expressiveEffectsTime
 								property: "implicitHeight"
 								target: detailsPanel
 								to: !detailsPanel.open ? textDetailsColumn.childrenRect.height + 16 : 0
 							}
 
 							Anim {
-								duration: MaterialEasing.expressiveEffectsTime
 								property: "opacity"
 								target: textDetailsColumn
 								to: !detailsPanel.open ? 1 : 0
 							}
 
 							Anim {
-								duration: MaterialEasing.expressiveEffectsTime
 								property: "scale"
 								target: textDetailsColumn
 								to: !detailsPanel.open ? 1 : 0.9
@@ -248,8 +244,8 @@ Scope {
 
 						Layout.alignment: Qt.AlignLeft
 						icon: "info"
-						inactiveColor: DynamicColors.palette.m3surfaceContainer
-						inactiveOnColor: DynamicColors.palette.m3onSurface
+						inactiveColor: Colors.palette.m3surfaceContainer
+						inactiveOnColor: Colors.palette.m3onSurface
 						isRound: true
 						shapeMorph: true
 						text: "Details"
@@ -267,16 +263,16 @@ Scope {
 
 					ButtonRow {
 						Layout.alignment: Qt.AlignRight
-						spacing: Appearance.spacing.normal
+						spacing: Tokens.spacing.normal
 
 						IconTextButton {
 							id: okButton
 
 							enabled: passInput.text.length > 0 || !!polkitAgent.flow?.isResponseRequired
-							horizontalPadding: Appearance.padding.large
+							horizontalPadding: Tokens.padding.large
 							icon: "check"
-							inactiveColor: DynamicColors.palette.m3primary
-							inactiveOnColor: DynamicColors.palette.m3onPrimary
+							inactiveColor: Colors.palette.m3primary
+							inactiveOnColor: Colors.palette.m3onPrimary
 							isRound: true
 							isToggle: false
 							shapeMorph: true
@@ -294,10 +290,10 @@ Scope {
 							id: cancelButton
 
 							enabled: passInput.text.length > 0 || !!polkitAgent.flow?.isResponseRequired
-							horizontalPadding: Appearance.padding.large
+							horizontalPadding: Tokens.padding.large
 							icon: "close"
-							inactiveColor: DynamicColors.palette.m3surfaceContainer
-							inactiveOnColor: DynamicColors.palette.m3onSurface
+							inactiveColor: Colors.palette.m3surfaceContainer
+							inactiveOnColor: Colors.palette.m3onSurface
 							isRound: true
 							isToggle: false
 							shapeMorph: true

Modules/Resource.qml

@@ -2,12 +2,13 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Shapes
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 RowLayout {
 	id: root
 
-	property color accentColor: warning ? DynamicColors.palette.m3error : mainColor
+	property color accentColor: warning ? Colors.palette.m3error : mainColor
 	property real animatedPercentage: 0
 	readonly property real arcStartAngle: 0.75 * Math.PI
 	readonly property real arcSweep: 1.5 * Math.PI
@@ -16,12 +17,12 @@ RowLayout {
 	required property color mainColor
 	required property double percentage
 	property bool shown: true
-	property color usageColor: warning ? DynamicColors.palette.m3error : mainColor
+	property color usageColor: warning ? Colors.palette.m3error : mainColor
 	property bool warning: percentage * 100 >= warningThreshold
 	property int warningThreshold: 80
 
 	percentage: 0
-	spacing: Appearance.spacing.smaller
+	spacing: Tokens.spacing.smaller
 
 	Behavior on animatedPercentage {
 		Anim {
@@ -41,15 +42,15 @@ RowLayout {
 
 		Layout.preferredWidth: 16
 		color: root.iconColor
-		font.pointSize: Appearance.font.size.larger
+		font.pointSize: Tokens.font.size.larger
 		text: root.icon
 	}
 
 	CustomClippingRect {
-		Layout.preferredHeight: root.height - Appearance.padding.small
+		Layout.preferredHeight: root.height - Tokens.padding.small
 		Layout.preferredWidth: 4
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-		radius: Appearance.rounding.full
+		color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
+		radius: Tokens.rounding.full
 
 		CustomRect {
 			id: fill

Modules/Resources.qml

@@ -3,10 +3,10 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import QtQuick.Layouts
+import ZShell.Config
 import ZShell.Services
-import qs.Helpers
+import qs.Services
 import qs.Modules
-import qs.Config
 import qs.Components
 
 CustomRect {
@@ -15,13 +15,13 @@ CustomRect {
 	required property PersistentProperties visibilities
 
 	clip: true
-	color: visibilities.resources ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
-	implicitWidth: rowLayout.implicitWidth + Appearance.padding.larger * 2
-	radius: Appearance.rounding.full
+	color: visibilities.resources ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: Config.bar.height + Tokens.padding.smallest * 2
+	implicitWidth: rowLayout.implicitWidth + Tokens.padding.larger * 2
+	radius: Tokens.rounding.full
 
 	StateLayer {
-		color: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+		color: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 
 		onClicked: root.visibilities.resources = !root.visibilities.resources
 	}
@@ -32,7 +32,7 @@ CustomRect {
 		anchors.centerIn: parent
 		anchors.horizontalCenterOffset: -2
 		implicitHeight: root.implicitHeight
-		spacing: Appearance.spacing.smaller
+		spacing: Tokens.spacing.smaller
 
 		ServiceRef {
 			service: Gpu
@@ -50,8 +50,8 @@ CustomRect {
 			Layout.alignment: Qt.AlignVCenter
 			Layout.fillHeight: true
 			icon: "memory"
-			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3primary
 			percentage: Cpu.percentage
 			warningThreshold: 95
 		}
@@ -59,8 +59,8 @@ CustomRect {
 		Resource {
 			Layout.fillHeight: true
 			icon: "memory_alt"
-			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3secondary
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3secondary
 			percentage: Memory.percentage
 			warningThreshold: 80
 		}
@@ -68,16 +68,16 @@ CustomRect {
 		Resource {
 			Layout.fillHeight: true
 			icon: "gamepad"
-			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3tertiary
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3tertiary
 			percentage: Gpu.percentage
 		}
 
 		Resource {
 			Layout.fillHeight: true
 			icon: "developer_board"
-			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3primary
 			percentage: Gpu.memoryUsed / Gpu.memoryTotal
 		}
 	}

Modules/Resources/Cards/BatteryTank.qml

@@ -1,17 +1,18 @@
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.UPower
+import ZShell.Config
 import qs.Components
-import qs.Config
+import qs.Services
 
 CustomClippingRect {
 	id: root
 
 	property real animPerc: UPower.displayDevice.percentage
 
-	color: DynamicColors.palette.m3secondaryContainer
+	color: Colors.palette.m3secondaryContainer
 	implicitWidth: 120
-	radius: Appearance.rounding.large
+	radius: Tokens.rounding.large
 
 	Behavior on animPerc {
 		Anim {
@@ -21,11 +22,11 @@ CustomClippingRect {
 	Contents {
 		id: layout
 
-		accentColor: DynamicColors.palette.m3primary
+		accentColor: Colors.palette.m3primary
 		anchors.fill: parent
-		anchors.margins: Appearance.padding.larger
-		subTextColor: DynamicColors.palette.m3onSurfaceVariant
-		textColor: DynamicColors.palette.m3onSurface
+		anchors.margins: Tokens.padding.larger
+		subTextColor: Colors.palette.m3onSurfaceVariant
+		textColor: Colors.palette.m3onSurface
 	}
 
 	CustomRect {
@@ -33,19 +34,19 @@ CustomClippingRect {
 		anchors.left: parent.left
 		anchors.right: parent.right
 		clip: true
-		color: DynamicColors.palette.m3secondary
+		color: Colors.palette.m3secondary
 		implicitHeight: parent.height * root.animPerc
-		radius: Appearance.rounding.extraSmall
+		radius: Tokens.rounding.extraSmall
 
 		Contents {
-			accentColor: DynamicColors.palette.m3primaryContainer
+			accentColor: Colors.palette.m3primaryContainer
 			anchors.bottom: parent.bottom
 			anchors.left: parent.left
 			anchors.margins: layout.anchors.margins
 			anchors.right: parent.right
 			height: layout.height
-			subTextColor: DynamicColors.palette.m3secondaryContainer
-			textColor: DynamicColors.palette.m3onSecondary
+			subTextColor: Colors.palette.m3secondaryContainer
+			textColor: Colors.palette.m3onSecondary
 		}
 	}
 
@@ -60,7 +61,7 @@ CustomClippingRect {
 		spacing: 0
 
 		MaterialIcon {
-			Layout.leftMargin: -Appearance.padding.extraSmall
+			Layout.leftMargin: -Tokens.padding.extraSmall
 			color: contents.accentColor
 			text: "battery_full"
 		}
@@ -101,10 +102,10 @@ CustomClippingRect {
 
 		RowLayout {
 			Layout.alignment: Qt.AlignRight
-			Layout.bottomMargin: -Appearance.padding.small
-			Layout.rightMargin: -Appearance.padding.extraSmall
-			Layout.topMargin: -Appearance.padding.extraSmall
-			spacing: Appearance.spacing.extraSmall
+			Layout.bottomMargin: -Tokens.padding.small
+			Layout.rightMargin: -Tokens.padding.extraSmall
+			Layout.topMargin: -Tokens.padding.extraSmall
+			spacing: Tokens.spacing.extraSmall
 
 			MaterialIcon {
 				color: contents.accentColor

Modules/Resources/Cards/HeroCard.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import QtQuick.Layouts
+import ZShell.Config
 import qs.Components
-import qs.Config
+import qs.Services
 
 CustomClippingRect {
 	id: root
@@ -13,10 +14,10 @@ CustomClippingRect {
 	required property real temperature
 	required property real usage
 
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Appearance.spacing.large, usageColumn.implicitHeight + usageLabel.implicitHeight) + Appearance.padding.large * 2
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Tokens.spacing.large, usageColumn.implicitHeight + usageLabel.implicitHeight) + Tokens.padding.large * 2
 	implicitWidth: 450
-	radius: Appearance.rounding.large - Appearance.padding.normal
+	radius: Tokens.rounding.large - Tokens.padding.normal
 
 	CustomRect {
 		anchors.bottom: parent.bottom
@@ -35,12 +36,12 @@ CustomClippingRect {
 		id: tempProg
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.large
+		anchors.margins: Tokens.padding.large
 		anchors.top: parent.top
 		fgColor: root.accent
-		implicitSize: Math.max(icon.implicitWidth, icon.implicitHeight) + Appearance.padding.larger * 2
-		spacing: Appearance.spacing.extraSmall
-		strokeWidth: Appearance.padding.extraSmall
+		implicitSize: Math.max(icon.implicitWidth, icon.implicitHeight) + Tokens.padding.larger * 2
+		spacing: Tokens.spacing.extraSmall
+		strokeWidth: Tokens.padding.extraSmall
 		value: root.usage
 
 		Behavior on clampedVal {
@@ -59,10 +60,10 @@ CustomClippingRect {
 
 	ColumnLayout {
 		anchors.left: tempProg.right
-		anchors.margins: Appearance.spacing.large
+		anchors.margins: Tokens.spacing.large
 		anchors.right: usageColumn.left
 		anchors.verticalCenter: tempProg.verticalCenter
-		spacing: Appearance.spacing.extraSmall
+		spacing: Tokens.spacing.extraSmall
 
 		CustomText {
 			color: root.accent
@@ -71,7 +72,7 @@ CustomClippingRect {
 
 		CustomText {
 			Layout.fillWidth: true
-			color: DynamicColors.palette.m3onSurfaceVariant
+			color: Colors.palette.m3onSurfaceVariant
 			elide: Text.ElideRight
 			text: root.subLabel
 		}
@@ -82,16 +83,16 @@ CustomClippingRect {
 
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.largeIncreased
-		spacing: Appearance.spacing.extraSmall
+		anchors.margins: Tokens.padding.largeIncreased
+		spacing: Tokens.spacing.extraSmall
 
 		RowLayout {
-			Layout.leftMargin: -Appearance.padding.extraSmall
-			spacing: Appearance.spacing.extraSmall
+			Layout.leftMargin: -Tokens.padding.extraSmall
+			spacing: Tokens.spacing.extraSmall
 
 			MaterialIcon {
 				Layout.topMargin: Math.round(fontInfo.pointSize * 0.08)
-				color: root.temperature > 90 ? DynamicColors.palette.m3error : root.accent
+				color: root.temperature > 90 ? Colors.palette.m3error : root.accent
 				fill: 1
 				text: root.temperature > 90 ? "thermometer_alert" : "thermometer"
 			}
@@ -103,7 +104,7 @@ CustomClippingRect {
 
 		CustomProgressBar {
 			fgColor: root.accent
-			implicitHeight: Appearance.padding.small
+			implicitHeight: Tokens.padding.small
 			indeterminate: isNaN(root.usage) || isNaN(root.temperature)
 			value: root.temperature / 100
 		}
@@ -112,7 +113,7 @@ CustomClippingRect {
 	Column {
 		id: usageColumn
 
-		anchors.margins: Appearance.padding.large
+		anchors.margins: Tokens.padding.large
 		anchors.right: parent.right
 		anchors.rightMargin: 32
 		anchors.verticalCenter: parent.verticalCenter
@@ -122,15 +123,15 @@ CustomClippingRect {
 			id: usageLabel
 
 			anchors.right: parent.right
-			color: DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.normal
+			color: Colors.palette.m3onSurfaceVariant
+			font.pointSize: Tokens.font.size.normal
 			text: qsTr("Usage")
 		}
 
 		CustomText {
 			anchors.right: parent.right
 			color: root.accent
-			font.pointSize: Appearance.font.size.extraLarge
+			font.pointSize: Tokens.font.size.extraLarge
 			font.weight: Font.Medium
 			text: isNaN(root.usage) ? "...%" : Math.round(root.usage * 100) + "%"
 		}

Modules/Resources/Cards/MemoryCard.qml

@@ -1,19 +1,20 @@
 import QtQuick
 import QtQuick.Layouts
 import ZShell.Services
+import ZShell.Config
 import qs.Components
-import qs.Config
+import qs.Services
 
 CustomRect {
 	id: root
 
-	readonly property color accent: DynamicColors.palette.m3tertiary
+	readonly property color accent: Colors.palette.m3tertiary
 
 	Layout.fillWidth: true
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
-	implicitWidth: layout.implicitWidth + Appearance.padding.extraLargeIncreased * 2
-	radius: Appearance.rounding.medium
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + Tokens.padding.large * 2
+	implicitWidth: layout.implicitWidth + Tokens.padding.extraLargeIncreased * 2
+	radius: Tokens.rounding.medium
 
 	ServiceRef {
 		service: Memory
@@ -23,11 +24,11 @@ CustomRect {
 		id: layout
 
 		anchors.centerIn: parent
-		spacing: Appearance.spacing.extraSmall
+		spacing: Tokens.spacing.extraSmall
 
 		RowLayout {
-			Layout.leftMargin: -Appearance.padding.extraSmall
-			spacing: Appearance.spacing.small
+			Layout.leftMargin: -Tokens.padding.extraSmall
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
 				color: root.accent
@@ -42,9 +43,9 @@ CustomRect {
 
 		CircularProgress {
 			Layout.alignment: Qt.AlignHCenter
-			Layout.topMargin: Appearance.spacing.large
+			Layout.topMargin: Tokens.spacing.large
 			fgColor: root.accent
-			implicitSize: usageColumn.implicitHeight + thickness + Appearance.padding.largeIncreased * 2
+			implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2
 			startAngle: -225
 			sweepAngle: 270
 			value: Memory.percentage
@@ -58,19 +59,19 @@ CustomRect {
 				id: usageColumn
 
 				anchors.centerIn: parent
-				anchors.verticalCenterOffset: Appearance.padding.extraSmall
+				anchors.verticalCenterOffset: Tokens.padding.extraSmall
 				spacing: 0
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
 					color: root.accent
-					font.pointSize: Appearance.font.size.large
+					font.pointSize: Tokens.font.size.large
 					text: Math.round(Memory.percentage * 100) + "%"
 				}
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
-					color: DynamicColors.palette.m3onSurfaceVariant
+					color: Colors.palette.m3onSurfaceVariant
 					text: qsTr("Used")
 				}
 			}

Modules/Resources/Cards/NetworkCard.qml

@@ -1,17 +1,18 @@
 import QtQuick
 import QtQuick.Layouts
 import ZShell.Internal
+import ZShell.Config
 import qs.Helpers
 import qs.Components
-import qs.Config
+import qs.Services
 
 CustomRect {
 	id: root
 
-	color: DynamicColors.tPalette.m3surfaceContainer
+	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: 220
 	implicitWidth: 300
-	radius: Appearance.rounding.large - Appearance.padding.normal
+	radius: Tokens.rounding.large - Tokens.padding.normal
 
 	Ref {
 		service: NetworkUsage
@@ -20,16 +21,16 @@ CustomRect {
 	ColumnLayout {
 		id: layout
 
-		anchors.bottomMargin: Appearance.padding.larger
+		anchors.bottomMargin: Tokens.padding.larger
 		anchors.fill: parent
-		anchors.margins: Appearance.padding.large
+		anchors.margins: Tokens.padding.large
 		spacing: 0
 
 		RowLayout {
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
-				color: DynamicColors.palette.m3primary
+				color: Colors.palette.m3primary
 				text: "swap_vert"
 			}
 
@@ -39,10 +40,10 @@ CustomRect {
 		}
 
 		Item {
-			Layout.bottomMargin: Appearance.spacing.small
+			Layout.bottomMargin: Tokens.spacing.small
 			Layout.fillHeight: true
 			Layout.fillWidth: true
-			Layout.topMargin: Appearance.spacing.larger
+			Layout.topMargin: Tokens.spacing.larger
 
 			SparklineItem {
 				id: sparkline
@@ -54,10 +55,10 @@ CustomRect {
 				anchors.fill: parent
 				historyLength: NetworkUsage.historyLength
 				line1: NetworkUsage.uploadBuffer // qmllint disable missing-type
-				line1Color: DynamicColors.palette.m3secondary
+				line1Color: Colors.palette.m3secondary
 				line1FillAlpha: 0.15
 				line2: NetworkUsage.downloadBuffer // qmllint disable missing-type
-				line2Color: DynamicColors.palette.m3tertiary
+				line2Color: Colors.palette.m3tertiary
 				line2FillAlpha: 0.2
 				maxValue: smoothMax
 				slideProgress: 1
@@ -101,7 +102,7 @@ CustomRect {
 			// "Collecting data" placeholder
 			CustomText {
 				anchors.centerIn: parent
-				color: DynamicColors.palette.m3outline
+				color: Colors.palette.m3outline
 				text: qsTr("Collecting data...")
 				visible: NetworkUsage.downloadBuffer.count < 2
 			}
@@ -110,15 +111,15 @@ CustomRect {
 		// Download row
 		RowLayout {
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
-				color: DynamicColors.palette.m3tertiary
+				color: Colors.palette.m3tertiary
 				text: "download"
 			}
 
 			CustomText {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				text: qsTr("Download")
 			}
 
@@ -127,7 +128,7 @@ CustomRect {
 			}
 
 			CustomText {
-				color: DynamicColors.palette.m3tertiary
+				color: Colors.palette.m3tertiary
 				text: {
 					const fmt = NetworkUsage.formatBytes(NetworkUsage.downloadSpeed ?? 0);
 					return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
@@ -138,15 +139,15 @@ CustomRect {
 		// Upload row
 		RowLayout {
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
-				color: DynamicColors.palette.m3secondary
+				color: Colors.palette.m3secondary
 				text: "upload"
 			}
 
 			CustomText {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				text: qsTr("Upload")
 			}
 
@@ -155,7 +156,7 @@ CustomRect {
 			}
 
 			CustomText {
-				color: DynamicColors.palette.m3secondary
+				color: Colors.palette.m3secondary
 				text: {
 					const fmt = NetworkUsage.formatBytes(NetworkUsage.uploadSpeed ?? 0);
 					return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
@@ -166,15 +167,15 @@ CustomRect {
 		// Session totals
 		RowLayout {
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				text: "history"
 			}
 
 			CustomText {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				text: qsTr("Total")
 			}
 
@@ -183,7 +184,7 @@ CustomRect {
 			}
 
 			CustomText {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				text: {
 					const down = NetworkUsage.formatBytesTotal(NetworkUsage.downloadTotal ?? 0);
 					const up = NetworkUsage.formatBytesTotal(NetworkUsage.uploadTotal ?? 0);

Modules/Resources/Cards/StorageCard.qml

@@ -2,19 +2,20 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import ZShell.Services
+import ZShell.Config
 import qs.Components
-import qs.Config
+import qs.Services
 
 CustomRect {
 	id: root
 
-	readonly property color accent: DynamicColors.palette.m3secondary
+	readonly property color accent: Colors.palette.m3secondary
 	readonly property real percentage: Storage.primaryDisk?.perc ?? 0
 
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + Tokens.padding.large * 2
 	implicitWidth: layout.implicitWidth + layout.anchors.margins * 2
-	radius: Appearance.rounding.large - Appearance.padding.normal
+	radius: Tokens.rounding.large - Tokens.padding.normal
 
 	ServiceRef {
 		service: Storage
@@ -24,7 +25,7 @@ CustomRect {
 		id: layout
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
+		anchors.margins: Tokens.padding.small
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 		spacing: 0
@@ -33,11 +34,11 @@ CustomRect {
 			id: row
 
 			Layout.alignment: Qt.AlignHCenter
-			spacing: Appearance.spacing.large
+			spacing: Tokens.spacing.large
 
 			CircularProgress {
 				fgColor: root.accent
-				implicitSize: usageColumn.implicitHeight + thickness + Appearance.padding.large * 2
+				implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.large * 2
 				startAngle: -225
 				sweepAngle: 270
 				value: root.percentage
@@ -56,27 +57,27 @@ CustomRect {
 					MaterialIcon {
 						Layout.alignment: Qt.AlignHCenter
 						color: root.accent
-						font.pointSize: Appearance.font.size.medium
+						font.pointSize: Tokens.font.size.medium
 						text: "hard_drive"
 					}
 
 					CustomText {
 						Layout.alignment: Qt.AlignHCenter
 						color: root.accent
-						font.pointSize: Appearance.font.size.large
+						font.pointSize: Tokens.font.size.large
 						text: Math.round(root.percentage * 100) + "%"
 					}
 
 					CustomText {
 						Layout.alignment: Qt.AlignHCenter
-						color: DynamicColors.palette.m3onSurfaceVariant
+						color: Colors.palette.m3onSurfaceVariant
 						text: qsTr("Used")
 					}
 				}
 			}
 
 			ColumnLayout {
-				spacing: Appearance.spacing.extraSmall
+				spacing: Tokens.spacing.extraSmall
 
 				CustomText {
 					text: qsTr("Storage")

Modules/Resources/Cards/VramCard.qml

@@ -1,19 +1,20 @@
 import QtQuick
 import QtQuick.Layouts
 import ZShell.Services
+import ZShell.Config
 import qs.Components
-import qs.Config
+import qs.Services
 
 CustomRect {
 	id: root
 
-	readonly property color accent: DynamicColors.palette.m3tertiary
+	readonly property color accent: Colors.palette.m3tertiary
 
 	Layout.fillWidth: true
-	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
-	implicitWidth: layout.implicitWidth + Appearance.padding.extraLargeIncreased
-	radius: Appearance.rounding.medium
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + Tokens.padding.large * 2
+	implicitWidth: layout.implicitWidth + Tokens.padding.extraLargeIncreased
+	radius: Tokens.rounding.medium
 
 	ServiceRef {
 		service: Gpu
@@ -23,11 +24,11 @@ CustomRect {
 		id: layout
 
 		anchors.centerIn: parent
-		spacing: Appearance.spacing.extraSmall
+		spacing: Tokens.spacing.extraSmall
 
 		RowLayout {
-			Layout.leftMargin: -Appearance.padding.extraSmall
-			spacing: Appearance.spacing.small
+			Layout.leftMargin: -Tokens.padding.extraSmall
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
 				color: root.accent
@@ -44,9 +45,9 @@ CustomRect {
 			id: circularIndicator
 
 			Layout.alignment: Qt.AlignHCenter
-			Layout.topMargin: Appearance.spacing.large
+			Layout.topMargin: Tokens.spacing.large
 			fgColor: root.accent
-			implicitSize: usageColumn.implicitHeight + thickness + Appearance.padding.largeIncreased * 2
+			implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2
 			startAngle: -225
 			sweepAngle: 270
 			value: Gpu.memoryUsed / Gpu.memoryTotal
@@ -60,19 +61,19 @@ CustomRect {
 				id: usageColumn
 
 				anchors.centerIn: parent
-				anchors.verticalCenterOffset: Appearance.padding.extraSmall
+				anchors.verticalCenterOffset: Tokens.padding.extraSmall
 				spacing: 0
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
 					color: root.accent
-					font.pointSize: Appearance.font.size.large
+					font.pointSize: Tokens.font.size.large
 					text: Math.round(circularIndicator.value * 100) + "%"
 				}
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
-					color: DynamicColors.palette.m3onSurfaceVariant
+					color: Colors.palette.m3onSurfaceVariant
 					text: qsTr("Used")
 				}
 			}

Modules/Resources/Content.qml

@@ -1,36 +1,36 @@
 import QtQuick
 import QtQuick.Layouts
 import ZShell.Services
+import ZShell.Config
 import qs.Modules.Resources.Cards
 import qs.Helpers
-import qs.Components
-import qs.Config
+import qs.Services
 
 Item {
 	id: root
 
 	required property Wrapper wrapper
 
-	implicitHeight: content.implicitHeight + Appearance.padding.normal * 2
+	implicitHeight: content.implicitHeight + Tokens.padding.normal * 2
 	implicitWidth: content.implicitWidth
 
 	RowLayout {
 		id: content
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.normal
+		anchors.margins: Tokens.padding.normal
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.larger
+		spacing: Tokens.spacing.larger
 
 		ColumnLayout {
 			id: mainColumn
 
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			RowLayout {
-				spacing: Appearance.spacing.normal
+				spacing: Tokens.spacing.normal
 				visible: cpuCard.active || gpuCard.active
 
 				WrappedLoader {
@@ -39,7 +39,7 @@ Item {
 					active: Config.dashboard.performance.showCpu
 
 					sourceComponent: HeroCard {
-						accent: DynamicColors.palette.m3primary
+						accent: Colors.palette.m3primary
 						icon: "memory"
 						label: qsTr("CPU")
 						subLabel: Cpu.name
@@ -58,7 +58,7 @@ Item {
 					active: Config.dashboard.performance.showGpu && Gpu.type !== Gpu.None
 
 					sourceComponent: HeroCard {
-						accent: DynamicColors.palette.m3secondary
+						accent: Colors.palette.m3secondary
 						icon: "desktop_windows"
 						label: qsTr("GPU")
 						subLabel: Gpu.name
@@ -73,7 +73,7 @@ Item {
 			}
 
 			RowLayout {
-				spacing: Appearance.spacing.normal
+				spacing: Tokens.spacing.normal
 				visible: storageCard.active || memoryCard.active || vramCard.active || networkCard1.active
 
 				WrappedLoader {

Modules/Resources/Wrapper.qml

@@ -3,7 +3,7 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
@@ -22,8 +22,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
 		}
 	}
 

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