@motion-proto/live-tokens 0.52.1 → 0.54.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,37 +690,38 @@ 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/themes/parsers/shadow.ts
+var SHADOW_VAR_NAMES = [
+  "--shadow-sm",
+  "--shadow-md",
+  "--shadow-lg",
+  "--shadow-xl",
+  "--shadow-2xl"
+];
+function computeAngleDistance(x, y) {
+  const distance = Math.round(Math.sqrt(x * x + y * y));
+  if (distance === 0) return { angle: 135, distance: 0 };
+  let angle = Math.atan2(y, -x) * (180 / Math.PI);
+  if (angle < 0) angle += 360;
+  return { angle: Math.round(angle), distance };
+}
+function shadowTokenCss(t) {
+  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
+}
+function parseShadowCss(variable, raw) {
+  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
+  if (!m) return null;
+  const x = parseInt(m[1], 10);
+  const y = parseInt(m[2], 10);
+  const blur = parseInt(m[3], 10);
+  const spread = parseInt(m[4], 10);
+  const hue = Math.round(parseFloat(m[5]));
+  const saturation = Math.round(parseFloat(m[6]));
+  const lightness = Math.round(parseFloat(m[7]));
+  const opacity = parseFloat(m[8]);
+  const { angle, distance } = computeAngleDistance(x, y);
+  return { variable, x, y, blur, spread, opacity, hue, saturation, lightness, angle, distance };
 }
 
 // src/editor/core/palettes/contrast.ts
@@ -1745,6 +1793,34 @@ function applyCanvasGradient(canvas, scheme) {
   canvas.gradientSize = "window";
   return `on, ${labels[sky]} \u2192 ${labels[anchor]}`;
 }
+var STOCK_SHADOW_GEOMETRY = {
+  "--shadow-sm": [1, 1, 2],
+  "--shadow-md": [3, 3, 6],
+  "--shadow-lg": [5, 5, 9],
+  "--shadow-xl": [6, 7, 13],
+  "--shadow-2xl": [8, 9, 16]
+};
+var STOCK_SHADOW_COLOR = { spread: 0, hue: 237, saturation: 18, lightness: 3, opacity: 0.9 };
+var SHADOW_OPACITY_DEEP = 0.9;
+var SHADOW_OPACITY_SOFT = 0.2;
+var SHADOW_GROUND_DEEP = 0.5;
+var SHADOW_GROUND_SOFT = 0.9;
+function shadowOpacityForCanvas(canvasL) {
+  const t = (canvasL - SHADOW_GROUND_DEEP) / (SHADOW_GROUND_SOFT - SHADOW_GROUND_DEEP);
+  const ramp = Math.max(0, Math.min(1, t));
+  const opacity = SHADOW_OPACITY_DEEP + ramp * (SHADOW_OPACITY_SOFT - SHADOW_OPACITY_DEEP);
+  return Math.round(opacity * 100) / 100;
+}
+function shadowVars(carried, canvas) {
+  const opacity = shadowOpacityForCanvas(canvas.l);
+  const out = {};
+  for (const variable of SHADOW_VAR_NAMES) {
+    const [x, y, blur] = STOCK_SHADOW_GEOMETRY[variable];
+    const base = parseShadowCss(variable, carried[variable] ?? "") ?? { x, y, blur, ...STOCK_SHADOW_COLOR };
+    out[variable] = shadowTokenCss({ ...base, opacity });
+  }
+  return out;
+}
 function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ new Date()).toISOString()) {
   const { seeds, slug } = validateBrief(brief);
   const configs = {};
@@ -1769,6 +1845,7 @@ function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ n
     Object.entries(carry.cssVariables ?? {}).filter(([k]) => !owned.has(k))
   );
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
+  Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, seeds.Canvas));
   const colorsAndType = {
     name: brief.name.trim(),
     createdAt: now,
@@ -1787,6 +1864,7 @@ function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ n
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",
+      shadows: `opacity ${shadowOpacityForCanvas(seeds.Canvas.l)} for a canvas at L ${seeds.Canvas.l.toFixed(2)}`,
       ...canvasGradient ? { canvasGradient } : {}
     }
   };
@@ -1841,6 +1919,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';
 
 /**
@@ -40,7 +41,8 @@ interface ColorsAndTypeBrief {
     canvasGradient?: boolean;
 }
 /** Non-color content carried forward from the currently active colors and type
- *  so gradients, shadows, component aliases, and fonts survive regeneration. */
+ *  so gradients, shadow geometry, component aliases, and fonts survive
+ *  regeneration. Shadow opacity is derived, not carried — see `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     fontSources?: FontSource[];
@@ -67,6 +69,8 @@ interface GenerateColorsAndTypeReport {
      *  'on, <sky> → <anchor>' or a 'skipped — …' explanation when the Canvas
      *  anchors at the ramp edge and leaves no room. */
     canvasGradient?: string;
+    /** The derived shadow opacity and the canvas lightness it came from. */
+    shadows: string;
 }
 interface GenerateColorsAndTypeResult {
     colorsAndType: ColorsAndType;

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';
 
 /**
@@ -40,7 +41,8 @@ interface ColorsAndTypeBrief {
     canvasGradient?: boolean;
 }
 /** Non-color content carried forward from the currently active colors and type
- *  so gradients, shadows, component aliases, and fonts survive regeneration. */
+ *  so gradients, shadow geometry, component aliases, and fonts survive
+ *  regeneration. Shadow opacity is derived, not carried — see `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     fontSources?: FontSource[];
@@ -67,6 +69,8 @@ interface GenerateColorsAndTypeReport {
      *  'on, <sky> → <anchor>' or a 'skipped — …' explanation when the Canvas
      *  anchors at the ramp edge and leaves no room. */
     canvasGradient?: string;
+    /** The derived shadow opacity and the canvas lightness it came from. */
+    shadows: string;
 }
 interface GenerateColorsAndTypeResult {
     colorsAndType: ColorsAndType;