@motion-proto/live-tokens 0.52.1 → 0.53.0

package/dist-plugin/{chunk-JIGIIE5P.js → chunk-PB2JTK2H.js}

@@ -9,6 +9,126 @@ function sanitizeFileName(name) {
   return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^[-_]+|-+$/g, "") || "unnamed";
 }
 
+// src/editor/core/themes/parsers/colorOpacity.ts
+var COLOR_OPACITY_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
+function parseColorOpacity(value) {
+  const m = value.trim().match(COLOR_OPACITY_RE);
+  if (!m) return null;
+  return { name: m[1], opacity: parseInt(m[2], 10) };
+}
+function formatColorOpacity(name, opacity) {
+  return `color-mix(in srgb, var(${name}) ${opacity}%, transparent)`;
+}
+
+// src/editor/core/themes/parsers/gradient.ts
+var RADIAL_BASE_PX = 100;
+function formatStopColor(s) {
+  const opacity = s.opacity ?? 100;
+  if (s.color.startsWith("--")) {
+    return opacity >= 100 ? `var(${s.color})` : formatColorOpacity(s.color, opacity);
+  }
+  return opacity >= 100 ? s.color : `color-mix(in srgb, ${s.color} ${opacity}%, transparent)`;
+}
+function formatGradientStops(stops) {
+  return stops.map((s) => `${formatStopColor(s)} ${s.position}%`).join(", ");
+}
+function formatRadialShape(v) {
+  const ax = v.aspectX ?? 1;
+  const ay = v.aspectY ?? 1;
+  if (ax === 1 && ay === 1) {
+    return v.radius && v.radius > 0 ? `circle ${v.radius}px` : "circle";
+  }
+  const base = v.radius && v.radius > 0 ? v.radius : RADIAL_BASE_PX;
+  return `ellipse ${(base * ax).toFixed(2)}px ${(base * ay).toFixed(2)}px`;
+}
+function formatGradientValue(v) {
+  if (v.type === "none") return "transparent";
+  if (v.type === "solid") {
+    const first = v.stops[0];
+    return first ? formatStopColor(first) : "transparent";
+  }
+  const stops = formatGradientStops(v.stops);
+  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
+  return `radial-gradient(${formatRadialShape(v)} at ${v.centerX ?? 50}% 50%, ${stops})`;
+}
+var NUM = String.raw`-?\d+(?:\.\d+)?`;
+var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${NUM})deg\s*,\s*(.+)\)$`, "i");
+var RADIAL_RE = new RegExp(
+  String.raw`^radial-gradient\(\s*(circle|circle\s+${NUM}px|ellipse\s+${NUM}px\s+${NUM}px)\s+at\s+(${NUM})%\s+50%\s*,\s*(.+)\)$`,
+  "i"
+);
+var STOP_RE = new RegExp(String.raw`^(.*?)\s+(${NUM})%$`);
+var CIRCLE_RADIUS_RE = new RegExp(String.raw`^circle\s+(${NUM})px$`, "i");
+var ELLIPSE_RE = new RegExp(String.raw`^ellipse\s+(${NUM})px\s+(${NUM})px$`, "i");
+var VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
+function splitTopLevel(s) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (c === "(") depth++;
+    else if (c === ")") depth--;
+    else if (c === "," && depth === 0) {
+      parts.push(s.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(s.slice(start));
+  return parts;
+}
+function parseStop(raw) {
+  const m = raw.trim().match(STOP_RE);
+  if (!m) return null;
+  const position = parseFloat(m[2]);
+  const color = m[1].trim();
+  const opacity = parseColorOpacity(color);
+  if (opacity) return { position, color: opacity.name, opacity: opacity.opacity };
+  const token = color.match(VAR_RE);
+  return { position, color: token ? token[1] : color };
+}
+function parseStops(raw) {
+  const stops = [];
+  for (const part of splitTopLevel(raw)) {
+    const stop = parseStop(part);
+    if (!stop) return null;
+    stops.push(stop);
+  }
+  return stops.length > 0 ? stops : null;
+}
+function parseRadialShape(raw) {
+  const shape = raw.trim();
+  if (/^circle$/i.test(shape)) return {};
+  const circle = shape.match(CIRCLE_RADIUS_RE);
+  if (circle) return { radius: parseFloat(circle[1]) };
+  const ellipse = shape.match(ELLIPSE_RE);
+  if (!ellipse) return null;
+  const ax = parseFloat(ellipse[1]) / RADIAL_BASE_PX;
+  const ay = parseFloat(ellipse[2]) / RADIAL_BASE_PX;
+  return { ...ax === 1 ? {} : { aspectX: ax }, ...ay === 1 ? {} : { aspectY: ay } };
+}
+function parseGradientValue(value) {
+  const css = value.trim();
+  const linear = css.match(LINEAR_RE);
+  if (linear) {
+    const stops2 = parseStops(linear[2]);
+    return stops2 && { type: "linear", angle: parseFloat(linear[1]), stops: stops2 };
+  }
+  const radial = css.match(RADIAL_RE);
+  if (!radial) return null;
+  const shape = parseRadialShape(radial[1]);
+  const stops = parseStops(radial[3]);
+  if (!shape || !stops) return null;
+  const centerX = parseFloat(radial[2]);
+  return {
+    type: "radial",
+    angle: 0,
+    ...shape,
+    ...centerX === 50 ? {} : { centerX },
+    stops
+  };
+}
+
 // src/editor/ui/curveEngine.ts
 function makeAnchor(x, y, tangentLen = 15) {
   return { x, y, inDx: -tangentLen, inDy: 0, outDx: tangentLen, outDy: 0 };
@@ -466,6 +586,9 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
 }
 
 export {
+  parseColorOpacity,
+  formatGradientValue,
+  parseGradientValue,
   sanitizeFileName,
   makeAnchor,
   resmoothAutoCurve,

package/dist-plugin/generateColorsAndType/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // vite-plugin/generateColorsAndType/index.ts
 var generateColorsAndType_exports = {};
 __export(generateColorsAndType_exports, {
+  CURRENT_COMPONENT_SCHEMA_VERSION: () => CURRENT_COMPONENT_SCHEMA_VERSION,
   buildColorsAndTypeFromSeeds: () => buildColorsAndTypeFromSeeds,
   readLiveTokensConfig: () => readLiveTokensConfig,
   resolveDataDirs: () => resolveDataDirs,
@@ -602,6 +603,52 @@ var canUndo = (0, import_store.derived)(historyTick, () => past.length > 0);
 var canRedo = (0, import_store.derived)(historyTick, () => future.length > 0);
 var dirty = (0, import_store.derived)(historyTick, () => past.length !== savedAtIndex);
 
+// src/editor/core/themes/parsers/colorOpacity.ts
+function formatColorOpacity(name, opacity) {
+  return `color-mix(in srgb, var(${name}) ${opacity}%, transparent)`;
+}
+
+// src/editor/core/themes/parsers/gradient.ts
+var RADIAL_BASE_PX = 100;
+function formatStopColor(s) {
+  const opacity = s.opacity ?? 100;
+  if (s.color.startsWith("--")) {
+    return opacity >= 100 ? `var(${s.color})` : formatColorOpacity(s.color, opacity);
+  }
+  return opacity >= 100 ? s.color : `color-mix(in srgb, ${s.color} ${opacity}%, transparent)`;
+}
+function formatGradientStops(stops) {
+  return stops.map((s) => `${formatStopColor(s)} ${s.position}%`).join(", ");
+}
+function formatRadialShape(v) {
+  const ax = v.aspectX ?? 1;
+  const ay = v.aspectY ?? 1;
+  if (ax === 1 && ay === 1) {
+    return v.radius && v.radius > 0 ? `circle ${v.radius}px` : "circle";
+  }
+  const base = v.radius && v.radius > 0 ? v.radius : RADIAL_BASE_PX;
+  return `ellipse ${(base * ax).toFixed(2)}px ${(base * ay).toFixed(2)}px`;
+}
+function formatGradientValue(v) {
+  if (v.type === "none") return "transparent";
+  if (v.type === "solid") {
+    const first = v.stops[0];
+    return first ? formatStopColor(first) : "transparent";
+  }
+  const stops = formatGradientStops(v.stops);
+  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
+  return `radial-gradient(${formatRadialShape(v)} at ${v.centerX ?? 50}% 50%, ${stops})`;
+}
+var NUM = String.raw`-?\d+(?:\.\d+)?`;
+var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${NUM})deg\s*,\s*(.+)\)$`, "i");
+var RADIAL_RE = new RegExp(
+  String.raw`^radial-gradient\(\s*(circle|circle\s+${NUM}px|ellipse\s+${NUM}px\s+${NUM}px)\s+at\s+(${NUM})%\s+50%\s*,\s*(.+)\)$`,
+  "i"
+);
+var STOP_RE = new RegExp(String.raw`^(.*?)\s+(${NUM})%$`);
+var CIRCLE_RADIUS_RE = new RegExp(String.raw`^circle\s+(${NUM})px$`, "i");
+var ELLIPSE_RE = new RegExp(String.raw`^ellipse\s+(${NUM})px\s+(${NUM})px$`, "i");
+
 // src/editor/core/themes/slices/gradients.ts
 function makeDefaultGradients() {
   return [
@@ -643,38 +690,6 @@ function makeDefaultGradients() {
     }
   ];
 }
