initial commit for media widget update + anim tokens restructure

Modules/Bar/Popouts/UPowerPopout.qml

@@ -12,9 +12,10 @@ import qs.Services
 Column {
 	id: root
 
-	readonly property int panelRadius: ((profiles.height / 2) + Tokens.padding.small) * Tokens.rounding.scale
+	required property bool horizontal
+	readonly property int panelRadius: ((profiles.height / 2) + Tokens.padding.extraSmall) * Tokens.rounding.scale
 
-	spacing: Tokens.spacing.normal
+	spacing: Tokens.spacing.medium
 
 	Loader {
 		active: Battery.isLaptop
@@ -24,6 +25,13 @@ Column {
 		}
 	}
 
+	Item {
+		id: padding
+
+		implicitHeight: root.horizontal ? 0 : Tokens.padding.small
+		implicitWidth: 1
+	}
+
 	Repeater {
 		model: Battery.allPeripherals
 
@@ -33,9 +41,9 @@ Column {
 			required property var modelData
 
 			anchors.left: parent.left
-			anchors.leftMargin: Tokens.padding.normal
+			anchors.leftMargin: Tokens.padding.small
 			anchors.right: parent.right
-			anchors.rightMargin: Tokens.padding.normal
+			anchors.rightMargin: Tokens.padding.small
 
 			CustomText {
 				Layout.fillWidth: true
@@ -67,7 +75,7 @@ Column {
 		}
 
 		anchors.left: parent.left
-		anchors.leftMargin: Tokens.padding.normal
+		anchors.leftMargin: Tokens.padding.small
 		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))
 	}
 
@@ -80,8 +88,8 @@ Column {
 		sourceComponent: CustomRect {
 			color: Colors.palette.m3error
 			implicitHeight: child.implicitHeight + Tokens.padding.large
-			implicitWidth: child.implicitWidth + Tokens.padding.larger * 2
-			radius: Tokens.rounding.large
+			implicitWidth: child.implicitWidth + Tokens.padding.small * 2
+			radius: Tokens.rounding.largeIncreased
 
 			Column {
 				id: child
@@ -138,7 +146,7 @@ Column {
 		anchors.horizontalCenter: parent.horizontalCenter
 		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
+		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Tokens.padding.small * 2 + Tokens.spacing.small * 8
 		radius: Tokens.rounding.full
 
 		CustomRect {
@@ -219,8 +227,8 @@ Column {
 		required property string icon
 		required property int profile
 
-		implicitHeight: icon.implicitHeight + Tokens.padding.small
-		implicitWidth: icon.implicitHeight + Tokens.padding.small
+		implicitHeight: icon.implicitHeight + Tokens.padding.extraSmall
+		implicitWidth: icon.implicitHeight + Tokens.padding.extraSmall
 
 		StateLayer {
 			color: profiles.current === parent.icon ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface