@motion-proto/live-tokens 0.31.0 → 0.33.0

package/dist-plugin/{chunk-Y3K6NR6V.js → chunk-MJO4T3CM.js}

@@ -182,6 +182,82 @@ var tokensCssMigration_2026_06_04_removeDeadSizeIconScale = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-06-04-easing-color-and-typescale-additions.ts
+var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
+  id: "2026-06-04-easing-color-and-typescale-additions",
+  description: "Add the full --ease-* scale, --color-white/black, and --font-size-7xl",
+  apply(css) {
+    let out = css;
+    out = ensureScale(out, {
+      anchorPrefixes: ["--ease-", "--transition-", "--duration-"],
+      entries: [
+        { name: "--ease-linear", value: "linear" },
+        { name: "--ease-in-sine", value: "cubic-bezier(0.12, 0, 0.39, 0)" },
+        { name: "--ease-out-sine", value: "cubic-bezier(0.61, 1, 0.88, 1)" },
+        { name: "--ease-in-out-sine", value: "cubic-bezier(0.37, 0, 0.63, 1)" },
+        { name: "--ease-in-quad", value: "cubic-bezier(0.11, 0, 0.5, 0)" },
+        { name: "--ease-out-quad", value: "cubic-bezier(0.5, 1, 0.89, 1)" },
+        { name: "--ease-in-out-quad", value: "cubic-bezier(0.45, 0, 0.55, 1)" },
+        { name: "--ease-in-cubic", value: "cubic-bezier(0.32, 0, 0.67, 0)" },
+        { name: "--ease-out-cubic", value: "cubic-bezier(0.33, 1, 0.68, 1)" },
+        { name: "--ease-in-out-cubic", value: "cubic-bezier(0.65, 0, 0.35, 1)" },
+        { name: "--ease-in-quart", value: "cubic-bezier(0.5, 0, 0.75, 0)" },
+        { name: "--ease-out-quart", value: "cubic-bezier(0.25, 1, 0.5, 1)" },
+        { name: "--ease-in-out-quart", value: "cubic-bezier(0.76, 0, 0.24, 1)" },
+        { name: "--ease-in-quint", value: "cubic-bezier(0.64, 0, 0.78, 0)" },
+        { name: "--ease-out-quint", value: "cubic-bezier(0.22, 1, 0.36, 1)" },
+        { name: "--ease-in-out-quint", value: "cubic-bezier(0.83, 0, 0.17, 1)" },
+        { name: "--ease-in-expo", value: "cubic-bezier(0.7, 0, 0.84, 0)" },
+        { name: "--ease-out-expo", value: "cubic-bezier(0.16, 1, 0.3, 1)" },
+        { name: "--ease-in-out-expo", value: "cubic-bezier(0.87, 0, 0.13, 1)" },
+        { name: "--ease-in-circ", value: "cubic-bezier(0.55, 0, 1, 0.45)" },
+        { name: "--ease-out-circ", value: "cubic-bezier(0, 0.55, 0.45, 1)" },
+        { name: "--ease-in-out-circ", value: "cubic-bezier(0.85, 0, 0.15, 1)" },
+        { name: "--ease-in-back", value: "cubic-bezier(0.36, 0, 0.66, -0.56)" },
+        { name: "--ease-out-back", value: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+        { name: "--ease-in-out-back", value: "cubic-bezier(0.68, -0.6, 0.32, 1.6)" },
+        {
+          name: "--ease-in-elastic",
+          value: "linear(0, 0.0007 8.1%, 0.0019 12.1%, 0.0027 13.7%, 0.0046 15.7%, -0.0046 18.7%, -0.0202 22.1%, -0.0234 23.6%, -0.0224 24.9%, -0.0156 26.7%, 0.0091 29.4%, 0.0666 33.4%, 0.0848 34.9%, 0.0916 36.4%, 0.0837 38.1%, 0.0581 40.1%, -0.0204 43.7%, -0.221 51.3%, -0.2825 53.6%, -0.317 55.4%, -0.3253 57.1%, -0.3071 58.8%, -0.2554 60.9%, -0.1295 63.7%, 0.4515 73.1%, 0.7257 78.4%, 0.834 81.2%, 0.9221 84.1%, 0.9817 87.1%, 1.0144 90.4%, 1.026 94.6%, 1)"
+        },
+        {
+          name: "--ease-out-elastic",
+          value: "linear(0, 0.974 4.6%, 1.026 5.4%, 1.018 6.9%, 0.952 12.9%, 0.876 15.9%, 0.751 18.8%, 0.557 22.4%, -0.451 36.3%, -0.722 42.9%, -0.832 46.6%, -0.918 51.3%, -0.916 54.8%, -0.832 59.4%, -0.665 64.6%, 0.221 78%, 0.317 81.2%, 0.317 84.4%, 0.281 87.6%, 0.232 91.1%, 0.058 100%)"
+        },
+        {
+          name: "--ease-in-out-elastic",
+          value: "linear(0, 0.0001 7.7%, -0.0048 12.7%, -0.0064 14.6%, -0.0064 16.5%, -0.0026 18.5%, 0.0179 21.4%, 0.0617 24.1%, 0.0617 26.5%, 0.0309 29%, -0.0589 32.7%, -0.3 38.1%, -0.4307 40.6%, -0.4844 43%, -0.4844 48%, -0.4307 50.4%, -0.3 52.9%, 0.3 60.5%, 0.4307 63%, 0.4844 65.4%, 0.4844 70.4%, 0.4307 72.8%, 0.3 75.3%, 0.0589 80.7%, -0.0309 84.4%, -0.0617 86.9%, -0.0617 89.3%, -0.0179 92%, 0.0026 94.9%, 0.0064 96.8%, 0.0064 98.7%, 0.0048 100%, 1)"
+        },
+        {
+          name: "--ease-in-bounce",
+          value: "linear(0, 0.005, 0.018, 0.039, 0.069, 0.108, 0.156, 0.213, 0.281, 0.36, 0.451, 0.555, 0.674, 0.81, 0.967, 0.881, 0.838, 0.838, 0.881, 0.97, 0.952, 0.95, 0.969, 0.999, 0.984, 0.982, 0.989, 1)"
+        },
+        {
+          name: "--ease-out-bounce",
+          value: "linear(0, 0.011, 0.031, 0.018, 0.05, 0.151, 0.301, 0.5, 0.747, 0.945, 0.997, 1, 0.969, 0.954, 0.969, 0.952, 0.952, 0.969, 1, 0.984, 0.982, 0.984, 0.997, 0.984, 0.989, 1)"
+        },
+        {
+          name: "--ease-in-out-bounce",
+          value: "linear(0, 0.003, 0.009, 0.019, 0.034, 0.054, 0.078, 0.107, 0.141, 0.18, 0.226, 0.278, 0.337, 0.405, 0.483, 0.471, 0.42, 0.419, 0.46, 0.494, 0.5, 0.506, 0.54, 0.581, 0.58, 0.529, 0.517, 0.595, 0.663, 0.722, 0.774, 0.819, 0.859, 0.893, 0.922, 0.946, 0.966, 0.981, 0.991, 0.997, 1)"
+        }
+      ]
+    });
+    out = ensureScale(out, {
+      sectionComment: "Invariants \u2014 never themed, not part of any ramp.",
+      anchorPrefixes: ["--color-"],
+      entries: [
+        { name: "--color-white", value: "#ffffff" },
+        { name: "--color-black", value: "#000000" }
+      ]
+    });
+    out = ensureScale(out, {
+      anchorPrefixes: ["--font-size-", "--font-"],
+      entries: [{ name: "--font-size-7xl", value: "4.5rem" }]
+    });
+    return out;
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 import fs from "fs";
 import path from "path";
@@ -233,7 +309,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
   tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
   tokensCssMigration_2026_06_03_transformScaleAdditions,
-  tokensCssMigration_2026_06_04_removeDeadSizeIconScale
+  tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
+  tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions
 ];
 function runTokensCssMigrations(css) {
   let out = css;

package/dist-plugin/index.cjs

@@ -806,12 +806,89 @@ var tokensCssMigration_2026_06_04_removeDeadSizeIconScale = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-06-04-easing-color-and-typescale-additions.ts
+var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
+  id: "2026-06-04-easing-color-and-typescale-additions",
+  description: "Add the full --ease-* scale, --color-white/black, and --font-size-7xl",
+  apply(css) {
+    let out = css;
+    out = ensureScale(out, {
+      anchorPrefixes: ["--ease-", "--transition-", "--duration-"],
+      entries: [
+        { name: "--ease-linear", value: "linear" },
+        { name: "--ease-in-sine", value: "cubic-bezier(0.12, 0, 0.39, 0)" },
+        { name: "--ease-out-sine", value: "cubic-bezier(0.61, 1, 0.88, 1)" },
+        { name: "--ease-in-out-sine", value: "cubic-bezier(0.37, 0, 0.63, 1)" },
+        { name: "--ease-in-quad", value: "cubic-bezier(0.11, 0, 0.5, 0)" },
+        { name: "--ease-out-quad", value: "cubic-bezier(0.5, 1, 0.89, 1)" },
+        { name: "--ease-in-out-quad", value: "cubic-bezier(0.45, 0, 0.55, 1)" },
+        { name: "--ease-in-cubic", value: "cubic-bezier(0.32, 0, 0.67, 0)" },
+        { name: "--ease-out-cubic", value: "cubic-bezier(0.33, 1, 0.68, 1)" },
+        { name: "--ease-in-out-cubic", value: "cubic-bezier(0.65, 0, 0.35, 1)" },
+        { name: "--ease-in-quart", value: "cubic-bezier(0.5, 0, 0.75, 0)" },
+        { name: "--ease-out-quart", value: "cubic-bezier(0.25, 1, 0.5, 1)" },
+        { name: "--ease-in-out-quart", value: "cubic-bezier(0.76, 0, 0.24, 1)" },
+        { name: "--ease-in-quint", value: "cubic-bezier(0.64, 0, 0.78, 0)" },
+        { name: "--ease-out-quint", value: "cubic-bezier(0.22, 1, 0.36, 1)" },
+        { name: "--ease-in-out-quint", value: "cubic-bezier(0.83, 0, 0.17, 1)" },
+        { name: "--ease-in-expo", value: "cubic-bezier(0.7, 0, 0.84, 0)" },
+        { name: "--ease-out-expo", value: "cubic-bezier(0.16, 1, 0.3, 1)" },
+        { name: "--ease-in-out-expo", value: "cubic-bezier(0.87, 0, 0.13, 1)" },
+        { name: "--ease-in-circ", value: "cubic-bezier(0.55, 0, 1, 0.45)" },
+        { name: "--ease-out-circ", value: "cubic-bezier(0, 0.55, 0.45, 1)" },
+        { name: "--ease-in-out-circ", value: "cubic-bezier(0.85, 0, 0.15, 1)" },
+        { name: "--ease-in-back", value: "cubic-bezier(0.36, 0, 0.66, -0.56)" },
+        { name: "--ease-out-back", value: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+        { name: "--ease-in-out-back", value: "cubic-bezier(0.68, -0.6, 0.32, 1.6)" },
+        {
+          name: "--ease-in-elastic",
+          value: "linear(0, 0.0007 8.1%, 0.0019 12.1%, 0.0027 13.7%, 0.0046 15.7%, -0.0046 18.7%, -0.0202 22.1%, -0.0234 23.6%, -0.0224 24.9%, -0.0156 26.7%, 0.0091 29.4%, 0.0666 33.4%, 0.0848 34.9%, 0.0916 36.4%, 0.0837 38.1%, 0.0581 40.1%, -0.0204 43.7%, -0.221 51.3%, -0.2825 53.6%, -0.317 55.4%, -0.3253 57.1%, -0.3071 58.8%, -0.2554 60.9%, -0.1295 63.7%, 0.4515 73.1%, 0.7257 78.4%, 0.834 81.2%, 0.9221 84.1%, 0.9817 87.1%, 1.0144 90.4%, 1.026 94.6%, 1)"
+        },
+        {
+          name: "--ease-out-elastic",
+          value: "linear(0, 0.974 4.6%, 1.026 5.4%, 1.018 6.9%, 0.952 12.9%, 0.876 15.9%, 0.751 18.8%, 0.557 22.4%, -0.451 36.3%, -0.722 42.9%, -0.832 46.6%, -0.918 51.3%, -0.916 54.8%, -0.832 59.4%, -0.665 64.6%, 0.221 78%, 0.317 81.2%, 0.317 84.4%, 0.281 87.6%, 0.232 91.1%, 0.058 100%)"
+        },
+        {
+          name: "--ease-in-out-elastic",
+          value: "linear(0, 0.0001 7.7%, -0.0048 12.7%, -0.0064 14.6%, -0.0064 16.5%, -0.0026 18.5%, 0.0179 21.4%, 0.0617 24.1%, 0.0617 26.5%, 0.0309 29%, -0.0589 32.7%, -0.3 38.1%, -0.4307 40.6%, -0.4844 43%, -0.4844 48%, -0.4307 50.4%, -0.3 52.9%, 0.3 60.5%, 0.4307 63%, 0.4844 65.4%, 0.4844 70.4%, 0.4307 72.8%, 0.3 75.3%, 0.0589 80.7%, -0.0309 84.4%, -0.0617 86.9%, -0.0617 89.3%, -0.0179 92%, 0.0026 94.9%, 0.0064 96.8%, 0.0064 98.7%, 0.0048 100%, 1)"
+        },
+        {
+          name: "--ease-in-bounce",
+          value: "linear(0, 0.005, 0.018, 0.039, 0.069, 0.108, 0.156, 0.213, 0.281, 0.36, 0.451, 0.555, 0.674, 0.81, 0.967, 0.881, 0.838, 0.838, 0.881, 0.97, 0.952, 0.95, 0.969, 0.999, 0.984, 0.982, 0.989, 1)"
+        },
+        {
+          name: "--ease-out-bounce",
+          value: "linear(0, 0.011, 0.031, 0.018, 0.05, 0.151, 0.301, 0.5, 0.747, 0.945, 0.997, 1, 0.969, 0.954, 0.969, 0.952, 0.952, 0.969, 1, 0.984, 0.982, 0.984, 0.997, 0.984, 0.989, 1)"
+        },
+        {
+          name: "--ease-in-out-bounce",
+          value: "linear(0, 0.003, 0.009, 0.019, 0.034, 0.054, 0.078, 0.107, 0.141, 0.18, 0.226, 0.278, 0.337, 0.405, 0.483, 0.471, 0.42, 0.419, 0.46, 0.494, 0.5, 0.506, 0.54, 0.581, 0.58, 0.529, 0.517, 0.595, 0.663, 0.722, 0.774, 0.819, 0.859, 0.893, 0.922, 0.946, 0.966, 0.981, 0.991, 0.997, 1)"
+        }
+      ]
+    });
+    out = ensureScale(out, {
+      sectionComment: "Invariants \u2014 never themed, not part of any ramp.",
+      anchorPrefixes: ["--color-"],
+      entries: [
+        { name: "--color-white", value: "#ffffff" },
+        { name: "--color-black", value: "#000000" }
+      ]
+    });
+    out = ensureScale(out, {
+      anchorPrefixes: ["--font-size-", "--font-"],
+      entries: [{ name: "--font-size-7xl", value: "4.5rem" }]
+    });
+    return out;
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
   tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
   tokensCssMigration_2026_06_03_transformScaleAdditions,
-  tokensCssMigration_2026_06_04_removeDeadSizeIconScale
+  tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
+  tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions
 ];
 function runTokensCssMigrations(css) {
   let out = css;

package/dist-plugin/index.js

@@ -4,7 +4,7 @@ import {
   resolveDataDirs,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-Y3K6NR6V.js";
+} from "./chunk-MJO4T3CM.js";
 
 // vite-plugin/themeFileApi.ts
 import fs2 from "fs";

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -227,6 +227,82 @@ var tokensCssMigration_2026_06_04_removeDeadSizeIconScale = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-06-04-easing-color-and-typescale-additions.ts
+var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
+  id: "2026-06-04-easing-color-and-typescale-additions",
+  description: "Add the full --ease-* scale, --color-white/black, and --font-size-7xl",
+  apply(css) {
+    let out = css;
+    out = ensureScale(out, {
+      anchorPrefixes: ["--ease-", "--transition-", "--duration-"],
+      entries: [
+        { name: "--ease-linear", value: "linear" },
+        { name: "--ease-in-sine", value: "cubic-bezier(0.12, 0, 0.39, 0)" },
+        { name: "--ease-out-sine", value: "cubic-bezier(0.61, 1, 0.88, 1)" },
+        { name: "--ease-in-out-sine", value: "cubic-bezier(0.37, 0, 0.63, 1)" },
+        { name: "--ease-in-quad", value: "cubic-bezier(0.11, 0, 0.5, 0)" },
+        { name: "--ease-out-quad", value: "cubic-bezier(0.5, 1, 0.89, 1)" },
+        { name: "--ease-in-out-quad", value: "cubic-bezier(0.45, 0, 0.55, 1)" },
+        { name: "--ease-in-cubic", value: "cubic-bezier(0.32, 0, 0.67, 0)" },
+        { name: "--ease-out-cubic", value: "cubic-bezier(0.33, 1, 0.68, 1)" },
+        { name: "--ease-in-out-cubic", value: "cubic-bezier(0.65, 0, 0.35, 1)" },
+        { name: "--ease-in-quart", value: "cubic-bezier(0.5, 0, 0.75, 0)" },
+        { name: "--ease-out-quart", value: "cubic-bezier(0.25, 1, 0.5, 1)" },
+        { name: "--ease-in-out-quart", value: "cubic-bezier(0.76, 0, 0.24, 1)" },
+        { name: "--ease-in-quint", value: "cubic-bezier(0.64, 0, 0.78, 0)" },
+        { name: "--ease-out-quint", value: "cubic-bezier(0.22, 1, 0.36, 1)" },
+        { name: "--ease-in-out-quint", value: "cubic-bezier(0.83, 0, 0.17, 1)" },
+        { name: "--ease-in-expo", value: "cubic-bezier(0.7, 0, 0.84, 0)" },
+        { name: "--ease-out-expo", value: "cubic-bezier(0.16, 1, 0.3, 1)" },
+        { name: "--ease-in-out-expo", value: "cubic-bezier(0.87, 0, 0.13, 1)" },
+        { name: "--ease-in-circ", value: "cubic-bezier(0.55, 0, 1, 0.45)" },
+        { name: "--ease-out-circ", value: "cubic-bezier(0, 0.55, 0.45, 1)" },
+        { name: "--ease-in-out-circ", value: "cubic-bezier(0.85, 0, 0.15, 1)" },
+        { name: "--ease-in-back", value: "cubic-bezier(0.36, 0, 0.66, -0.56)" },
+        { name: "--ease-out-back", value: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+        { name: "--ease-in-out-back", value: "cubic-bezier(0.68, -0.6, 0.32, 1.6)" },
+        {
+          name: "--ease-in-elastic",
+          value: "linear(0, 0.0007 8.1%, 0.0019 12.1%, 0.0027 13.7%, 0.0046 15.7%, -0.0046 18.7%, -0.0202 22.1%, -0.0234 23.6%, -0.0224 24.9%, -0.0156 26.7%, 0.0091 29.4%, 0.0666 33.4%, 0.0848 34.9%, 0.0916 36.4%, 0.0837 38.1%, 0.0581 40.1%, -0.0204 43.7%, -0.221 51.3%, -0.2825 53.6%, -0.317 55.4%, -0.3253 57.1%, -0.3071 58.8%, -0.2554 60.9%, -0.1295 63.7%, 0.4515 73.1%, 0.7257 78.4%, 0.834 81.2%, 0.9221 84.1%, 0.9817 87.1%, 1.0144 90.4%, 1.026 94.6%, 1)"
+        },
+        {
+          name: "--ease-out-elastic",
+          value: "linear(0, 0.974 4.6%, 1.026 5.4%, 1.018 6.9%, 0.952 12.9%, 0.876 15.9%, 0.751 18.8%, 0.557 22.4%, -0.451 36.3%, -0.722 42.9%, -0.832 46.6%, -0.918 51.3%, -0.916 54.8%, -0.832 59.4%, -0.665 64.6%, 0.221 78%, 0.317 81.2%, 0.317 84.4%, 0.281 87.6%, 0.232 91.1%, 0.058 100%)"
+        },
+        {
+          name: "--ease-in-out-elastic",
+          value: "linear(0, 0.0001 7.7%, -0.0048 12.7%, -0.0064 14.6%, -0.0064 16.5%, -0.0026 18.5%, 0.0179 21.4%, 0.0617 24.1%, 0.0617 26.5%, 0.0309 29%, -0.0589 32.7%, -0.3 38.1%, -0.4307 40.6%, -0.4844 43%, -0.4844 48%, -0.4307 50.4%, -0.3 52.9%, 0.3 60.5%, 0.4307 63%, 0.4844 65.4%, 0.4844 70.4%, 0.4307 72.8%, 0.3 75.3%, 0.0589 80.7%, -0.0309 84.4%, -0.0617 86.9%, -0.0617 89.3%, -0.0179 92%, 0.0026 94.9%, 0.0064 96.8%, 0.0064 98.7%, 0.0048 100%, 1)"
+        },
+        {
+          name: "--ease-in-bounce",
+          value: "linear(0, 0.005, 0.018, 0.039, 0.069, 0.108, 0.156, 0.213, 0.281, 0.36, 0.451, 0.555, 0.674, 0.81, 0.967, 0.881, 0.838, 0.838, 0.881, 0.97, 0.952, 0.95, 0.969, 0.999, 0.984, 0.982, 0.989, 1)"
+        },
+        {
+          name: "--ease-out-bounce",
+          value: "linear(0, 0.011, 0.031, 0.018, 0.05, 0.151, 0.301, 0.5, 0.747, 0.945, 0.997, 1, 0.969, 0.954, 0.969, 0.952, 0.952, 0.969, 1, 0.984, 0.982, 0.984, 0.997, 0.984, 0.989, 1)"
+        },
+        {
+          name: "--ease-in-out-bounce",
+          value: "linear(0, 0.003, 0.009, 0.019, 0.034, 0.054, 0.078, 0.107, 0.141, 0.18, 0.226, 0.278, 0.337, 0.405, 0.483, 0.471, 0.42, 0.419, 0.46, 0.494, 0.5, 0.506, 0.54, 0.581, 0.58, 0.529, 0.517, 0.595, 0.663, 0.722, 0.774, 0.819, 0.859, 0.893, 0.922, 0.946, 0.966, 0.981, 0.991, 0.997, 1)"
+        }
+      ]
+    });
+    out = ensureScale(out, {
+      sectionComment: "Invariants \u2014 never themed, not part of any ramp.",
+      anchorPrefixes: ["--color-"],
+      entries: [
+        { name: "--color-white", value: "#ffffff" },
+        { name: "--color-black", value: "#000000" }
+      ]
+    });
+    out = ensureScale(out, {
+      anchorPrefixes: ["--font-size-", "--font-"],
+      entries: [{ name: "--font-size-7xl", value: "4.5rem" }]
+    });
+    return out;
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -265,7 +341,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
   tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
   tokensCssMigration_2026_06_03_transformScaleAdditions,
-  tokensCssMigration_2026_06_04_removeDeadSizeIconScale
+  tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
+  tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions
 ];
 function runTokensCssMigrations(css) {
   let out = css;

package/dist-plugin/tokensCssMigrations/index.js

@@ -9,7 +9,7 @@ import {
   renameToken,
   runTokensCssMigrations,
   validateTokensCss
-} from "../chunk-Y3K6NR6V.js";
+} from "../chunk-MJO4T3CM.js";
 export {
   TOKENS_CSS_MIGRATIONS,
   collectDefinedTokens,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/component-editor/ImageEditor.svelte

@@ -16,7 +16,9 @@
 
   export const allTokens: Token[] = Object.values(states).flat();
 
-  // Global "Use zoom" default. `none` = off; `scale(...)` = every image zooms on hover.
+  // Global zoom defaults. `none` = off; `scale(...)` = on. `--image-zoom-hover` scales the
+  // content within the masked frame (overflow scaling); `--image-grow-hover` scales the whole
+  // frame so it grows. At most one is ever `scale(...)`.
   const ZOOM_ON = 'scale(var(--image-zoom-scale))';
   export const intrinsics: IntrinsicSpec[] = [
     {
@@ -26,6 +28,13 @@
       values: ['none', ZOOM_ON],
       default: { default: 'none' },
     },
+    {
+      key: 'grow',
+      variants: ['default'],
+      variable: () => '--image-grow-hover',
+      values: ['none', ZOOM_ON],
+      default: { default: 'none' },
+    },
   ];
 </script>
 
@@ -39,15 +48,22 @@
   let aliases = $derived(
     ($editorState.components[component]?.aliases ?? {}) as Record<string, import('../core/store/editorTypes').CssVarRef>,
   );
-  let useZoom = $derived.by(() => {
-    const ref = aliases['--image-zoom-hover'];
-    const raw = ref?.kind === 'literal' ? ref.value : intrinsics[0].default.default;
-    return raw === ZOOM_ON;
-  });
+  function aliasValue(variable: string, fallback: string): string {
+    const ref = aliases[variable];
+    return ref?.kind === 'literal' ? ref.value : fallback;
+  }
+  let contentOn = $derived(aliasValue('--image-zoom-hover', intrinsics[0].default.default) === ZOOM_ON);
+  let frameOn = $derived(aliasValue('--image-grow-hover', intrinsics[1].default.default) === ZOOM_ON);
+  let useZoom = $derived(contentOn || frameOn);
+  // Overflow scaling = mask the zoom to the frame (the content path). Off = grow the frame.
+  let overflowScaling = $derived(!frameOn);
 
-  function setUseZoom(checked: boolean) {
-    setComponentAlias(component, '--image-zoom-hover', { kind: 'literal', value: checked ? ZOOM_ON : 'none' });
+  function applyZoom(zoomOn: boolean, masked: boolean) {
+    setComponentAlias(component, '--image-zoom-hover', { kind: 'literal', value: zoomOn && masked ? ZOOM_ON : 'none' });
+    setComponentAlias(component, '--image-grow-hover', { kind: 'literal', value: zoomOn && !masked ? ZOOM_ON : 'none' });
   }
+  const setUseZoom = (checked: boolean) => applyZoom(checked, overflowScaling);
+  const setOverflowScaling = (checked: boolean) => applyZoom(useZoom, checked);
 </script>
 
 <ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow." tokens={allTokens}>
@@ -57,11 +73,17 @@
         <input type="checkbox" checked={useZoom} onchange={(e) => setUseZoom(e.currentTarget.checked)} />
         <span>Use zoom on hover</span>
       </label>
+      <label class="zoom-enable" class:disabled={!useZoom}>
+        <input type="checkbox" checked={overflowScaling} disabled={!useZoom} onchange={(e) => setOverflowScaling(e.currentTarget.checked)} />
+        <span>Overflow scaling (mask zoom to frame)</span>
+      </label>
     {/snippet}
-    <Image src={demoImageUrl} alt="Demo" variant="banner" zoom={useZoom ? undefined : false} />
+    <Image src={demoImageUrl} alt="Demo" variant="banner" zoom={useZoom ? undefined : false} {overflowScaling} />
     <p class="zoom-help">
-      Checked: every image zooms its contents on hover. Unchecked: zoom is off by default and a page turns it
-      on per image with the <code>zoom</code> prop.
+      Use zoom on hover: every image scales on hover (a page can still force it per image with the
+      <code>zoom</code> prop). Overflow scaling on (default): the content zooms inside the fixed frame,
+      masked by overflow. Off: the whole framed image grows past its box. Override per image with
+      <code>overflowScaling</code>.
     </p>
   </VariantGroup>
 </ComponentEditorBase>
@@ -75,6 +97,10 @@
     color: var(--ui-text-secondary);
     cursor: pointer;
   }
+  .zoom-enable.disabled {
+    opacity: var(--ui-opacity-disabled);
+    cursor: not-allowed;
+  }
   .zoom-help {
     margin: var(--ui-space-8) 0 0;
     font-size: var(--ui-font-size-sm);

package/src/editor/ui/VariablesTab.svelte

@@ -11,7 +11,7 @@
   import {
     SPACING_VARS, BORDER_WIDTH_VARS, RADIUS_VARS, FONT_SIZE_VARS,
     ICON_SIZE_VARS, FONT_WEIGHT_VARS, LINE_HEIGHT_VARS, LETTER_SPACING_VARS,
-    DURATION_TOKENS, Z_INDEX_TOKENS, OPACITY_TOKENS,
+    SCALE_VARS, DURATION_TOKENS, Z_INDEX_TOKENS, OPACITY_TOKENS,
   } from './sections/tokenScales';
 
   /** Visual flash for the copy-to-clipboard chip, kept short enough to
@@ -154,6 +154,11 @@
         <h3 class="group-title">Opacity</h3>
         <TokenScaleTable kind="line-height" tokens={OPACITY_TOKENS} {copiedVar} oncopy={copyVariable} />
       </div>
+
+      <div class="utility-group">
+        <h3 class="group-title">Scale</h3>
+        <TokenScaleTable kind="line-height" vars={SCALE_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
+      </div>
     </div>
   </section>
 </div>

package/src/editor/ui/sections/tokenScales.ts

@@ -51,6 +51,10 @@ export const LETTER_SPACING_VARS = [
   '--letter-spacing-wide', '--letter-spacing-wider',
 ] as const;
 
+export const SCALE_VARS = [
+  '--scale-sm', '--scale-md', '--scale-lg', '--scale-xl', '--scale-2xl',
+] as const;
+
 export interface TokenItem {
   variable: string;
   value: string;

package/src/system/components/Image.svelte

@@ -7,6 +7,11 @@
     /** Zoom the contents on hover (frame stays fixed). `undefined` inherits the editor's
         global "Use zoom" default; `true`/`false` force this instance on/off. */
     zoom?: boolean | undefined;
+    /** When zoom is active, decide what the hover scale grows. `true` (default) scales the
+        content inside the fixed frame, masked by overflow. `false` scales the whole framed
+        image so it grows past its layout box. `undefined` inherits the global default.
+        Set on its own (without `zoom`) it forces zoom on in the chosen mode. */
+    overflowScaling?: boolean | undefined;
     srcset?: string | undefined;
     sizes?: string | undefined;
     /** Content images default to lazy; pass `'eager'` for above-the-fold heroes. */
@@ -20,6 +25,7 @@
     variant = 'default',
     height = undefined,
     zoom = undefined,
+    overflowScaling = undefined,
     srcset = undefined,
     sizes = undefined,
     loading = 'lazy',
@@ -35,13 +41,29 @@
 
   let resolvedHeight = $derived(height ?? variantHeights[variant]);
 
-  // Per-instance override of the global zoom intrinsic; undefined leaves :root in charge.
-  let zoomOverride = $derived(
-    zoom === undefined ? undefined : zoom ? 'scale(var(--image-zoom-scale))' : 'none',
+  // Per-instance override of the global zoom intrinsics. `undefined` for a variable leaves
+  // :root in charge. Exactly one of the two transforms is ever the scale (the other `none`),
+  // so contained and grow can't stack into a double zoom.
+  const ZOOM = 'scale(var(--image-zoom-scale))';
+  let zoomOff = $derived(zoom === false);
+  // Setting either prop forces zoom on; otherwise both inherit the global default.
+  let zoomForced = $derived(zoom === true || overflowScaling !== undefined);
+  let contained = $derived(overflowScaling !== false);
+
+  let contentHover = $derived(
+    zoomOff ? 'none' : zoomForced ? (contained ? ZOOM : 'none') : undefined,
+  );
+  let frameHover = $derived(
+    zoomOff ? 'none' : zoomForced ? (contained ? 'none' : ZOOM) : undefined,
   );
 </script>
 
-<div class="image" style:height={resolvedHeight} style:--image-zoom-hover={zoomOverride}>
+<div
+  class="image"
+  style:height={resolvedHeight}
+  style:--image-zoom-hover={contentHover}
+  style:--image-grow-hover={frameHover}
+>
   <img {src} {alt} {srcset} {sizes} {loading} {decoding} />
 </div>
 
@@ -52,8 +74,11 @@
     --image-default-border-width: var(--border-width-1);
     --image-default-shadow: var(--shadow-md);
     --image-zoom-scale: var(--scale-sm);
-    /* Global "Use zoom" intrinsic: `none` (off) or `scale(var(--image-zoom-scale))` (on). */
+    /* Hover-scale targets. Contained mode (`overflowScaling`) scales the content within the
+       masked frame; grow mode scales the whole frame so it grows past its box. Each is `none`
+       (off) or `scale(var(--image-zoom-scale))` (on); only one is ever on at a time. */
     --image-zoom-hover: none;
+    --image-grow-hover: none;
   }
 
   .image {
@@ -61,6 +86,8 @@
     overflow: hidden;
     border: var(--image-default-border-width) solid var(--image-default-border);
     box-shadow: var(--image-default-shadow);
+    transform-origin: center;
+    transition: transform var(--duration-300) var(--ease-out-cubic);
   }
 
   img {
@@ -73,6 +100,10 @@
     transition: transform var(--duration-300) var(--ease-out-cubic);
   }
 
+  .image:hover {
+    transform: var(--image-grow-hover);
+  }
+
   .image:hover img {
     transform: var(--image-zoom-hover);
   }

package/src/system/components/ImageLightbox.svelte

@@ -26,6 +26,14 @@
     fit?: 'contain' | 'cover';
     /** When true, shows a bottom toolbar (zoom in/out + percent) and a top-right close button, and enables wheel/drag zoom inside the open modal. When false, click anywhere closes. */
     extended?: boolean;
+    /** Maximum zoom, as a multiple of the image's natural resolution: `1` = 100%
+        of the source's real pixels (1 source px = 1 screen px), `2` = 200%. The
+        modal always opens fitted to the viewport; this only caps how far the
+        `extended` zoom controls can magnify. Unset = the default 5x-the-fit cap.
+        An image whose fitted size already exceeds the cap simply can't be zoomed
+        in. Needs the natural pixel size (from `width`/`height`, or the loaded
+        image); until that's known the default cap applies. */
+    maxZoom?: number | undefined;
   }
 
   let {
@@ -37,6 +45,7 @@
     maxWidth = undefined,
     fit = 'contain',
     extended = false,
+    maxZoom = undefined,
   }: Props = $props();
 
   const items = $derived(
@@ -59,7 +68,7 @@
   );
 
   const MIN_SCALE = 1;
-  const MAX_SCALE = 5;
+  const DEFAULT_MAX_SCALE = 5;
   const ZOOM_STEP = 1.5;
   const TRANSITION_MS = 350;
   const TRANSITION_EASE = 'cubic-bezier(0.65, 0, 0.35, 1)';
@@ -98,25 +107,45 @@
   let outgoing = $state<GalleryImage | null>(null);
   let navigating = false;
 
-  // Aspect ratio per image, keyed by src: explicit width/height when given, else
-  // measured from the loaded <img>. The thumbnail reads the cover's entry and the
-  // modal reads the current image's, so they are never confused for each other.
-  let measured = $state<Record<string, number>>({});
+  // Natural pixel size per image, keyed by src: explicit width/height when given,
+  // else measured from the loaded <img>. The thumbnail reads the cover's entry and
+  // the modal reads the current image's, so they are never confused for each other.
+  // Aspect ratio derives from it; natural width drives the `maxZoom` cap.
+  let measured = $state<Record<string, { w: number; h: number }>>({});
   let reducedMotion = $state(false);
   const dur = (ms = TRANSITION_MS) => (reducedMotion ? 0 : ms);
 
+  // Reactive viewport so the fitted-stage geometry and the maxZoom cap recompute
+  // on resize (set in onMount + the resize handler).
+  let vw = $state(0);
+  let vh = $state(0);
+
   // Pointer drag for pan (extended + zoomed only).
   let dragState: { startX: number; startY: number; baseX: number; baseY: number; pointerId: number } | null = null;
   let didDrag = false;
 
-  const aspectOf = (it?: GalleryImage) =>
-    it ? (it.width && it.height ? it.width / it.height : measured[it.src]) : undefined;
+  const aspectOf = (it?: GalleryImage) => {
+    if (!it) return undefined;
+    if (it.width && it.height) return it.width / it.height;
+    const m = measured[it.src];
+    return m ? m.w / m.h : undefined;
+  };
+  const naturalWidthOf = (it?: GalleryImage) => (it ? (it.width ?? measured[it.src]?.w) : undefined);
   const coverAspect = $derived(aspectOf(cover)); // inline thumbnail box
   const aspect = $derived(aspectOf(current)); // open modal box
 
+  // Internal `scale` is relative to the fitted stage, so a natural-size cap is
+  // converted: maxZoom × naturalWidth ÷ fittedWidth. Floored at MIN_SCALE so an
+  // image already displayed larger than the cap just can't be zoomed in.
+  const maxScale = $derived.by(() => {
+    if (maxZoom == null) return DEFAULT_MAX_SCALE;
+    const nw = naturalWidthOf(current);
+    const fitW = viewportTarget().width;
+    if (!nw || !fitW) return DEFAULT_MAX_SCALE;
+    return Math.max(MIN_SCALE, (maxZoom * nw) / fitW);
+  });
+
   function viewportTarget() {
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
     const capW = vw * 0.94;
     const capH = vh * 0.92;
     if (!aspect) {
@@ -317,6 +346,7 @@
         height: `${target.height}px`,
       });
     }
+    if (scale > maxScale) scale = maxScale; // a larger viewport lowers the natural-size cap
     offset = clampOffset(offset.x, offset.y, scale);
     applyTransform(scale, offset);
   }
@@ -375,7 +405,7 @@
 
   function record(src: string, e: Event) {
     const img = e.currentTarget as HTMLImageElement;
-    if (img.naturalWidth && img.naturalHeight) measured[src] = img.naturalWidth / img.naturalHeight;
+    if (img.naturalWidth && img.naturalHeight) measured[src] = { w: img.naturalWidth, h: img.naturalHeight };
   }
 
   function onCoverLoad(e: Event) {
@@ -396,7 +426,7 @@
   });
 
   function zoomTo(nextScale: number, anchor?: { x: number; y: number }) {
-    const s = Math.max(MIN_SCALE, Math.min(MAX_SCALE, nextScale));
+    const s = Math.max(MIN_SCALE, Math.min(maxScale, nextScale));
     if (s <= MIN_SCALE) {
       scale = MIN_SCALE;
       offset = { x: 0, y: 0 };
@@ -502,7 +532,13 @@
         prev();
       }
     };
-    const onResize = () => fitToViewport(false);
+    vw = window.innerWidth;
+    vh = window.innerHeight;
+    const onResize = () => {
+      vw = window.innerWidth;
+      vh = window.innerHeight;
+      fitToViewport(false);
+    };
     const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
     reducedMotion = motionQuery.matches;
     const onMotionChange = (e: MediaQueryListEvent) => { reducedMotion = e.matches; };
@@ -646,7 +682,7 @@
           class="image-lightbox-chrome-button"
           type="button"
           aria-label="Zoom in"
-          disabled={scale >= MAX_SCALE - 0.001}
+          disabled={scale >= maxScale - 0.001}
           onclick={() => zoomTo(scale * ZOOM_STEP)}
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">