@helloimjolopez-pathway/pathway-tokens 5.1.11 → 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);
@@ -788,8 +803,8 @@
   --semantic-color-light-mode-stroke-action-secondary-inverse-pressed: var(--primitive-color-cool-neutral-80);
   --semantic-color-light-mode-stroke-action-secondary-inverse-disabled: var(--primitive-color-cool-neutral-40);
   --semantic-color-light-mode-stroke-action-tertiary-base: var(--primitive-color-brand-40);
-  --semantic-color-light-mode-stroke-action-tertiary-hover: var(--primitive-color-brand-30);
-  --semantic-color-light-mode-stroke-action-tertiary-pressed: var(--primitive-color-brand-50);
+  --semantic-color-light-mode-stroke-action-tertiary-hover: var(--primitive-color-brand-50);
+  --semantic-color-light-mode-stroke-action-tertiary-pressed: var(--primitive-color-brand-60);
   --semantic-color-light-mode-stroke-action-tertiary-disabled: var(--primitive-color-brand-10);
   --semantic-color-light-mode-stroke-action-tertiaryinverse-base: var(--primitive-color-brand-10);
   --semantic-color-light-mode-stroke-action-tertiaryinverse-hover: var(--primitive-color-brand-0);
@@ -889,13 +904,14 @@
   --semantic-color-light-mode-stroke-static-accent-jade-contrast: var(--primitive-color-jade-70);
   --semantic-color-light-mode-stroke-static-accent-jade-bold: var(--primitive-color-jade-100);
   --semantic-color-light-mode-stroke-contextual-focusring-base: var(--primitive-color-brand-70);
+  --semantic-color-light-mode-scrim-faint: var(--primitive-color-cool-neutral-220-16);
+  --semantic-color-light-mode-scrim-light: var(--primitive-color-cool-neutral-220-30);
+  --semantic-color-light-mode-scrim-subtle: var(--primitive-color-cool-neutral-220-50);
+  --semantic-color-light-mode-scrim-base: var(--primitive-color-cool-neutral-220-70);
   --semantic-color-light-mode-surface-nav-base: var(--primitive-color-brand-10);
   --semantic-color-light-mode-surface-nav-light: var(--primitive-color-brand-0);
   --semantic-color-light-mode-surface-canvas-base: var(--primitive-color-brand-10);
   --semantic-color-light-mode-surface-canvas-light: var(--primitive-color-brand-0);
-  --semantic-color-light-mode-scrim-light: var(--primitive-color-cool-neutral-220-30);
-  --semantic-color-light-mode-scrim-subtle: var(--primitive-color-cool-neutral-220-50);
-  --semantic-color-light-mode-scrim-base: var(--primitive-color-cool-neutral-220-70);
   --semantic-color-dark-mode-text-action-primary-base: var(--primitive-color-brand-20);
   --semantic-color-dark-mode-text-action-primary-hover: var(--primitive-color-brand-10);
   --semantic-color-dark-mode-text-action-primary-pressed: var(--primitive-color-brand-10);
@@ -1340,13 +1356,14 @@
   --semantic-color-dark-mode-stroke-static-accent-jade-contrast: var(--primitive-color-jade-70);
   --semantic-color-dark-mode-stroke-static-accent-jade-bold: var(--primitive-color-jade-100);
   --semantic-color-dark-mode-stroke-contextual-focusring-base: var(--primitive-color-cool-neutral-0-30);
+  --semantic-color-dark-mode-scrim-faint: var(--primitive-color-cool-neutral-0-16);
+  --semantic-color-dark-mode-scrim-light: var(--primitive-color-cool-neutral-0-30);
+  --semantic-color-dark-mode-scrim-subtle: var(--primitive-color-cool-neutral-0-70);
+  --semantic-color-dark-mode-scrim-base: var(--primitive-color-cool-neutral-0-80);
   --semantic-color-dark-mode-surface-nav-base: var(--primitive-color-cool-neutral-230);
   --semantic-color-dark-mode-surface-nav-light: var(--primitive-color-cool-neutral-180);
   --semantic-color-dark-mode-surface-canvas-base: var(--primitive-color-cool-neutral-220);
   --semantic-color-dark-mode-surface-canvas-light: var(--primitive-color-brand-0);
