@motion-proto/live-tokens 0.61.0 → 0.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/.claude/skills/live-tokens-adjust-geometry/SKILL.md +4 -4
  2. package/.claude/skills/live-tokens-build-page/SKILL.md +21 -3
  3. package/.claude/skills/live-tokens-create-component/SKILL.md +16 -48
  4. package/.claude/skills/live-tokens-create-component/references/fixed-overlays.md +10 -1
  5. package/.claude/skills/live-tokens-create-component/references/intrinsics.md +7 -5
  6. package/.claude/skills/live-tokens-create-component/references/sketch-mode.md +1 -1
  7. package/.claude/skills/live-tokens-create-component/references/token-naming.md +50 -0
  8. package/.claude/skills/live-tokens-generate-theme/SKILL.md +16 -9
  9. package/.claude/skills/live-tokens-pair-fonts/SKILL.md +8 -6
  10. package/.claude/skills/live-tokens-pick-component/SKILL.md +19 -5
  11. package/CHANGELOG.md +114 -0
  12. package/bin/migrate.mjs +6 -2
  13. package/dist-plugin/adjust/index.cjs +1 -1
  14. package/dist-plugin/adjust/index.d.cts +1 -1
  15. package/dist-plugin/adjust/index.d.ts +1 -1
  16. package/dist-plugin/adjust/index.js +1 -1
  17. package/dist-plugin/{chunk-232GZGQU.js → chunk-NDJJORKJ.js} +342 -5
  18. package/dist-plugin/{chunk-Y5CNFSSV.js → chunk-RVE3MNKM.js} +1 -1
  19. package/dist-plugin/{chunk-OIOXU7FR.js → chunk-ZHPX7ZYQ.js} +83 -25
  20. package/dist-plugin/{dataPaths-CRfD1LdA.d.ts → dataPaths-DZUzVv8H.d.cts} +3 -3
  21. package/dist-plugin/{dataPaths-CRfD1LdA.d.cts → dataPaths-DZUzVv8H.d.ts} +3 -3
  22. package/dist-plugin/fontPairing/index.cjs +1 -1
  23. package/dist-plugin/fontPairing/index.d.cts +1 -1
  24. package/dist-plugin/fontPairing/index.d.ts +1 -1
  25. package/dist-plugin/fontPairing/index.js +1 -1
  26. package/dist-plugin/generateColorsAndType/index.cjs +1 -1
  27. package/dist-plugin/generateColorsAndType/index.d.cts +1 -1
  28. package/dist-plugin/generateColorsAndType/index.d.ts +1 -1
  29. package/dist-plugin/generateColorsAndType/index.js +1 -1
  30. package/dist-plugin/index.cjs +461 -58
  31. package/dist-plugin/index.d.cts +1 -1
  32. package/dist-plugin/index.d.ts +1 -1
  33. package/dist-plugin/index.js +31 -23
  34. package/dist-plugin/migrateData/index.cjs +350 -9
  35. package/dist-plugin/migrateData/index.d.cts +1 -1
  36. package/dist-plugin/migrateData/index.d.ts +1 -1
  37. package/dist-plugin/migrateData/index.js +9 -5
  38. package/dist-plugin/tokensCssMigrations/index.cjs +83 -25
  39. package/dist-plugin/tokensCssMigrations/index.d.cts +1 -1
  40. package/dist-plugin/tokensCssMigrations/index.d.ts +1 -1
  41. package/dist-plugin/tokensCssMigrations/index.js +2 -2
  42. package/package.json +4 -2
  43. package/src/app/site.css +32 -0
  44. package/src/editor/component-editor/CardEditor.svelte +7 -1
  45. package/src/editor/component-editor/scaffolding/VariantGroup.svelte +25 -2
  46. package/src/editor/core/preview/lookPreview.ts +46 -5
  47. package/src/editor/core/productionPulse.ts +6 -2
  48. package/src/editor/core/sketch/maskField.ts +75 -39
  49. package/src/editor/core/sketch/sketchLayer.ts +32 -11
  50. package/src/editor/core/sketch/sketchStore.ts +311 -86
  51. package/src/editor/core/sketch/{sketchPresetService.ts → sketchStyleService.ts} +14 -14
  52. package/src/editor/core/sketch/{sketchPresets.ts → sketchStyles.ts} +27 -28
  53. package/src/editor/core/themes/themeDocumentSync.ts +2 -0
  54. package/src/editor/core/themes/themeInit.ts +19 -1
  55. package/src/editor/core/themes/themeService.ts +7 -2
  56. package/src/editor/core/themes/themeTypes.ts +5 -0
  57. package/src/editor/docs/content/editing-tokens.md +1 -1
  58. package/src/editor/docs/content/sketch-mode.md +34 -18
  59. package/src/editor/docs/content/themes-workflow.md +30 -21
  60. package/src/editor/docs/content/where-themes-live.md +9 -5
  61. package/src/editor/docs/content.generated.ts +4 -4
  62. package/src/editor/overlay/LiveTokensRouter.svelte +8 -0
  63. package/src/editor/ui/EditorViewSwitcher.svelte +3 -3
  64. package/src/editor/ui/ThemePanel.svelte +47 -1
  65. package/src/editor/ui/sections/textStyles.ts +29 -1
  66. package/src/editor/ui/sketch/SketchPreview.svelte +3 -3
  67. package/src/editor/ui/sketch/SketchTab.svelte +120 -134
  68. package/src/live-tokens/data/colors-and-type/midnight-study.json +40 -30
  69. package/src/live-tokens/data/themes/autumn.json +3 -3
  70. package/src/live-tokens/data/themes/halloween.json +3 -3
  71. package/src/live-tokens/data/themes/midnight-study.json +61 -49
  72. package/src/live-tokens/data/themes/ocean.json +3 -3
  73. package/src/live-tokens/data/themes/royal-velvet.json +3 -3
  74. package/src/live-tokens/data/themes/sketchy.json +3 -3
  75. package/src/live-tokens/data/themes/spring-meadow.json +3 -3
  76. package/src/live-tokens/data/themes/sunset.json +3 -3
  77. package/src/system/components/Card.svelte +27 -9
  78. package/src/system/components/FloatingTokenTags.css +10 -8
  79. package/src/system/components/ImageLightbox.svelte +5 -2
  80. package/src/system/components/SectionDivider.svelte +3 -3
  81. package/src/system/components/SegmentedControl.svelte +11 -9
  82. package/src/system/styles/tokens.css +28 -5
  83. package/template/src/pages/Home.svelte +1 -11
@@ -377,37 +377,15 @@ var tokensCssMigration_2026_08_19_oklchColorValues = {
377
377
 
378
378
  // vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
379
379
  var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
380
- var BUNDLE2 = [
381
- { name: "--editorial-font-family", value: "var(--font-editorial)" },
382
- { name: "--editorial-font-size", value: "var(--font-size-md)" },
383
- { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
384
- { name: "--editorial-line-height", value: "var(--line-height-normal)" },
385
- { name: "--editorial-letter-spacing", value: "var(--letter-spacing-normal)" }
386
- ];
387
380
  var tokensCssMigration_2026_08_25_editorialTypeRole = {
388
381
  id: "2026-08-25-editorial-type-role",
389
382
  kind: "additive",
390
- description: "Add the editorial type role (--font-editorial and the --editorial-* bundle)",
383
+ description: "Add the editorial type role (--font-editorial)",
391
384
  apply(css) {
392
- const withStack = ensureScale(css, {
385
+ return ensureScale(css, {
393
386
  anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
394
387
  entries: STACK
395
388
  });
396
- return ensureScale(withStack, {
397
- sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
398
- anchorPrefixes: [
399
- "--eyebrow-",
400
- "--code-",
401
- "--body-",
402
- "--heading-",
403
- "--letter-spacing-",
404
- "--line-height-",
405
- "--font-weight-",
406
- "--font-size-",
407
- "--font-"
408
- ],
409
- entries: BUNDLE2
410
- });
411
389
  }
412
390
  };
413
391
 
@@ -460,6 +438,84 @@ ${css.slice(at)}`;
460
438
  }
461
439
  };
462
440
 
441
+ // vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
442
+ var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
443
+ var BUNDLE2 = [
444
+ { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
445
+ { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
446
+ { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
447
+ { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
448
+ { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
449
+ { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
450
+ { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
451
+ { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
452
+ { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
453
+ { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
454
+ ];
455
+ var tokensCssMigration_2026_08_27_editorialSizeSteps = {
456
+ id: "2026-08-27-editorial-size-steps",
457
+ kind: "breaking",
458
+ description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
459
+ apply(css) {
460
+ let out = css;
461
+ for (const axis of AXES) {
462
+ out = renameToken(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
463
+ }
464
+ return ensureScale(out, {
465
+ sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
466
+ anchorPrefixes: [
467
+ "--eyebrow-",
468
+ "--code-",
469
+ "--body-",
470
+ "--heading-",
471
+ "--letter-spacing-",
472
+ "--line-height-",
473
+ "--font-weight-",
474
+ "--font-size-",
475
+ "--font-"
476
+ ],
477
+ entries: BUNDLE2
478
+ });
479
+ }
480
+ };
481
+
482
+ // vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-large-steps.ts
483
+ var BUNDLE3 = [
484
+ { name: "--editorial-xl-font-family", value: "var(--font-editorial)" },
485
+ { name: "--editorial-xl-font-size", value: "var(--font-size-xl)" },
486
+ { name: "--editorial-xl-font-weight", value: "var(--font-weight-normal)" },
487
+ { name: "--editorial-xl-line-height", value: "var(--line-height-tighter)" },
488
+ { name: "--editorial-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
489
+ { name: "--editorial-lg-font-family", value: "var(--font-editorial)" },
490
+ { name: "--editorial-lg-font-size", value: "var(--font-size-lg)" },
491
+ { name: "--editorial-lg-font-weight", value: "var(--font-weight-normal)" },
492
+ { name: "--editorial-lg-line-height", value: "var(--line-height-tight)" },
493
+ { name: "--editorial-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
494
+ ];
495
+ var tokensCssMigration_2026_08_27_editorialLargeSteps = {
496
+ id: "2026-08-27-editorial-large-steps",
497
+ kind: "additive",
498
+ description: "Add the --editorial-lg-* and --editorial-xl-* steps above the reading size",
499
+ apply(css) {
500
+ return ensureScale(css, {
501
+ sectionComment: "Editorial \u2014 the steps above the reading size",
502
+ anchorPrefixes: [
503
+ "--editorial-",
504
+ "--eyebrow-",
505
+ "--code-",
506
+ "--body-",
507
+ "--heading-",
508
+ "--letter-spacing-",
509
+ "--line-height-",
510
+ "--font-weight-",
511
+ "--font-size-",
512
+ "--font-"
513
+ ],
514
+ entries: BUNDLE3
515
+ });
516
+ }
517
+ };
518
+
463
519
  // vite-plugin/tokensCssMigrations/index.ts
464
520
  var TOKENS_CSS_MIGRATIONS = [
465
521
  tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -472,7 +528,9 @@ var TOKENS_CSS_MIGRATIONS = [
472
528
  tokensCssMigration_2026_08_19_oklchColorValues,
473
529
  tokensCssMigration_2026_08_25_editorialTypeRole,
474
530
  tokensCssMigration_2026_08_26_gradientStops,
475
- tokensCssMigration_2026_08_27_backdropPolarity
531
+ tokensCssMigration_2026_08_27_backdropPolarity,
532
+ tokensCssMigration_2026_08_27_editorialSizeSteps,
533
+ tokensCssMigration_2026_08_27_editorialLargeSteps
476
534
  ];
477
535
  function runTokensCssMigrations(css) {
478
536
  return foldMigrations(css, () => true);
@@ -28,9 +28,9 @@ interface ResolvedDataDirs {
28
28
  colorsAndTypeDir: string;
29
29
  componentConfigsDir: string;
30
30
  themesDir: string;
31
- /** No per-folder config override: sketch presets are a draft-look artifact
32
- * with no reason to live apart from the rest of the data tree. */
33
- sketchPresetsDir: string;
31
+ /** No per-folder config override: a sketchstyle has no reason to live apart
32
+ * from the rest of the data tree. */
33
+ sketchStylesDir: string;
34
34
  /** Absolute path of the retired `manifestsDir` key, when the config sets it.
35
35
  * Only the pre-0.48 layout detector and the migration read it. */
36
36
  legacyManifestsDir?: string;
@@ -28,9 +28,9 @@ interface ResolvedDataDirs {
28
28
  colorsAndTypeDir: string;
29
29
  componentConfigsDir: string;
30
30
  themesDir: string;
31
- /** No per-folder config override: sketch presets are a draft-look artifact
32
- * with no reason to live apart from the rest of the data tree. */
33
- sketchPresetsDir: string;
31
+ /** No per-folder config override: a sketchstyle has no reason to live apart
32
+ * from the rest of the data tree. */
33
+ sketchStylesDir: string;
34
34
  /** Absolute path of the retired `manifestsDir` key, when the config sets it.
35
35
  * Only the pre-0.48 layout detector and the migration read it. */
36
36
  legacyManifestsDir?: string;
@@ -392,7 +392,7 @@ function resolveDataDirs(opts = {}) {
392
392
  colorsAndTypeDir: opts.colorsAndTypeDir ? import_path.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
393
393
  componentConfigsDir: opts.componentConfigsDir ? import_path.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
394
394
  themesDir: opts.themesDir ? import_path.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path.default.resolve(fileConfig.themesDir) : sub("themes"),
395
- sketchPresetsDir: sub("sketch-presets"),
395
+ sketchStylesDir: sub("sketch-styles"),
396
396
  legacyManifestsDir: fileConfig.manifestsDir ? import_path.default.resolve(fileConfig.manifestsDir) : void 0
397
397
  };
398
398
  }
@@ -1,5 +1,5 @@
1
1
  import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-DSV3Zisf.cjs';
2
- export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.cjs';
2
+ export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DZUzVv8H.cjs';
3
3
 
4
4
  type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
5
5
  interface PairingFace {
@@ -1,5 +1,5 @@
1
1
  import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-DSV3Zisf.js';
2
- export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.js';
2
+ export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DZUzVv8H.js';
3
3
 
4
4
  type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
5
5
  interface PairingFace {
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  readLiveTokensConfig,
3
3
  resolveDataDirs
4
- } from "../chunk-Y5CNFSSV.js";
4
+ } from "../chunk-RVE3MNKM.js";
5
5
 
6
6
  // src/editor/core/fonts/fontParse.ts
7
7
  function parseGoogleFontsUrl(url2) {
@@ -1927,7 +1927,7 @@ function resolveDataDirs(opts = {}) {
1927
1927
  colorsAndTypeDir: opts.colorsAndTypeDir ? import_path.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
1928
1928
  componentConfigsDir: opts.componentConfigsDir ? import_path.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
1929
1929
  themesDir: opts.themesDir ? import_path.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path.default.resolve(fileConfig.themesDir) : sub("themes"),
1930
- sketchPresetsDir: sub("sketch-presets"),
1930
+ sketchStylesDir: sub("sketch-styles"),
1931
1931
  legacyManifestsDir: fileConfig.manifestsDir ? import_path.default.resolve(fileConfig.manifestsDir) : void 0
1932
1932
  };
1933
1933
  }
@@ -1,5 +1,5 @@
1
1
  import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-DSV3Zisf.cjs';
2
- export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.cjs';
2
+ export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DZUzVv8H.cjs';
3
3
  export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
4
4
 
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-DSV3Zisf.js';
2
- export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.js';
2
+ export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DZUzVv8H.js';
3
3
  export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
4
4
 
5
5
  /**
@@ -30,7 +30,7 @@ import {
30
30
  import {
31
31
  readLiveTokensConfig,
32
32
  resolveDataDirs
33
- } from "../chunk-Y5CNFSSV.js";
33
+ } from "../chunk-RVE3MNKM.js";
34
34
 
35
35
  // src/editor/core/store/editorCore.ts
36
36
  import { writable, derived, get } from "svelte/store";