Merge branch 'main' into feat/peripheral-integration

Modules/SysTray/Popouts/AudioPopout.qml

@@ -6,34 +6,33 @@ import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
 import qs.Components
 import qs.Daemons
 import qs.Helpers
+import qs.Services
 
 Item {
 	id: root
 
-	readonly property int rounding: Appearance.rounding.small - Appearance.padding.small
+	readonly property int rounding: Tokens.rounding.small - Tokens.padding.small
 	readonly property int topMargin: 0
 	required property var wrapper
 
-	implicitHeight: vol.implicitHeight + Appearance.padding.small * 2
-	implicitWidth: 500 + Appearance.padding.small * 2
+	implicitHeight: vol.implicitHeight + Tokens.padding.small * 2
+	implicitWidth: 500 + Tokens.padding.small * 2
 
 	CustomRect {
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: parent.top
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: parent.implicitHeight
-		radius: Appearance.rounding.small
+		radius: Tokens.rounding.small
 		y: parent.y
 
 		Behavior on implicitHeight {
 			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
 			}
 		}
 	}
@@ -42,7 +41,7 @@ Item {
 		id: vol
 
 		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
+		anchors.margins: Tokens.padding.small
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 	}
@@ -52,17 +51,17 @@ Item {
 
 		CustomRect {
 			Layout.fillWidth: true
-			Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
+			Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
 			Layout.topMargin: root.topMargin
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: Colors.tPalette.m3surfaceContainer
 			radius: root.rounding
 
 			ColumnLayout {
-				anchors.bottomMargin: Appearance.padding.smaller
+				anchors.bottomMargin: Tokens.padding.smaller
 				anchors.fill: parent
-				anchors.leftMargin: Appearance.padding.larger
-				anchors.rightMargin: Appearance.padding.larger
-				anchors.topMargin: Appearance.padding.smaller
+				anchors.leftMargin: Tokens.padding.larger
+				anchors.rightMargin: Tokens.padding.larger
+				anchors.topMargin: Tokens.padding.smaller
 
 				RowLayout {
 					Layout.fillHeight: true
@@ -76,27 +75,27 @@ Item {
 
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
+						color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
 						font.bold: true
 						text: qsTr("%1").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
 					}
 				}
 
 				RowLayout {
-					spacing: Appearance.spacing.large
+					spacing: Tokens.spacing.large
 
 					CustomMouseArea {
-						Layout.bottomMargin: Appearance.padding.normal
+						Layout.bottomMargin: Tokens.padding.normal
 						Layout.fillWidth: true
-						Layout.preferredHeight: Appearance.padding.larger * 3
+						Layout.preferredHeight: Tokens.padding.larger * 3
 
 						CustomSlider {
 							anchors.left: parent.left
 							anchors.right: parent.right
-							bgColor: Audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
-							fgColor: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+							bgColor: Audio.muted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+							fgColor: Audio.muted ? Colors.palette.m3error : Colors.palette.m3primary
 							implicitHeight: parent.height
-							insetColor: Audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+							insetColor: Audio.muted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
 							insetIcon: Audio.muted || Audio.volume < 0.001 ? "volume_off" : "volume_up"
 							value: Audio.volume
 
@@ -110,7 +109,7 @@ Item {
 					}
 
 					CustomSwitch {
-						Layout.bottomMargin: Appearance.padding.normal
+						Layout.bottomMargin: Tokens.padding.normal
 						checked: !Audio.muted
 
 						onToggled: {
@@ -125,9 +124,9 @@ Item {
 
 		CustomClippingRect {
 			Layout.fillWidth: true
-			Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
+			Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
 			Layout.topMargin: root.topMargin
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: Colors.tPalette.m3surfaceContainer
 			radius: root.rounding
 
 			PwNodePeakMonitor {
@@ -142,22 +141,21 @@ Item {
 				anchors.bottom: parent.bottom
 				anchors.left: parent.left
 				anchors.top: parent.top
-				color: Qt.alpha(DynamicColors.palette.m3primary, 0.15)
+				color: Qt.alpha(Colors.palette.m3primary, 0.15)
 				implicitWidth: parent.width * sourcePeak.peak
 
 				Behavior on implicitWidth {
 					Anim {
-						duration: MaterialEasing.expressiveEffectsTime
 					}
 				}
 			}
 
 			ColumnLayout {
-				anchors.bottomMargin: Appearance.padding.smaller
+				anchors.bottomMargin: Tokens.padding.smaller
 				anchors.fill: parent
-				anchors.leftMargin: Appearance.padding.larger
-				anchors.rightMargin: Appearance.padding.larger
-				anchors.topMargin: Appearance.padding.smaller
+				anchors.leftMargin: Tokens.padding.larger
+				anchors.rightMargin: Tokens.padding.larger
+				anchors.topMargin: Tokens.padding.smaller
 
 				RowLayout {
 					Layout.fillHeight: true
@@ -171,27 +169,27 @@ Item {
 
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
+						color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
 						font.bold: true
 						text: qsTr("%1").arg(Audio.sourceMuted ? qsTr("Muted") : `${Math.round(Audio.sourceVolume * 100)}%`)
 					}
 				}
 
 				RowLayout {
-					spacing: Appearance.spacing.large
+					spacing: Tokens.spacing.large
 
 					CustomMouseArea {
-						Layout.bottomMargin: Appearance.padding.normal
+						Layout.bottomMargin: Tokens.padding.normal
 						Layout.fillWidth: true
-						Layout.preferredHeight: Appearance.padding.larger * 3
+						Layout.preferredHeight: Tokens.padding.larger * 3
 
 						CustomSlider {
 							anchors.left: parent.left
 							anchors.right: parent.right
-							bgColor: Audio.sourceMuted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
-							fgColor: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+							bgColor: Audio.sourceMuted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+							fgColor: Audio.sourceMuted ? Colors.palette.m3error : Colors.palette.m3primary
 							implicitHeight: parent.height
-							insetColor: Audio.sourceMuted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+							insetColor: Audio.sourceMuted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
 							insetIcon: Audio.sourceMuted || Audio.sourceVolume < 0.001 ? "mic_off" : "mic"
 							value: Audio.sourceVolume
 
@@ -205,7 +203,7 @@ Item {
 					}
 
 					CustomSwitch {
-						Layout.bottomMargin: Appearance.padding.normal
+						Layout.bottomMargin: Tokens.padding.normal
 						checked: !Audio.sourceMuted
 
 						onToggled: {
@@ -222,7 +220,7 @@ Item {
 			Layout.fillWidth: true
 			Layout.preferredHeight: 1
 			Layout.topMargin: root.topMargin
-			color: DynamicColors.tPalette.m3outline
+			color: Colors.tPalette.m3outline
 			visible: appTracks.model.length > 0
 		}
 
@@ -238,9 +236,9 @@ Item {
 				required property var modelData
 
 				Layout.fillWidth: true
-				Layout.preferredHeight: 65 + Appearance.spacing.smaller * 2
+				Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
 				Layout.topMargin: root.topMargin
-				color: DynamicColors.tPalette.m3surfaceContainer
+				color: Colors.tPalette.m3surfaceContainer
 				radius: root.rounding
 
 				PwNodePeakMonitor {
@@ -255,12 +253,11 @@ Item {
 					anchors.bottom: parent.bottom
 					anchors.left: parent.left
 					anchors.top: parent.top
-					color: Qt.alpha(DynamicColors.palette.m3primary, 0.15)
+					color: Qt.alpha(Colors.palette.m3primary, 0.15)
 					implicitWidth: parent.width * peak.peak
 
 					Behavior on implicitWidth {
 						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
 						}
 					}
 				}
@@ -274,11 +271,11 @@ Item {
 				}
 
 				ColumnLayout {
-					anchors.bottomMargin: Appearance.padding.smaller
+					anchors.bottomMargin: Tokens.padding.smaller
 					anchors.fill: parent
-					anchors.leftMargin: Appearance.padding.larger
-					anchors.rightMargin: Appearance.padding.larger
-					anchors.topMargin: Appearance.padding.smaller
+					anchors.leftMargin: Tokens.padding.larger
+					anchors.rightMargin: Tokens.padding.larger
+					anchors.topMargin: Tokens.padding.smaller
 
 					RowLayout {
 						Layout.fillHeight: true
@@ -293,27 +290,27 @@ Item {
 
 						CustomText {
 							Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-							color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
+							color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
 							font.bold: true
 							text: qsTr("%1").arg(appBox.modelData.audio.muted ? qsTr("Muted") : `${Math.round(appBox.modelData.audio.volume * 100)}%`)
 						}
 					}
 
 					RowLayout {
-						spacing: Appearance.spacing.large
+						spacing: Tokens.spacing.large
 
 						CustomMouseArea {
-							Layout.bottomMargin: Appearance.padding.normal
+							Layout.bottomMargin: Tokens.padding.normal
 							Layout.fillWidth: true
-							Layout.preferredHeight: Appearance.padding.larger * 3
+							Layout.preferredHeight: Tokens.padding.larger * 3
 
 							CustomSlider {
 								anchors.left: parent.left
 								anchors.right: parent.right
-								bgColor: appBox.modelData.audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
-								fgColor: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+								bgColor: appBox.modelData.audio.muted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+								fgColor: appBox.modelData.audio.muted ? Colors.palette.m3error : Colors.palette.m3primary
 								implicitHeight: parent.height
-								insetColor: appBox.modelData.audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+								insetColor: appBox.modelData.audio.muted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
 								insetIcon: appBox.modelData.audio.muted || appBox.modelData.audio.volume < 0.001 ? "volume_off" : "volume_up"
 								value: appBox.modelData.audio.volume
 
@@ -327,7 +324,7 @@ Item {
 						}
 
 						CustomSwitch {
-							Layout.bottomMargin: Appearance.padding.normal
+							Layout.bottomMargin: Tokens.padding.normal
 							checked: !appBox.modelData.audio.muted
 
 							onToggled: {

Modules/SysTray/Popouts/TrayMenuPopout.qml

@@ -8,13 +8,14 @@ import QtQuick.Controls
 import QtQuick.Effects
 import qs.Components
 import qs.Modules
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 StackView {
 	id: root
 
 	readonly property int itemHeight: 30
-	readonly property int panelRadius: ((itemHeight / 2) + Appearance.padding.small) * Appearance.rounding.scale
+	readonly property int panelRadius: ((itemHeight / 2) + Tokens.padding.small) * Tokens.rounding.scale
 	required property PopoutState popouts
 	property int rootWidth: 0
 	required property QsMenuHandle trayItem
@@ -55,7 +56,7 @@ StackView {
 
 		opacity: shown ? 1 : 0
 		scale: shown ? 1 : 0.8
-		spacing: Appearance.spacing.extraSmall
+		spacing: Tokens.spacing.extraSmall
 
 		Behavior on opacity {
 			Anim {
@@ -87,12 +88,12 @@ StackView {
 				required property QsMenuEntry modelData
 
 				Layout.fillWidth: true
-				Layout.leftMargin: modelData.isSeparator ? Appearance.padding.normal : 0
-				Layout.rightMargin: modelData.isSeparator ? Appearance.padding.normal : 0
-				color: modelData.isSeparator ? DynamicColors.palette.m3outlineVariant : "transparent"
+				Layout.leftMargin: modelData.isSeparator ? Tokens.padding.normal : 0
+				Layout.rightMargin: modelData.isSeparator ? Tokens.padding.normal : 0
+				color: modelData.isSeparator ? Colors.palette.m3outlineVariant : "transparent"
 				implicitHeight: modelData.isSeparator ? (visible ? 1 : 0) : childrenLoader.item.implicitHeight
 				implicitWidth: childrenLoader.item?.implicitWidth ?? 0
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 				visible: index !== (menuOpener.children.values.length - 1) ? true : (modelData.isSeparator ? false : true)
 
 				Loader {
@@ -103,7 +104,7 @@ StackView {
 					asynchronous: true
 
 					sourceComponent: Item {
-						property int iconWidth: icon.active ? icon.width + Appearance.spacing.normal + icon.anchors.rightMargin : 0
+						property int iconWidth: icon.active ? icon.width + Tokens.spacing.normal + icon.anchors.rightMargin : 0
 
 						implicitHeight: root.itemHeight
 						implicitWidth: label.width + label.anchors.leftMargin * 2 + iconWidth + (expand.item?.width ?? 0)
@@ -150,7 +151,7 @@ StackView {
 								MultiEffect {
 									anchors.fill: iconImage
 									colorization: 1.0
-									colorizationColor: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+									colorizationColor: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
 									source: iconImage
 								}
 							}
@@ -162,7 +163,7 @@ StackView {
 							anchors.left: parent.left
 							anchors.leftMargin: 10
 							anchors.verticalCenter: parent.verticalCenter
-							color: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+							color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
 							text: item.modelData.text
 						}
 
@@ -175,7 +176,7 @@ StackView {
 							asynchronous: true
 
 							sourceComponent: MaterialIcon {
-								color: item.modelData.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3outline
+								color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
 								text: "chevron_right"
 							}
 						}
@@ -201,11 +202,11 @@ StackView {
 
 					CustomRect {
 						anchors.fill: parent
-						color: DynamicColors.palette.m3secondaryContainer
-						radius: Appearance.rounding.full
+						color: Colors.palette.m3secondaryContainer
+						radius: Tokens.rounding.full
 
 						StateLayer {
-							color: DynamicColors.palette.m3onSecondaryContainer
+							color: Colors.palette.m3onSecondaryContainer
 							radius: parent.radius
 
 							onClicked: {
@@ -221,13 +222,13 @@ StackView {
 
 						MaterialIcon {
 							anchors.verticalCenter: parent.verticalCenter
-							color: DynamicColors.palette.m3onSecondaryContainer
+							color: Colors.palette.m3onSecondaryContainer
 							text: "chevron_left"
 						}
 
 						CustomText {
 							anchors.verticalCenter: parent.verticalCenter
-							color: DynamicColors.palette.m3onSecondaryContainer
+							color: Colors.palette.m3onSecondaryContainer
 							text: qsTr("Back")
 						}
 					}

Modules/SysTray/Popouts/UPowerPopout.qml

@@ -3,17 +3,18 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell.Services.UPower
+import ZShell.Config
 import qs.Modules.SysTray.Common
-import qs.Config
 import qs.Helpers
 import qs.Components
+import qs.Services
 
 Column {
 	id: root
 
-	readonly property int panelRadius: ((profiles.height / 2) + Appearance.padding.small) * Appearance.rounding.scale
+	readonly property int panelRadius: ((profiles.height / 2) + Tokens.padding.small) * Tokens.rounding.scale
 
-	spacing: Appearance.spacing.normal
+	spacing: Tokens.spacing.normal
 
 	Loader {
 		active: Battery.isLaptop
@@ -32,9 +33,9 @@ Column {
 			required property var modelData
 
 			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
 
 			CustomText {
 				Layout.fillWidth: true
@@ -66,7 +67,7 @@ Column {
 		}
 
 		anchors.left: parent.left
-		anchors.leftMargin: Appearance.padding.normal
+		anchors.leftMargin: Tokens.padding.normal
 		text: Battery.isLaptop ? qsTr("Time %1: %2").arg(Battery.onBattery ? "remaining" : "until charged").arg(Battery.onBattery ? formatSeconds(Battery.timeToEmpty, "Calculating...") : formatSeconds(Battery.timeToFull, "Fully charged!")) : qsTr("Power profile: %1").arg(PowerProfile.toString(PowerProfiles.profile))
 	}
 
@@ -77,10 +78,10 @@ Column {
 		height: active ? ((item as Item)?.implicitHeight ?? 0) : 0
 
 		sourceComponent: CustomRect {
-			color: DynamicColors.palette.m3error
-			implicitHeight: child.implicitHeight + Appearance.padding.large
-			implicitWidth: child.implicitWidth + Appearance.padding.larger * 2
-			radius: Appearance.rounding.large
+			color: Colors.palette.m3error
+			implicitHeight: child.implicitHeight + Tokens.padding.large
+			implicitWidth: child.implicitWidth + Tokens.padding.larger * 2
+			radius: Tokens.rounding.large
 
 			Column {
 				id: child
@@ -89,33 +90,33 @@ Column {
 
 				Row {
 					anchors.horizontalCenter: parent.horizontalCenter
-					spacing: Appearance.spacing.small
+					spacing: Tokens.spacing.small
 
 					MaterialIcon {
 						anchors.verticalCenter: parent.verticalCenter
 						anchors.verticalCenterOffset: -font.pointSize / 10
-						color: DynamicColors.palette.m3onError
+						color: Colors.palette.m3onError
 						text: "warning"
 					}
 
 					CustomText {
 						anchors.verticalCenter: parent.verticalCenter
-						color: DynamicColors.palette.m3onError
-						font.family: Appearance.font.family.mono
+						color: Colors.palette.m3onError
+						font.family: Config.appearance.font.family.mono
 						text: qsTr("Performance Degraded")
 					}
 
 					MaterialIcon {
 						anchors.verticalCenter: parent.verticalCenter
 						anchors.verticalCenterOffset: -font.pointSize / 10
-						color: DynamicColors.palette.m3onError
+						color: Colors.palette.m3onError
 						text: "warning"
 					}
 				}
 
 				CustomText {
 					anchors.horizontalCenter: parent.horizontalCenter
-					color: DynamicColors.palette.m3onError
+					color: Colors.palette.m3onError
 					text: qsTr("Reason: %1").arg(PerformanceDegradationReason.toString(PowerProfiles.degradationReason))
 				}
 			}
@@ -135,16 +136,16 @@ Column {
 		}
 
 		anchors.horizontalCenter: parent.horizontalCenter
-		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: indicator.height + Appearance.padding.extraSmall * 2
-		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Appearance.padding.larger * 2 + Appearance.spacing.small * 8
-		radius: Appearance.rounding.full
+		color: Colors.tPalette.m3surfaceContainer
+		implicitHeight: indicator.height + Tokens.padding.extraSmall * 2
+		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Tokens.padding.larger * 2 + Tokens.spacing.small * 8
+		radius: Tokens.rounding.full
 
 		CustomRect {
 			id: indicator
 
-			color: DynamicColors.palette.m3primary
-			radius: Appearance.rounding.full
+			color: Colors.palette.m3primary
+			radius: Tokens.rounding.full
 			state: profiles.current
 
 			states: [
@@ -180,7 +181,7 @@ Column {
 			id: saver
 
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.extraSmall
+			anchors.leftMargin: Tokens.padding.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
 			icon: "energy_savings_leaf"
 			profile: PowerProfile.PowerSaver
@@ -198,7 +199,7 @@ Column {
 			id: perf
 
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.extraSmall
+			anchors.rightMargin: Tokens.padding.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
 			icon: "bolt"
 			profile: PowerProfile.Performance
@@ -218,12 +219,12 @@ Column {
 		required property string icon
 		required property int profile
 
-		implicitHeight: icon.implicitHeight + Appearance.padding.small
-		implicitWidth: icon.implicitHeight + Appearance.padding.small
+		implicitHeight: icon.implicitHeight + Tokens.padding.small
+		implicitWidth: icon.implicitHeight + Tokens.padding.small
 
 		StateLayer {
-			color: profiles.current === parent.icon ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-			radius: Appearance.rounding.full
+			color: profiles.current === parent.icon ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			radius: Tokens.rounding.full
 
 			onClicked: {
 				PowerProfiles.profile = parent.profile;
@@ -234,10 +235,10 @@ Column {
 			id: icon
 
 			anchors.centerIn: parent
-			color: profiles.current === text ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+			color: profiles.current === text ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 			fill: profiles.current === text ? 1 : 0
-			font.pointSize: Appearance.font.size.large * 2
-			grade: DynamicColors.light ? 0 : (text === "balance" ? -25 : 0)
+			font.pointSize: Tokens.font.size.large * 2
+			grade: Colors.light ? 0 : (text === "balance" ? -25 : 0)
 			text: parent.icon
 
 			Behavior on fill {