config moved to c++ plugin, removed old qml + fileview implementation

Components/AnchorAnim.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 AnchorAnimation {
 	enum Type {
@@ -20,32 +20,32 @@ AnchorAnimation {
 
 	duration: {
 		if (type < AnchorAnim.StandardSmall || type > AnchorAnim.SlowSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
+			return Tokens.anim.durations.expressiveDefaultSpatial;
 
 		if (type == AnchorAnim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
+			return Tokens.anim.durations.expressiveFastSpatial;
 		if (type == AnchorAnim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
+			return Tokens.anim.durations.expressiveDefaultSpatial;
 		if (type == AnchorAnim.SlowSpatial)
-			return Appearance.anim.durations.large;
+			return Tokens.anim.durations.large;
 
 		const types = ["small", "normal", "large", "extraLarge"];
 		const idx = type % 4;
-		return Appearance.anim.durations[types[idx]];
+		return Tokens.anim.durations[types[idx]];
 	}
 	easing.bezierCurve: {
 		if (type == AnchorAnim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
+			return Tokens.anim.curves.expressiveFastSpatial;
 		if (type == AnchorAnim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
+			return Tokens.anim.curves.expressiveDefaultSpatial;
 		if (type == AnchorAnim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
+			return Tokens.anim.curves.expressiveSlowSpatial;
 
 		if (type >= AnchorAnim.StandardSmall && type <= AnchorAnim.StandardExtraLarge)
-			return Appearance.anim.curves.standard;
+			return Tokens.anim.curves.standard;
 		if (type >= AnchorAnim.EmphasizedSmall && type <= AnchorAnim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
+			return Tokens.anim.curves.emphasized;
 
-		return Appearance.anim.curves.expressiveDefaultSpatial;
+		return Tokens.anim.curves.expressiveDefaultSpatial;
 	}
 }

Components/Anim.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 NumberAnimation {
 	enum Type {
@@ -23,41 +23,41 @@ NumberAnimation {
 
 	duration: {
 		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
-			return Appearance.anim.durations.normal;
+			return Tokens.anim.durations.normal;
 
 		if (type === Anim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
+			return Tokens.anim.durations.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
+			return Tokens.anim.durations.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Appearance.anim.durations.large;
+			return Tokens.anim.durations.large;
 		if (type === Anim.FastEffects)
-			return Appearance.anim.durations.expressiveFastEffects;
+			return Tokens.anim.durations.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Appearance.anim.durations.expressiveEffects;
+			return Tokens.anim.durations.expressiveEffects;
 		if (type === Anim.SlowEffects)
-			return Appearance.anim.durations.expressiveSlowEffects;
+			return Tokens.anim.durations.expressiveSlowEffects;
 
 		const types = ["small", "normal", "large", "extraLarge"];
 		const idx = type % 4;
-		return Appearance.anim.durations[types[idx]];
+		return Tokens.anim.durations[types[idx]];
 	}
 	easing.bezierCurve: {
 		if (type === Anim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
+			return Tokens.anim.curves.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
+			return Tokens.anim.curves.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
+			return Tokens.anim.curves.expressiveSlowSpatial;
 		if (type === Anim.FastEffects)
-			return Appearance.anim.curves.expressiveFastEffects;
+			return Tokens.anim.curves.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Appearance.anim.curves.expressiveDefaultEffects;
+			return Tokens.anim.curves.expressiveDefaultEffects;
 		if (type === Anim.SlowEffects)
-			return Appearance.anim.curves.expressiveSlowEffects;
+			return Tokens.anim.curves.expressiveSlowEffects;
 
 		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
+			return Tokens.anim.curves.emphasized;
-		return Appearance.anim.curves.standard;
+		return Tokens.anim.curves.standard;
 	}
 }

Components/BaseStyledSlider.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Slider {
 	id: root
 
-	property color color: DynamicColors.palette.m3secondary
+	property color color: Colors.palette.m3secondary
 	required property string icon
 	property bool initialized: false
 	readonly property bool isHorizontal: orientation === Qt.Horizontal
@@ -19,9 +20,9 @@ Slider {
 	background: CustomRect {
 		id: groove
 
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+		color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
 		height: root.availableHeight
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 		width: root.availableWidth
 		x: root.leftPadding
 		y: root.topPadding
@@ -62,8 +63,8 @@ Slider {
 			id: rect
 
 			anchors.fill: parent
-			color: DynamicColors.palette.m3inverseSurface
+			color: Colors.palette.m3inverseSurface
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			MouseArea {
 				id: handleInteraction
@@ -82,12 +83,12 @@ Slider {
 				function update(): void {
 					animate = !moving;
 					binding.when = moving;
-					font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
+					font.pointSize = moving ? Tokens.font.size.small : Tokens.font.size.larger;
-					font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
+					font.family = moving ? Config.appearance.font.family.sans : Config.appearance.font.family.material;
 				}
 
 				anchors.centerIn: parent
-				color: DynamicColors.palette.m3inverseOnSurface
+				color: Colors.palette.m3inverseOnSurface
 				text: root.icon
 
 				onMovingChanged: anim.restart()
@@ -105,8 +106,8 @@ Slider {
 					id: anim
 
 					Anim {
-						duration: Appearance.anim.durations.normal / 2
+						duration: Tokens.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardAccel
+						easing.bezierCurve: Tokens.anim.curves.standardAccel
 						property: "scale"
 						target: icon
 						to: 0
@@ -117,8 +118,8 @@ Slider {
 					}
 
 					Anim {
-						duration: Appearance.anim.durations.normal / 2
+						duration: Tokens.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardDecel
+						easing.bezierCurve: Tokens.anim.curves.standardDecel
 						property: "scale"
 						target: icon
 						to: 1
@@ -129,7 +130,7 @@ Slider {
 	}
 	Behavior on value {
 		Anim {
-			duration: Appearance.anim.durations.large
+			duration: Tokens.anim.durations.large
 		}
 	}
 

Components/ButtonBase.qml

@@ -1,5 +1,6 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomRect {
 	id: root
@@ -13,14 +14,14 @@ CustomRect {
 	property color activeColor
 	property color activeOnColor
 	property bool checked
-	property real checkedRadius: Appearance.rounding.medium
+	property real checkedRadius: Tokens.rounding.medium
-	property real defaultRadius: Appearance.rounding.large
+	property real defaultRadius: Tokens.rounding.large
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color disabledOnColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledOnColor: Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	property bool fillWidth
 	property font font: ({
-			family: Appearance.font.family.sans,
+			family: Config.appearance.font.family.sans,
-			pointSize: Appearance.font.size.larger,
+			pointSize: Tokens.font.size.larger,
 			bold: false
 		})
 	property real horizontalPadding: padding
@@ -35,7 +36,7 @@ CustomRect {
 	readonly property color onColor: !enabled ? disabledOnColor : internalChecked ? activeOnColor : inactiveOnColor
 	property real padding
 	readonly property alias pressed: stateLayer.pressed
-	property real pressedRadius: Appearance.rounding.smallest
+	property real pressedRadius: Tokens.rounding.smallest
 	readonly property alias radiusAnim: radiusAnim
 	property bool radiusMorph: true
 	property alias shapeMorph: stateLayer.shapeMorph
@@ -53,7 +54,7 @@ CustomRect {
 		if (internalChecked)
 			return checkedRadius;
 		if (isRound)
-			return (height || implicitHeight) / 2 * Math.min(1, Appearance.rounding.scale);
+			return (height || implicitHeight) / 2 * Math.min(1, Tokens.rounding.scale);
 		return defaultRadius;
 	}
 

Components/CAnim.qml

@@ -1,8 +1,63 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 ColorAnimation {
-	duration: MaterialEasing.standardTime
+	enum Type {
-	easing.bezierCurve: MaterialEasing.standard
+		StandardSmall = 0,
-	easing.type: Easing.BezierSpline
+		Standard,
+		StandardLarge,
+		StandardExtraLarge,
+		EmphasizedSmall,
+		Emphasized,
+		EmphasizedLarge,
+		EmphasizedExtraLarge,
+		FastSpatial,
+		DefaultSpatial,
+		SlowSpatial,
+		FastEffects,
+		DefaultEffects,
+		SlowEffects
+	}
+
+	property int type: CAnim.DefaultSpatial
+
+	duration: {
+		if (type < CAnim.StandardSmall || type > Anim.SlowEffects)
+			return Tokens.anim.durations.normal;
+
+		if (type === CAnim.FastSpatial)
+			return Tokens.anim.durations.expressiveFastSpatial;
+		if (type === CAnim.DefaultSpatial)
+			return Tokens.anim.durations.expressiveDefaultSpatial;
+		if (type === CAnim.SlowSpatial)
+			return Tokens.anim.durations.large;
+		if (type === CAnim.FastEffects)
+			return Tokens.anim.durations.expressiveFastEffects;
+		if (type === CAnim.DefaultEffects)
+			return Tokens.anim.durations.expressiveEffects;
+		if (type === CAnim.SlowEffects)
+			return Tokens.anim.durations.expressiveSlowEffects;
+
+		const types = ["small", "normal", "large", "extraLarge"];
+		const idx = type % 4;
+		return Tokens.anim.durations[types[idx]];
+	}
+	easing.bezierCurve: {
+		if (type === CAnim.FastSpatial)
+			return Tokens.anim.curves.expressiveFastSpatial;
+		if (type === CAnim.DefaultSpatial)
+			return Tokens.anim.curves.expressiveDefaultSpatial;
+		if (type === CAnim.SlowSpatial)
+			return Tokens.anim.curves.expressiveSlowSpatial;
+		if (type === CAnim.FastEffects)
+			return Tokens.anim.curves.expressiveFastEffects;
+		if (type === CAnim.DefaultEffects)
+			return Tokens.anim.curves.expressiveDefaultEffects;
+		if (type === CAnim.SlowEffects)
+			return Tokens.anim.curves.expressiveSlowEffects;
+
+		if (type >= CAnim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
+			return Tokens.anim.curves.emphasized;
+		return Tokens.anim.curves.standard;
+	}
 }

Components/CircularIndicator.qml

@@ -1,7 +1,8 @@
-import qs.Config
+import ZShell.Config
 import ZShell.Internal
 import QtQuick
 import QtQuick.Templates
+import qs.Services
 
 BusyIndicator {
 	id: root
@@ -17,12 +18,12 @@ BusyIndicator {
 	}
 
 	property int animState
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
+	property color bgColor: Colors.palette.m3secondaryContainer
-	property color fgColor: DynamicColors.palette.m3primary
+	property color fgColor: Colors.palette.m3primary
-	property real implicitSize: Appearance.font.size.normal * 3
+	property real implicitSize: Tokens.font.size.normal * 3
 	property real internalStrokeWidth: strokeWidth
 	readonly property alias progress: manager.progress
-	property real strokeWidth: Appearance.padding.small * 0.8
+	property real strokeWidth: Tokens.padding.small * 0.8
 	property alias type: manager.indeterminateAnimationType
 
 	implicitHeight: implicitSize
@@ -50,7 +51,7 @@ BusyIndicator {
 	}
 	transitions: Transition {
 		Anim {
-			duration: manager.completeEndDuration * Appearance.anim.durations.scale
+			duration: manager.completeEndDuration * Tokens.anim.durations.scale
 			properties: "opacity,internalStrokeWidth"
 		}
 	}
@@ -76,7 +77,7 @@ BusyIndicator {
 	}
 
 	NumberAnimation {
-		duration: manager.duration * Appearance.anim.durations.scale
+		duration: manager.duration * Tokens.anim.durations.scale
 		from: 0
 		loops: Animation.Infinite
 		property: "progress"
@@ -86,7 +87,7 @@ BusyIndicator {
 	}
 
 	NumberAnimation {
-		duration: manager.completeEndDuration * Appearance.anim.durations.scale
+		duration: manager.completeEndDuration * Tokens.anim.durations.scale
 		from: 0
 		property: "completeEndProgress"
 		running: root.animState === CircularIndicator.Completing

Components/CircularProgress.qml

@@ -3,24 +3,25 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Shapes
 import ZShell.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
 
 	readonly property real arcRadius: (size - padding - strokeWidth * (1 + waveAmplitude * 2)) / 2
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
+	property color bgColor: Colors.palette.m3secondaryContainer
 	property real clampedVal: Math.max(1 / 360, Math.min(1, isNaN(value) ? 0 : value))
 	readonly property real dotAngleRad: (startAngle + sweepAngle - gapAngle * (sweepAngle < 360 ? 0 : 1)) * Math.PI / 180
-	property color fgColor: DynamicColors.palette.m3primary
+	property color fgColor: Colors.palette.m3primary
 	readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
 	property alias hasEndIndicator: dot.active
 	property real implicitSize
 	property int padding: 0
 	readonly property real size: Math.min(width, height)
-	property int spacing: Appearance.spacing.small
+	property int spacing: Tokens.spacing.small
 	property int startAngle: -90
-	property int strokeWidth: Appearance.padding.small
+	property int strokeWidth: Tokens.padding.small
 	property int sweepAngle: 360
 	readonly property real thickness: strokeWidth * (1 + waveAmplitude) * 2
 	property real value
@@ -110,7 +111,7 @@ Item {
 			implicitHeight: Math.min(1, remainingArc.sweepAngle) * Math.min(4, root.strokeWidth)
 			implicitWidth: Math.min(1, remainingArc.sweepAngle) * Math.min(4, root.strokeWidth)
 			opacity: Math.min(1, remainingArc.sweepAngle)
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 	}
 }

Components/ColorArcPicker.qml

@@ -1,7 +1,8 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -18,9 +19,9 @@ Item {
 	property real lastChromaticHue: 0
 	readonly property real radius: (Math.min(width, height) - handleSize) / 2
 	readonly property int segmentCount: 240
-	readonly property color thumbColor: DynamicColors.palette.m3inverseSurface
+	readonly property color thumbColor: Colors.palette.m3inverseSurface
-	readonly property color thumbContentColor: DynamicColors.palette.m3inverseOnSurface
+	readonly property color thumbContentColor: Colors.palette.m3inverseOnSurface
-	readonly property color trackColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+	readonly property color trackColor: Colors.layer(Colors.palette.m3surfaceContainer, 2)
 
 	function hueToAngle(hue) {
 		return arcStartAngle + arcSweep * hue;
@@ -153,8 +154,8 @@ Item {
 		anchors.centerIn: parent
 		color: root.drawing?.drawingState.penColor
 		implicitHeight: implicitWidth
-		implicitWidth: canvas.height - root.handleSize - Appearance.padding.extraLarge * 2
+		implicitWidth: canvas.height - root.handleSize - Tokens.padding.extraLarge * 2
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Behavior on color {
 			enabled: false

Components/CustomCheckbox.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CheckBox {
 	id: control
@@ -18,14 +19,14 @@ CheckBox {
 	indicator: CustomRect {
 		// x: control.leftPadding
 		// y: parent.implicitHeight / 2 - implicitHeight / 2
-		border.color: control.checked ? DynamicColors.palette.m3primary : "transparent"
+		border.color: control.checked ? Colors.palette.m3primary : "transparent"
-		color: DynamicColors.palette.m3surfaceVariant
+		color: Colors.palette.m3surfaceVariant
 		implicitHeight: control.checkHeight
 		implicitWidth: control.checkWidth
-		radius: Appearance.rounding.smallest / 2
+		radius: Tokens.rounding.smallest / 2
 
 		CustomRect {
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			implicitHeight: control.checkHeight - (y * 2)
 			implicitWidth: control.checkWidth - (x * 2)
 			radius: 3

Components/CustomProgressBar.qml

@@ -5,7 +5,8 @@ import QtQuick.Templates
 import ZShell
 import ZShell.Components
 import ZShell.Internal
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ProgressBar {
 	id: root
@@ -16,8 +17,8 @@ ProgressBar {
 		Stopped
 	}
 
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
+	property color bgColor: Colors.palette.m3secondaryContainer
-	property color fgColor: DynamicColors.palette.m3primary
+	property color fgColor: Colors.palette.m3primary
 	property int indeterminateAnimState: CustomProgressBar.Stopped
 	property real waveAmplitude: 0.5
 	property int waveDuration: 1000
@@ -64,7 +65,7 @@ ProgressBar {
 	LinearIndicatorManager {
 		id: manager
 
-		gap: Appearance.spacing.extraSmall
+		gap: Tokens.spacing.extraSmall
 
 		Anim on completeEndProgress {
 			duration: manager.completeEndDuration
@@ -94,7 +95,7 @@ ProgressBar {
 				id: remaining
 
 				anchors.right: parent.right
-				implicitWidth: parent.width - wave.implicitWidth - Appearance.spacing.extraSmall
+				implicitWidth: parent.width - wave.implicitWidth - Tokens.spacing.extraSmall
 			}
 
 			Line {
@@ -106,7 +107,7 @@ ProgressBar {
 				color: root.fgColor
 				implicitHeight: implicitSize
 				implicitWidth: implicitSize
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 
 				Behavior on implicitSize {
 					Anim {
@@ -200,7 +201,7 @@ ProgressBar {
 		color: root.bgColor
 		implicitHeight: parent.height
 		implicitWidth: bounds.y - bounds.x
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 		x: bounds.x
 	}
 	component Wave: WavyLine {

Components/CustomRadioButton.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 RadioButton {
 	id: root
 
-	font.pointSize: Appearance.font.size.normal
+	font.pointSize: Tokens.font.size.normal
 	implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
 	implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
 
@@ -20,12 +21,12 @@ RadioButton {
 		id: outerCircle
 
 		anchors.verticalCenter: parent.verticalCenter
-		border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+		border.color: root.checked ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
 		border.width: 2
 		color: "transparent"
 		implicitHeight: 16
 		implicitWidth: 16
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Behavior on border.color {
 			CAnim {
@@ -34,7 +35,7 @@ RadioButton {
 
 		StateLayer {
 			anchors.margins: -7
-			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
+			color: root.checked ? Colors.palette.m3onSurface : Colors.palette.m3primary
 			z: -1
 
 			onClicked: {
@@ -44,10 +45,10 @@ RadioButton {
 
 		CustomRect {
 			anchors.centerIn: parent
-			color: Qt.alpha(DynamicColors.palette.m3primary, root.checked ? 1 : 0)
+			color: Qt.alpha(Colors.palette.m3primary, root.checked ? 1 : 0)
 			implicitHeight: 8
 			implicitWidth: 8
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 	}
 }

Components/CustomScrollBar.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import QtQuick.Templates
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ScrollBar {
 	id: root
@@ -17,7 +18,7 @@ ScrollBar {
 	readonly property real travelScale: root.rawTravel > 0 ? root.effectiveTravel / root.rawTravel : 0
 
 	enabled: !Visibilities.getForActive().isDrawing
-	implicitWidth: Appearance.padding.extraSmall * 2
+	implicitWidth: Tokens.padding.extraSmall * 2
 
 	contentItem: Item {
 	}
@@ -51,15 +52,15 @@ ScrollBar {
 		anchors.right: parent.right
 		anchors.top: parent.top
 		implicitWidth: handle.implicitWidth
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		CustomRect {
 			id: handle
 
 			anchors.right: parent.right
-			color: DynamicColors.palette.m3secondary
+			color: Colors.palette.m3secondary
 			implicitHeight: root.height * root.effectiveSize
-			implicitWidth: fullMouse.pressed || fullMouse.containsMouse ? Appearance.padding.extraSmall * 2 : Appearance.padding.extraSmall
+			implicitWidth: fullMouse.pressed || fullMouse.containsMouse ? Tokens.padding.extraSmall * 2 : Tokens.padding.extraSmall
 			opacity: {
 				if (!root.enabled)
 					return 0;
@@ -73,7 +74,7 @@ ScrollBar {
 					return 0.6;
 				return 0;
 			}
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 			y: root.reversed ? root.height * (1 + root.nonAnimY) * root.travelScale : root.height * root.nonAnimY * root.travelScale
 
 			Behavior on implicitWidth {

Components/CustomSlider.qml

@@ -5,20 +5,21 @@ import QtQuick.Templates
 import ZShell.Components
 import ZShell
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Slider {
 	id: root
 
 	property bool animateWave
-	property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color bgColor: enabled ? Colors.palette.m3secondaryContainer : Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color fgColor: enabled ? Colors.palette.m3primary : Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	property real filledWidth
 	property alias inset: inset
-	property color insetColor: enabled ? (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary) : DynamicColors.palette.m3onSurface
+	property color insetColor: enabled ? (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary) : Colors.palette.m3onSurface
 	property string insetIcon: ""
 	property real pos: visualPosition
-	property int radius: Appearance.rounding.small
+	property int radius: Tokens.rounding.small
 	property int waveDuration: 1000
 	property real waveFrequency: 6
 	property bool wavy
@@ -35,15 +36,15 @@ Slider {
 			id: remaining
 
 			anchors.left: handle.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.leftMargin: Tokens.spacing.extraSmall
 			anchors.right: parent.right
 			anchors.verticalCenter: parent.verticalCenter
-			bottomLeftRadius: Appearance.rounding.extraSmall / 2
+			bottomLeftRadius: Tokens.rounding.extraSmall / 2
 			color: root.bgColor
 			implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
 			opacity: Math.min(width, 12) / 12
 			radius: root.radius
-			topLeftRadius: Appearance.rounding.extraSmall / 2
+			topLeftRadius: Tokens.rounding.extraSmall / 2
 		}
 
 		CustomRect {
@@ -54,14 +55,14 @@ Slider {
 			implicitHeight: 4 * remaining.opacity
 			implicitWidth: implicitHeight
 			opacity: remaining.opacity
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 
 		CustomRect {
 			id: handle
 
 			anchors.left: filled.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.leftMargin: Tokens.spacing.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
 			color: root.fgColor
 			implicitHeight: {
@@ -70,7 +71,7 @@ Slider {
 				return parent.height * (mouse.pressed ? lerp(3.5, 1.5) : lerp(3, 1.2));
 			}
 			implicitWidth: 4
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			Behavior on implicitHeight {
 				Anim {
@@ -91,17 +92,17 @@ Slider {
 		MaterialIcon {
 			id: inset
 
-			readonly property bool attached: root.width ? (root.width - handle.implicitWidth - handle.anchors.leftMargin) * root.pos < inset.paintedWidth + Appearance.spacing.extraSmall * 2 : false
+			readonly property bool attached: root.width ? (root.width - handle.implicitWidth - handle.anchors.leftMargin) * root.pos < inset.paintedWidth + Tokens.spacing.extraSmall * 2 : false
 			property real dockT: attached ? 1 : 0
 
 			anchors.bottom: parent.bottom
 			anchors.top: parent.top
 			color: root.insetColor
-			font.pixelSize: Appearance.font.size.smaller * 2
+			font.pixelSize: Tokens.font.size.smaller * 2
 			text: root.insetIcon
 			verticalAlignment: Text.AlignVCenter
 			visible: !root.wavy && root.insetIcon !== ""
-			x: Appearance.spacing.extraSmall + dockT * (handle.x + Appearance.spacing.small)
+			x: Tokens.spacing.extraSmall + dockT * (handle.x + Tokens.spacing.small)
 
 			Behavior on dockT {
 				Anim {
@@ -113,12 +114,12 @@ Slider {
 			id: lineComp
 
 			CustomRect {
-				bottomRightRadius: Appearance.rounding.extraSmall / 2
+				bottomRightRadius: Tokens.rounding.extraSmall / 2
 				color: root.fgColor
 				implicitHeight: root.height
 				implicitWidth: root.filledWidth
 				radius: root.radius
-				topRightRadius: Appearance.rounding.extraSmall / 2
+				topRightRadius: Tokens.rounding.extraSmall / 2
 			}
 		}
 

Components/CustomSpinBox.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 DoubleSpinBox {
 	id: root
@@ -29,36 +30,36 @@ DoubleSpinBox {
 	editable: true
 	implicitHeight: Math.max(up.indicator.implicitHeight, down.indicator.implicitHeight, contentItem.implicitHeight) + topPadding + bottomPadding
 	implicitWidth: contentItem.implicitWidth + leftPadding + rightPadding
-	leftPadding: up.indicator.implicitWidth + Appearance.spacing.extraSmall / 2
+	leftPadding: up.indicator.implicitWidth + Tokens.spacing.extraSmall / 2
-	rightPadding: down.indicator.implicitWidth + Appearance.spacing.extraSmall / 2
+	rightPadding: down.indicator.implicitWidth + Tokens.spacing.extraSmall / 2
-	spacing: Appearance.spacing.small
+	spacing: Tokens.spacing.small
 
 	contentItem: TextFieldBase {
 		horizontalAlignment: TextField.AlignHCenter
 		implicitWidth: 65
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
-		leftPadding: Appearance.padding.larger
+		leftPadding: Tokens.padding.larger
 		readOnly: !root.editable
-		rightPadding: Appearance.padding.larger
+		rightPadding: Tokens.padding.larger
 		text: root.textFromValue(root.value, root.locale)
 		validator: root.validator
 
 		background: CustomRect {
-			color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+			color: Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer)
-			radius: Appearance.rounding.extraSmall
+			radius: Tokens.rounding.extraSmall
 		}
 	}
 	down.indicator: IconButton {
 		id: downButton
 
-		bottomRightRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		bottomRightRadius: pressed ? Tokens.rounding.small : Tokens.rounding.extraSmall
-		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
+		color: enabled ? Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
-		disabledColor: Qt.alpha(DynamicColors.palette.m3surfaceContainerHighest, 0.4)
+		disabledColor: Qt.alpha(Colors.palette.m3surfaceContainerHighest, 0.4)
 		icon: "remove"
 		isRound: true
 		label.anchors.horizontalCenterOffset: pressed ? 0 : 2
-		padding: Appearance.padding.extraSmall
+		padding: Tokens.padding.extraSmall
-		topRightRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		topRightRadius: pressed ? Tokens.rounding.small : Tokens.rounding.extraSmall
 		type: IconButton.Text
 
 		Behavior on bottomRightRadius {
@@ -81,14 +82,14 @@ DoubleSpinBox {
 		id: upButton
 
 		anchors.right: parent.right
-		bottomLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		bottomLeftRadius: pressed ? Tokens.rounding.small : Tokens.rounding.extraSmall
-		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
+		color: enabled ? Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
-		disabledColor: Qt.alpha(DynamicColors.palette.m3surfaceContainerHighest, 0.4)
+		disabledColor: Qt.alpha(Colors.palette.m3surfaceContainerHighest, 0.4)
 		icon: "add"
 		isRound: true
 		label.anchors.horizontalCenterOffset: pressed ? 0 : -2
-		padding: Appearance.padding.extraSmall
+		padding: Tokens.padding.extraSmall
-		topLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		topLeftRadius: pressed ? Tokens.rounding.small : Tokens.rounding.extraSmall
 		type: IconButton.Text
 
 		Behavior on bottomLeftRadius {

Components/CustomSplitButton.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Row {
 	id: root
@@ -11,14 +12,14 @@ Row {
 	}
 
 	property alias active: menu.active
-	property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property color color: type == CustomSplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color disabledTextColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledTextColor: Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	readonly property alias expandBtn: expandBtn
 	property alias expanded: menu.expanded
 	property string fallbackIcon
 	property string fallbackText
-	property real horizontalPadding: Appearance.padding.larger
+	property real horizontalPadding: Tokens.padding.larger
 	readonly property alias iconLabel: iconLabel
 	readonly property alias label: label
 	readonly property alias menu: menu
@@ -26,20 +27,20 @@ Row {
 	property bool menuOnTop
 	property real minLeftWidth
 	readonly property alias stateLayer: stateLayer
-	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	property color textColor: type == CustomSplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
 	readonly property alias textRow: textRow
 	property int type: CustomSplitButton.Filled
-	property real verticalPadding: Appearance.padding.small
+	property real verticalPadding: Tokens.padding.small
 
-	spacing: Math.floor(Appearance.spacing.extraSmall)
+	spacing: Math.floor(Tokens.spacing.extraSmall)
 
 	CustomRect {
-		bottomRightRadius: Appearance.rounding.small / 2
+		bottomRightRadius: Tokens.rounding.small / 2
 		color: !root.enabled ? root.disabledColor : root.color
 		implicitHeight: expandBtn.implicitHeight
 		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
-		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
-		topRightRadius: Appearance.rounding.small / 2
+		topRightRadius: Tokens.rounding.small / 2
 
 		StateLayer {
 			id: stateLayer
@@ -57,7 +58,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
 				id: iconLabel
@@ -91,13 +92,13 @@ Row {
 	CustomRect {
 		id: expandBtn
 
-		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
+		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.small / 2
 
 		bottomLeftRadius: rad
 		color: !root.enabled ? root.disabledColor : root.color
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
-		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
 		topLeftRadius: rad
 
 		Behavior on rad {
@@ -141,7 +142,7 @@ Row {
 
 		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
 		attachTo: expandBtn
-		marginY: Appearance.spacing.small * (root.menuOnTop ? -1 : 1)
+		marginY: Tokens.spacing.small * (root.menuOnTop ? -1 : 1)
 		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
 	}
 }

Components/CustomSplitButtonRow.qml

@@ -2,7 +2,8 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -21,7 +22,7 @@ Item {
 	anchors.left: parent.left
 	anchors.right: parent.right
 	clip: false
-	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	implicitHeight: row.implicitHeight + Tokens.padding.smaller * 2
 	opacity: shouldBeActive ? 1 : 0
 	scale: shouldBeActive ? 1 : 0.8
 	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
@@ -39,15 +40,15 @@ Item {
 		id: row
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
+		anchors.margins: Tokens.padding.small
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		CustomText {
 			Layout.fillWidth: true
-			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
+			color: root.enabled ? Colors.palette.m3onSurface : Colors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.larger
+			font.pointSize: Tokens.font.size.larger
 			text: root.label
 		}
 

Components/CustomSwitch.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import QtQuick.Shapes
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Switch {
 	id: root
@@ -12,20 +13,20 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		color: root.checked && root.enabled ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer)
-		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
+		implicitHeight: Tokens.font.size.medium + Tokens.padding.normal * 2
 		implicitWidth: implicitHeight * 1.7
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		CustomRect {
 			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			color: root.checked && root.enabled ? Colors.palette.m3onPrimary : Colors.layer(Colors.palette.m3outline, root.cLayer + 1)
-			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
+			implicitHeight: parent.implicitHeight - Tokens.padding.extraSmall
 			implicitWidth: nonAnimWidth
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
-			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - Tokens.padding.extraSmall / 2 : Tokens.padding.extraSmall / 2
 
 			Behavior on implicitWidth {
 				Anim {
@@ -40,7 +41,7 @@ Switch {
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked && root.enabled ? Colors.palette.m3primary : Colors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
@@ -91,7 +92,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Appearance.padding.larger
+				height: parent.implicitHeight - Tokens.padding.larger
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -117,8 +118,8 @@ Switch {
 					fillColor: "transparent"
 					startX: icon.start1.x
 					startY: icon.start1.y
-					strokeColor: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
+					strokeColor: root.checked && root.enabled ? Colors.palette.m3primary : Colors.palette.m3surfaceContainerHighest
-					strokeWidth: Appearance.font.size.larger * 0.15
+					strokeWidth: Tokens.font.size.larger * 0.15
 
 					Behavior on strokeColor {
 						CAnim {
@@ -151,7 +152,7 @@ Switch {
 	}
 
 	component PropAnim: PropertyAnimation {
-		duration: Appearance.anim.durations.expressiveFastSpatial
+		duration: Tokens.anim.durations.expressiveFastSpatial
-		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+		easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
 	}
 }

Components/CustomText.qml

@@ -1,7 +1,8 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Text {
 	id: root
@@ -12,10 +13,10 @@ Text {
 	property string animateProp: "scale"
 	property real animateTo: 1
 
-	color: DynamicColors.palette.m3onSurface
+	color: Colors.palette.m3onSurface
-	font.family: Appearance.font.family.sans
+	font.family: Config.appearance.font.family.sans
-	font.pointSize: Appearance.font.size.normal
+	font.pointSize: Tokens.font.size.normal
-	linkColor: DynamicColors.palette.m3onPrimaryFixedVariant
+	linkColor: Colors.palette.m3onPrimaryFixedVariant
 	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 

Components/CustomTextField.qml

@@ -2,7 +2,8 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Shapes
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextFieldBase {
 	id: root
@@ -16,26 +17,26 @@ TextFieldBase {
 	readonly property string effectiveSupportingText: isError && errorText ? errorText : supportingText
 	property bool emptyIsValid: true
 	property string errorText
-	readonly property int filledOffset: type === CustomTextField.Filled ? Appearance.spacing.small : 0
+	readonly property int filledOffset: type === CustomTextField.Filled ? Tokens.spacing.small : 0
-	readonly property int horizontalPadding: Appearance.padding.large
+	readonly property int horizontalPadding: Tokens.padding.large
 	property bool isError
 	property string leadingIcon
 	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
-	property int radius: Appearance.rounding.small
+	property int radius: Tokens.rounding.small
 	readonly property real smallFontScale: smallFontSize / font.pointSize
-	property int smallFontSize: Appearance.font.size.small
+	property int smallFontSize: Tokens.font.size.small
 	property string supportingText
-	readonly property int supportingTextOffset: effectiveSupportingText ? supportingTextLoader.height + Appearance.spacing.extraSmall : 0
+	readonly property int supportingTextOffset: effectiveSupportingText ? supportingTextLoader.height + Tokens.spacing.extraSmall : 0
 	property string trailingIcon
 	readonly property int trailingOffset: trailingIcon ? trailingIconLoader.width + trailingIconLoader.anchors.rightMargin : 0
 	property int type: CustomTextField.Outlined
 	readonly property bool valid: !validate || (!text && emptyIsValid) || (validate instanceof RegExp ? validate.test(text) : !!validate(text))
 	property var validate // Regex or function
 
-	bottomPadding: Appearance.padding.large + supportingTextOffset - filledOffset
+	bottomPadding: Tokens.padding.large + supportingTextOffset - filledOffset
 	leftPadding: horizontalPadding + leadingOffset
 	rightPadding: horizontalPadding + trailingOffset
-	topPadding: Appearance.padding.large + filledOffset
+	topPadding: Tokens.padding.large + filledOffset
 
 	background: Loader {
 		anchors.bottomMargin: root.supportingTextOffset
@@ -80,9 +81,9 @@ TextFieldBase {
 
 			anchors.left: parent.left
 			anchors.leftMargin: root.leftPadding
-			anchors.topMargin: Appearance.padding.extraSmall
+			anchors.topMargin: Tokens.padding.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : root.text ? DynamicColors.palette.m3outline : root.placeholderTextColor)
+			color: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : root.text ? Colors.palette.m3outline : root.placeholderTextColor)
 			font.family: root.font.family
 			font.pointSize: root.font.pointSize
 			font.variableAxes: root.font.variableAxes
@@ -128,8 +129,8 @@ TextFieldBase {
 				}
 
 				AnchorAnim {
-					duration: Appearance.anim.durations.expressiveEffects
+					duration: Tokens.anim.durations.expressiveEffects
-					easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					easing.bezierCurve: Tokens.anim.curves.expressiveEffects
 				}
 			}
 		}
@@ -139,11 +140,11 @@ TextFieldBase {
 
 			active: root.leadingIcon
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.normal
+			anchors.leftMargin: Tokens.padding.normal
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				text: root.leadingIcon
 			}
 		}
@@ -153,11 +154,11 @@ TextFieldBase {
 
 			active: root.trailingIcon
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.normal
+			anchors.rightMargin: Tokens.padding.normal
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
 				text: root.trailingIcon
 			}
 		}
@@ -172,8 +173,8 @@ TextFieldBase {
 		anchors.leftMargin: root.horizontalPadding
 
 		sourceComponent: CustomText {
-			color: root.isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurfaceVariant
+			color: root.isError ? Colors.palette.m3error : Colors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.small
+			font.pointSize: Tokens.font.size.small
 			text: root.effectiveSupportingText
 		}
 	}
@@ -195,14 +196,14 @@ TextFieldBase {
 				id: path
 
 				readonly property real inset: strokeWidth / 2
-				readonly property real outlineGap: placeholder.width * root.smallFontScale + Appearance.spacing.small * 2
+				readonly property real outlineGap: placeholder.width * root.smallFontScale + Tokens.spacing.small * 2
 				property real outlineGapScale: root.activeFocus || root.text ? 1 : 0
 
 				capStyle: ShapePath.RoundCap
 				fillColor: "transparent"
 				startX: path.inset + root.horizontalPadding - root.clampedRadius + path.outlineGap * (1 - path.outlineGapScale) / 2 + path.outlineGap * path.outlineGapScale
 				startY: path.inset
-				strokeColor: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
+				strokeColor: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : Colors.palette.m3outline)
 				strokeWidth: root.activeFocus ? 2 : 1
 
 				Behavior on outlineGapScale {
@@ -279,7 +280,7 @@ TextFieldBase {
 		id: filledComp
 
 		CustomRect {
-			color: root.activeFocus ? DynamicColors.tPalette.m3surfaceContainerHighest : DynamicColors.tPalette.m3surfaceContainerHigh
+			color: root.activeFocus ? Colors.tPalette.m3surfaceContainerHighest : Colors.tPalette.m3surfaceContainerHigh
 			topLeftRadius: root.clampedRadius
 			topRightRadius: root.clampedRadius
 
@@ -287,7 +288,7 @@ TextFieldBase {
 				anchors.bottom: parent.bottom
 				anchors.left: parent.left
 				anchors.right: parent.right
-				color: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
+				color: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : Colors.palette.m3outline)
 				implicitHeight: root.activeFocus ? 2 : 1
 
 				Behavior on implicitHeight {

Components/CustomTextInput.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextInput {
 	renderType: Text.NativeRendering
-	selectedTextColor: DynamicColors.palette.m3onSecondaryContainer
+	selectedTextColor: Colors.palette.m3onSecondaryContainer
-	selectionColor: DynamicColors.tPalette.colSecondaryContainer
+	selectionColor: Colors.tPalette.colSecondaryContainer
 
 	font {
 		family: Appearance?.font.family.sans ?? "sans-serif"

Components/Elevation.qml

@@ -1,13 +1,14 @@
 import QtQuick
 import QtQuick.Effects
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 RectangularShadow {
 	property real dp: [0, 1, 3, 6, 8, 12][level]
 	property int level
 
 	blur: (dp * 5) ** 0.7
-	color: Qt.alpha(DynamicColors.palette.m3shadow, 0.7)
+	color: Qt.alpha(Colors.palette.m3shadow, 0.7)
 	offset.y: dp / 2
 	spread: -dp * 0.3 + (dp * 0.1) ** 2
 

Components/FadeImage.qml

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

Components/FilledSlider.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 BaseStyledSlider {
 	id: root

Components/GradientSlider.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 BaseStyledSlider {
 	id: root

Components/IconButton.qml

@@ -1,5 +1,6 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ButtonBase {
 	id: root
@@ -7,8 +8,8 @@ ButtonBase {
 	property alias icon: label.text
 	readonly property alias label: label
 
-	activeColor: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	activeColor: type === IconButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondary
-	activeOnColor: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
+	activeOnColor: type === IconButton.Filled ? Colors.palette.m3onPrimary : type === IconButton.Tonal ? Colors.palette.m3onSecondary : Colors.palette.m3primary
 	implicitHeight: {
 		const h = label.implicitHeight + padding * 2;
 		if (h % 2 !== 0)
@@ -18,15 +19,15 @@ ButtonBase {
 	implicitWidth: implicitHeight
 	inactiveColor: {
 		if (!isToggle && type === IconButton.Filled)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === IconButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
+		return type === IconButton.Filled ? Colors.tPalette.m3surfaceContainer : Colors.palette.m3secondaryContainer;
 	}
 	inactiveOnColor: {
 		if (!isToggle && type === IconButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
+			return Colors.palette.m3onPrimary;
-		return type === IconButton.Tonal ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant;
+		return type === IconButton.Tonal ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurfaceVariant;
 	}
-	padding: type === IconButton.Text ? Appearance.padding.extraSmall / 2 : Appearance.padding.small
+	padding: type === IconButton.Text ? Tokens.padding.extraSmall / 2 : Tokens.padding.small
 
 	MaterialIcon {
 		id: label

Components/IconTextButton.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ButtonBase {
 	id: root
@@ -10,34 +11,34 @@ ButtonBase {
 	readonly property alias label: label
 	property alias text: label.text
 
-	activeColor: type === TextButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	activeColor: type === TextButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondary
 	activeOnColor: {
 		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondary;
+		return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary;
 	}
-	horizontalPadding: Appearance.padding.larger
+	horizontalPadding: Tokens.padding.larger
 	implicitHeight: row.implicitHeight + verticalPadding * 2
 	implicitWidth: row.implicitWidth + horizontalPadding * 2
 	inactiveColor: {
 		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
+		return type === TextButton.Filled ? Colors.tPalette.m3surfaceContainer : Colors.palette.m3secondaryContainer;
 	}
 	inactiveOnColor: {
 		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
+			return Colors.palette.m3onPrimary;
 		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer;
+		return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer;
 	}
-	verticalPadding: Appearance.padding.small
+	verticalPadding: Tokens.padding.small
 
 	RowLayout {
 		id: row
 
 		anchors.centerIn: parent
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		MaterialIcon {
 			id: iconLabel

Components/LoadingIndicator.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import Quickshell
 import M3Shapes
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 MaterialShape {
 	id: root
@@ -48,7 +49,7 @@ MaterialShape {
 		return [pos, vel];
 	}
 
-	color: DynamicColors.palette.m3primary
+	color: Colors.palette.m3primary
 	implicitSize: 38
 	toShape: shapes[0]
 

Components/MarqueeText.qml

@@ -1,12 +1,13 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
 
 	property alias anim: marqueeAnim
 	property bool animate: false
-	property color color: DynamicColors.palette.m3onSurface
+	property color color: Colors.palette.m3onSurface
 	property int fadeStrengthAnimMs: 180
 	property real fadeStrengthIdle: 0.0
 	property real fadeStrengthMoving: 1.0

Components/MaterialIcon.qml

@@ -1,11 +1,12 @@
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomText {
 	id: root
 
 	readonly property list<int> allowed: [20, 24, 40, 48]
 	property real fill: 0
-	property int grade: DynamicColors.light ? 0 : -25
+	property int grade: Colors.light ? 0 : -25
 	readonly property int opsz: clampOpsz(optical)
 	property int optical: fontInfo.pixelSize
 
@@ -16,7 +17,7 @@ CustomText {
 	}
 
 	font.family: "Material Symbols Rounded"
-	font.pointSize: Appearance.font.size.larger
+	font.pointSize: Tokens.font.size.larger
 	font.variableAxes: ({
 			FILL: fill,
 			GRAD: grade,

Components/Menu.qml

@@ -3,8 +3,9 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
-import qs.Config
+import ZShell.Config
 import qs.Drawers
+import qs.Services
 
 MouseArea {
 	id: root
@@ -77,7 +78,7 @@ MouseArea {
 		implicitHeight: column.implicitHeight + column.anchors.margins * 2
 		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
 		level: 2
-		radius: Appearance.rounding.medium
+		radius: Tokens.rounding.medium
 		x: {
 			watcher.transform;
 			const item = root.attachTo;
@@ -107,15 +108,15 @@ MouseArea {
 
 		CustomRect {
 			anchors.fill: parent
-			color: DynamicColors.palette.m3surfaceContainerLow
+			color: Colors.palette.m3surfaceContainerLow
 			radius: parent.radius
 
 			ColumnLayout {
 				id: column
 
 				anchors.fill: parent
-				anchors.margins: Appearance.padding.extraSmall
+				anchors.margins: Tokens.padding.extraSmall
-				spacing: Appearance.spacing.extraSmall
+				spacing: Tokens.spacing.extraSmall
 
 				Repeater {
 					id: repeater
@@ -130,10 +131,10 @@ MouseArea {
 						required property MenuItem modelData
 
 						Layout.fillWidth: true
-						color: Qt.alpha(DynamicColors.palette.m3tertiaryContainer, active ? 1 : 0)
+						color: Qt.alpha(Colors.palette.m3tertiaryContainer, active ? 1 : 0)
-						implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.larger * 2
+						implicitHeight: menuOptionRow.implicitHeight + Tokens.padding.larger * 2
-						implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.larger * 2
+						implicitWidth: menuOptionRow.implicitWidth + Tokens.padding.larger * 2
-						radius: Appearance.rounding.small
+						radius: Tokens.rounding.small
 
 						Behavior on radius {
 							Anim {
@@ -141,7 +142,7 @@ MouseArea {
 						}
 
 						StateLayer {
-							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
 							enabled: root.expanded
 
 							onClicked: {
@@ -156,19 +157,19 @@ MouseArea {
 							id: menuOptionRow
 
 							anchors.fill: parent
-							anchors.margins: Appearance.padding.larger
+							anchors.margins: Tokens.padding.larger
-							spacing: Appearance.spacing.small
+							spacing: Tokens.spacing.small
 
 							MaterialIcon {
 								Layout.alignment: Qt.AlignVCenter
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+								color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurfaceVariant
 								text: item.modelData.icon
 							}
 
 							CustomText {
 								Layout.alignment: Qt.AlignVCenter
 								Layout.fillWidth: true
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+								color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
 								text: item.modelData.text
 							}
 
@@ -179,7 +180,7 @@ MouseArea {
 								visible: active
 
 								sourceComponent: MaterialIcon {
-									color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+									color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurfaceVariant
 									text: item.modelData.trailingIcon
 								}
 							}

Components/SearchBar.qml

@@ -1,5 +1,6 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextFieldBase {
 	id: root
@@ -8,17 +9,17 @@ TextFieldBase {
 	readonly property alias clearIcon: clearIcon
 	readonly property alias searchIcon: searchIcon
 
-	bottomPadding: Appearance.padding.large
+	bottomPadding: Tokens.padding.large
-	leftPadding: searchIcon.width + searchIcon.anchors.leftMargin + Appearance.spacing.small
+	leftPadding: searchIcon.width + searchIcon.anchors.leftMargin + Tokens.spacing.small
-	rightPadding: clearIcon.width + clearIcon.anchors.rightMargin + Appearance.spacing.small
+	rightPadding: clearIcon.width + clearIcon.anchors.rightMargin + Tokens.spacing.small
-	topPadding: Appearance.padding.large
+	topPadding: Tokens.padding.large
 
 	background: CustomRect {
 		id: bg
 
 		anchors.fill: parent
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		StateLayer {
 			id: stateLayer
@@ -58,10 +59,10 @@ TextFieldBase {
 		id: searchIcon
 
 		anchors.left: parent.left
-		anchors.leftMargin: Appearance.padding.large
+		anchors.leftMargin: Tokens.padding.large
 		anchors.verticalCenter: parent.verticalCenter
-		color: DynamicColors.palette.m3onSurfaceVariant
+		color: Colors.palette.m3onSurfaceVariant
-		font.pointSize: Appearance.font.size.large
+		font.pointSize: Tokens.font.size.large
 		text: "search"
 	}
 
@@ -69,12 +70,12 @@ TextFieldBase {
 		id: clearIcon
 
 		anchors.right: parent.right
-		anchors.rightMargin: Appearance.padding.larger
+		anchors.rightMargin: Tokens.padding.larger
 		anchors.verticalCenter: parent.verticalCenter
 		enabled: root.text
 		icon: "clear"
 		opacity: root.text ? 1 : 0
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 		radiusMorph: false
 		stateLayer.hoverEnabled: enabled
 		type: IconButton.Text

Components/StateLayer.qml

@@ -3,7 +3,8 @@ import QtQuick.Shapes
 import ZShell
 import ZShell.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 MouseArea {
 	id: root
@@ -79,8 +80,8 @@ MouseArea {
 		id: rippleAnim
 
 		alwaysRunToEnd: true
-		duration: Appearance.anim.durations.expressiveSlowEffects * 2
+		duration: Tokens.anim.durations.expressiveSlowEffects * 2
-		easing.bezierCurve: Appearance.anim.curves.standard
+		easing.bezierCurve: Tokens.anim.curves.standard
 		property: "circleRadius"
 		target: root
 		to: root.endRadius
@@ -101,7 +102,7 @@ MouseArea {
 		anchors.fill: parent
 		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
 		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
-		color: DynamicColors.palette.m3onSurface
+		color: Colors.palette.m3onSurface
 		opacity: root.stateOpacity
 		// Pick up radius from parent if it has one (parent can be anything with radius props)
 		// qmllint disable missing-property

Components/TextButton.qml

@@ -1,5 +1,6 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ButtonBase {
 	id: root
@@ -7,28 +8,28 @@ ButtonBase {
 	readonly property alias label: label
 	property alias text: label.text
 
-	activeColor: type === TextButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	activeColor: type === TextButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondary
 	activeOnColor: {
 		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondary;
+		return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary;
 	}
-	horizontalPadding: Appearance.padding.normal
+	horizontalPadding: Tokens.padding.normal
 	implicitHeight: label.implicitHeight + verticalPadding * 2
 	implicitWidth: label.implicitWidth + horizontalPadding * 2
 	inactiveColor: {
 		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
+		return type === TextButton.Filled ? Colors.tPalette.m3surfaceContainer : Colors.palette.m3secondaryContainer;
 	}
 	inactiveOnColor: {
 		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
+			return Colors.palette.m3onPrimary;
 		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer;
+		return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer;
 	}
-	verticalPadding: Appearance.padding.small
+	verticalPadding: Tokens.padding.small
 
 	CustomText {
 		id: label

Components/TextFieldBase.qml

@@ -1,19 +1,20 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextField {
 	id: root
 
-	color: DynamicColors.palette.m3onSurface
+	color: Colors.palette.m3onSurface
 	cursorVisible: !readOnly
-	font.pointSize: Appearance.font.size.small
+	font.pointSize: Tokens.font.size.small
 	implicitHeight: contentHeight + topPadding + bottomPadding
 	implicitWidth: contentWidth + leftPadding + rightPadding
-	placeholderTextColor: DynamicColors.palette.m3onSurfaceVariant // No anim cause placeholder is custom
+	placeholderTextColor: Colors.palette.m3onSurfaceVariant // No anim cause placeholder is custom
 	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
 	selectedTextColor: color
-	selectionColor: Qt.alpha(DynamicColors.palette.m3primary, 0.4)
+	selectionColor: Qt.alpha(Colors.palette.m3primary, 0.4)
 	verticalAlignment: TextInput.AlignVCenter
 
 	Behavior on color {
@@ -32,10 +33,10 @@ TextField {
 
 		property bool disableBlink
 
-		color: DynamicColors.palette.m3primary
+		color: Colors.palette.m3primary
 		implicitHeight: root.cursorRectangle.height
 		implicitWidth: 1.5
-		radius: Appearance.rounding.large
+		radius: Tokens.rounding.large
 		x: root.cursorRectangle.x
 		y: root.cursorRectangle.y
 
@@ -46,7 +47,7 @@ TextField {
 		}
 		Behavior on x {
 			Anim {
-				duration: Appearance.anim.durations.expressiveFastEffects
+				duration: Tokens.anim.durations.expressiveFastEffects
 				easing.bezierCurve: [0.2, 1, 0.21, 1, 1, 1]
 			}
 		}

Components/Toast/ToastItem.qml

@@ -2,7 +2,8 @@ import ZShell
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomRect {
 	id: root
@@ -12,27 +13,27 @@ CustomRect {
 	anchors.left: parent.left
 	anchors.right: parent.right
 	border.color: {
-		let colour = DynamicColors.palette.m3outlineVariant;
+		let colour = Colors.palette.m3outlineVariant;
 		if (root.modelData.type === Toast.Success)
-			colour = DynamicColors.palette.m3success;
+			colour = Colors.palette.m3success;
 		if (root.modelData.type === Toast.Warning)
-			colour = DynamicColors.palette.m3secondaryContainer;
+			colour = Colors.palette.m3secondaryContainer;
 		if (root.modelData.type === Toast.Error)
-			colour = DynamicColors.palette.m3error;
+			colour = Colors.palette.m3error;
 		return Qt.alpha(colour, 0.3);
 	}
 	border.width: 1
 	color: {
 		if (root.modelData.type === Toast.Success)
-			return DynamicColors.palette.m3successContainer;
+			return Colors.palette.m3successContainer;
 		if (root.modelData.type === Toast.Warning)
-			return DynamicColors.palette.m3secondary;
+			return Colors.palette.m3secondary;
 		if (root.modelData.type === Toast.Error)
-			return DynamicColors.palette.m3errorContainer;
+			return Colors.palette.m3errorContainer;
-		return DynamicColors.palette.m3surface;
+		return Colors.palette.m3surface;
 	}
-	implicitHeight: layout.implicitHeight + Appearance.padding.smaller * 2
+	implicitHeight: layout.implicitHeight + Tokens.padding.smaller * 2
-	radius: Appearance.rounding.normal
+	radius: Tokens.rounding.normal
 
 	Behavior on border.color {
 		CAnim {
@@ -51,24 +52,24 @@ CustomRect {
 		id: layout
 
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.normal
+		anchors.leftMargin: Tokens.padding.normal
-		anchors.margins: Appearance.padding.smaller
+		anchors.margins: Tokens.padding.smaller
-		anchors.rightMargin: Appearance.padding.normal
+		anchors.rightMargin: Tokens.padding.normal
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		CustomRect {
 			color: {
 				if (root.modelData.type === Toast.Success)
-					return DynamicColors.palette.m3success;
+					return Colors.palette.m3success;
 				if (root.modelData.type === Toast.Warning)
-					return DynamicColors.palette.m3secondaryContainer;
+					return Colors.palette.m3secondaryContainer;
 				if (root.modelData.type === Toast.Error)
-					return DynamicColors.palette.m3error;
+					return Colors.palette.m3error;
-				return DynamicColors.palette.m3surfaceContainerHigh;
+				return Colors.palette.m3surfaceContainerHigh;
 			}
-			implicitHeight: icon.implicitHeight + Appearance.padding.smaller * 2
+			implicitHeight: icon.implicitHeight + Tokens.padding.smaller * 2
 			implicitWidth: implicitHeight
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.normal
 
 			MaterialIcon {
 				id: icon
@@ -76,14 +77,14 @@ CustomRect {
 				anchors.centerIn: parent
 				color: {
 					if (root.modelData.type === Toast.Success)
-						return DynamicColors.palette.m3onSuccess;
+						return Colors.palette.m3onSuccess;
 					if (root.modelData.type === Toast.Warning)
-						return DynamicColors.palette.m3onSecondaryContainer;
+						return Colors.palette.m3onSecondaryContainer;
 					if (root.modelData.type === Toast.Error)
-						return DynamicColors.palette.m3onError;
+						return Colors.palette.m3onError;
-					return DynamicColors.palette.m3onSurfaceVariant;
+					return Colors.palette.m3onSurfaceVariant;
 				}
-				font.pointSize: Math.round(Appearance.font.size.large * 1.2)
+				font.pointSize: Math.round(Tokens.font.size.large * 1.2)
 				text: root.modelData.icon
 			}
 		}
@@ -98,15 +99,15 @@ CustomRect {
 				Layout.fillWidth: true
 				color: {
 					if (root.modelData.type === Toast.Success)
-						return DynamicColors.palette.m3onSuccessContainer;
+						return Colors.palette.m3onSuccessContainer;
 					if (root.modelData.type === Toast.Warning)
-						return DynamicColors.palette.m3onSecondary;
+						return Colors.palette.m3onSecondary;
 					if (root.modelData.type === Toast.Error)
-						return DynamicColors.palette.m3onErrorContainer;
+						return Colors.palette.m3onErrorContainer;
-					return DynamicColors.palette.m3onSurface;
+					return Colors.palette.m3onSurface;
 				}
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				text: root.modelData.title
 			}
 
@@ -114,12 +115,12 @@ CustomRect {
 				Layout.fillWidth: true
 				color: {
 					if (root.modelData.type === Toast.Success)
-						return DynamicColors.palette.m3onSuccessContainer;
+						return Colors.palette.m3onSuccessContainer;
 					if (root.modelData.type === Toast.Warning)
-						return DynamicColors.palette.m3onSecondary;
+						return Colors.palette.m3onSecondary;
 					if (root.modelData.type === Toast.Error)
-						return DynamicColors.palette.m3onErrorContainer;
+						return Colors.palette.m3onErrorContainer;
-					return DynamicColors.palette.m3onSurface;
+					return Colors.palette.m3onSurface;
 				}
 				elide: Text.ElideRight
 				opacity: 0.8

Components/Toast/Toasts.qml

@@ -4,13 +4,13 @@ import ZShell
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
 
 	property bool flag
-	readonly property int spacing: Appearance.spacing.small
+	readonly property int spacing: Tokens.spacing.small
 
 	implicitHeight: {
 		let h = -spacing;
@@ -21,7 +21,7 @@ Item {
 		}
 		return h;
 	}
-	implicitWidth: Config.utilities.sizes.toastWidth - Appearance.padding.normal * 2
+	implicitWidth: Config.utilities.sizes.toastWidth - Tokens.padding.normal * 2
 
 	Repeater {
 		id: repeater
@@ -81,8 +81,8 @@ Item {
 
 		Behavior on anchors.bottomMargin {
 			Anim {
-				duration: Appearance.anim.durations.expressiveDefaultSpatial
+				duration: Tokens.anim.durations.expressiveDefaultSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+				easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 			}
 		}
 		Behavior on opacity {
@@ -104,8 +104,8 @@ Item {
 		Anim {
 			id: initAnim
 
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			duration: Tokens.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 			from: 0
 			properties: "opacity,scale"
 			target: toast

Components/WavyTopRect.qml

@@ -1,12 +1,13 @@
 import QtQuick
 import QtQuick.Shapes
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Shape {
 	id: root
 
 	property real amplitude: 3
-	property color color: DynamicColors.palette.m3surfaceContainer
+	property color color: Colors.palette.m3surfaceContainer
 	readonly property real waveHeight: amplitude * 2
 	property int waves: 4
 

Config/AccentColor.qml

@@ -1,13 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property Accents accents: Accents {
-	}
-
-	component Accents: JsonObject {
-		property string primary: "#4080ff"
-		property string primaryAlt: "#60a0ff"
-		property string warning: "#ff6b6b"
-		property string warningAlt: "#ff8787"
-	}
-}

Config/Appearance.qml

@@ -1,119 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import QtQuick
-
-Singleton {
-	property Anim anim: Anim {
-	}
-	property Deform deform: Deform {
-	}
-	property FontStuff font: FontStuff {
-	}
-	property Padding padding: Padding {
-	}
-	property Rounding rounding: Rounding {
-	}
-	property Spacing spacing: Spacing {
-	}
-	property Transparency transparency: Transparency {
-	}
-
-	component Anim: QtObject {
-		property AnimCurves curves: AnimCurves {
-		}
-		property AnimDurations durations: AnimDurations {
-		}
-		property real mediaGifSpeedAdjustment: Config.appearance.anim.mediaGifSpeedAdjustment
-		property real sessionGifSpeed: Config.appearance.anim.sessionGifSpeed
-	}
-	component AnimCurves: QtObject {
-		property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
-		property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
-		property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
-		property list<real> expressiveDefaultEffects: [0.34, 0.8, 0.34, 1, 1, 1]
-		property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
-		property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
-		property list<real> expressiveFastEffects: [0.31, 0.94, 0.34, 1, 1, 1]
-		property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
-		property list<real> expressiveSlowEffects: [0.34, 0.88, 0.34, 1, 1, 1]
-		property list<real> expressiveSlowSpatial: [0.39, 1.29, 0.35, 0.98, 1, 1]
-		property list<real> standard: [0.2, 0, 0, 1, 1, 1]
-		property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
-		property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
-	}
-	component AnimDurations: QtObject {
-		property int expressiveDefaultSpatial: 500 * scale
-		property int expressiveEffects: 200 * scale
-		property int expressiveFastEffects: 150 * scale
-		property int expressiveFastSpatial: 350 * scale
-		property int expressiveSlowEffects: 300 * scale
-		property int extraLarge: 1000 * scale
-		property int large: 600 * scale
-		property int normal: 400 * scale
-		property real scale: 1
-		property int small: 200 * scale
-	}
-	component Deform: QtObject {
-		property real scale: Config.appearance.deform.scale
-	}
-	component FontFamily: QtObject {
-		property string clock: Config.appearance.font.family.clock
-		property string material: Config.appearance.font.family.material
-		property string mono: Config.appearance.font.family.mono
-		property string sans: Config.appearance.font.family.sans
-	}
-	component FontSize: QtObject {
-		property int extraLarge: 28 * scale
-		property int large: 18 * scale
-		property int larger: 16 * scale
-		property int medium: 14 * scale
-		property int normal: 13 * scale
-		property real scale: 1
-		property int small: 11 * scale
-		property int smaller: 12 * scale
-	}
-	component FontStuff: QtObject {
-		property FontFamily family: FontFamily {
-		}
-		property FontSize size: FontSize {
-		}
-	}
-	component Padding: QtObject {
-		property int extraLarge: 28 * scale
-		property int extraLargeIncreased: 32 * scale
-		property int extraSmall: 4 * scale
-		property int large: 16 * scale
-		property int largeIncreased: 20 * scale
-		property int larger: 12 * scale
-		property int normal: 8 * scale
-		property real scale: 1
-		property int small: 5 * scale
-		property int smaller: 7 * scale
-		property int smallest: 2 * scale
-	}
-	component Rounding: QtObject {
-		property int extraSmall: 4 * scale
-		property int full: 1000 * scale
-		property int large: 24 * scale
-		property int medium: 16 * scale
-		property int normal: 18 * scale
-		property real scale: 1
-		property int small: 12 * scale
-		property int smallest: 8 * scale
-	}
-	component Spacing: QtObject {
-		property int extraSmall: 4 * scale
-		property int large: 20 * scale
-		property int larger: 16 * scale
-		property int normal: 12 * scale
-		property real scale: 1
-		property int small: 8 * scale
-		property int smaller: 10 * scale
-	}
-	component Transparency: QtObject {
-		property real base: Config.appearance.transparency.base
-		property bool enabled: Config.appearance.transparency.enabled
-		property real layers: Config.appearance.transparency.layers
-	}
-}

Config/AppearanceConf.qml

@@ -1,35 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property Anim anim: Anim {
-	}
-	property Deform deform: Deform {
-	}
-	property FontStuff font: FontStuff {
-	}
-	property Transparency transparency: Transparency {
-	}
-
-	component Anim: JsonObject {
-		property real mediaGifSpeedAdjustment: 300
-		property real sessionGifSpeed: 0.7
-	}
-	component Deform: JsonObject {
-		property real scale: 1
-	}
-	component FontFamily: JsonObject {
-		property string clock: "Rubik"
-		property string material: "Material Symbols Rounded"
-		property string mono: "CaskaydiaCove NF"
-		property string sans: "Segoe UI Variable Text"
-	}
-	component FontStuff: JsonObject {
-		property FontFamily family: FontFamily {
-		}
-	}
-	component Transparency: JsonObject {
-		property real base: 0.85
-		property bool enabled: false
-		property real layers: 0.4
-	}
-}

Config/BackgroundConfig.qml

@@ -1,7 +0,0 @@
-import Quickshell.Io
-import qs.Config
-
-JsonObject {
-	property bool enabled: true
-	property int wallFadeDuration: MaterialEasing.standardTime
-}

Config/BarConfig.qml

@@ -1,104 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool autoHide: false
-	property int border: 8
-	property list<var> entries: [
-		{
-			id: "workspaces",
-			enabled: true
-		},
-		{
-			id: "media",
-			enabled: true
-		},
-		{
-			id: "resources",
-			enabled: true
-		},
-		{
-			id: "updates",
-			enabled: true
-		},
-		{
-			id: "spacer",
-			enabled: true
-		},
-		{
-			id: "activeWindow",
-			enabled: true
-		},
-		{
-			id: "spacer",
-			enabled: true
-		},
-		{
-			id: "hyprsunset",
-			enabled: true
-		},
-		{
-			id: "tray",
-			enabled: true
-		},
-		{
-			id: "statusIcons",
-			enabled: true
-		},
-		{
-			id: "network",
-			enabled: false
-		},
-		{
-			id: "clock",
-			enabled: true
-		},
-		{
-			id: "notifBell",
-			enabled: true
-		},
-	]
-	property int height: 34
-	property bool hideWhenNotif: false
-	property Popouts popouts: Popouts {
-	}
-	property int rounding: 8
-	property int smoothing: 32
-	property Tray tray: Tray {
-	}
-
-	component Popouts: JsonObject {
-		property bool statusIcons: true
-		property bool tray: true
-	}
-	component Tray: JsonObject {
-		property bool recolorIcons: false
-		property bool showOnHover: false
-		property list<var> statusIcons: [
-			{
-				id: "audio",
-				enabled: true
-			},
-			{
-				id: "microphone",
-				enabled: true
-			},
-			{
-				id: "bluetooth",
-				enabled: true
-			},
-			{
-				id: "network",
-				enabled: false
-			},
-			{
-				id: "wifi",
-				enabled: false
-			},
-			{
-				id: "power",
-				enabled: true
-			},
-		]
-		property int trayIconSize: 24
-	}
-}

Config/ClipboardConfig.qml

@@ -1,15 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enabled: true
-	property int maxEntriesShown: 10
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int itemHeight: 60
-		property int minPreviewWidth: 200
-		property int previewWidth: 500
-		property int width: 500
-	}
-}

Config/Colors.qml

@@ -1,13 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property Presets presets: Presets {
-	}
-	property string schemeType: "vibrant"
-
-	component Presets: JsonObject {
-		property string accent: ""
-		property string name: ""
-		property string variant: ""
-	}
-}

Config/Config.qml

@@ -1,186 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import Quickshell.Io
-import ZShell
-import QtQuick
-import qs.Helpers
-import qs.Paths
-
-Singleton {
-	id: root
-
-	property alias appearance: adapter.appearance
-	property alias background: adapter.background
-	property alias bar: adapter.bar
-	property alias clipboard: adapter.clipboard
-	property alias colors: adapter.colors
-	property alias dashboard: adapter.dashboard
-	property alias dock: adapter.dock
-	property alias general: adapter.general
-	property alias launcher: adapter.launcher
-	property alias lock: adapter.lock
-	property bool migratingLegacyBar: false
-	property alias notifs: adapter.notifs
-	property alias osd: adapter.osd
-	property alias overview: adapter.overview
-	property bool recentlySaved: false
-	property alias screenshot: adapter.screenshot
-	property alias services: adapter.services
-	property alias sidebar: adapter.sidebar
-	property alias utilities: adapter.utilities
-
-	function applyLegacyBarConfig(legacy): void {
-		const tray = legacy.tray ?? {};
-		const popouts = legacy.popouts ?? {};
-
-		bar.autoHide = pick(legacy.autoHide, bar.autoHide);
-		bar.hideWhenNotif = pick(legacy.hideWhenNotif, bar.hideWhenNotif);
-		bar.rounding = pick(legacy.rounding, bar.rounding);
-		bar.border = pick(legacy.border, bar.border);
-		bar.smoothing = pick(legacy.smoothing, bar.smoothing);
-		bar.height = pick(legacy.height, bar.height);
-		bar.tray.trayIconSize = pick(tray.trayIconSize, bar.tray.trayIconSize);
-		bar.popouts.tray = pick(popouts.tray, bar.popouts.tray);
-		bar.popouts.audio = pick(popouts.audio, bar.popouts.audio);
-		bar.popouts.activeWindow = pick(popouts.activeWindow, bar.popouts.activeWindow);
-		bar.popouts.resources = pick(popouts.resources, bar.popouts.resources);
-		bar.popouts.clock = pick(popouts.clock, bar.popouts.clock);
-		bar.popouts.network = pick(popouts.network, bar.popouts.network);
-		bar.popouts.upower = pick(popouts.upower, bar.popouts.upower);
-		bar.entries = pick(legacy.entries, bar.entries);
-	}
-
-	function migrateLegacyBarConfig(raw): bool {
-		if (raw.bar !== undefined || raw.barConfig === undefined)
-			return false;
-
-		migratingLegacyBar = true;
-		applyLegacyBarConfig(raw.barConfig);
-		migratingLegacyBar = false;
-		return true;
-	}
-
-	function pick(value, fallback) {
-		return value === undefined ? fallback : value;
-	}
-
-	function save(): void {
-		saveTimer.restart();
-		recentlySaved = true;
-		recentSaveCooldown.restart();
-	}
-
-	function saveNoToast(): void {
-		saveTimer.restart();
-	}
-
-	ElapsedTimer {
-		id: timer
-	}
-
-	Timer {
-		id: saveTimer
-
-		interval: 500
-
-		onTriggered: {
-			timer.restart();
-			fileView.writeAdapter();
-		}
-	}
-
-	Timer {
-		id: recentSaveCooldown
-
-		interval: 2000
-
-		onTriggered: {
-			root.recentlySaved = false;
-		}
-	}
-
-	FileView {
-		id: fileView
-
-		path: `${Paths.config}/config.json`
-		watchChanges: true
-
-		onAdapterUpdated: {
-			if (!root.migratingLegacyBar)
-				root.save();
-		}
-		onFileChanged: {
-			if (!root.recentlySaved) {
-				timer.restart();
-				reload();
-			} else {
-				reload();
-			}
-		}
-		onLoadFailed: err => {
-			if (err !== FileViewError.FileNotFound)
-				Toaster.toast(qsTr("Failed to read config"), FileViewError.toString(err), "settings_alert", Toast.Warning);
-		}
-		onLoaded: {
-			ModeScheduler.checkStartup();
-			Hyprsunset.checkStartup();
-			try {
-				const raw = JSON.parse(text());
-				const migrated = root.migrateLegacyBarConfig(raw);
-				if (migrated)
-					root.save();
-
-				const elapsed = timer.elapsedMs();
-
-				if (adapter.utilities.toasts.configLoaded && !root.recentlySaved) {
-					Toaster.toast(qsTr("Config loaded"), qsTr("Config loaded in %1ms").arg(elapsed), "rule_settings");
-				} else if (adapter.utilities.toasts.configLoaded && root.recentlySaved) {
-					Toaster.toast(qsTr("Config saved"), qsTr("Config reloaded in %1ms").arg(elapsed), "settings_alert");
-				}
-			} catch (e) {
-				Toaster.toast(qsTr("Failed to load config"), e.message, "settings_alert", Toast.Error);
-			}
-		}
-		onSaveFailed: err => Toaster.toast(qsTr("Failed to save config"), FileViewError.toString(err), "settings_alert", Toast.Error)
-
-		JsonAdapter {
-			id: adapter
-
-			property AppearanceConf appearance: AppearanceConf {
-			}
-			property BackgroundConfig background: BackgroundConfig {
-			}
-			property BarConfig bar: BarConfig {
-			}
-			property ClipboardConfig clipboard: ClipboardConfig {
-			}
-			property Colors colors: Colors {
-			}
-			property DashboardConfig dashboard: DashboardConfig {
-			}
-			property DockConfig dock: DockConfig {
-			}
-			property General general: General {
-			}
-			property Launcher launcher: Launcher {
-			}
-			property LockConf lock: LockConf {
-			}
-			property NotifConfig notifs: NotifConfig {
-			}
-			property Osd osd: Osd {
-			}
-			property Overview overview: Overview {
-			}
-			property Screenshot screenshot: Screenshot {
-			}
-			property Services services: Services {
-			}
-			property SidebarConfig sidebar: SidebarConfig {
-			}
-			property UtilConfig utilities: UtilConfig {
-			}
-		}
-	}
-}

Config/DashboardConfig.qml

@@ -1,37 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enabled: true
-	property int mediaUpdateInterval: 500
-	property Performance performance: Performance {
-	}
-	property int resourceUpdateInterval: 1000
-	property Sizes sizes: Sizes {
-	}
-
-	component Performance: JsonObject {
-		property bool enabled: true
-		property bool showBattery: true
-		property bool showCpu: true
-		property bool showGpu: true
-		property bool showMemory: true
-		property bool showNetwork: true
-		property bool showStorage: true
-		property bool showVram: true
-	}
-	component Sizes: JsonObject {
-		readonly property int dateTimeWidth: 110
-		readonly property int infoIconSize: 25
-		readonly property int infoWidth: 200
-		readonly property int mediaCoverArtSize: 150
-		readonly property int mediaProgressSweep: 180
-		readonly property int mediaProgressThickness: 8
-		readonly property int mediaVisualizerSize: 200
-		readonly property int mediaWidth: 200
-		readonly property int resourceProgessThickness: 10
-		readonly property int resourceSize: 200
-		readonly property int tabIndicatorHeight: 3
-		readonly property int tabIndicatorSpacing: 5
-		readonly property int weatherWidth: 250
-	}
-}

Config/DockConfig.qml

@@ -1,10 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enable: false
-	property real height: 60
-	property bool hoverToReveal: true
-	property list<string> ignoredAppRegexes: []
-	property list<string> pinnedApps: ["org.kde.dolphin", "kitty",]
-	property bool pinnedOnStartup: false
-}

Config/General.qml

@@ -1,68 +0,0 @@
-import Quickshell.Io
-import Quickshell
-
-JsonObject {
-	property Apps apps: Apps {
-	}
-	property Battery battery: Battery {
-	}
-	property Color color: Color {
-	}
-	property string dateFormat: "ddd d MMM - hh:mm:ss"
-	property bool desktopIcons: false
-	property Idle idle: Idle {
-	}
-	property string logo: ""
-	property bool showOverFullscreen: true
-	property string wallpaperPath: Quickshell.env("HOME") + "/Pictures/Wallpapers"
-
-	component Apps: JsonObject {
-		property list<string> archiver: ["ark"]
-		property list<string> audio: ["pavucontrol"]
-		property list<string> document: ["libreoffice"]
-		property list<string> editor: ["kate"]
-		property list<string> explorer: ["dolphin"]
-		property list<string> image: ["imv"]
-		property list<string> playback: ["mpv"]
-		property list<string> terminal: ["kitty"]
-	}
-	component Battery: JsonObject {
-		property int critPerc: 5
-		property list<var> popupThresholds: [
-			{
-				perc: 20,
-				name: qsTr("Low battery"),
-				message: qsTr("Battery is low"),
-				icon: "battery_android_frame_2"
-			},
-		]
-	}
-	component Color: JsonObject {
-		property int hyprsunsetTemp: 5000
-		property string mode: "dark"
-		property bool neovimColors: false
-		property bool scheduleDark: false
-		property int scheduleDarkEnd: 0
-		property int scheduleDarkStart: 0
-		property bool scheduleHyprsunset: false
-		property int scheduleHyprsunsetEnd: 0
-		property int scheduleHyprsunsetStart: 0
-		property bool schemeGeneration: true
-		property bool smart: false
-	}
-	component Idle: JsonObject {
-		property list<var> timeouts: [
-			{
-				name: "Lock",
-				timeout: 180,
-				idleAction: "lock"
-			},
-			{
-				name: "Screen",
-				timeout: 300,
-				idleAction: "dpms off",
-				activeAction: "dpms on"
-			}
-		]
-	}
-}

Config/IdleTimeout.qml

@@ -1,15 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property list<var> timeouts: [
-		{
-			timeout: 180,
-			idleAction: "lock"
-		},
-		{
-			timeout: 300,
-			idleAction: "dpms off",
-			activeAction: "dpms on"
-		}
-	]
-}

Config/Launcher.qml

@@ -1,114 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property string actionPrefix: ">"
-	property list<var> actions: [
-		{
-			name: "Calculator",
-			icon: "calculate",
-			description: "Do simple math equations",
-			command: ["autocomplete", "calc"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Light",
-			icon: "light_mode",
-			description: "Change to light mode",
-			command: ["setMode", "light"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Dark",
-			icon: "dark_mode",
-			description: "Change to dark mode",
-			command: ["setMode", "dark"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Wallpaper",
-			icon: "image",
-			description: "Change the current wallpaper",
-			command: ["autocomplete", "wallpaper"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Variant",
-			icon: "colors",
-			description: "Change the current scheme variant",
-			command: ["autocomplete", "variant"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Shutdown",
-			icon: "power_settings_new",
-			description: "Shutdown the system",
-			command: ["systemctl", "poweroff"],
-			enabled: true,
-			dangerous: true
-		},
-		{
-			name: "Reboot",
-			icon: "cached",
-			description: "Reboot the system",
-			command: ["systemctl", "reboot"],
-			enabled: true,
-			dangerous: true
-		},
-		{
-			name: "Logout",
-			icon: "logout",
-			description: "Log out of the current session",
-			command: ["loginctl", "terminate-user", ""],
-			enabled: true,
-			dangerous: true
-		},
-		{
-			name: "Lock",
-			icon: "lock",
-			description: "Lock the current session",
-			command: ["loginctl", "lock-session"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Sleep",
-			icon: "bedtime",
-			description: "Suspend then hibernate",
-			command: ["systemctl", "suspend-then-hibernate"],
-			enabled: true,
-			dangerous: false
-		},
-	]
-	property int dragThreshold: 50
-	property bool enableDangerousActions: false
-	property bool enabled: true
-	property list<string> favoriteApps: []
-	property list<string> hiddenApps: []
-	property int maxAppsShown: 10
-	property int maxWallpapers: 7
-	property Sizes sizes: Sizes {
-	}
-	property string specialPrefix: "@"
-	property UseFuzzy useFuzzy: UseFuzzy {
-	}
-	property bool uwsm: true
-
-	component Sizes: JsonObject {
-		property int itemHeight: 50
-		property int itemWidth: 600
-		property int wallpaperHeight: 200
-		property int wallpaperWidth: 280
-	}
-	component UseFuzzy: JsonObject {
-		property bool actions: false
-		property bool apps: false
-		property bool schemes: false
-		property bool variants: false
-		property bool wallpapers: false
-	}
-}

Config/LockConf.qml

@@ -1,18 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property int blurAmount: 40
-	property bool enableFprint: true
-	property int maxFprintTries: 3
-	property bool recolorLogo: false
-	property bool showNotifContent: false
-	property bool showNotifIcon: true
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int centerWidth: 600
-		property real heightMult: 0.7
-		property real ratio: 16 / 9
-	}
-}

Config/MaterialEasing.qml

@@ -1,26 +0,0 @@
-pragma Singleton
-import Quickshell
-
-Singleton {
-	id: root
-
-	readonly property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
-	readonly property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
-	readonly property int emphasizedAccelTime: 200 * scale
-	readonly property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
-	readonly property int emphasizedDecelTime: 400 * scale
-	readonly property int emphasizedTime: 500 * scale
-	readonly property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1.00, 1, 1]
-	readonly property int expressiveDefaultSpatialTime: 500 * scale
-	readonly property list<real> expressiveEffects: [0.34, 0.80, 0.34, 1.00, 1, 1]
-	readonly property int expressiveEffectsTime: 200 * scale
-	readonly property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.90, 1, 1]
-	readonly property int expressiveFastSpatialTime: 350 * scale
-	property real scale: Appearance.anim.durations.scale
-	readonly property list<real> standard: [0.2, 0, 0, 1, 1, 1]
-	readonly property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
-	readonly property int standardAccelTime: 200 * scale
-	readonly property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
-	readonly property int standardDecelTime: 250 * scale
-	readonly property int standardTime: 300 * scale
-}

Config/NotifConfig.qml

@@ -1,21 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool actionOnClick: false
-	property int appNotifCooldown: 0
-	property real clearThreshold: 0.3
-	property int defaultExpireTimeout: 5000
-	property int expandThreshold: 20
-	property bool expire: true
-	property int groupPreviewNum: 3
-	property bool openExpanded: false
-	property bool showInFullscreen: true
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int badge: 20
-		property int image: 41
-		property int width: 400
-	}
-}

Config/Osd.qml

@@ -1,16 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool allMonBrightness: false
-	property bool enableBrightness: true
-	property bool enableMicrophone: true
-	property bool enabled: true
-	property int hideDelay: 3000
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int sliderHeight: 150
-		property int sliderWidth: 30
-	}
-}

Config/Overview.qml

@@ -1,8 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property int columns: 5
-	property bool enable: false
-	property int rows: 2
-	property real scale: 0.16
-}

Config/Screenshot.qml

@@ -1,14 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enable_pp: true
-	property string mode: "manual"
-	property real radius: 12.0
-	property bool rounding: false
-	property bool saveOnCopy: false
-	property bool shadow: true
-	property real shadow_blur: 22.0
-	property list<int> shadow_color: [0, 0, 0, 160]
-	property real shadow_offset_x: 5.0
-	property real shadow_offset_y: 5.0
-}

Config/Services.qml

@@ -1,23 +0,0 @@
-import Quickshell.Io
-import QtQuick
-
-JsonObject {
-	property real audioIncrement: 0.1
-	property real brightnessIncrement: 0.1
-	property bool ddcutilService: false
-	property string defaultPlayer: "Spotify"
-	property string gpuType: ""
-	property real maxVolume: 1.0
-	property real minBrightness: 0.01
-	property list<var> playerAliases: [
-		{
-			"from": "com.github.th_ch.youtube_music",
-			"to": "YT Music"
-		}
-	]
-	property bool updates: true
-	property bool useFahrenheit: false
-	property bool useTwelveHourClock: Qt.locale().timeFormat(Locale.ShortFormat).toLowerCase().includes("a")
-	property int visualizerBars: 30
-	property string weatherLocation: ""
-}

Config/SidebarConfig.qml

@@ -1,12 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property int dragThreshold: 30
-	property bool enabled: true
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int width: 430
-	}
-}

Config/Transparency.qml

@@ -1,7 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property real base: 0.85
-	property bool enabled: false
-	property real layers: 0.4
-}

Config/UtilConfig.qml

@@ -1,35 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enabled: true
-	property int maxToasts: 4
-	property Sizes sizes: Sizes {
-	}
-	property Toasts toasts: Toasts {
-	}
-	property Vpn vpn: Vpn {
-	}
-
-	component Sizes: JsonObject {
-		property int toastWidth: 430
-		property int width: 430
-	}
-	component Toasts: JsonObject {
-		property bool audioInputChanged: true
-		property bool audioOutputChanged: true
-		property bool capsLockChanged: true
-		property bool chargingChanged: true
-		property bool configLoaded: true
-		property bool dndChanged: true
-		property bool gameModeChanged: true
-		property bool kbLayoutChanged: true
-		property bool kbLimit: true
-		property bool nowPlaying: false
-		property bool numLockChanged: true
-		property bool vpnChanged: true
-	}
-	component Vpn: JsonObject {
-		property bool enabled: false
-		property list<var> provider: ["netbird"]
-	}
-}

Config/WorkspaceWidget.qml

@@ -1,6 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property string inactiveTextColor: "white"
-	property string textColor: "black"
-}

Daemons/Audio.qml

@@ -5,7 +5,7 @@ import ZShell
 import Quickshell
 import Quickshell.Services.Pipewire
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 Singleton {
 	id: root

Daemons/BatteryService.qml

@@ -2,7 +2,7 @@ import Quickshell
 import Quickshell.Services.UPower
 import QtQuick
 import ZShell
-import qs.Config
+import ZShell.Config
 import qs.Components.Toast
 import qs.Helpers
 

Daemons/NotifServer.qml

@@ -11,7 +11,7 @@ import qs.Components
 import qs.Modules
 import qs.Helpers
 import qs.Paths
-import qs.Config
+import ZShell.Config
 
 Singleton {
 	id: root

Drawers/Exclusions.qml

@@ -2,7 +2,7 @@ pragma ComponentBehavior: Bound
 
 import Quickshell
 import QtQuick
-import qs.Config
+import ZShell.Config
 import qs.Components
 
 Scope {

Drawers/Interactions.qml

@@ -1,7 +1,7 @@
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Modules as BarPopouts
 

Drawers/Panels.qml

@@ -14,7 +14,7 @@ import qs.Modules.Settings as Settings
 import qs.Modules.Drawing as Drawing
 import qs.Modules.Dock as Dock
 import qs.Modules.Clipboard as Clipboard
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
@@ -108,7 +108,7 @@ Item {
 		id: toasts
 
 		anchors.bottom: sidebar.visible ? parent.bottom : utilities.top
-		anchors.margins: Appearance.padding.normal
+		anchors.margins: Tokens.padding.normal
 		anchors.right: sidebar.left
 	}
 
@@ -155,8 +155,8 @@ Item {
 
 		Behavior on offsetScale {
 			Anim {
-				duration: Appearance.anim.durations.expressiveDefaultSpatial
+				duration: Tokens.anim.durations.expressiveDefaultSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+				easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 			}
 		}
 

Drawers/Windows.qml

@@ -11,9 +11,10 @@ import ZShell.Blobs
 import qs.Daemons
 import qs.Components
 import qs.Modules.Bar
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Drawers
+import qs.Services
 
 CustomWindow {
 	id: root
@@ -50,7 +51,7 @@ CustomWindow {
 	property var root: Quickshell.shellDir
 	readonly property real sdfBorderOffset: 2 * fsTransitionProg
 	readonly property real shadowOpacity: 0.7 * (1 - fsTransitionProg)
-	property color surfaceColor: DynamicColors.tPalette.m3surface
+	property color surfaceColor: Colors.tPalette.m3surface
 
 	WlrLayershell.exclusionMode: ExclusionMode.Ignore
 	WlrLayershell.keyboardFocus: visibilities.launcher || visibilities.settings ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
@@ -178,7 +179,7 @@ CustomWindow {
 
 		layer.effect: MultiEffect {
 			blurMax: 32
-			shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, Math.max(0, root.shadowOpacity))
+			shadowColor: Qt.alpha(Colors.palette.m3shadow, Math.max(0, root.shadowOpacity))
 			shadowEnabled: true
 		}
 
@@ -209,7 +210,7 @@ CustomWindow {
 			implicitHeight: panels.dashboard.height * (1 + extraHeight)
 			implicitWidth: panels.dashboard.width
 			panel: panels.dashboardWrapper
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.normal
 			x: panels.dashboardWrapper.x + panels.dashboard.x + root.borderThickness
 			y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
 		}
@@ -222,7 +223,7 @@ CustomWindow {
 			deformAmount: 0.06
 			implicitHeight: panels.launcher.height * (1 + extraHeight)
 			panel: panels.launcher
-			radius: Appearance.rounding.smallest + 5
+			radius: Tokens.rounding.smallest + 5
 			y: panels.launcher.y + bar.implicitHeight
 		}
 
@@ -252,7 +253,7 @@ CustomWindow {
 			id: notifsBg
 
 			panel: panels.notifications
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.normal
 		}
 
 		PanelBg {
@@ -273,7 +274,7 @@ CustomWindow {
 			implicitHeight: panels.popouts.height * (1 + extraHeight)
 			implicitWidth: panels.popouts.width
 			panel: panels.popoutsWrapper
-			radius: panels.popouts.current?.panelRadius ?? Appearance.rounding.normal
+			radius: panels.popouts.current?.panelRadius ?? Tokens.rounding.normal
 			x: panels.popoutsWrapper.x + panels.popouts.x + root.borderThickness
 			y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
 
@@ -290,7 +291,7 @@ CustomWindow {
 			implicitHeight: panels.resources.height
 			implicitWidth: panels.resources.width
 			panel: panels.resourcesWrapper
-			radius: Appearance.rounding.large
+			radius: Tokens.rounding.large
 			x: panels.resourcesWrapper.x + panels.resources.x + root.borderThickness
 			y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
 		}
@@ -300,7 +301,7 @@ CustomWindow {
 
 			deformAmount: 0.03
 			panel: panels.settings
-			radius: Appearance.rounding.large + Appearance.padding.normal
+			radius: Tokens.rounding.large + Tokens.padding.normal
 		}
 
 		PanelBg {
@@ -308,7 +309,7 @@ CustomWindow {
 
 			deformAmount: 0.08
 			panel: panels.dock
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.normal
 		}
 
 		PanelBg {
@@ -316,7 +317,7 @@ CustomWindow {
 
 			deformAmount: 0.08
 			panel: panels.drawing
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.normal
 		}
 
 		PanelBg {
@@ -441,7 +442,7 @@ CustomWindow {
 		group: blobGroup
 		implicitHeight: panel.height
 		implicitWidth: panel.width
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.smallest
 		x: panel.x + root.borderThickness
 		y: panel.y + bar.implicitHeight
 	}

Greeter/Center.qml

@@ -5,7 +5,8 @@ import QtQuick.Layouts
 import qs.Paths
 import qs.Components
 import qs.Helpers
-import qs.Config
+import ZShell.Config
+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
+		Layout.topMargin: -Tokens.padding.large * 2
-		color: DynamicColors.palette.m3tertiary
+		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
+		Layout.topMargin: Tokens.spacing.large * 2
-		color: DynamicColors.tPalette.m3surfaceContainer
+		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,9 +88,9 @@ ColumnLayout {
 
 	CustomText {
 		Layout.alignment: Qt.AlignHCenter
-		color: DynamicColors.palette.m3onSurfaceVariant
+		color: Colors.palette.m3onSurfaceVariant
 		font.family: Appearance.font.family.mono
-		font.pointSize: Appearance.font.size.normal
+		font.pointSize: Tokens.font.size.normal
 		font.weight: 600
 		text: root.greeter.username
 		visible: text.length > 0
@@ -97,11 +98,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.greeter.launching)
@@ -130,11 +131,11 @@ ColumnLayout {
 			id: input
 
 			anchors.fill: parent
-			anchors.margins: Appearance.padding.small
+			anchors.margins: Tokens.padding.small
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			Item {
-				implicitHeight: statusIcon.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: statusIcon.implicitHeight + Tokens.padding.small * 2
 				implicitWidth: implicitHeight
 
 				MaterialIcon {
@@ -142,7 +143,7 @@ ColumnLayout {
 
 					anchors.centerIn: parent
 					animate: true
-					color: root.greeter.errorMessage ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+					color: root.greeter.errorMessage ? Colors.palette.m3error : Colors.palette.m3onSurface
 					opacity: root.greeter.launching ? 0 : 1
 					text: {
 						if (root.greeter.errorMessage)
@@ -173,13 +174,13 @@ ColumnLayout {
 			}
 
 			CustomRect {
-				color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+				color: root.greeter.buffer && !root.greeter.launching ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
-				implicitHeight: enterIcon.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: enterIcon.implicitHeight + Tokens.padding.small * 2
 				implicitWidth: implicitHeight
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 
 				StateLayer {
-					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					color: root.greeter.buffer && !root.greeter.launching ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 
 					onClicked: {
 						root.greeter.submit();
@@ -190,7 +191,7 @@ ColumnLayout {
 					id: enterIcon
 
 					anchors.centerIn: parent
-					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					color: root.greeter.buffer && !root.greeter.launching ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 					font.weight: 500
 					text: root.greeter.launching ? "hourglass_top" : "arrow_forward"
 				}
@@ -200,7 +201,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 {
@@ -236,7 +237,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
@@ -291,9 +292,9 @@ ColumnLayout {
 
 			anchors.left: parent.left
 			anchors.right: parent.right
-			color: isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+			color: isError ? Colors.palette.m3error : Colors.palette.m3primary
 			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
@@ -363,14 +364,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
@@ -380,7 +381,7 @@ ColumnLayout {
 	}
 
 	component FlashAnim: NumberAnimation {
-		duration: Appearance.anim.durations.small
+		duration: Tokens.anim.durations.small
 		easing.type: Easing.Linear
 		property: "opacity"
 		target: message

Greeter/Components/Anim.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 NumberAnimation {
 	enum Type {
@@ -23,41 +23,41 @@ NumberAnimation {
 
 	duration: {
 		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
-			return Appearance.anim.durations.normal;
+			return Tokens.anim.durations.normal;
 
 		if (type === Anim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
+			return Tokens.anim.durations.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
+			return Tokens.anim.durations.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Appearance.anim.durations.large;
+			return Tokens.anim.durations.large;
 		if (type === Anim.FastEffects)
-			return Appearance.anim.durations.expressiveFastEffects;
+			return Tokens.anim.durations.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Appearance.anim.durations.expressiveEffects;
+			return Tokens.anim.durations.expressiveEffects;
 		if (type === Anim.SlowEffects)
-			return Appearance.anim.durations.expressiveSlowEffects;
+			return Tokens.anim.durations.expressiveSlowEffects;
 
 		const types = ["small", "normal", "large", "extraLarge"];
 		const idx = type % 4; // 0-7 are the 4 standard types
-		return Appearance.anim.durations[types[idx]];
+		return Tokens.anim.durations[types[idx]];
 	}
 	easing.bezierCurve: {
 		if (type === Anim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
+			return Tokens.anim.curves.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
+			return Tokens.anim.curves.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
+			return Tokens.anim.curves.expressiveSlowSpatial;
 		if (type === Anim.FastEffects)
-			return Appearance.anim.curves.expressiveFastEffects;
+			return Tokens.anim.curves.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Appearance.anim.curves.expressiveDefaultEffects;
+			return Tokens.anim.curves.expressiveDefaultEffects;
 		if (type === Anim.SlowEffects)
-			return Appearance.anim.curves.expressiveSlowEffects;
+			return Tokens.anim.curves.expressiveSlowEffects;
 
 		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
+			return Tokens.anim.curves.emphasized;
-		return Appearance.anim.curves.standard;
+		return Tokens.anim.curves.standard;
 	}
 }

Greeter/Components/BaseStyledSlider.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Slider {
 	id: root
 
-	property color color: DynamicColors.palette.m3secondary
+	property color color: Colors.palette.m3secondary
 	required property string icon
 	property bool initialized: false
 	readonly property bool isHorizontal: orientation === Qt.Horizontal
@@ -22,9 +23,9 @@ Slider {
 	background: CustomRect {
 		id: groove
 
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+		color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
 		height: root.availableHeight
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 		width: root.availableWidth
 		x: root.leftPadding
 		y: root.topPadding
@@ -65,8 +66,8 @@ Slider {
 			id: rect
 
 			anchors.fill: parent
-			color: DynamicColors.palette.m3inverseSurface
+			color: Colors.palette.m3inverseSurface
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			MouseArea {
 				id: handleInteraction
@@ -85,12 +86,12 @@ Slider {
 				function update(): void {
 					animate = !moving;
 					binding.when = moving;
-					font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
+					font.pointSize = moving ? Tokens.font.size.small : Tokens.font.size.larger;
 					font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
 				}
 
 				anchors.centerIn: parent
-				color: DynamicColors.palette.m3inverseOnSurface
+				color: Colors.palette.m3inverseOnSurface
 				text: root.icon
 
 				onMovingChanged: anim.restart()
@@ -108,8 +109,8 @@ Slider {
 					id: anim
 
 					Anim {
-						duration: Appearance.anim.durations.normal / 2
+						duration: Tokens.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardAccel
+						easing.bezierCurve: Tokens.anim.curves.standardAccel
 						property: "scale"
 						target: icon
 						to: 0
@@ -120,8 +121,8 @@ Slider {
 					}
 
 					Anim {
-						duration: Appearance.anim.durations.normal / 2
+						duration: Tokens.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardDecel
+						easing.bezierCurve: Tokens.anim.curves.standardDecel
 						property: "scale"
 						target: icon
 						to: 1
@@ -132,7 +133,7 @@ Slider {
 	}
 	Behavior on value {
 		Anim {
-			duration: Appearance.anim.durations.large
+			duration: Tokens.anim.durations.large
 		}
 	}
 

Greeter/Components/CAnim.qml

@@ -1,8 +1,63 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 ColorAnimation {
-	duration: MaterialEasing.standardTime
+	enum Type {
-	easing.bezierCurve: MaterialEasing.standard
+		StandardSmall = 0,
-	easing.type: Easing.BezierSpline
+		Standard,
+		StandardLarge,
+		StandardExtraLarge,
+		EmphasizedSmall,
+		Emphasized,
+		EmphasizedLarge,
+		EmphasizedExtraLarge,
+		FastSpatial,
+		DefaultSpatial,
+		SlowSpatial,
+		FastEffects,
+		DefaultEffects,
+		SlowEffects
+	}
+
+	property int type: CAnim.DefaultSpatial
+
+	duration: {
+		if (type < CAnim.StandardSmall || type > Anim.SlowEffects)
+			return Tokens.anim.durations.normal;
+
+		if (type === CAnim.FastSpatial)
+			return Tokens.anim.durations.expressiveFastSpatial;
+		if (type === CAnim.DefaultSpatial)
+			return Tokens.anim.durations.expressiveDefaultSpatial;
+		if (type === CAnim.SlowSpatial)
+			return Tokens.anim.durations.large;
+		if (type === CAnim.FastEffects)
+			return Tokens.anim.durations.expressiveFastEffects;
+		if (type === CAnim.DefaultEffects)
+			return Tokens.anim.durations.expressiveEffects;
+		if (type === CAnim.SlowEffects)
+			return Tokens.anim.durations.expressiveSlowEffects;
+
+		const types = ["small", "normal", "large", "extraLarge"];
+		const idx = type % 4;
+		return Tokens.anim.durations[types[idx]];
+	}
+	easing.bezierCurve: {
+		if (type === CAnim.FastSpatial)
+			return Tokens.anim.curves.expressiveFastSpatial;
+		if (type === CAnim.DefaultSpatial)
+			return Tokens.anim.curves.expressiveDefaultSpatial;
+		if (type === CAnim.SlowSpatial)
+			return Tokens.anim.curves.expressiveSlowSpatial;
+		if (type === CAnim.FastEffects)
+			return Tokens.anim.curves.expressiveFastEffects;
+		if (type === CAnim.DefaultEffects)
+			return Tokens.anim.curves.expressiveDefaultEffects;
+		if (type === CAnim.SlowEffects)
+			return Tokens.anim.curves.expressiveSlowEffects;
+
+		if (type >= CAnim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
+			return Tokens.anim.curves.emphasized;
+		return Tokens.anim.curves.standard;
+	}
 }

Greeter/Components/CircularIndicator.qml

@@ -1,7 +1,8 @@
-import qs.Config
+import ZShell.Config
 import ZShell.Internal
 import QtQuick
 import QtQuick.Templates
+import qs.Services
 
 BusyIndicator {
 	id: root
@@ -17,12 +18,12 @@ BusyIndicator {
 	}
 
 	property int animState
-	property color bgColour: DynamicColors.palette.m3secondaryContainer
+	property color bgColour: Colors.palette.m3secondaryContainer
-	property color fgColour: DynamicColors.palette.m3primary
+	property color fgColour: Colors.palette.m3primary
-	property real implicitSize: Appearance.font.size.normal * 3
+	property real implicitSize: Tokens.font.size.normal * 3
 	property real internalStrokeWidth: strokeWidth
 	readonly property alias progress: manager.progress
-	property real strokeWidth: Appearance.padding.small * 0.8
+	property real strokeWidth: Tokens.padding.small * 0.8
 	property alias type: manager.indeterminateAnimationType
 
 	implicitHeight: implicitSize
@@ -50,7 +51,7 @@ BusyIndicator {
 	}
 	transitions: Transition {
 		Anim {
-			duration: manager.completeEndDuration * Appearance.anim.durations.scale
+			duration: manager.completeEndDuration * Tokens.anim.durations.scale
 			properties: "opacity,internalStrokeWidth"
 		}
 	}
@@ -77,7 +78,7 @@ BusyIndicator {
 	}
 
 	NumberAnimation {
-		duration: manager.duration * Appearance.anim.durations.scale
+		duration: manager.duration * Tokens.anim.durations.scale
 		from: 0
 		loops: Animation.Infinite
 		property: "progress"
@@ -87,7 +88,7 @@ BusyIndicator {
 	}
 
 	NumberAnimation {
-		duration: manager.completeEndDuration * Appearance.anim.durations.scale
+		duration: manager.completeEndDuration * Tokens.anim.durations.scale
 		from: 0
 		property: "completeEndProgress"
 		running: root.animState === CircularIndicator.Completing

Greeter/Components/CircularProgress.qml

@@ -1,19 +1,20 @@
 import QtQuick
 import QtQuick.Shapes
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Shape {
 	id: root
 
 	readonly property real arcRadius: (size - padding - strokeWidth) / 2
-	property color bgColour: DynamicColors.palette.m3secondaryContainer
+	property color bgColour: Colors.palette.m3secondaryContainer
-	property color fgColour: DynamicColors.palette.m3primary
+	property color fgColour: Colors.palette.m3primary
 	readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
 	property int padding: 0
 	readonly property real size: Math.min(width, height)
-	property int spacing: Appearance.spacing.small
+	property int spacing: Tokens.spacing.small
 	property int startAngle: -90
-	property int strokeWidth: Appearance.padding.smaller
+	property int strokeWidth: Tokens.padding.smaller
 	readonly property real vValue: value || 1 / 360
 	property real value
 
@@ -21,14 +22,14 @@ Shape {
 	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: root.bgColour
 		strokeWidth: root.strokeWidth
 
 		Behavior on strokeColor {
 			CAnim {
-				duration: Appearance.anim.durations.large
+				duration: Tokens.anim.durations.large
 			}
 		}
 
@@ -43,14 +44,14 @@ Shape {
 	}
 
 	ShapePath {
-		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		capStyle: Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
 		fillColor: "transparent"
 		strokeColor: root.fgColour
 		strokeWidth: root.strokeWidth
 
 		Behavior on strokeColor {
 			CAnim {
-				duration: Appearance.anim.durations.large
+				duration: Tokens.anim.durations.large
 			}
 		}
 

Greeter/Components/CollapsibleSection.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ColumnLayout {
 	id: root
@@ -15,26 +16,26 @@ ColumnLayout {
 	signal toggleRequested
 
 	Layout.fillWidth: true
-	spacing: Appearance.spacing.small
+	spacing: Tokens.spacing.small
 
 	Item {
 		id: sectionHeaderItem
 
 		Layout.fillWidth: true
-		Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48)
+		Layout.preferredHeight: Math.max(titleRow.implicitHeight + Tokens.padding.normal * 2, 48)
 
 		RowLayout {
 			id: titleRow
 
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.normal
+			anchors.leftMargin: Tokens.padding.normal
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.normal
+			anchors.rightMargin: Tokens.padding.normal
 			anchors.verticalCenter: parent.verticalCenter
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.normal
 
 			CustomText {
-				font.pointSize: Appearance.font.size.larger
+				font.pointSize: Tokens.font.size.larger
 				font.weight: 500
 				text: root.title
 			}
@@ -44,15 +45,15 @@ ColumnLayout {
 			}
 
 			MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.normal
+				font.pointSize: Tokens.font.size.normal
 				rotation: root.expanded ? 180 : 0
 				text: "expand_more"
 
 				Behavior on rotation {
 					Anim {
-						duration: Appearance.anim.durations.small
+						duration: Tokens.anim.durations.small
-						easing.bezierCurve: Appearance.anim.curves.standard
+						easing.bezierCurve: Tokens.anim.curves.standard
 					}
 				}
 			}
@@ -60,8 +61,8 @@ ColumnLayout {
 
 		StateLayer {
 			anchors.fill: parent
-			color: DynamicColors.palette.m3onSurface
+			color: Colors.palette.m3onSurface
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.normal
 			showHoverBackground: false
 
 			onClicked: {
@@ -75,12 +76,12 @@ ColumnLayout {
 		id: contentWrapper
 
 		Layout.fillWidth: true
-		Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
+		Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Tokens.spacing.small * 2) : 0
 		clip: true
 
 		Behavior on Layout.preferredHeight {
 			Anim {
-				easing.bezierCurve: Appearance.anim.curves.standard
+				easing.bezierCurve: Tokens.anim.curves.standard
 			}
 		}
 
@@ -88,14 +89,14 @@ ColumnLayout {
 			id: backgroundRect
 
 			anchors.fill: parent
-			color: DynamicColors.transparency.enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? DynamicColors.palette.m3surfaceContainerHigh : DynamicColors.palette.m3surfaceContainer)
+			color: Colors.transparency.enabled ? Colors.layer(Colors.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? Colors.palette.m3surfaceContainerHigh : Colors.palette.m3surfaceContainer)
 			opacity: root.showBackground && root.expanded ? 1.0 : 0.0
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.normal
 			visible: root.showBackground
 
 			Behavior on opacity {
 				Anim {
-					easing.bezierCurve: Appearance.anim.curves.standard
+					easing.bezierCurve: Tokens.anim.curves.standard
 				}
 			}
 		}
@@ -103,29 +104,29 @@ ColumnLayout {
 		ColumnLayout {
 			id: contentColumn
 
-			anchors.bottomMargin: Appearance.spacing.small
+			anchors.bottomMargin: Tokens.spacing.small
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.normal
+			anchors.leftMargin: Tokens.padding.normal
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.normal
+			anchors.rightMargin: Tokens.padding.normal
 			opacity: root.expanded ? 1.0 : 0.0
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
-			y: Appearance.spacing.small
+			y: Tokens.spacing.small
 
 			Behavior on opacity {
 				Anim {
-					easing.bezierCurve: Appearance.anim.curves.standard
+					easing.bezierCurve: Tokens.anim.curves.standard
 				}
 			}
 
 			CustomText {
 				id: descriptionText
 
-				Layout.bottomMargin: root.description !== "" ? Appearance.spacing.small : 0
+				Layout.bottomMargin: root.description !== "" ? Tokens.spacing.small : 0
 				Layout.fillWidth: true
-				Layout.topMargin: root.description !== "" ? Appearance.spacing.smaller : 0
+				Layout.topMargin: root.description !== "" ? Tokens.spacing.smaller : 0
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.small
+				font.pointSize: Tokens.font.size.small
 				text: root.description
 				visible: root.description !== ""
 				wrapMode: Text.Wrap

Greeter/Components/ColorArcPicker.qml

@@ -1,7 +1,8 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -18,9 +19,9 @@ Item {
 	property real lastChromaticHue: 0
 	readonly property real radius: (Math.min(width, height) - handleSize) / 2
 	readonly property int segmentCount: 240
-	readonly property color thumbColor: DynamicColors.palette.m3inverseSurface
+	readonly property color thumbColor: Colors.palette.m3inverseSurface
-	readonly property color thumbContentColor: DynamicColors.palette.m3inverseOnSurface
+	readonly property color thumbContentColor: Colors.palette.m3inverseOnSurface
-	readonly property color trackColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+	readonly property color trackColor: Colors.layer(Colors.palette.m3surfaceContainer, 2)
 
 	function hueToAngle(hue) {
 		return arcStartAngle + arcSweep * hue;

Greeter/Components/CustomAudioSlider.qml

@@ -1,13 +1,14 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Slider {
 	id: root
 
-	property color nonPeakColor: DynamicColors.tPalette.m3primary
+	property color nonPeakColor: Colors.tPalette.m3primary
 	required property real peak
-	property color peakColor: DynamicColors.palette.m3primary
+	property color peakColor: Colors.palette.m3primary
 
 	background: Item {
 		CustomRect {
@@ -19,7 +20,7 @@ Slider {
 			bottomRightRadius: root.implicitHeight / 15
 			color: root.nonPeakColor
 			implicitWidth: root.handle.x - root.implicitHeight
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 			topRightRadius: root.implicitHeight / 15
 
 			CustomRect {
@@ -29,7 +30,7 @@ Slider {
 				bottomRightRadius: root.implicitHeight / 15
 				color: root.peakColor
 				implicitWidth: parent.width * root.peak
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 				topRightRadius: root.implicitHeight / 15
 
 				Behavior on implicitWidth {
@@ -47,18 +48,18 @@ Slider {
 			anchors.top: parent.top
 			anchors.topMargin: root.implicitHeight / 3
 			bottomLeftRadius: root.implicitHeight / 15
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: Colors.tPalette.m3surfaceContainer
 			implicitWidth: root.implicitWidth - root.handle.x - root.handle.implicitWidth - root.implicitHeight
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 			topLeftRadius: root.implicitHeight / 15
 		}
 	}
 	handle: CustomRect {
 		anchors.verticalCenter: parent.verticalCenter
-		color: DynamicColors.palette.m3primary
+		color: Colors.palette.m3primary
 		implicitHeight: 15
 		implicitWidth: 5
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
 		MouseArea {

Greeter/Components/CustomButton.qml

@@ -1,13 +1,14 @@
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Button {
 	id: control
 
-	property color bgColor: DynamicColors.palette.m3primary
+	property color bgColor: Colors.palette.m3primary
-	property int radius: Appearance.rounding.smallest / 2
+	property int radius: Tokens.rounding.smallest / 2
-	property color textColor: DynamicColors.palette.m3onPrimary
+	property color textColor: Colors.palette.m3onPrimary
 
 	background: CustomRect {
 		color: control.bgColor

Greeter/Components/CustomCheckbox.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CheckBox {
 	id: control
@@ -18,14 +19,14 @@ CheckBox {
 	indicator: CustomRect {
 		// x: control.leftPadding
 		// y: parent.implicitHeight / 2 - implicitHeight / 2
-		border.color: control.checked ? DynamicColors.palette.m3primary : "transparent"
+		border.color: control.checked ? Colors.palette.m3primary : "transparent"
-		color: DynamicColors.palette.m3surfaceVariant
+		color: Colors.palette.m3surfaceVariant
 		implicitHeight: control.checkHeight
 		implicitWidth: control.checkWidth
-		radius: Appearance.rounding.smallest / 2
+		radius: Tokens.rounding.smallest / 2
 
 		CustomRect {
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			implicitHeight: control.checkHeight - (y * 2)
 			implicitWidth: control.checkWidth - (x * 2)
 			radius: 3

Greeter/Components/CustomComboBox.qml

@@ -3,12 +3,13 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ComboBox {
 	id: root
 
-	property int cornerRadius: Appearance.rounding.normal
+	property int cornerRadius: Tokens.rounding.normal
 	property int fieldHeight: 42
 	property bool filled: true
 	property real focusRingOpacity: 0.70
@@ -31,7 +32,7 @@ ComboBox {
 			id: container
 
 			anchors.fill: parent
-			color: DynamicColors.palette.m3surfaceVariant
+			color: Colors.palette.m3surfaceVariant
 			radius: root.cornerRadius
 
 			StateLayer {
@@ -49,7 +50,7 @@ ComboBox {
 		// Display text
 		CustomText {
 			Layout.fillWidth: true
-			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
+			color: root.enabled ? Colors.palette.m3onSurface : Colors.palette.m3onSurfaceVariant
 			elide: Text.ElideRight
 			font.pixelSize: 16
 			font.weight: Font.Medium
@@ -59,7 +60,7 @@ ComboBox {
 
 		// Indicator chevron (simple, replace with your icon system)
 		CustomText {
-			color: root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurfaceVariant
+			color: root.enabled ? Colors.palette.m3onSurfaceVariant : Colors.palette.m3onSurfaceVariant
 			rotation: root.popup.visible ? 180 : 0
 			text: "▾"
 			transformOrigin: Item.Center
@@ -76,36 +77,36 @@ ComboBox {
 	popup: Popup {
 		id: p
 
-		implicitHeight: list.contentItem.height + Appearance.padding.small * 2
+		implicitHeight: list.contentItem.height + Tokens.padding.small * 2
 		implicitWidth: root.width
 		modal: true
 		popupType: root.preferPopupWindow ? Popup.Window : Popup.Item
-		y: -list.currentIndex * (root.menuRowHeight + Appearance.spacing.small) - Appearance.padding.small
+		y: -list.currentIndex * (root.menuRowHeight + Tokens.spacing.small) - Tokens.padding.small
 
 		background: CustomRect {
-			color: DynamicColors.palette.m3surface
+			color: Colors.palette.m3surface
 			radius: root.menuCornerRadius
 		}
 		contentItem: ListView {
 			id: list
 
-			anchors.bottomMargin: Appearance.padding.small
+			anchors.bottomMargin: Tokens.padding.small
 			anchors.fill: parent
-			anchors.topMargin: Appearance.padding.small
+			anchors.topMargin: Tokens.padding.small
 			clip: true
 			currentIndex: root.currentIndex
 			model: root.delegateModel
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			delegate: CustomRect {
 				required property int index
 				required property var modelData
 
 				anchors.horizontalCenter: parent.horizontalCenter
-				color: (index === root.currentIndex) ? DynamicColors.palette.m3primary : "transparent"
+				color: (index === root.currentIndex) ? Colors.palette.m3primary : "transparent"
 				implicitHeight: root.menuRowHeight
-				implicitWidth: p.implicitWidth - Appearance.padding.small * 2
+				implicitWidth: p.implicitWidth - Tokens.padding.small * 2
-				radius: Appearance.rounding.normal - Appearance.padding.small
+				radius: Tokens.rounding.normal - Tokens.padding.small
 
 				RowLayout {
 					anchors.fill: parent
@@ -113,7 +114,7 @@ ComboBox {
 
 					CustomText {
 						Layout.fillWidth: true
-						color: DynamicColors.palette.m3onSurface
+						color: Colors.palette.m3onSurface
 						elide: Text.ElideRight
 						font.pixelSize: 15
 						text: modelData
@@ -121,7 +122,7 @@ ComboBox {
 					}
 
 					CustomText {
-						color: DynamicColors.palette.m3onSurfaceVariant
+						color: Colors.palette.m3onSurfaceVariant
 						text: "✓"
 						verticalAlignment: Text.AlignVCenter
 						visible: index === root.currentIndex

Greeter/Components/CustomRadioButton.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 RadioButton {
 	id: root
 
-	font.pointSize: Appearance.font.size.normal
+	font.pointSize: Tokens.font.size.normal
 	implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
 	implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
 
@@ -20,12 +21,12 @@ RadioButton {
 		id: outerCircle
 
 		anchors.verticalCenter: parent.verticalCenter
-		border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+		border.color: root.checked ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
 		border.width: 2
 		color: "transparent"
 		implicitHeight: 16
 		implicitWidth: 16
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Behavior on border.color {
 			CAnim {
@@ -34,7 +35,7 @@ RadioButton {
 
 		StateLayer {
 			anchors.margins: -7
-			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
+			color: root.checked ? Colors.palette.m3onSurface : Colors.palette.m3primary
 			z: -1
 
 			onClicked: {
@@ -44,10 +45,10 @@ RadioButton {
 
 		CustomRect {
 			anchors.centerIn: parent
-			color: Qt.alpha(DynamicColors.palette.m3primary, root.checked ? 1 : 0)
+			color: Qt.alpha(Colors.palette.m3primary, root.checked ? 1 : 0)
 			implicitHeight: 8
 			implicitWidth: 8
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 	}
 }

Greeter/Components/CustomScrollBar.qml

@@ -1,6 +1,7 @@
-import qs.Config
+import ZShell.Config
 import QtQuick
 import QtQuick.Templates
+import qs.Services
 
 ScrollBar {
 	id: root
@@ -17,7 +18,7 @@ ScrollBar {
 	contentItem: CustomRect {
 		anchors.left: parent.left
 		anchors.right: parent.right
-		color: DynamicColors.palette.m3secondary
+		color: Colors.palette.m3secondary
 		opacity: {
 			if (root.size === 1)
 				return 0;
@@ -29,7 +30,7 @@ ScrollBar {
 				return 0.6;
 			return 0;
 		}
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Behavior on opacity {
 			Anim {

Greeter/Components/CustomSlider.qml

@@ -5,14 +5,15 @@ import QtQuick.Templates
 import ZShell.Components
 import ZShell
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Slider {
 	id: root
 
 	property bool animateWave
-	property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color bgColor: enabled ? Colors.palette.m3secondaryContainer : Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color fgColor: enabled ? Colors.palette.m3primary : Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	property real filledWidth
 	property real pos: visualPosition
 	property int waveDuration: 1000
@@ -31,15 +32,15 @@ Slider {
 			id: remaining
 
 			anchors.left: handle.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.leftMargin: Tokens.spacing.extraSmall
 			anchors.right: parent.right
 			anchors.verticalCenter: parent.verticalCenter
-			bottomLeftRadius: Appearance.rounding.extraSmall / 2
+			bottomLeftRadius: Tokens.rounding.extraSmall / 2
 			color: root.bgColor
 			implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
 			opacity: Math.min(width, 12) / 12
-			radius: Appearance.rounding.small
+			radius: Tokens.rounding.small
-			topLeftRadius: Appearance.rounding.extraSmall / 2
+			topLeftRadius: Tokens.rounding.extraSmall / 2
 		}
 
 		CustomRect {
@@ -50,14 +51,14 @@ Slider {
 			implicitHeight: 4 * remaining.opacity
 			implicitWidth: implicitHeight
 			opacity: remaining.opacity
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 
 		CustomRect {
 			id: handle
 
 			anchors.left: filled.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.leftMargin: Tokens.spacing.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
 			color: root.fgColor
 			implicitHeight: {
@@ -66,7 +67,7 @@ Slider {
 				return parent.height * (mouse.pressed ? pressMult : mult);
 			}
 			implicitWidth: 4
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			Behavior on implicitHeight {
 				Anim {
@@ -88,12 +89,12 @@ Slider {
 			id: lineComp
 
 			CustomRect {
-				bottomRightRadius: Appearance.rounding.extraSmall / 2
+				bottomRightRadius: Tokens.rounding.extraSmall / 2
 				color: root.fgColor
 				implicitHeight: root.height
 				implicitWidth: root.filledWidth
-				radius: Appearance.rounding.small
+				radius: Tokens.rounding.small
-				topRightRadius: Appearance.rounding.extraSmall / 2
+				topRightRadius: Tokens.rounding.extraSmall / 2
 			}
 		}
 

Greeter/Components/CustomSpinBox.qml

@@ -2,7 +2,8 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 RowLayout {
 	id: root
@@ -17,7 +18,7 @@ RowLayout {
 
 	signal valueModified(value: real)
 
-	spacing: Appearance.spacing.small
+	spacing: Tokens.spacing.small
 
 	onValueChanged: {
 		if (!root.isEditing) {
@@ -28,18 +29,18 @@ RowLayout {
 	CustomTextField {
 		id: textField
 
-		color: root.enabled ? DynamicColors.palette.m3onSurface : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+		color: root.enabled ? Colors.palette.m3onSurface : Qt.alpha(Colors.palette.m3onSurface, 0.5)
 		implicitHeight: upButton.implicitHeight
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
-		leftPadding: Appearance.padding.normal
+		leftPadding: Tokens.padding.normal
-		padding: Appearance.padding.small
+		padding: Tokens.padding.small
-		rightPadding: Appearance.padding.normal
+		rightPadding: Tokens.padding.normal
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
+			color: root.enabled ? Colors.tPalette.m3surfaceContainerHigh : Colors.tPalette.m3surfaceContainerLow
 			implicitWidth: 100
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 		validator: DoubleValidator {
 			bottom: root.min
@@ -86,15 +87,15 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: root.enabled ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 1)
-		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
+		implicitHeight: upIcon.implicitHeight + Tokens.padding.small * 2
 		implicitWidth: implicitHeight
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		StateLayer {
 			id: upState
 
-			color: DynamicColors.palette.m3onPrimary
+			color: Colors.palette.m3onPrimary
 
 			onClicked: {
 				let newValue = Math.min(root.max, root.value + root.step);
@@ -113,21 +114,21 @@ RowLayout {
 			id: upIcon
 
 			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: root.enabled ? Colors.palette.m3onPrimary : Qt.alpha(Colors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: root.enabled ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHighest, 1)
-		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
+		implicitHeight: downIcon.implicitHeight + Tokens.padding.small * 2
 		implicitWidth: implicitHeight
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		StateLayer {
 			id: downState
 
-			color: DynamicColors.palette.m3onPrimary
+			color: Colors.palette.m3onPrimary
 
 			onClicked: {
 				let newValue = Math.max(root.min, root.value - root.step);
@@ -146,7 +147,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: root.enabled ? Colors.palette.m3onPrimary : Qt.alpha(Colors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_down"
 		}
 	}

Greeter/Components/CustomSplitButton.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Row {
 	id: root
@@ -11,15 +12,15 @@ Row {
 	}
 
 	property alias active: menu.active
-	property color colour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property color colour: type == CustomSplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
 	property bool disabled
-	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledColour: Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color disabledTextColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledTextColour: Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	readonly property alias expandBtn: expandBtn
 	property alias expanded: menu.expanded
 	property string fallbackIcon
 	property string fallbackText
-	property real horizontalPadding: Appearance.padding.larger
+	property real horizontalPadding: Tokens.padding.larger
 	readonly property alias iconLabel: iconLabel
 	readonly property alias label: label
 	readonly property alias menu: menu
@@ -27,20 +28,20 @@ Row {
 	property bool menuOnTop
 	property real minLeftWidth
 	readonly property alias stateLayer: stateLayer
-	property color textColour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	property color textColour: type == CustomSplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
 	readonly property alias textRow: textRow
 	property int type: CustomSplitButton.Filled
-	property real verticalPadding: Appearance.padding.small
+	property real verticalPadding: Tokens.padding.small
 
-	spacing: Math.floor(Appearance.spacing.extraSmall)
+	spacing: Math.floor(Tokens.spacing.extraSmall)
 
 	CustomRect {
-		bottomRightRadius: Appearance.rounding.small / 2
+		bottomRightRadius: Tokens.rounding.small / 2
 		color: root.disabled ? root.disabledColour : root.colour
 		implicitHeight: expandBtn.implicitHeight
 		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
-		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
-		topRightRadius: Appearance.rounding.small / 2
+		topRightRadius: Tokens.rounding.small / 2
 
 		StateLayer {
 			id: stateLayer
@@ -58,7 +59,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
 				id: iconLabel
@@ -92,13 +93,13 @@ Row {
 	CustomRect {
 		id: expandBtn
 
-		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
+		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.small / 2
 
 		bottomLeftRadius: rad
 		color: root.disabled ? root.disabledColour : root.colour
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
-		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
 		topLeftRadius: rad
 
 		Behavior on rad {
@@ -142,7 +143,7 @@ Row {
 
 		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
 		attachTo: expandBtn
-		marginY: Appearance.spacing.small * (root.menuOnTop ? -1 : 1)
+		marginY: Tokens.spacing.small * (root.menuOnTop ? -1 : 1)
 		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
 	}
 }

Greeter/Components/CustomSplitButtonRow.qml

@@ -2,7 +2,8 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -21,7 +22,7 @@ Item {
 	anchors.left: parent.left
 	anchors.right: parent.right
 	clip: false
-	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	implicitHeight: row.implicitHeight + Tokens.padding.smaller * 2
 	opacity: shouldBeActive ? 1 : 0
 	scale: shouldBeActive ? 1 : 0.8
 	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
@@ -39,15 +40,15 @@ Item {
 		id: row
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
+		anchors.margins: Tokens.padding.small
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.normal
 
 		CustomText {
 			Layout.fillWidth: true
-			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
+			color: root.enabled ? Colors.palette.m3onSurface : Colors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.larger
+			font.pointSize: Tokens.font.size.larger
 			text: root.label
 		}
 

Greeter/Components/CustomSwitch.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import QtQuick.Shapes
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Switch {
 	id: root
@@ -12,20 +13,20 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		color: root.checked && root.enabled ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer)
-		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
+		implicitHeight: Tokens.font.size.medium + Tokens.padding.normal * 2
 		implicitWidth: implicitHeight * 1.7
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		CustomRect {
 			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			color: root.checked && root.enabled ? Colors.palette.m3onPrimary : Colors.layer(Colors.palette.m3outline, root.cLayer + 1)
-			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
+			implicitHeight: parent.implicitHeight - Tokens.padding.extraSmall
 			implicitWidth: nonAnimWidth
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
-			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - Tokens.padding.extraSmall / 2 : Tokens.padding.extraSmall / 2
 
 			Behavior on implicitWidth {
 				Anim {
@@ -40,7 +41,7 @@ Switch {
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked && root.enabled ? Colors.palette.m3primary : Colors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
@@ -91,7 +92,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Appearance.padding.larger
+				height: parent.implicitHeight - Tokens.padding.larger
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -117,8 +118,8 @@ Switch {
 					fillColor: "transparent"
 					startX: icon.start1.x
 					startY: icon.start1.y
-					strokeColor: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
+					strokeColor: root.checked && root.enabled ? Colors.palette.m3primary : Colors.palette.m3surfaceContainerHighest
-					strokeWidth: Appearance.font.size.larger * 0.15
+					strokeWidth: Tokens.font.size.larger * 0.15
 
 					Behavior on strokeColor {
 						CAnim {
@@ -151,7 +152,7 @@ Switch {
 	}
 
 	component PropAnim: PropertyAnimation {
-		duration: Appearance.anim.durations.expressiveFastSpatial
+		duration: Tokens.anim.durations.expressiveFastSpatial
-		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+		easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
 	}
 }

Greeter/Components/CustomText.qml

@@ -1,7 +1,8 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Text {
 	id: root
@@ -12,10 +13,10 @@ Text {
 	property string animateProp: "scale"
 	property real animateTo: 1
 
-	color: DynamicColors.palette.m3onSurface
+	color: Colors.palette.m3onSurface
-	font.family: Appearance.font.family.sans
+	font.family: Config.appearance.font.family.sans
-	font.pointSize: Appearance.font.size.normal
+	font.pointSize: Tokens.font.size.normal
-	linkColor: DynamicColors.palette.m3onPrimaryFixedVariant
+	linkColor: Colors.palette.m3onPrimaryFixedVariant
 	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 
@@ -28,7 +29,6 @@ Text {
 
 		SequentialAnimation {
 			Anim {
-				easing.bezierCurve: MaterialEasing.standardAccel
 				to: root.animateFrom
 			}
 
@@ -36,7 +36,6 @@ Text {
 			}
 
 			Anim {
-				easing.bezierCurve: MaterialEasing.standardDecel
 				to: root.animateTo
 			}
 		}

Greeter/Components/CustomTextField.qml

@@ -2,17 +2,18 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextField {
 	id: root
 
 	background: null
-	color: DynamicColors.palette.m3onSurface
+	color: Colors.palette.m3onSurface
 	cursorVisible: !readOnly
 	font.family: Appearance.font.family.sans
-	font.pointSize: Appearance.font.size.smaller
+	font.pointSize: Tokens.font.size.smaller
-	placeholderTextColor: DynamicColors.palette.m3outline
+	placeholderTextColor: Colors.palette.m3outline
 	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
 
 	Behavior on color {
@@ -24,13 +25,13 @@ TextField {
 
 		property bool disableBlink
 
-		color: DynamicColors.palette.m3primary
+		color: Colors.palette.m3primary
 		implicitWidth: 2
-		radius: Appearance.rounding.normal
+		radius: Tokens.rounding.normal
 
 		Behavior on opacity {
 			Anim {
-				duration: Appearance.anim.durations.small
+				duration: Tokens.anim.durations.small
 			}
 		}
 

Greeter/Components/CustomTextInput.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextInput {
 	renderType: Text.NativeRendering
-	selectedTextColor: DynamicColors.palette.m3onSecondaryContainer
+	selectedTextColor: Colors.palette.m3onSecondaryContainer
-	selectionColor: DynamicColors.tPalette.colSecondaryContainer
+	selectionColor: Colors.tPalette.colSecondaryContainer
 
 	font {
 		family: Appearance?.font.family.sans ?? "sans-serif"

Greeter/Components/CustomTooltipContent.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -18,11 +19,11 @@ Item {
 		id: backgroundRectangle
 
 		clip: true
-		color: DynamicColors.tPalette.m3inverseSurface ?? "#3C4043"
+		color: Colors.tPalette.m3inverseSurface ?? "#3C4043"
 		implicitHeight: shown ? (tooltipTextObject.implicitHeight + 2 * root.verticalPadding) : 0
 		implicitWidth: shown ? (tooltipTextObject.implicitWidth + 2 * root.horizontalPadding) : 0
 		opacity: shown ? 1 : 0
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.smallest
 
 		Behavior on implicitHeight {
 			Anim {
@@ -46,7 +47,7 @@ Item {
 			id: tooltipTextObject
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3inverseOnSurface ?? "#FFFFFF"
+			color: Colors.palette.m3inverseOnSurface ?? "#FFFFFF"
 			text: root.text
 			wrapMode: Text.Wrap
 		}

Greeter/Components/Elevation.qml

@@ -1,13 +1,14 @@
 import QtQuick
 import QtQuick.Effects
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 RectangularShadow {
 	property real dp: [0, 1, 3, 6, 8, 12][level]
 	property int level
 
 	blur: (dp * 5) ** 0.7
-	color: Qt.alpha(DynamicColors.palette.m3shadow, 0.7)
+	color: Qt.alpha(Colors.palette.m3shadow, 0.7)
 	offset.y: dp / 2
 	spread: -dp * 0.3 + (dp * 0.1) ** 2
 

Greeter/Components/ExtraIndicator.qml

@@ -1,27 +1,27 @@
-import qs.Config
+import ZShell.Config
 import QtQuick
+import qs.Services
 
 CustomRect {
 	required property int extra
 
 	anchors.margins: 8
 	anchors.right: parent.right
-	color: DynamicColors.palette.m3tertiary
+	color: Colors.palette.m3tertiary
 	implicitHeight: count.implicitHeight + 4 * 2
 	implicitWidth: count.implicitWidth + 8 * 2
 	opacity: extra > 0 ? 1 : 0
-	radius: Appearance.rounding.smallest
+	radius: Tokens.rounding.smallest
 	scale: extra > 0 ? 1 : 0.5
 
 	Behavior on opacity {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
+			type: Anim.FastEffects
 		}
 	}
 	Behavior on scale {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
+			type: Anim.FastEffects
-			easing.bezierCurve: MaterialEasing.expressiveEffects
 		}
 	}
 
@@ -38,7 +38,7 @@ CustomRect {
 
 		anchors.centerIn: parent
 		animate: parent.opacity > 0
-		color: DynamicColors.palette.m3onTertiary
+		color: Colors.palette.m3onTertiary
 		text: qsTr("+%1").arg(parent.extra)
 	}
 }

Greeter/Components/FilledSlider.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 BaseStyledSlider {
 	id: root

Greeter/Components/GradientSlider.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 BaseStyledSlider {
 	id: root

Greeter/Components/HoverIconButton.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
 
 IconButton {
 	id: root
@@ -13,7 +13,7 @@ IconButton {
 
 	Behavior on opacity {
 		Anim {
-			duration: Appearance.anim.durations.small
+			duration: Tokens.anim.durations.small
 		}
 	}
 	Behavior on scale {

Greeter/Components/IconButton.qml

@@ -1,5 +1,6 @@
-import qs.Config
+import ZShell.Config
 import QtQuick
+import qs.Services
 
 CustomRect {
 	id: root
@@ -10,23 +11,23 @@ CustomRect {
 		Text
 	}
 
-	property color activeColour: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	property color activeColour: type === IconButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondary
-	property color activeOnColour: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
+	property color activeOnColour: type === IconButton.Filled ? Colors.palette.m3onPrimary : type === IconButton.Tonal ? Colors.palette.m3onSecondary : Colors.palette.m3primary
 	property bool checked
 	property bool disabled
-	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledColour: Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color disabledOnColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledOnColour: Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	property alias font: label.font
 	property alias icon: label.text
 	property color inactiveColour: {
 		if (!toggle && type === IconButton.Filled)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === IconButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
+		return type === IconButton.Filled ? Colors.tPalette.m3surfaceContainer : Colors.palette.m3secondaryContainer;
 	}
 	property color inactiveOnColour: {
 		if (!toggle && type === IconButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
+			return Colors.palette.m3onPrimary;
-		return type === IconButton.Tonal ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant;
+		return type === IconButton.Tonal ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurfaceVariant;
 	}
 	property bool internalChecked
 	property alias label: label
@@ -41,7 +42,7 @@ CustomRect {
 	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
 	implicitHeight: label.implicitHeight + padding * 2
 	implicitWidth: implicitHeight
-	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Appearance.rounding.scale
+	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Tokens.rounding.scale
 
 	Behavior on radius {
 		Anim {

Greeter/Components/MarqueeText.qml

@@ -1,12 +1,13 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
 
 	property alias anim: marqueeAnim
 	property bool animate: false
-	property color color: DynamicColors.palette.m3onSurface
+	property color color: Colors.palette.m3onSurface
 	property int fadeStrengthAnimMs: 180
 	property real fadeStrengthIdle: 0.0
 	property real fadeStrengthMoving: 1.0

Greeter/Components/MaterialIcon.qml

@@ -1,11 +1,12 @@
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomText {
 	property real fill
-	property int grade: DynamicColors.light ? 0 : -25
+	property int grade: Colors.light ? 0 : -25
 
 	font.family: "Material Symbols Rounded"
-	font.pointSize: Appearance.font.size.larger
+	font.pointSize: Tokens.font.size.larger
 	font.variableAxes: ({
 			FILL: fill.toFixed(1),
 			GRAD: grade,

Greeter/Components/Menu.qml

@@ -3,8 +3,9 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
-import qs.Config
+import ZShell.Config
 import qs.Drawers
+import qs.Services
 
 MouseArea {
 	id: root
@@ -60,7 +61,7 @@ MouseArea {
 		implicitHeight: column.implicitHeight + column.anchors.margins * 2
 		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
 		level: 2
-		radius: Appearance.rounding.medium
+		radius: Tokens.rounding.medium
 		x: {
 			watcher.transform;
 			const item = root.attachTo;
@@ -90,15 +91,15 @@ MouseArea {
 
 		CustomRect {
 			anchors.fill: parent
-			color: DynamicColors.palette.m3surfaceContainerLow
+			color: Colors.palette.m3surfaceContainerLow
 			radius: parent.radius
 
 			ColumnLayout {
 				id: column
 
 				anchors.fill: parent
-				anchors.margins: Appearance.padding.extraSmall
+				anchors.margins: Tokens.padding.extraSmall
-				spacing: Appearance.spacing.extraSmall
+				spacing: Tokens.spacing.extraSmall
 
 				Repeater {
 					id: repeater
@@ -113,10 +114,10 @@ MouseArea {
 						required property MenuItem modelData
 
 						Layout.fillWidth: true
-						color: Qt.alpha(DynamicColors.palette.m3tertiaryContainer, active ? 1 : 0)
+						color: Qt.alpha(Colors.palette.m3tertiaryContainer, active ? 1 : 0)
-						implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.larger * 2
+						implicitHeight: menuOptionRow.implicitHeight + Tokens.padding.larger * 2
-						implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.larger * 2
+						implicitWidth: menuOptionRow.implicitWidth + Tokens.padding.larger * 2
-						radius: Appearance.rounding.small
+						radius: Tokens.rounding.small
 
 						Behavior on radius {
 							Anim {
@@ -124,7 +125,7 @@ MouseArea {
 						}
 
 						StateLayer {
-							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
 							disabled: !root.expanded
 
 							onClicked: {
@@ -139,19 +140,19 @@ MouseArea {
 							id: menuOptionRow
 
 							anchors.fill: parent
-							anchors.margins: Appearance.padding.larger
+							anchors.margins: Tokens.padding.larger
-							spacing: Appearance.spacing.small
+							spacing: Tokens.spacing.small
 
 							MaterialIcon {
 								Layout.alignment: Qt.AlignVCenter
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+								color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurfaceVariant
 								text: item.modelData.icon
 							}
 
 							CustomText {
 								Layout.alignment: Qt.AlignVCenter
 								Layout.fillWidth: true
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+								color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
 								text: item.modelData.text
 							}
 
@@ -162,7 +163,7 @@ MouseArea {
 								visible: active
 
 								sourceComponent: MaterialIcon {
-									color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+									color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurfaceVariant
 									text: item.modelData.trailingIcon
 								}
 							}