initial commit for media widget update + anim tokens restructure

Greeter/Center.qml

@@ -18,7 +18,7 @@ ColumnLayout {
 	Layout.fillHeight: true
 	Layout.fillWidth: false
 	Layout.preferredWidth: centerWidth
-	spacing: Tokens.spacing.large * 2
+	spacing: Tokens.spacing.largeIncreased * 2
 
 	RowLayout {
 		Layout.alignment: Qt.AlignHCenter
@@ -64,7 +64,7 @@ ColumnLayout {
 
 	CustomClippingRect {
 		Layout.alignment: Qt.AlignHCenter
-		Layout.topMargin: Tokens.spacing.large * 2
+		Layout.topMargin: Tokens.spacing.largeIncreased * 2
 		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: root.centerWidth / 2
 		implicitWidth: root.centerWidth / 2
@@ -99,7 +99,7 @@ ColumnLayout {
 		Layout.alignment: Qt.AlignHCenter
 		color: Colors.tPalette.m3surfaceContainer
 		focus: true
-		implicitHeight: input.implicitHeight + Tokens.padding.small * 2
+		implicitHeight: input.implicitHeight + Tokens.padding.extraSmall * 2
 		implicitWidth: root.centerWidth * 0.8
 		radius: Tokens.rounding.full
 
@@ -130,11 +130,11 @@ ColumnLayout {
 			id: input
 
 			anchors.fill: parent
-			anchors.margins: Tokens.padding.small
-			spacing: Tokens.spacing.normal
+			anchors.margins: Tokens.padding.extraSmall
+			spacing: Tokens.spacing.medium
 
 			Item {
-				implicitHeight: statusIcon.implicitHeight + Tokens.padding.small * 2
+				implicitHeight: statusIcon.implicitHeight + Tokens.padding.extraSmall * 2
 				implicitWidth: implicitHeight
 
 				MaterialIcon {
@@ -174,7 +174,7 @@ ColumnLayout {
 
 			CustomRect {
 				color: root.greeter.buffer && !root.greeter.launching ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
-				implicitHeight: enterIcon.implicitHeight + Tokens.padding.small * 2
+				implicitHeight: enterIcon.implicitHeight + Tokens.padding.extraSmall * 2
 				implicitWidth: implicitHeight
 				radius: Tokens.rounding.full
 
@@ -200,7 +200,7 @@ ColumnLayout {
 
 	Item {
 		Layout.fillWidth: true
-		Layout.topMargin: -Tokens.spacing.large
+		Layout.topMargin: -Tokens.spacing.largeIncreased
 		implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight)
 
 		Behavior on implicitHeight {

Greeter/Components/Anim.qml

@@ -30,11 +30,11 @@ NumberAnimation {
 		if (type === Anim.DefaultSpatial)
 			return Tokens.anim.durations.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Tokens.anim.durations.large;
+			return Tokens.anim.durations.expressiveSlowSpatial;
 		if (type === Anim.FastEffects)
 			return Tokens.anim.durations.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Tokens.anim.durations.expressiveEffects;
+			return Tokens.anim.durations.expressiveDefaultEffects;
 		if (type === Anim.SlowEffects)
 			return Tokens.anim.durations.expressiveSlowEffects;
 
@@ -42,22 +42,22 @@ NumberAnimation {
 		const idx = type % 4; // 0-7 are the 4 standard types
 		return Tokens.anim.durations[types[idx]];
 	}
-	easing.bezierCurve: {
+	easing: {
 		if (type === Anim.FastSpatial)
-			return Tokens.anim.curves.expressiveFastSpatial;
+			return Tokens.anim.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Tokens.anim.curves.expressiveDefaultSpatial;
+			return Tokens.anim.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Tokens.anim.curves.expressiveSlowSpatial;
+			return Tokens.anim.expressiveSlowSpatial;
 		if (type === Anim.FastEffects)
-			return Tokens.anim.curves.expressiveFastEffects;
+			return Tokens.anim.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Tokens.anim.curves.expressiveDefaultEffects;
+			return Tokens.anim.expressiveDefaultEffects;
 		if (type === Anim.SlowEffects)
-			return Tokens.anim.curves.expressiveSlowEffects;
+			return Tokens.anim.expressiveSlowEffects;
 
 		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
-			return Tokens.anim.curves.emphasized;
-		return Tokens.anim.curves.standard;
+			return Tokens.anim.emphasized;
+		return Tokens.anim.standard;
 	}
 }

Greeter/Components/CAnim.qml

@@ -2,62 +2,6 @@ import QtQuick
 import ZShell.Config
 
 ColorAnimation {
-	enum Type {
-		StandardSmall = 0,
-		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;
-	}
+	duration: Tokens.anim.durations.expressiveSlowEffects
+	easing: Tokens.anim.expressiveSlowEffects
 }

Greeter/Components/CircularIndicator.qml

@@ -23,7 +23,7 @@ BusyIndicator {
 	property real implicitSize: Tokens.font.size.normal * 3
 	property real internalStrokeWidth: strokeWidth
 	readonly property alias progress: manager.progress
-	property real strokeWidth: Tokens.padding.small * 0.8
+	property real strokeWidth: Tokens.padding.extraSmall * 0.8
 	property alias type: manager.indeterminateAnimationType
 
 	implicitHeight: implicitSize

Greeter/Components/CircularProgress.qml

@@ -21,7 +21,7 @@ Item {
 	readonly property real size: Math.min(width, height)
 	property int spacing: Tokens.spacing.small
 	property int startAngle: -90
-	property int strokeWidth: Tokens.padding.small
+	property int strokeWidth: Tokens.padding.extraSmall
 	property int sweepAngle: 360
 	readonly property real thickness: strokeWidth * (1 + waveAmplitude) * 2
 	property real value

Greeter/Components/CustomTextField.qml

@@ -27,7 +27,7 @@ TextField {
 
 		color: Colors.palette.m3primary
 		implicitWidth: 2
-		radius: Tokens.rounding.normal
+		radius: Tokens.rounding.medium
 
 		Behavior on opacity {
 			Anim {

Greeter/Components/StateLayer.qml

@@ -81,7 +81,7 @@ MouseArea {
 
 		alwaysRunToEnd: true
 		duration: Tokens.anim.durations.expressiveSlowEffects * 2
-		easing.bezierCurve: Tokens.anim.curves.standard
+		easing: Tokens.anim.standard
 		property: "circleRadius"
 		target: root
 		to: root.endRadius

Greeter/Content.qml

@@ -11,18 +11,18 @@ RowLayout {
 	required property var greeter
 	required property real screenHeight
 
-	spacing: Tokens.spacing.large * 2
+	spacing: Tokens.spacing.largeIncreased * 2
 
 	ColumnLayout {
 		Layout.fillWidth: true
-		spacing: Tokens.spacing.normal
+		spacing: Tokens.spacing.medium
 
 		CustomRect {
 			Layout.fillWidth: true
 			color: Colors.tPalette.m3surfaceContainer
 			implicitHeight: weather.implicitHeight
 			radius: Tokens.rounding.small
-			topLeftRadius: Tokens.rounding.large
+			topLeftRadius: Tokens.rounding.largeIncreased
 
 			WeatherInfo {
 				id: weather
@@ -34,7 +34,7 @@ RowLayout {
 		CustomClippingRect {
 			Layout.fillHeight: true
 			Layout.fillWidth: true
-			bottomLeftRadius: Tokens.rounding.large
+			bottomLeftRadius: Tokens.rounding.largeIncreased
 			color: Colors.tPalette.m3surfaceContainer
 			radius: Tokens.rounding.small
 
@@ -51,15 +51,15 @@ RowLayout {
 
 	ColumnLayout {
 		Layout.fillWidth: true
-		spacing: Tokens.spacing.normal
+		spacing: Tokens.spacing.medium
 
 		CustomRect {
 			Layout.fillHeight: true
 			Layout.fillWidth: true
-			bottomRightRadius: Tokens.rounding.large
+			bottomRightRadius: Tokens.rounding.largeIncreased
 			color: Colors.tPalette.m3surfaceContainer
 			radius: Tokens.rounding.small
-			topRightRadius: Tokens.rounding.large
+			topRightRadius: Tokens.rounding.largeIncreased
 
 			SessionDock {
 				greeter: root.greeter

Greeter/GreeterSurface.qml

@@ -43,7 +43,7 @@ Scope {
 					ParallelAnimation {
 						Anim {
 							duration: Tokens.anim.durations.expressiveFastSpatial
-							easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
+							easing: Tokens.anim.expressiveFastSpatial
 							property: "scale"
 							target: lockContent
 							to: 1
@@ -65,7 +65,7 @@ Scope {
 
 						Anim {
 							duration: Tokens.anim.durations.expressiveDefaultSpatial
-							easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+							easing: Tokens.anim.expressiveDefaultSpatial
 							property: "scale"
 							target: content
 							to: 1
@@ -74,12 +74,12 @@ Scope {
 						Anim {
 							property: "radius"
 							target: lockBg
-							to: Tokens.rounding.large * 1.5
+							to: Tokens.rounding.largeIncreased * 1.5
 						}
 
 						Anim {
 							duration: Tokens.anim.durations.expressiveDefaultSpatial
-							easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+							easing: Tokens.anim.expressiveDefaultSpatial
 							property: "implicitWidth"
 							target: lockContent
 							to: (win.screen?.height ?? 0) * Config.lock.sizes.heightMult * Config.lock.sizes.ratio
@@ -87,7 +87,7 @@ Scope {
 
 						Anim {
 							duration: Tokens.anim.durations.expressiveDefaultSpatial
-							easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+							easing: Tokens.anim.expressiveDefaultSpatial
 							property: "implicitHeight"
 							target: lockContent
 							to: (win.screen?.height ?? 0) * Config.lock.sizes.heightMult

Greeter/InputField.qml

@@ -113,7 +113,7 @@ Item {
 			Behavior on scale {
 				Anim {
 					duration: Tokens.anim.durations.expressiveFastSpatial
-					easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
+					easing: Tokens.anim.expressiveFastSpatial
 				}
 			}
 

Greeter/SessionDock.qml

@@ -13,7 +13,7 @@ ColumnLayout {
 
 	anchors.fill: parent
 	anchors.margins: Tokens.padding.large
-	spacing: Tokens.spacing.smaller
+	spacing: Tokens.spacing.small
 
 	CustomText {
 		Layout.fillWidth: true
@@ -41,7 +41,7 @@ ColumnLayout {
 				}
 			}
 			sourceComponent: ColumnLayout {
-				spacing: Tokens.spacing.large
+				spacing: Tokens.spacing.largeIncreased
 
 				MaterialIcon {
 					Layout.alignment: Qt.AlignHCenter
@@ -79,8 +79,8 @@ ColumnLayout {
 
 				anchors.left: parent?.left
 				anchors.right: parent?.right
-				implicitHeight: row.implicitHeight + Tokens.padding.normal * 2
-				radius: Tokens.rounding.normal - Tokens.padding.smaller
+				implicitHeight: row.implicitHeight + Tokens.padding.small * 2
+				radius: Tokens.rounding.medium - Tokens.padding.small
 
 				StateLayer {
 					onClicked: {
@@ -92,8 +92,8 @@ ColumnLayout {
 					id: row
 
 					anchors.fill: parent
-					anchors.margins: Tokens.padding.normal
-					spacing: Tokens.spacing.normal
+					anchors.margins: Tokens.padding.small
+					spacing: Tokens.spacing.medium
 
 					MaterialIcon {
 						color: session.index === sessions.currentIndex ? Colors.palette.m3onPrimary : Colors.palette.m3onSurfaceVariant
@@ -129,13 +129,13 @@ ColumnLayout {
 				color: Colors.palette.m3primary
 				implicitHeight: sessions.currentItem?.implicitHeight ?? 0
 				implicitWidth: sessions.width
-				radius: Tokens.rounding.normal - Tokens.padding.smaller
+				radius: Tokens.rounding.medium - Tokens.padding.small
 				y: sessions.currentItem?.y ?? 0
 
 				Behavior on y {
 					Anim {
 						duration: Tokens.anim.durations.small
-						easing.bezierCurve: Tokens.anim.curves.expressiveEffects
+						easing: Tokens.anim.expressiveDefaultEffects
 					}
 				}
 			}

Greeter/UserDock.qml

@@ -14,7 +14,7 @@ ColumnLayout {
 
 	anchors.fill: parent
 	anchors.margins: Tokens.padding.large
-	spacing: Tokens.spacing.smaller
+	spacing: Tokens.spacing.small
 
 	CustomText {
 		Layout.fillWidth: true
@@ -42,7 +42,7 @@ ColumnLayout {
 				}
 			}
 			sourceComponent: ColumnLayout {
-				spacing: Tokens.spacing.large
+				spacing: Tokens.spacing.largeIncreased
 
 				MaterialIcon {
 					Layout.alignment: Qt.AlignHCenter
@@ -81,8 +81,8 @@ ColumnLayout {
 
 				anchors.left: parent?.left
 				anchors.right: parent?.right
-				implicitHeight: row.implicitHeight + Tokens.padding.normal * 2
-				radius: Tokens.rounding.normal - Tokens.padding.smaller
+				implicitHeight: row.implicitHeight + Tokens.padding.small * 2
+				radius: Tokens.rounding.medium - Tokens.padding.small
 
 				StateLayer {
 					onClicked: {
@@ -94,8 +94,8 @@ ColumnLayout {
 					id: row
 
 					anchors.fill: parent
-					anchors.margins: Tokens.padding.normal
-					spacing: Tokens.spacing.normal
+					anchors.margins: Tokens.padding.small
+					spacing: Tokens.spacing.medium
 
 					CustomClippingRect {
 						Layout.preferredHeight: 50
@@ -135,13 +135,13 @@ ColumnLayout {
 				color: Colors.palette.m3primary
 				implicitHeight: users.currentItem?.implicitHeight ?? 0
 				implicitWidth: users.width
-				radius: Tokens.rounding.normal - Tokens.padding.smaller
+				radius: Tokens.rounding.medium - Tokens.padding.small
 				y: users.currentItem?.y ?? 0
 
 				Behavior on y {
 					Anim {
-						duration: Tokens.anim.durations.small
-						easing.bezierCurve: Tokens.anim.curves.expressiveEffects
+						duration: Tokens.anim.durations.expressiveDefaultEffects
+						easing: Tokens.anim.expressiveDefaultEffects
 					}
 				}
 			}

Greeter/WeatherInfo.qml

@@ -34,7 +34,7 @@ ColumnLayout {
 
 	RowLayout {
 		Layout.fillWidth: true
-		spacing: Tokens.spacing.large
+		spacing: Tokens.spacing.largeIncreased
 
 		MaterialIcon {
 			animate: true
@@ -67,7 +67,7 @@ ColumnLayout {
 		}
 
 		Loader {
-			Layout.rightMargin: Tokens.padding.smaller
+			Layout.rightMargin: Tokens.padding.small
 			active: root.width > 400
 			visible: active
 
@@ -103,12 +103,12 @@ ColumnLayout {
 
 		Layout.bottomMargin: Tokens.padding.large * 2
 		Layout.fillWidth: true
-		Layout.topMargin: Tokens.spacing.smaller
+		Layout.topMargin: Tokens.spacing.small
 		active: root.rootHeight > 820
 		visible: active
 
 		sourceComponent: RowLayout {
-			spacing: Tokens.spacing.large
+			spacing: Tokens.spacing.largeIncreased
 
 			Repeater {
 				model: {