-  --semantic-color-dark-mode-scrim-light: var(--primitive-color-cool-neutral-220-30);
-  --semantic-color-dark-mode-scrim-subtle: var(--primitive-color-cool-neutral-220-50);
-  --semantic-color-dark-mode-scrim-base: var(--primitive-color-cool-neutral-220-70);
   --semantic-layout-units-borderwidth-xthin: var(--primitive-unit-unit-0-point-5);
   --semantic-layout-units-borderwidth-thin: var(--primitive-unit-unit-0-point-75);
   --semantic-layout-units-borderwidth-base: var(--primitive-unit-unit-1);

package/dist/tokens.js

@@ -18320,12 +18320,12 @@ export default {
             hover: {
               key: "{semantic-color.light-mode.stroke.action.tertiary.hover}",
               $type: "color",
-              $value: "#e0e7f7",
+              $value: "#a0b5e6",
               filePath: "tokens/pathway-design-tokens.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{primitive-color.brand.30}",
+                $value: "{primitive-color.brand.50}",
                 key: "{semantic-color.light-mode.stroke.action.tertiary.hover}",
               },
               name: "SemanticColorLightModeStrokeActionTertiaryHover",
@@ -18348,12 +18348,12 @@ export default {
             pressed: {
               key: "{semantic-color.light-mode.stroke.action.tertiary.pressed}",
               $type: "color",
-              $value: "#a0b5e6",
+              $value: "#86a0dd",
               filePath: "tokens/pathway-design-tokens.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{primitive-color.brand.50}",
+                $value: "{primitive-color.brand.60}",
                 key: "{semantic-color.light-mode.stroke.action.tertiary.pressed}",
               },
               name: "SemanticColorLightModeStrokeActionTertiaryPressed",
@@ -21198,6 +21198,88 @@ export default {
           },
         },
       },
+      scrim: {
+        faint: {
+          key: "{semantic-color.light-mode.scrim.faint}",
+          $type: "color",
+          $value: "#11111129",
+          filePath: "tokens/pathway-design-tokens.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{primitive-color.cool-neutral.220-16}",
+            key: "{semantic-color.light-mode.scrim.faint}",
+          },
+          name: "SemanticColorLightModeScrimFaint",
+          attributes: {
+            category: "semantic-color",
+            type: "light-mode",
+            item: "scrim",
+            subitem: "faint",
+          },
+          path: ["semantic-color", "light-mode", "scrim", "faint"],
+        },
+        light: {
+          key: "{semantic-color.light-mode.scrim.light}",
+          $type: "color",
+          $value: "#1111114d",
+          filePath: "tokens/pathway-design-tokens.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{primitive-color.cool-neutral.220-30}",
+            key: "{semantic-color.light-mode.scrim.light}",
+          },
+          name: "SemanticColorLightModeScrimLight",
+          attributes: {
+            category: "semantic-color",
+            type: "light-mode",
+            item: "scrim",
+            subitem: "light",
+          },
+          path: ["semantic-color", "light-mode", "scrim", "light"],
+        },
+        subtle: {
+          key: "{semantic-color.light-mode.scrim.subtle}",
+          $type: "color",
+          $value: "#11111180",
+          filePath: "tokens/pathway-design-tokens.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{primitive-color.cool-neutral.220-50}",
+            key: "{semantic-color.light-mode.scrim.subtle}",
+          },
+          name: "SemanticColorLightModeScrimSubtle",
+          attributes: {
+            category: "semantic-color",
+            type: "light-mode",
+            item: "scrim",
+            subitem: "subtle",
+          },
+          path: ["semantic-color", "light-mode", "scrim", "subtle"],
+        },
+        base: {
+          key: "{semantic-color.light-mode.scrim.base}",
+          $type: "color",
+          $value: "#111111b3",
+          filePath: "tokens/pathway-design-tokens.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{primitive-color.cool-neutral.220-70}",
+            key: "{semantic-color.light-mode.scrim.base}",
+          },
+          name: "SemanticColorLightModeScrimBase",
+          attributes: {
+            category: "semantic-color",
+            type: "light-mode",
+            item: "scrim",
+            subitem: "base",
+          },
+          path: ["semantic-color", "light-mode", "scrim", "base"],
+        },
+      },
       surface: {
         nav: {
           base: {
@@ -21294,68 +21376,6 @@ export default {
           },
         },
       },
-      scrim: {
-        light: {
-          key: "{semantic-color.light-mode.scrim.light}",
-          $type: "color",
-          $value: "#1111114d",
-          filePath: "tokens/pathway-design-tokens.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{primitive-color.cool-neutral.220-30}",
-            key: "{semantic-color.light-mode.scrim.light}",
-          },
-          name: "SemanticColorLightModeScrimLight",
-          attributes: {
-            category: "semantic-color",
-            type: "light-mode",
-            item: "scrim",
-            subitem: "light",
-          },
-          path: ["semantic-color", "light-mode", "scrim", "light"],
-        },
-        subtle: {
-          key: "{semantic-color.light-mode.scrim.subtle}",
-          $type: "color",
-          $value: "#11111180",
-          filePath: "tokens/pathway-design-tokens.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{primitive-color.cool-neutral.220-50}",
-            key: "{semantic-color.light-mode.scrim.subtle}",
-          },
-          name: "SemanticColorLightModeScrimSubtle",
-          attributes: {
-            category: "semantic-color",
-            type: "light-mode",
-            item: "scrim",
-            subitem: "subtle",
-          },
-          path: ["semantic-color", "light-mode", "scrim", "subtle"],
-        },
-        base: {
-          key: "{semantic-color.light-mode.scrim.base}",
-          $type: "color",
-          $value: "#111111b3",
-          filePath: "tokens/pathway-design-tokens.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{primitive-color.cool-neutral.220-70}",
-            key: "{semantic-color.light-mode.scrim.base}",
-          },
-          name: "SemanticColorLightModeScrimBase",
-          attributes: {
-            category: "semantic-color",
-            type: "light-mode",
-            item: "scrim",
-            subitem: "base",
-          },
-          path: ["semantic-color", "light-mode", "scrim", "base"],
-        },
-      },
     },
     "dark-mode": {
       text: {
@@ -34030,6 +34050,88 @@ export default {
           },
         },
       },
