initial commit for media widget update + anim tokens restructure

Modules/Osd/Content.qml

@@ -19,14 +19,14 @@ Item {
 	required property var visibilities
 	required property real volume
 
-	implicitHeight: layout.implicitHeight + Tokens.padding.small * 2
-	implicitWidth: layout.implicitWidth + Tokens.padding.small * 2
+	implicitHeight: layout.implicitHeight + Tokens.padding.smaller * 2
+	implicitWidth: layout.implicitWidth + Tokens.padding.smaller * 2
 
 	ColumnLayout {
 		id: layout
 
 		anchors.centerIn: parent
-		spacing: Tokens.spacing.normal
+		spacing: Tokens.spacing.medium
 
 		// Speaker volume
 		CustomMouseArea {
@@ -127,7 +127,7 @@ Item {
 
 		Behavior on Layout.preferredHeight {
 			Anim {
-				easing.bezierCurve: Tokens.anim.curves.emphasized
+				easing: Tokens.anim.emphasized
 			}
 		}
 		Behavior on opacity {

Modules/Osd/Wrapper.qml

@@ -14,8 +14,11 @@ Item {
 	property bool hovered
 	readonly property Brightness.Monitor monitor: Brightness.getMonitorForScreen(root.screen)
 	property bool muted
+	property real offsetScale: shouldBeActive ? 0 : 1
 	required property ShellScreen screen
 	readonly property bool shouldBeActive: visibilities.osd && Config.osd.enabled && !(visibilities.utilities && Config.utilities.enabled)
+	property real sidebarOffset: sidebarOrSessionVisible ? 12 : 0
+	required property bool sidebarOrSessionVisible
 	property bool sourceMuted
 	property real sourceVolume
 	required property var visibilities
@@ -26,20 +29,16 @@ Item {
 		timer.restart();
 	}
 
-	property real offsetScale: shouldBeActive ? 0 : 1
-	required property bool sidebarOrSessionVisible
-	property real sidebarOffset: sidebarOrSessionVisible ? 12 : 0
-
-	visible: offsetScale < 1
 	anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale
-	implicitWidth: content.implicitWidth
 	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth
 	opacity: 1 - offsetScale
+	visible: offsetScale < 1
 
 	Behavior on offsetScale {
 		Anim {
 			duration: Tokens.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+			easing: Tokens.anim.expressiveDefaultSpatial
 		}
 	}
 
@@ -98,11 +97,10 @@ Item {
 	Loader {
 		id: content
 
+		active: root.shouldBeActive || root.visible
 		anchors.left: parent.left
 		anchors.verticalCenter: parent.verticalCenter
 
-		active: root.shouldBeActive || root.visible
-
 		sourceComponent: Content {
 			brightness: root.brightness
 			monitor: root.monitor