-function formatGradientStop(s) {
-  return `${formatGradientStopColor(s)} ${s.position}%`;
-}
-function formatGradientValue(v) {
-  if (v.type === "none") return "transparent";
-  if (v.type === "solid") {
-    const first = v.stops[0];
-    if (!first) return "transparent";
-    return formatGradientStopColor(first);
-  }
-  const stops = v.stops.map(formatGradientStop).join(", ");
-  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
-  const cx = v.centerX ?? 50;
-  return `radial-gradient(${formatRadialShape(v)} at ${cx}% 50%, ${stops})`;
-}
-var DEFAULT_RADIAL_BASE_PX = 100;
-function formatRadialShape(v) {
-  const ax = v.aspectX ?? 1;
-  const ay = v.aspectY ?? 1;
-  if (ax === 1 && ay === 1) {
-    return v.radius && v.radius > 0 ? `circle ${v.radius}px` : "circle";
-  }
-  const base = v.radius && v.radius > 0 ? v.radius : DEFAULT_RADIAL_BASE_PX;
-  const rx = base * ax;
-  const ry = base * ay;
-  return `ellipse ${rx.toFixed(2)}px ${ry.toFixed(2)}px`;
-}
-function formatGradientStopColor(s) {
-  const base = s.color.startsWith("--") ? `var(${s.color})` : s.color;
-  const opacity = s.opacity ?? 100;
-  return opacity >= 100 ? base : `color-mix(in srgb, ${base} ${opacity}%, transparent)`;
-}
 
 // src/editor/core/palettes/contrast.ts
 var AA_BODY = 4.5;
@@ -1841,6 +1856,7 @@ function resolveDataDirs(opts = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CURRENT_COMPONENT_SCHEMA_VERSION,
   buildColorsAndTypeFromSeeds,
   readLiveTokensConfig,
   resolveDataDirs,

package/dist-plugin/generateColorsAndType/index.d.cts

@@ -1,4 +1,5 @@
-import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-Dky03HL9.cjs';
+import { F as FontSource, c as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, a as ColorsAndType } from '../index-DpTIRZ2H.cjs';
+export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-DpTIRZ2H.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.cjs';
 
 /**

package/dist-plugin/generateColorsAndType/index.d.ts

@@ -1,4 +1,5 @@
-import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-Dky03HL9.js';
+import { F as FontSource, c as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, a as ColorsAndType } from '../index-DpTIRZ2H.js';
+export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-DpTIRZ2H.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.js';
 
 /**