@helloimjolopez-pathway/pathway-tokens 5.2.0 → 5.3.0

package/dist/tokens.css

@@ -432,6 +432,21 @@
   --primitive-unit-unit-0-point-5: 0.5px;
   --primitive-unit-unit-0-point-75: 0.75px;
   --primitive-unit-unit-1-point-5: 1.5px;
+  --motion-duration-1: 100ms; /** Instant tap feedback, tiny opacity flickers */
+  --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing */
+  --motion-duration-3: 200ms; /** Micro-interactions needing slightly more presence; small reveals, focus rings */
+  --motion-duration-4: 300ms; /** Chevron / disclosure rotation, dropdown & popover content, in-component state */
+  --motion-duration-5: 380ms; /** Panel state changes: accordions, expand/collapse, item enter/exit */
+  --motion-duration-6: 460ms; /** Large physical-scale moves (e.g. SideNav width expand/collapse) */
+  --motion-duration-7: 680ms; /** Cross-component transitions: page content sliding, large layout shifts */
+  --motion-duration-8: 1100ms; /** Continuous loops only: spinners, skeleton shimmer, indeterminate progress */
+  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings. */
+  --motion-easing-spring: cubic-bezier(0.34, 1.04, 0.64, 1); /** Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04) — easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons — see chevron rule below. */
+  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce. */
+  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly — dismissing overlays, scaling down. */
+  --motion-easing-emphasized: cubic-bezier(0.32, 0.72, 0, 1); /** Large physical-scale transitions: full-panel width changes, SideNav width. Smooth glide, no overshoot. */
+  --motion-easing-accordion: cubic-bezier(0.33, 1.03, 0.68, 1); /** Accordion settle — content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy. */
+  --motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Continuous loops only (spinners, shimmer). Never for bounded transitions. */
   --primitive-type-size-10: var(--primitive-unit-unit-10);
   --primitive-type-size-11: var(--primitive-unit-unit-11);
   --primitive-type-size-12: var(--primitive-unit-unit-12);

package/dist/tokens.js

@@ -69110,4 +69110,353 @@ export default {
       },
     },
   },
+  motion: {
+    duration: {
+      1: {
+        key: "{motion.duration.1}",
+        $type: "duration",
+        $value: "100ms",
+        $description: "Instant tap feedback, tiny opacity flickers",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "duration",
+          $value: "100ms",
+          $description: "Instant tap feedback, tiny opacity flickers",
+          key: "{motion.duration.1}",
+        },
+        name: "MotionDuration1",
+        attributes: {
+          category: "motion",
+          type: "duration",
+          item: "1",
+        },
+        path: ["motion", "duration", "1"],
+      },
+      2: {
+        key: "{motion.duration.2}",
+        $type: "duration",
+        $value: "150ms",
+        $description:
+          "Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "duration",
+          $value: "150ms",
+          $description:
+            "Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing",
+          key: "{motion.duration.2}",
+        },
+        name: "MotionDuration2",
+        attributes: {
+          category: "motion",
+          type: "duration",
+          item: "2",
+        },
+        path: ["motion", "duration", "2"],
+      },
+      3: {
+        key: "{motion.duration.3}",
+        $type: "duration",
+        $value: "200ms",
+        $description:
+          "Micro-interactions needing slightly more presence; small reveals, focus rings",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "duration",
+          $value: "200ms",
+          $description:
+            "Micro-interactions needing slightly more presence; small reveals, focus rings",
+          key: "{motion.duration.3}",
+        },
+        name: "MotionDuration3",
+        attributes: {
+          category: "motion",
+          type: "duration",
+          item: "3",
+        },
+        path: ["motion", "duration", "3"],
+      },
+      4: {
+        key: "{motion.duration.4}",
+        $type: "duration",
+        $value: "300ms",
+        $description:
+          "Chevron / disclosure rotation, dropdown & popover content, in-component state",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "duration",
+          $value: "300ms",
+          $description:
+            "Chevron / disclosure rotation, dropdown & popover content, in-component state",
+          key: "{motion.duration.4}",
+        },
+        name: "MotionDuration4",
+        attributes: {
+          category: "motion",
+          type: "duration",
+          item: "4",
+        },
+        path: ["motion", "duration", "4"],
+      },
+      5: {
+        key: "{motion.duration.5}",
+        $type: "duration",
+        $value: "380ms",
+        $description:
+          "Panel state changes: accordions, expand/collapse, item enter/exit",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "duration",
+          $value: "380ms",
+          $description:
+            "Panel state changes: accordions, expand/collapse, item enter/exit",
+          key: "{motion.duration.5}",
+        },
+        name: "MotionDuration5",
+        attributes: {
+          category: "motion",
+          type: "duration",
+          item: "5",
+        },
+        path: ["motion", "duration", "5"],
+      },
+      6: {
+        key: "{motion.duration.6}",
+        $type: "duration",
+        $value: "460ms",
+        $description:
+          "Large physical-scale moves (e.g. SideNav width expand/collapse)",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "duration",
+          $value: "460ms",
+          $description:
+            "Large physical-scale moves (e.g. SideNav width expand/collapse)",
+          key: "{motion.duration.6}",
+        },
+        name: "MotionDuration6",
+        attributes: {
+          category: "motion",
+          type: "duration",
+          item: "6",
+        },
+        path: ["motion", "duration", "6"],
+      },
+      7: {
+        key: "{motion.duration.7}",
+        $type: "duration",
+        $value: "680ms",
+        $description:
+          "Cross-component transitions: page content sliding, large layout shifts",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "duration",
+          $value: "680ms",
+          $description:
+            "Cross-component transitions: page content sliding, large layout shifts",
+          key: "{motion.duration.7}",
+        },
+        name: "MotionDuration7",
+        attributes: {
+          category: "motion",
+          type: "duration",
+          item: "7",
+        },
+        path: ["motion", "duration", "7"],
+      },
+      8: {
+        key: "{motion.duration.8}",
+        $type: "duration",
+        $value: "1100ms",
+        $description:
+          "Continuous loops only: spinners, skeleton shimmer, indeterminate progress",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "duration",
+          $value: "1100ms",
+          $description:
+            "Continuous loops only: spinners, skeleton shimmer, indeterminate progress",
+          key: "{motion.duration.8}",
+        },
+        name: "MotionDuration8",
+        attributes: {
+          category: "motion",
+          type: "duration",
+          item: "8",
+        },
+        path: ["motion", "duration", "8"],
+      },
+    },
+    easing: {
+      standard: {
+        key: "{motion.easing.standard}",
+        $type: "cubicBezier",
+        $value: [0.4, 0, 0.2, 1],
+        $description:
+          "Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings.",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "cubicBezier",
+          $value: [0.4, 0, 0.2, 1],
+          $description:
+            "Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings.",
+          key: "{motion.easing.standard}",
+        },
+        name: "MotionEasingStandard",
+        attributes: {
+          category: "motion",
+          type: "easing",
+          item: "standard",
+        },
+        path: ["motion", "easing", "standard"],
+      },
+      spring: {
+        key: "{motion.easing.spring}",
+        $type: "cubicBezier",
+        $value: [0.34, 1.04, 0.64, 1],
+        $description:
+          "Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04) — easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons — see chevron rule below.",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "cubicBezier",
+          $value: [0.34, 1.04, 0.64, 1],
+          $description:
+            "Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04) — easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons — see chevron rule below.",
+          key: "{motion.easing.spring}",
+        },
+        name: "MotionEasingSpring",
+        attributes: {
+          category: "motion",
+          type: "easing",
+          item: "spring",
+        },
+        path: ["motion", "easing", "spring"],
+      },
+      decelerate: {
+        key: "{motion.easing.decelerate}",
+        $type: "cubicBezier",
+        $value: [0, 0, 0.2, 1],
+        $description:
+          "Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce.",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "cubicBezier",
+          $value: [0, 0, 0.2, 1],
+          $description:
+            "Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce.",
+          key: "{motion.easing.decelerate}",
+        },
+        name: "MotionEasingDecelerate",
+        attributes: {
+          category: "motion",
+          type: "easing",
+          item: "decelerate",
+        },
+        path: ["motion", "easing", "decelerate"],
+      },
+      accelerate: {
+        key: "{motion.easing.accelerate}",
+        $type: "cubicBezier",
+        $value: [0.4, 0, 1, 1],
+        $description:
+          "Exits where the element leaves cleanly — dismissing overlays, scaling down.",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "cubicBezier",
+          $value: [0.4, 0, 1, 1],
+          $description:
+            "Exits where the element leaves cleanly — dismissing overlays, scaling down.",
+          key: "{motion.easing.accelerate}",
+        },
+        name: "MotionEasingAccelerate",
+        attributes: {
+          category: "motion",
+          type: "easing",
+          item: "accelerate",
+        },
+        path: ["motion", "easing", "accelerate"],
+      },
+      emphasized: {
+        key: "{motion.easing.emphasized}",
+        $type: "cubicBezier",
+        $value: [0.32, 0.72, 0, 1],
+        $description:
+          "Large physical-scale transitions: full-panel width changes, SideNav width. Smooth glide, no overshoot.",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "cubicBezier",
+          $value: [0.32, 0.72, 0, 1],
+          $description:
+            "Large physical-scale transitions: full-panel width changes, SideNav width. Smooth glide, no overshoot.",
+          key: "{motion.easing.emphasized}",
+        },
+        name: "MotionEasingEmphasized",
+        attributes: {
+          category: "motion",
+          type: "easing",
+          item: "emphasized",
+        },
+        path: ["motion", "easing", "emphasized"],
+      },
+      accordion: {
+        key: "{motion.easing.accordion}",
+        $type: "cubicBezier",
+        $value: [0.33, 1.03, 0.68, 1],
+        $description:
+          "Accordion settle — content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy.",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "cubicBezier",
+          $value: [0.33, 1.03, 0.68, 1],
+          $description:
+            "Accordion settle — content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy.",
+          key: "{motion.easing.accordion}",
+        },
+        name: "MotionEasingAccordion",
+        attributes: {
+          category: "motion",
+          type: "easing",
+          item: "accordion",
+        },
+        path: ["motion", "easing", "accordion"],
+      },
+      linear: {
+        key: "{motion.easing.linear}",
+        $type: "cubicBezier",
+        $value: [0, 0, 1, 1],
+        $description:
+          "Continuous loops only (spinners, shimmer). Never for bounded transitions.",
+        filePath: "tokens/motion-tokens.json",
+        isSource: true,
+        original: {
+          $type: "cubicBezier",
+          $value: [0, 0, 1, 1],
+          $description:
+            "Continuous loops only (spinners, shimmer). Never for bounded transitions.",
+          key: "{motion.easing.linear}",
+        },
+        name: "MotionEasingLinear",
+        attributes: {
+          category: "motion",
+          type: "easing",
+          item: "linear",
+        },
+        path: ["motion", "easing", "linear"],
+      },
+    },
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-tokens",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Pathway Design System tokens — CSS custom properties, JS export, and DTCG JSON",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,13 +23,14 @@
   },
   "scripts": {
     "sync-tokens": "node scripts/sync-tokens.js",
+    "sync-motion-tokens": "node scripts/sync-motion-tokens.js",
     "push-tokens": "node scripts/push-tokens.js",
     "sync-and-push": "node scripts/sync-tokens.js && node scripts/push-tokens.js",
     "audit-tokens": "node scripts/audit-tokens.js",
     "fix-tokens": "node scripts/fix-tokens.js",
     "fix-tokens-preview": "node scripts/fix-tokens.js --dry-run",
-    "build-tokens": "node style-dictionary.config.js",
-    "build-dist": "node style-dictionary.config.js && node scripts/build-dist.js",
+    "build-tokens": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js",
+    "build-dist": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/build-dist.js",
     "storybook": "node style-dictionary.config.js && storybook dev -p 6006",
     "build-storybook": "storybook build"
   },