+      scrim: {
+        faint: {
+          key: "{semantic-color.dark-mode.scrim.faint}",
+          $type: "color",
+          $value: "#ffffff29",
+          filePath: "tokens/pathway-design-tokens.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{primitive-color.cool-neutral.0-16}",
+            key: "{semantic-color.dark-mode.scrim.faint}",
+          },
+          name: "SemanticColorDarkModeScrimFaint",
+          attributes: {
+            category: "semantic-color",
+            type: "dark-mode",
+            item: "scrim",
+            subitem: "faint",
+          },
+          path: ["semantic-color", "dark-mode", "scrim", "faint"],
+        },
+        light: {
+          key: "{semantic-color.dark-mode.scrim.light}",
+          $type: "color",
+          $value: "#ffffff4d",
+          filePath: "tokens/pathway-design-tokens.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{primitive-color.cool-neutral.0-30}",
+            key: "{semantic-color.dark-mode.scrim.light}",
+          },
+          name: "SemanticColorDarkModeScrimLight",
+          attributes: {
+            category: "semantic-color",
+            type: "dark-mode",
+            item: "scrim",
+            subitem: "light",
+          },
+          path: ["semantic-color", "dark-mode", "scrim", "light"],
+        },
+        subtle: {
+          key: "{semantic-color.dark-mode.scrim.subtle}",
+          $type: "color",
+          $value: "#ffffffb3",
+          filePath: "tokens/pathway-design-tokens.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{primitive-color.cool-neutral.0-70}",
+            key: "{semantic-color.dark-mode.scrim.subtle}",
+          },
+          name: "SemanticColorDarkModeScrimSubtle",
+          attributes: {
+            category: "semantic-color",
+            type: "dark-mode",
+            item: "scrim",
+            subitem: "subtle",
+          },
+          path: ["semantic-color", "dark-mode", "scrim", "subtle"],
+        },
+        base: {
+          key: "{semantic-color.dark-mode.scrim.base}",
+          $type: "color",
+          $value: "#ffffffcc",
+          filePath: "tokens/pathway-design-tokens.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{primitive-color.cool-neutral.0-80}",
+            key: "{semantic-color.dark-mode.scrim.base}",
+          },
+          name: "SemanticColorDarkModeScrimBase",
+          attributes: {
+            category: "semantic-color",
+            type: "dark-mode",
+            item: "scrim",
+            subitem: "base",
+          },
+          path: ["semantic-color", "dark-mode", "scrim", "base"],
+        },
+      },
       surface: {
         nav: {
           base: {
@@ -34120,68 +34222,6 @@ export default {
           },
         },
       },
-      scrim: {
-        light: {
-          key: "{semantic-color.dark-mode.scrim.light}",
-          $type: "color",
-          $value: "#1111114d",
-          filePath: "tokens/pathway-design-tokens.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{primitive-color.cool-neutral.220-30}",
-            key: "{semantic-color.dark-mode.scrim.light}",
-          },
-          name: "SemanticColorDarkModeScrimLight",
-          attributes: {
-            category: "semantic-color",
-            type: "dark-mode",
-            item: "scrim",
-            subitem: "light",
-          },
-          path: ["semantic-color", "dark-mode", "scrim", "light"],
-        },
-        subtle: {
-          key: "{semantic-color.dark-mode.scrim.subtle}",
-          $type: "color",
-          $value: "#11111180",
-          filePath: "tokens/pathway-design-tokens.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{primitive-color.cool-neutral.220-50}",
-            key: "{semantic-color.dark-mode.scrim.subtle}",
-          },
-          name: "SemanticColorDarkModeScrimSubtle",
-          attributes: {
-            category: "semantic-color",
-            type: "dark-mode",
-            item: "scrim",
-            subitem: "subtle",
-          },
-          path: ["semantic-color", "dark-mode", "scrim", "subtle"],
-        },
-        base: {
-          key: "{semantic-color.dark-mode.scrim.base}",
-          $type: "color",
-          $value: "#111111b3",
-          filePath: "tokens/pathway-design-tokens.json",
-          isSource: true,
-          original: {
-            $type: "color",
-            $value: "{primitive-color.cool-neutral.220-70}",
-            key: "{semantic-color.dark-mode.scrim.base}",
-          },
-          name: "SemanticColorDarkModeScrimBase",
-          attributes: {
-            category: "semantic-color",
-            type: "dark-mode",
-            item: "scrim",
-            subitem: "base",
-          },
-          path: ["semantic-color", "dark-mode", "scrim", "base"],
-        },
-      },
     },
   },
   "semantic-layout-units": {
@@ -69070,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/dist/tokens.json

@@ -3402,11 +3402,11 @@
             },
             "hover": {
               "$type": "color",
-              "$value": "{primitive-color.brand.30}"
+              "$value": "{primitive-color.brand.50}"
             },
             "pressed": {
               "$type": "color",
-              "$value": "{primitive-color.brand.50}"
+              "$value": "{primitive-color.brand.60}"
             },
             "disabled": {
               "$type": "color",
@@ -3857,6 +3857,24 @@
           }
         }
       },
