@motion-proto/live-tokens 0.49.0 → 0.50.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 (63) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist-plugin/generateColorsAndType/index.cjs +13 -2
  3. package/dist-plugin/generateColorsAndType/index.js +13 -2
  4. package/dist-plugin/index.cjs +2 -0
  5. package/dist-plugin/index.js +2 -0
  6. package/package.json +6 -1
  7. package/src/editor/bootstrap.ts +2 -0
  8. package/src/editor/component-editor/ButtonEditor.svelte +1 -1
  9. package/src/editor/component-editor/CardEditor.svelte +5 -2
  10. package/src/editor/component-editor/IconButtonEditor.svelte +1 -1
  11. package/src/editor/component-editor/ImageEditor.svelte +1 -1
  12. package/src/editor/component-editor/SectionDividerEditor.svelte +4 -1
  13. package/src/editor/component-editor/SideNavigationEditor.svelte +6 -0
  14. package/src/editor/component-editor/TabBarEditor.svelte +1 -5
  15. package/src/editor/component-editor/scaffolding/ComponentEditorBase.svelte +8 -1
  16. package/src/editor/component-editor/scaffolding/ComponentFileManager.svelte +10 -32
  17. package/src/editor/component-editor/scaffolding/StateBlock.svelte +2 -0
  18. package/src/editor/component-editor/scaffolding/TypeEditor.svelte +3 -1
  19. package/src/editor/component-editor/scaffolding/types.ts +3 -0
  20. package/src/editor/core/components/componentConfigService.ts +25 -0
  21. package/src/editor/core/cssVarSync.ts +65 -7
  22. package/src/editor/core/fonts/fontLoader.ts +12 -3
  23. package/src/editor/core/fonts/fontWeightAvailability.ts +97 -0
  24. package/src/editor/core/preview/lookPreview.ts +23 -18
  25. package/src/editor/core/store/editorRenderer.ts +22 -7
  26. package/src/editor/core/store/editorStore.ts +31 -0
  27. package/src/editor/core/store/gradientSource.ts +5 -0
  28. package/src/editor/core/themes/colorsAndTypeService.ts +2 -12
  29. package/src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts +4 -1
  30. package/src/editor/core/themes/migrations/2026-05-21-sectiondivider-spacing-to-padding.ts +4 -1
  31. package/src/editor/core/themes/migrations/2026-05-25-cornerbadge-flatten-variants.ts +8 -0
  32. package/src/editor/core/themes/slices/fonts.ts +4 -5
  33. package/src/editor/core/themes/themeDocumentSync.ts +66 -0
  34. package/src/editor/core/themes/themeInit.ts +7 -10
  35. package/src/editor/core/themes/themeService.ts +10 -3
  36. package/src/editor/docs/content/themes-workflow.md +14 -11
  37. package/src/editor/docs/content/where-themes-live.md +7 -2
  38. package/src/editor/docs/content.generated.ts +2 -2
  39. package/src/editor/ui/FileLoadList.svelte +1 -0
  40. package/src/editor/ui/FontStackEditor.svelte +1 -2
  41. package/src/editor/ui/GradientEditor.svelte +5 -1
  42. package/src/editor/ui/ProjectFontsSection.svelte +0 -5
  43. package/src/editor/ui/ThemePanel.svelte +206 -42
  44. package/src/editor/ui/UIDialog.svelte +7 -1
  45. package/src/editor/ui/UIFontFamilySelector.svelte +13 -13
  46. package/src/editor/ui/UIFontSizeSelector.svelte +5 -5
  47. package/src/editor/ui/UIFontWeightSelector.svelte +52 -2
  48. package/src/editor/ui/UIOptionItem.svelte +14 -1
  49. package/src/editor/ui/UIPaddingSelector.svelte +4 -3
  50. package/src/editor/ui/UIPaletteSelector.svelte +20 -13
  51. package/src/editor/ui/UIRelinkConfirmDialog.svelte +18 -3
  52. package/src/editor/ui/UITextTransformSelector.svelte +5 -5
  53. package/src/editor/ui/UITokenSelector.svelte +29 -7
  54. package/src/live-tokens/data/themes/spring-meadow.json +14 -12
  55. package/src/system/components/Button.svelte +2 -1
  56. package/src/system/components/FloatingTokenTags.css +2 -1
  57. package/src/system/components/FloatingTokenTags.svelte +11 -0
  58. package/src/system/components/IconButton.svelte +2 -1
  59. package/src/system/components/Image.svelte +9 -3
  60. package/src/system/components/ImageLightbox.svelte +2 -0
  61. package/src/system/components/SectionDivider.svelte +20 -2
  62. package/src/system/components/SideNavigation.svelte +15 -1
  63. package/src/system/styles/fonts.css +6 -6
