@motion-proto/live-tokens 0.78.0 → 0.80.0

package/bin/setup-claude.mjs

@@ -29,8 +29,7 @@ const SAMPLE_PROMPTS = {
   'live-tokens-set-colors': 'give me a cooler palette, same fonts',
   'live-tokens-set-type': 'pair some fonts for this theme',
   'live-tokens-set-geometry': 'make the buttons pill shaped',
-  'live-tokens-fix-findings': 'make check:design pass',
-  'live-tokens-check-compliance': 'check this project against the design system',
+  'live-tokens-check-compliance': 'check this project against the design system and fix it',
 };
 
 function directoriesIn(dir) {

package/dist-plugin/{chunk-PDNL4NC5.js → chunk-D4WRIKEZ.js}

@@ -1,7 +1,7 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
-} from "./chunk-SWXRVZKT.js";
+} from "./chunk-REBHE3ZM.js";
 
 // vite-plugin/files/versionedFileResourceServer.ts
 import fs from "fs";
@@ -192,11 +192,16 @@ function renameSectionDividerObjectSlots(objectPart) {
       }
     }
     if (isFamilyGradient) continue;
+    const backgroundVariant = SIZE_VARIANTS.find((v) => key === `--sectiondivider-${v}-background`);
+    if (backgroundVariant) {
+      out[`--sectiondivider-${backgroundVariant}-surface`] = value;
+      continue;
+    }
     out[key] = value;
   }
   if (canvasGradient !== void 0) {
     for (const v of SIZE_VARIANTS) {
-      out[`--sectiondivider-${v}-background`] = canvasGradient;
+      out[`--sectiondivider-${v}-surface`] = canvasGradient;
     }
   }
   return out;

package/dist-plugin/{chunk-SWXRVZKT.js → chunk-REBHE3ZM.js}

@@ -921,6 +921,411 @@ var componentMigration_2026_09_07_strokeRoleRenames = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-13-selected-state.ts
+var RADIOBUTTON_SUFFIXES = [
+  "dot-border-color",
+  "dot-border-width",
+  "dot-fill",
+  "dot-size",
+  "label",
+  "label-font-family",
+  "label-font-size",
+  "label-font-weight",
+  "label-line-height"
+];
+var TABBAR_SUFFIXES = [
+  "border",
+  "icon-size",
+  "indicator-width",
+  "padding",
+  "surface",
+  "tab-border-color",
+  "tab-border-width",
+  "tab-bottom-radius",
+  "tab-top-radius",
+  "text",
+  "text-font-family",
+  "text-font-size",
+  "text-font-weight",
+  "text-line-height"
+];
+var SIDENAVIGATION_SUFFIXES = {
+  title: [
+    "accent",
+    "accent-width",
+    "border",
+    "border-width",
+    "label",
+    "label-font-family",
+    "label-font-size",
+    "label-font-weight",
+    "label-line-height",
+    "padding",
+    "surface"
+  ],
+  section: [
+    "accent",
+    "accent-width",
+    "surface",
+    "text",
+    "text-font-family",
+    "text-font-size",
+    "text-font-weight",
+    "text-line-height"
+  ],
+  item: [
+    "accent",
+    "accent-width",
+    "padding",
+    "surface",
+    "text",
+    "text-font-family",
+    "text-font-size",
+    "text-font-weight",
+    "text-line-height"
+  ],
+  footer: [
+    "accent",
+    "accent-width",
+    "gap",
+    "icon",
+    "icon-size",
+    "padding",
+    "surface",
+    "text",
+    "text-font-family",
+    "text-font-size",
+    "text-font-weight",
+    "text-line-height"
+  ]
+};
+var RENAMES3 = {
+  radiobutton: Object.fromEntries(
+    RADIOBUTTON_SUFFIXES.map((s) => [`--radiobutton-active-${s}`, `--radiobutton-selected-${s}`])
+  ),
+  tabbar: Object.fromEntries(
+    TABBAR_SUFFIXES.map((s) => [`--tabbar-active-${s}`, `--tabbar-selected-${s}`])
+  ),
+  sidenavigation: Object.fromEntries(
+    Object.entries(SIDENAVIGATION_SUFFIXES).flatMap(
+      ([part, suffixes]) => suffixes.map((s) => [
+        `--sidenavigation-${part}-active-${s}`,
+        `--sidenavigation-${part}-selected-${s}`
+      ])
+    )
+  )
+};
+var componentMigration_2026_09_13_selectedState = {
+  id: "2026-09-13-selected-state",
+  fromVersion: 27,
+  toVersion: 28,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES3[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-hairline.ts
+var COLLAPSIBLESECTION_SUFFIXES = [
+  "surface",
+  "hairline-color",
+  "padding",
+  "label",
+  "label-font-family",
+  "label-font-size",
+  "label-font-weight",
+  "label-line-height",
+  "icon",
+  "icon-size"
+];
+var COLLAPSIBLESECTION_STATES = ["default", "hover"];
+var RENAMES4 = {
+  dialog: {
+    "--dialog-header-divider": "--dialog-header-hairline-color",
+    "--dialog-header-divider-width": "--dialog-header-hairline-width",
+    "--dialog-footer-divider": "--dialog-footer-hairline-color",
+    "--dialog-footer-divider-width": "--dialog-footer-hairline-width"
+  },
+  table: {
+    "--table-default-header-divider": "--table-default-header-hairline-color",
+    "--table-default-header-divider-width": "--table-default-header-hairline-width",
+    "--table-default-row-divider": "--table-default-row-hairline-color",
+    "--table-default-row-divider-width": "--table-default-row-hairline-width",
+    "--table-default-column-divider": "--table-default-column-hairline-color",
+    "--table-default-column-divider-width": "--table-default-column-hairline-width"
+  },
+  tabbar: {
+    "--tabbar-bar-divider": "--tabbar-bar-hairline-color",
+    "--tabbar-bar-divider-thickness": "--tabbar-bar-hairline-width"
+  },
+  segmentedcontrol: {
+    "--segmentedcontrol-divider-color": "--segmentedcontrol-hairline-color",
+    "--segmentedcontrol-divider-thickness": "--segmentedcontrol-hairline-width",
+    "--segmentedcontrol-divider-inset": "--segmentedcontrol-hairline-inset",
+    "--segmentedcontrol-small-divider-thickness": "--segmentedcontrol-small-hairline-width",
+    "--segmentedcontrol-small-divider-inset": "--segmentedcontrol-small-hairline-inset"
+  },
+  collapsiblesection: {
+    ...Object.fromEntries(
+      COLLAPSIBLESECTION_STATES.flatMap((state) => [
+        ...COLLAPSIBLESECTION_SUFFIXES.map((s) => [
+          `--collapsiblesection-divider-${state}-${s}`,
+          `--collapsiblesection-hairline-${state}-${s}`
+        ]),
+        [
+          `--collapsiblesection-divider-${state}-hairline-thickness`,
+          `--collapsiblesection-hairline-${state}-hairline-width`
+        ]
+      ])
+    ),
+    "--collapsiblesection-divider-expanded-padding": "--collapsiblesection-hairline-expanded-padding"
+  },
+  sectiondivider: {
+    "--sectiondivider-lg-hairline-thickness": "--sectiondivider-lg-hairline-width",
+    "--sectiondivider-md-hairline-thickness": "--sectiondivider-md-hairline-width",
+    "--sectiondivider-sm-hairline-thickness": "--sectiondivider-sm-hairline-width"
+  }
+};
+var componentMigration_2026_09_13_hairline = {
+  id: "2026-09-13-hairline",
+  fromVersion: 28,
+  toVersion: 29,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES4[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-indicator.ts
+var SIDENAVIGATION_PARTS = ["title", "section", "item", "footer"];
+var SIDENAVIGATION_STATES = ["default", "hover", "selected"];
+var CALLOUT_VARIANTS = ["info", "success", "warning", "danger"];
+var RENAMES5 = {
+  sidenavigation: Object.fromEntries(
+    SIDENAVIGATION_PARTS.flatMap(
+      (part) => SIDENAVIGATION_STATES.flatMap((state) => [
+        [
+          `--sidenavigation-${part}-${state}-accent`,
+          `--sidenavigation-${part}-${state}-indicator`
+        ],
+        [
+          `--sidenavigation-${part}-${state}-accent-width`,
+          `--sidenavigation-${part}-${state}-indicator-width`
+        ]
+      ])
+    )
+  ),
+  callout: Object.fromEntries(
+    CALLOUT_VARIANTS.map((v) => [
+      `--callout-${v}-accent-width`,
+      `--callout-${v}-indicator-width`
+    ])
+  )
+};
+var componentMigration_2026_09_13_indicator = {
+  id: "2026-09-13-indicator",
+  fromVersion: 29,
+  toVersion: 30,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES5[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-sectiondivider-surface.ts
+var SECTIONDIVIDER_VARIANTS = ["lg", "md", "sm"];
+var RENAMES6 = {
+  sectiondivider: Object.fromEntries(
+    SECTIONDIVIDER_VARIANTS.map((v) => [
+      `--sectiondivider-${v}-background`,
+      `--sectiondivider-${v}-surface`
+    ])
+  )
+};
+var componentMigration_2026_09_13_sectiondividerSurface = {
+  id: "2026-09-13-sectiondivider-surface",
+  fromVersion: 30,
+  toVersion: 31,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES6[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
+var RENAMES7 = {
+  cornerbadge: {
+    "--corner-badge-margin": "--cornerbadge-margin",
+    "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
+    "--corner-badge-inner-radius": "--cornerbadge-inner-radius",
+    "--corner-badge-h-axis-radius": "--cornerbadge-h-axis-radius",
+    "--corner-badge-v-axis-radius": "--cornerbadge-v-axis-radius",
+    "--corner-badge-padding": "--cornerbadge-padding",
+    "--corner-badge-text-font-family": "--cornerbadge-text-font-family",
+    "--corner-badge-text-font-size": "--cornerbadge-text-font-size",
+    "--corner-badge-text-font-weight": "--cornerbadge-text-font-weight",
+    "--corner-badge-text-line-height": "--cornerbadge-text-line-height",
+    "--corner-badge-primary-surface": "--cornerbadge-primary-surface",
+    "--corner-badge-primary-border": "--cornerbadge-primary-border",
+    "--corner-badge-primary-text": "--cornerbadge-primary-text",
+    "--corner-badge-accent-surface": "--cornerbadge-accent-surface",
+    "--corner-badge-accent-border": "--cornerbadge-accent-border",
+    "--corner-badge-accent-text": "--cornerbadge-accent-text",
+    "--corner-badge-neutral-surface": "--cornerbadge-neutral-surface",
+    "--corner-badge-neutral-border": "--cornerbadge-neutral-border",
+    "--corner-badge-neutral-text": "--cornerbadge-neutral-text",
+    "--corner-badge-alternate-surface": "--cornerbadge-alternate-surface",
+    "--corner-badge-alternate-border": "--cornerbadge-alternate-border",
+    "--corner-badge-alternate-text": "--cornerbadge-alternate-text",
+    "--corner-badge-canvas-surface": "--cornerbadge-canvas-surface",
+    "--corner-badge-canvas-border": "--cornerbadge-canvas-border",
+    "--corner-badge-canvas-text": "--cornerbadge-canvas-text",
+    "--corner-badge-special-surface": "--cornerbadge-special-surface",
+    "--corner-badge-special-border": "--cornerbadge-special-border",
+    "--corner-badge-special-text": "--cornerbadge-special-text",
+    "--corner-badge-success-surface": "--cornerbadge-success-surface",
+    "--corner-badge-success-border": "--cornerbadge-success-border",
+    "--corner-badge-success-text": "--cornerbadge-success-text",
+    "--corner-badge-warning-surface": "--cornerbadge-warning-surface",
+    "--corner-badge-warning-border": "--cornerbadge-warning-border",
+    "--corner-badge-warning-text": "--cornerbadge-warning-text",
+    "--corner-badge-danger-surface": "--cornerbadge-danger-surface",
+    "--corner-badge-danger-border": "--cornerbadge-danger-border",
+    "--corner-badge-danger-text": "--cornerbadge-danger-text",
+    "--corner-badge-info-surface": "--cornerbadge-info-surface",
+    "--corner-badge-info-border": "--cornerbadge-info-border",
+    "--corner-badge-info-text": "--cornerbadge-info-text"
+  }
+};
+var componentMigration_2026_09_13_cornerbadgePrefix = {
+  id: "2026-09-13-cornerbadge-prefix",
+  fromVersion: 31,
+  toVersion: 32,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES7[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
+var RENAMES8 = {
+  toggle: {
+    "--toggle-label-text": "--toggle-label",
+    "--toggle-disabled-label-text": "--toggle-disabled-label"
+  }
+};
+var componentMigration_2026_09_13_toggleLabel = {
+  id: "2026-09-13-toggle-label",
+  fromVersion: 32,
+  toVersion: 33,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES8[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
+var RENAMES9 = {
+  collapsiblesection: {
+    "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
+    "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
+    "--collapsiblesection-container-expanded-surface": "--collapsiblesection-container-open-surface",
+    "--collapsiblesection-container-expanded-padding": "--collapsiblesection-container-open-padding"
+  }
+};
+var componentMigration_2026_09_13_collapsiblesectionOpen = {
+  id: "2026-09-13-collapsiblesection-open",
+  fromVersion: 33,
+  toVersion: 34,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES9[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-13-badge-brand.ts
+var BADGE_SUFFIXES = [
+  "surface",
+  "text",
+  "border",
+  "text-font-family",
+  "text-font-size",
+  "text-font-weight",
+  "text-line-height",
+  "border-width",
+  "radius",
+  "padding",
+  "shadow",
+  "blur",
+  "icon-size"
+];
+var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
+var RENAMES10 = {
+  badge: Object.fromEntries(
+    BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
+  ),
+  cornerbadge: Object.fromEntries(
+    CORNERBADGE_SUFFIXES.map((s) => [`--cornerbadge-primary-${s}`, `--cornerbadge-brand-${s}`])
+  )
+};
+var componentMigration_2026_09_13_badgeBrand = {
+  id: "2026-09-13-badge-brand",
+  fromVersion: 34,
+  toVersion: 35,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES10[meta.component] : void 0;
+    if (!renames) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -957,7 +1362,15 @@ var MIGRATIONS = [
   componentMigration_2026_09_01_gateSuffixEnabled,
   componentMigration_2026_09_02_sectiondividerDropTitleOutline,
   colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys,
-  componentMigration_2026_09_07_strokeRoleRenames
+  componentMigration_2026_09_07_strokeRoleRenames,
+  componentMigration_2026_09_13_selectedState,
+  componentMigration_2026_09_13_hairline,
+  componentMigration_2026_09_13_indicator,
+  componentMigration_2026_09_13_sectiondividerSurface,
+  componentMigration_2026_09_13_cornerbadgePrefix,
+  componentMigration_2026_09_13_toggleLabel,
+  componentMigration_2026_09_13_collapsiblesectionOpen,
+  componentMigration_2026_09_13_badgeBrand
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;