initial commit for media widget update + anim tokens restructure

Components/AnchorAnim.qml

@@ -27,25 +27,25 @@ AnchorAnimation {
 		if (type == AnchorAnim.DefaultSpatial)
 			return Tokens.anim.durations.expressiveDefaultSpatial;
 		if (type == AnchorAnim.SlowSpatial)
-			return Tokens.anim.durations.large;
+			return Tokens.anim.durations.expressiveSlowSpatial;
 
 		const types = ["small", "normal", "large", "extraLarge"];
-		const idx = type % 4;
+		const idx = type % 4; // 0-7 are the 4 standard types
 		return Tokens.anim.durations[types[idx]];
 	}
-	easing.bezierCurve: {
+	easing: {
 		if (type == AnchorAnim.FastSpatial)
-			return Tokens.anim.curves.expressiveFastSpatial;
+			return Tokens.anim.expressiveFastSpatial;
 		if (type == AnchorAnim.DefaultSpatial)
-			return Tokens.anim.curves.expressiveDefaultSpatial;
+			return Tokens.anim.expressiveDefaultSpatial;
 		if (type == AnchorAnim.SlowSpatial)
-			return Tokens.anim.curves.expressiveSlowSpatial;
+			return Tokens.anim.expressiveSlowSpatial;
 
 		if (type >= AnchorAnim.StandardSmall && type <= AnchorAnim.StandardExtraLarge)
-			return Tokens.anim.curves.standard;
+			return Tokens.anim.standard;
 		if (type >= AnchorAnim.EmphasizedSmall && type <= AnchorAnim.EmphasizedExtraLarge)
-			return Tokens.anim.curves.emphasized;
+			return Tokens.anim.emphasized;
 
-		return Tokens.anim.curves.expressiveDefaultSpatial;
+		return Tokens.anim.expressiveDefaultSpatial;
 	}
 }

Components/Anim.qml

@@ -30,34 +30,34 @@ 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;
 
 		const types = ["small", "normal", "large", "extraLarge"];
-		const idx = type % 4;
+		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;
 	}
 }

Components/BaseStyledSlider.qml