package/src/system/components/SideNavigation.svelte CHANGED
@@ -124,7 +124,7 @@
124
124
  if (forceHoverPart !== 'item') return null;
125
125
  const s = sections[0];
126
126
  if (!s || s.items.length === 0) return null;
127
- return (s.items[1] ?? s.items[0]).path;
127
+ return s.items.find((item) => item.path !== currentPath)?.path ?? s.items[0].path;
128
128
  });
129
129
 
130
130
  let titleActive = $derived(forceActivePart === 'title' || currentPath === '');
@@ -471,6 +471,8 @@
471
471
  --_surface: var(--sidenavigation-title-default-surface);
472
472
  --_border: var(--sidenavigation-title-default-border);
473
473
  --_border-width: var(--sidenavigation-title-default-border-width);
474
+ --_indicator: var(--sidenavigation-title-default-accent);
475
+ --_indicator-width: var(--sidenavigation-title-default-accent-width);
474
476
  --_padding: var(--sidenavigation-title-default-padding);
475
477
  --_label: var(--sidenavigation-title-default-label);
476
478
  --_label-family: var(--sidenavigation-title-default-label-font-family);
@@ -490,6 +492,8 @@
490
492
  justify-content: center;
491
493
  gap: var(--sidenavigation-title-gap);
492
494
  background: var(--_surface);
495
+ border: var(--_border-width) solid var(--_border);
496
+ border-left: var(--_indicator-width) solid var(--_indicator);
493
497
  border-radius: var(--sidenavigation-title-radius);
494
498
  @include themed-padding(--_padding);
495
499
  transition: background var(--duration-150);
@@ -500,6 +504,8 @@
500
504
  --_surface: var(--sidenavigation-title-hover-surface);
501
505
  --_border: var(--sidenavigation-title-hover-border);
502
506
  --_border-width: var(--sidenavigation-title-hover-border-width);
507
+ --_indicator: var(--sidenavigation-title-hover-accent);
508
+ --_indicator-width: var(--sidenavigation-title-hover-accent-width);
503
509
  --_padding: var(--sidenavigation-title-hover-padding);
504
510
  --_label: var(--sidenavigation-title-hover-label);
505
511
  --_label-family: var(--sidenavigation-title-hover-label-font-family);
@@ -512,6 +518,8 @@
512
518
  --_surface: var(--sidenavigation-title-active-surface);
513
519
  --_border: var(--sidenavigation-title-active-border);
514
520
  --_border-width: var(--sidenavigation-title-active-border-width);
521
+ --_indicator: var(--sidenavigation-title-active-accent);
522
+ --_indicator-width: var(--sidenavigation-title-active-accent-width);
515
523
  --_padding: var(--sidenavigation-title-active-padding);
516
524
  --_label: var(--sidenavigation-title-active-label);
517
525
  --_label-family: var(--sidenavigation-title-active-label-font-family);
@@ -530,6 +538,7 @@
530
538
 
531
539
  .sn-title-label {
532
540
  background: var(--sidenavigation-title-label-surface);
541
+ border: var(--sidenavigation-title-label-border-width) solid var(--sidenavigation-title-label-border);
533
542
  border-radius: var(--sidenavigation-title-label-radius);
534
543
  @include themed-padding(--sidenavigation-title-label-padding);
535
544
  color: var(--_label);
@@ -652,6 +661,11 @@
652
661
  --_surface: var(--sidenavigation-section-hover-surface);
653
662
  --_indicator: var(--sidenavigation-section-hover-accent);
654
663
  --_indicator-width: var(--sidenavigation-section-hover-accent-width);
664
+ --collapsiblesection-chromeless-default-label: var(--sidenavigation-section-hover-text);
665
+ --collapsiblesection-chromeless-default-label-font-family: var(--sidenavigation-section-hover-text-font-family);
666
+ --collapsiblesection-chromeless-default-label-font-size: var(--sidenavigation-section-hover-text-font-size);
667
+ --collapsiblesection-chromeless-default-label-font-weight: var(--sidenavigation-section-hover-text-font-weight);
668
+ --collapsiblesection-chromeless-default-label-line-height: var(--sidenavigation-section-hover-text-line-height);
655
669
  }
656
670
  .sn-section-header.active {
657
671
  --_surface: var(--sidenavigation-section-active-surface);
package/src/system/styles/fonts.css CHANGED
@@ -4,11 +4,11 @@
4
4
  /* Adobe Typekit — fira-code */
5
5
  @import url('https://use.typekit.net/jes8oow.css');
6
6
 
7
- /* Google Fonts — Manrope */
8
- @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
9
-
10
- /* Google Fonts — Arvo */
11
- @import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
12
-
13
7
  /* Google Fonts — GFS Didot */
14
8
  @import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
9
+
10
+ /* Google Fonts — Comfortaa */
11
+ @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
12
+
13
+ /* Google Fonts — Figtree */
14
+ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap');