Fix duration token $value format

Terrazzo's CSS duration transform expects $value as the object form { value, unit } per the DTCG spec. The string form ("400ms") caused the generator to emit 'undefinedundefined' for both the CSS variables and the JS fallback map, which left consumers (such as the motion Storybook story) with effectively zero-duration animations. Switching motion.json to the object form and regenerating the prebuilt files restores correct values throughout. Co-authored-by: Cursor <cursoragent@cursor.com>
WordPress · ciampo · May 12, 2026 · Mar 3, 2026 · Mar 17, 2026 · Mar 17, 2026
commit e6198f263a68920b3b75aa56b9d9176c89f4618f
@@ -254,15 +254,15 @@
 	--wpds-elevation-lg: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
 		0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005;
 	/* Micro-delays and transition offsets */
-	--wpds-motion-duration-xs: undefinedundefined;
+	--wpds-motion-duration-xs: 50ms;
 	/* Micro-interactions like focus rings and state changes */
-	--wpds-motion-duration-sm: undefinedundefined;
+	--wpds-motion-duration-sm: 100ms;
 	/* Standard transitions like menus and popovers */
-	--wpds-motion-duration-md: undefinedundefined;
+	--wpds-motion-duration-md: 200ms;
 	/* Deliberate animations like slides and reveals */
-	--wpds-motion-duration-lg: undefinedundefined;
+	--wpds-motion-duration-lg: 300ms;
 	/* Extended animations like complex or multi-step transitions */
-	--wpds-motion-duration-xl: undefinedundefined;
+	--wpds-motion-duration-xl: 400ms;
 	/* Nearly imperceptible easing for hover, color, and background transitions */
 	--wpds-motion-easing-subtle: cubic-bezier( 0.15, 0, 0.15, 1 );
 	/* General-purpose easing for on-screen movement like resizing, morphing, and layout shifts */

@@ -141,11 +141,11 @@ export default {
 		'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',
 	'--wpds-elevation-xs':
 		'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',
-	'--wpds-motion-duration-lg': 'undefinedundefined',
-	'--wpds-motion-duration-md': 'undefinedundefined',
-	'--wpds-motion-duration-sm': 'undefinedundefined',
-	'--wpds-motion-duration-xl': 'undefinedundefined',
-	'--wpds-motion-duration-xs': 'undefinedundefined',
+	'--wpds-motion-duration-lg': '300ms',
+	'--wpds-motion-duration-md': '200ms',
+	'--wpds-motion-duration-sm': '100ms',
+	'--wpds-motion-duration-xl': '400ms',
+	'--wpds-motion-duration-xs': '50ms',
 	'--wpds-motion-easing-balanced': 'cubic-bezier(0.4, 0, 0.2, 1)',
 	'--wpds-motion-easing-expressive': 'cubic-bezier(0.25, 0, 0, 1)',
 	'--wpds-motion-easing-subtle': 'cubic-bezier(0.15, 0, 0.15, 1)',

@@ -3,23 +3,23 @@
 		"duration": {
 			"$type": "duration",
 			"xs": {
-				"$value": "50ms",
+				"$value": { "value": 50, "unit": "ms" },
 				"$description": "Micro-delays and transition offsets"
 			},
 			"sm": {
-				"$value": "100ms",
+				"$value": { "value": 100, "unit": "ms" },
 				"$description": "Micro-interactions like focus rings and state changes"
 			},
 			"md": {
-				"$value": "200ms",
+				"$value": { "value": 200, "unit": "ms" },
 				"$description": "Standard transitions like menus and popovers"
 			},
 			"lg": {
-				"$value": "300ms",
+				"$value": { "value": 300, "unit": "ms" },
 				"$description": "Deliberate animations like slides and reveals"
 			},
 			"xl": {
-				"$value": "400ms",
+				"$value": { "value": 400, "unit": "ms" },
 				"$description": "Extended animations like complex or multi-step transitions"
 			}
 		},