@@ -107,7 +107,7 @@ Slider {
 
 					Anim {
 						duration: Tokens.anim.durations.normal / 2
-						easing.bezierCurve: Tokens.anim.curves.standardAccel
+						easing: Tokens.anim.standardAccel
 						property: "scale"
 						target: icon
 						to: 0
@@ -119,7 +119,7 @@ Slider {
 
 					Anim {
 						duration: Tokens.anim.durations.normal / 2
-						easing.bezierCurve: Tokens.anim.curves.standardDecel
+						easing: Tokens.anim.standardDecel
 						property: "scale"
 						target: icon
 						to: 1

Components/ButtonBase.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import ZShell.Config
+import qs.Components
 import qs.Services
 
 CustomRect {
@@ -36,7 +37,7 @@ CustomRect {
 	readonly property color onColor: !enabled ? disabledOnColor : internalChecked ? activeOnColor : inactiveOnColor
 	property real padding
 	readonly property alias pressed: stateLayer.pressed
-	property real pressedRadius: Tokens.rounding.smallest
+	property real pressedRadius: Tokens.rounding.small
 	readonly property alias radiusAnim: radiusAnim
 	property bool radiusMorph: true
 	property alias shapeMorph: stateLayer.shapeMorph

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
 }

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

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

Components/CustomCheckbox.qml

@@ -23,7 +23,7 @@ CheckBox {
 		color: Colors.palette.m3surfaceVariant
 		implicitHeight: control.checkHeight
 		implicitWidth: control.checkWidth
-		radius: Tokens.rounding.smallest / 2
+		radius: Tokens.rounding.small / 2
 
 		CustomRect {
 			color: Colors.palette.m3primary

Components/CustomSlider.qml

@@ -141,7 +141,7 @@ Slider {
 					CAnim {
 					}
 				}
-				NumberAnimation on waveProgress {
+				Anim on waveProgress {
 					duration: root.waveDuration
 					easing.type: Easing.Linear
 					from: 0

Components/CustomSpinBox.qml

@@ -38,9 +38,9 @@ DoubleSpinBox {
 		horizontalAlignment: TextField.AlignHCenter
 		implicitWidth: 65
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
-		leftPadding: Tokens.padding.larger
+		leftPadding: Tokens.padding.small
 		readOnly: !root.editable
-		rightPadding: Tokens.padding.larger
+		rightPadding: Tokens.padding.small
 		text: root.textFromValue(root.value, root.locale)
 		validator: root.validator
 

Components/CustomSplitButtonRow.qml

@@ -1,70 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import ZShell.Config
-import qs.Services
-
-Item {
-	id: root
-
-	property alias active: splitButton.active
-	property alias buttonAlias: splitButton
-	property alias expanded: splitButton.expanded
-	property int expandedZ: 100
-	required property string label
-	property alias menuItems: splitButton.menuItems
-	property bool shouldBeActive: true
-	property alias type: splitButton.type
-
-	signal selected(item: MenuItem)
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	clip: false
-	implicitHeight: row.implicitHeight + Tokens.padding.smaller * 2
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0.8
-	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
-
-	Behavior on opacity {
-		Anim {
-		}
-	}
-	Behavior on scale {
-		Anim {
-		}
-	}
-
-	RowLayout {
-		id: row
-
-		anchors.left: parent.left
-		anchors.margins: Tokens.padding.small
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-		spacing: Tokens.spacing.normal
-
-		CustomText {
-			Layout.fillWidth: true
-			color: root.enabled ? Colors.palette.m3onSurface : Colors.palette.m3onSurfaceVariant
-			font.pointSize: Tokens.font.size.larger
-			text: root.label
-		}
-
-		CustomSplitButton {
-			id: splitButton
-
-			enabled: root.enabled
-			type: CustomSplitButton.Filled
-			z: 2
-
-			menu.onItemSelected: item => {
-				root.selected(item);
-			}
-			stateLayer.onClicked: {
-				splitButton.expanded = !splitButton.expanded;
-			}
-		}
-	}
-}

Components/CustomSwitch.qml

@@ -14,7 +14,7 @@ Switch {
 
 	indicator: CustomRect {
 		color: root.checked && root.enabled ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer)
-		implicitHeight: Tokens.font.size.medium + Tokens.padding.normal * 2
+		implicitHeight: Tokens.font.size.larger + Tokens.padding.small * 2
 		implicitWidth: implicitHeight * 1.7
 		radius: Tokens.rounding.full
 
@@ -92,7 +92,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Tokens.padding.larger
+				height: parent.implicitHeight - Tokens.padding.small
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -153,6 +153,6 @@ Switch {
 
 	component PropAnim: PropertyAnimation {
 		duration: Tokens.anim.durations.expressiveFastSpatial
-		easing.bezierCurve: Tokens.anim.curves.expressiveFastSpatial
+		easing: Tokens.anim.expressiveFastSpatial
 	}
 }

Components/CustomTextField.qml

@@ -129,8 +129,8 @@ TextFieldBase {
 				}
 
 				AnchorAnim {
-					duration: Tokens.anim.durations.expressiveEffects
-					easing.bezierCurve: Tokens.anim.curves.expressiveEffects
+					duration: Tokens.anim.durations.expressiveDefaultEffects
+					easing: Tokens.anim.expressiveDefaultEffects
 				}
 			}
 		}
@@ -140,7 +140,7 @@ TextFieldBase {
 
 			active: root.leadingIcon
 			anchors.left: parent.left
-			anchors.leftMargin: Tokens.padding.normal
+			anchors.leftMargin: Tokens.padding.small
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
@@ -154,7 +154,7 @@ TextFieldBase {
 
 			active: root.trailingIcon
 			anchors.right: parent.right
-			anchors.rightMargin: Tokens.padding.normal
+			anchors.rightMargin: Tokens.padding.small
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {

Components/IconButton.qml

@@ -27,7 +27,7 @@ ButtonBase {
 			return Colors.palette.m3onPrimary;
 		return type === IconButton.Tonal ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurfaceVariant;
 	}
-	padding: type === IconButton.Text ? Tokens.padding.extraSmall / 2 : Tokens.padding.small
+	padding: type === IconButton.Text ? Tokens.padding.extraSmall / 2 : Tokens.padding.extraSmall
 
 	MaterialIcon {
 		id: label

Components/IconTextButton.qml

@@ -17,7 +17,7 @@ ButtonBase {
 			return Colors.palette.m3primary;
 		return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary;
 	}
-	horizontalPadding: Tokens.padding.larger
+	horizontalPadding: Tokens.padding.small
 	implicitHeight: row.implicitHeight + verticalPadding * 2
 	implicitWidth: row.implicitWidth + horizontalPadding * 2
 	inactiveColor: {
@@ -32,7 +32,7 @@ ButtonBase {
 			return Colors.palette.m3primary;
 		return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer;
 	}
-	verticalPadding: Tokens.padding.small
+	verticalPadding: Tokens.padding.extraSmall
 
 	RowLayout {
 		id: row

Components/Menu.qml

@@ -78,7 +78,7 @@ MouseArea {
 		implicitHeight: column.implicitHeight + column.anchors.margins * 2
 		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
 		level: 2
-		radius: Tokens.rounding.medium
+		radius: Tokens.rounding.large
 		x: {
 			watcher.transform;
 			const item = root.attachTo;
@@ -132,9 +132,9 @@ MouseArea {
 
 						Layout.fillWidth: true
 						color: Qt.alpha(Colors.palette.m3tertiaryContainer, active ? 1 : 0)
-						implicitHeight: menuOptionRow.implicitHeight + Tokens.padding.larger * 2
-						implicitWidth: menuOptionRow.implicitWidth + Tokens.padding.larger * 2
-						radius: Tokens.rounding.small
+						implicitHeight: menuOptionRow.implicitHeight + Tokens.padding.medium * 2
+						implicitWidth: menuOptionRow.implicitWidth + Tokens.padding.medium * 2
+						radius: menu.radius - column.anchors.margins
 
 						Behavior on radius {
 							Anim {
@@ -157,7 +157,7 @@ MouseArea {
 							id: menuOptionRow
 
 							anchors.fill: parent
-							anchors.margins: Tokens.padding.larger
+							anchors.margins: Tokens.padding.medium
 							spacing: Tokens.spacing.small
 
 							MaterialIcon {

Components/SearchBar.qml

@@ -70,7 +70,7 @@ TextFieldBase {
 		id: clearIcon
 
 		anchors.right: parent.right
-		anchors.rightMargin: Tokens.padding.larger
+		anchors.rightMargin: Tokens.padding.small
 		anchors.verticalCenter: parent.verticalCenter
 		enabled: root.text
 		icon: "clear"

Components/SplitButton.qml

@@ -12,14 +12,14 @@ Row {
 	}
 
 	property alias active: menu.active
-	property color color: type == CustomSplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
+	property color colour: type == SplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
 	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
 	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: Tokens.padding.larger
+	property real horizontalPadding: Tokens.padding.medium
 	readonly property alias iconLabel: iconLabel
 	readonly property alias label: label
 	readonly property alias menu: menu
@@ -27,20 +27,20 @@ Row {
 	property bool menuOnTop
 	property real minLeftWidth
 	readonly property alias stateLayer: stateLayer
-	property color textColor: type == CustomSplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
+	property color textColor: type == SplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
 	readonly property alias textRow: textRow
-	property int type: CustomSplitButton.Filled
+	property int type: SplitButton.Filled
 	property real verticalPadding: Tokens.padding.small
 
-	spacing: Math.floor(Tokens.spacing.extraSmall)
+	spacing: Math.floor(Tokens.spacing.extraSmall / 2)
 
 	CustomRect {
-		bottomRightRadius: Tokens.rounding.small / 2
-		color: !root.enabled ? root.disabledColor : root.color
+		bottomRightRadius: Tokens.rounding.medium / 2
+		color: root.disabled ? root.disabledColor : root.colour
 		implicitHeight: expandBtn.implicitHeight
 		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
 		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
-		topRightRadius: Tokens.rounding.small / 2
+		topRightRadius: Tokens.rounding.medium / 2
 
 		StateLayer {
 			id: stateLayer
@@ -92,10 +92,10 @@ Row {
 	CustomRect {
 		id: expandBtn
 
-		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.small / 2
+		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.medium / 2
 
 		bottomLeftRadius: rad
-		color: !root.enabled ? root.disabledColor : root.color
+		color: !root.enabled ? root.disabledColor : root.colour
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
 		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)

Components/StateLayer.qml

@@ -1,9 +1,8 @@
 import QtQuick
 import QtQuick.Shapes
 import ZShell
-import ZShell.Components
-import qs.Helpers
 import ZShell.Config
+import qs.Helpers
 import qs.Services
 
 MouseArea {
@@ -81,7 +80,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

Components/TextButton.qml

@@ -14,7 +14,7 @@ ButtonBase {
 			return Colors.palette.m3primary;
 		return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary;
 	}
-	horizontalPadding: Tokens.padding.normal
+	horizontalPadding: Tokens.padding.small
 	implicitHeight: label.implicitHeight + verticalPadding * 2
 	implicitWidth: label.implicitWidth + horizontalPadding * 2
 	inactiveColor: {
@@ -29,7 +29,7 @@ ButtonBase {
 			return Colors.palette.m3primary;
 		return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer;
 	}
-	verticalPadding: Tokens.padding.small
+	verticalPadding: Tokens.padding.extraSmall
 
 	CustomText {
 		id: label

Components/TextFieldBase.qml

@@ -36,7 +36,7 @@ TextField {
 		color: Colors.palette.m3primary
 		implicitHeight: root.cursorRectangle.height
 		implicitWidth: 1.5
-		radius: Tokens.rounding.large
+		radius: Tokens.rounding.largeIncreased
 		x: root.cursorRectangle.x
 		y: root.cursorRectangle.y
 

Components/Toast/ToastItem.qml

@@ -32,8 +32,8 @@ CustomRect {
 			return Colors.palette.m3errorContainer;
 		return Colors.palette.m3surface;
 	}
-	implicitHeight: layout.implicitHeight + Tokens.padding.smaller * 2
-	radius: Tokens.rounding.normal
+	implicitHeight: layout.implicitHeight + Tokens.padding.small * 2
+	radius: Tokens.rounding.medium
 
 	Behavior on border.color {
 		CAnim {
@@ -52,10 +52,10 @@ CustomRect {
 		id: layout
 
 		anchors.fill: parent
-		anchors.leftMargin: Tokens.padding.normal
-		anchors.margins: Tokens.padding.smaller
-		anchors.rightMargin: Tokens.padding.normal
-		spacing: Tokens.spacing.normal
+		anchors.leftMargin: Tokens.padding.small
+		anchors.margins: Tokens.padding.small
+		anchors.rightMargin: Tokens.padding.small
+		spacing: Tokens.spacing.medium
 
 		CustomRect {
 			color: {
@@ -67,9 +67,9 @@ CustomRect {
 					return Colors.palette.m3error;
 				return Colors.palette.m3surfaceContainerHigh;
 			}
-			implicitHeight: icon.implicitHeight + Tokens.padding.smaller * 2
+			implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
 			implicitWidth: implicitHeight
-			radius: Tokens.rounding.normal
+			radius: Tokens.rounding.medium
 
 			MaterialIcon {
 				id: icon

Components/Toast/Toasts.qml

@@ -21,7 +21,7 @@ Item {
 		}
 		return h;
 	}
-	implicitWidth: Config.utilities.sizes.toastWidth - Tokens.padding.normal * 2
+	implicitWidth: Config.utilities.sizes.toastWidth - Tokens.padding.small * 2
 
 	Repeater {
 		id: repeater
@@ -82,7 +82,7 @@ Item {
 		Behavior on anchors.bottomMargin {
 			Anim {
 				duration: Tokens.anim.durations.expressiveDefaultSpatial
-				easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+				easing: Tokens.anim.expressiveDefaultSpatial
 			}
 		}
 		Behavior on opacity {
@@ -105,7 +105,7 @@ Item {
 			id: initAnim
 
 			duration: Tokens.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+			easing: Tokens.anim.expressiveDefaultSpatial
 			from: 0
 			properties: "opacity,scale"
 			target: toast