+      "scrim": {
+        "faint": {
+          "$type": "color",
+          "$value": "{primitive-color.cool-neutral.220-16}"
+        },
+        "light": {
+          "$type": "color",
+          "$value": "{primitive-color.cool-neutral.220-30}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{primitive-color.cool-neutral.220-50}"
+        },
+        "base": {
+          "$type": "color",
+          "$value": "{primitive-color.cool-neutral.220-70}"
+        }
+      },
       "surface": {
         "nav": {
           "base": {
@@ -3878,20 +3896,6 @@
             "$value": "{primitive-color.brand.0}"
           }
         }
-      },
-      "scrim": {
-        "light": {
-          "$type": "color",
-          "$value": "{primitive-color.cool-neutral.220-30}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{primitive-color.cool-neutral.220-50}"
-        },
-        "base": {
-          "$type": "color",
-          "$value": "{primitive-color.cool-neutral.220-70}"
-        }
       }
     },
     "dark-mode": {
@@ -5911,6 +5915,24 @@
           }
         }
       },
+      "scrim": {
+        "faint": {
+          "$type": "color",
+          "$value": "{primitive-color.cool-neutral.0-16}"
+        },
+        "light": {
+          "$type": "color",
+          "$value": "{primitive-color.cool-neutral.0-30}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{primitive-color.cool-neutral.0-70}"
+        },
+        "base": {
+          "$type": "color",
+          "$value": "{primitive-color.cool-neutral.0-80}"
+        }
+      },
       "surface": {
         "nav": {
           "base": {
@@ -5932,20 +5954,6 @@
             "$value": "{primitive-color.brand.0}"
           }
         }
-      },
-      "scrim": {
-        "light": {
-          "$type": "color",
-          "$value": "{primitive-color.cool-neutral.220-30}"
-        },
-        "subtle": {
-          "$type": "color",
-          "$value": "{primitive-color.cool-neutral.220-50}"
-        },
-        "base": {
-          "$type": "color",
-          "$value": "{primitive-color.cool-neutral.220-70}"
-        }
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-tokens",
-  "version": "5.1.11",
+  "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"
   },