@motion-proto/live-tokens 0.25.1 → 0.28.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 (25) hide show
  1. package/.claude/skills/live-tokens-build-page/SKILL.md +6 -4
  2. package/README.md +28 -3
  3. package/dist-plugin/index.cjs +120 -115
  4. package/dist-plugin/index.js +120 -115
  5. package/package.json +14 -5
  6. package/src/editor/core/store/editorPersistence.ts +23 -1
  7. package/src/editor/docs/CodeBlock.svelte +92 -0
  8. package/src/editor/docs/Docs.svelte +658 -0
  9. package/src/editor/docs/Docs.svelte.d.ts +2 -0
  10. package/src/editor/docs/chapters.ts +44 -0
  11. package/src/editor/docs/content/01-overview.md +31 -0
  12. package/src/editor/docs/content/creating-components.md +40 -0
  13. package/src/editor/docs/content/editing-tokens.md +74 -0
  14. package/src/editor/docs/content/getting-started.md +67 -0
  15. package/src/editor/docs/content/themes-workflow.md +60 -0
  16. package/src/editor/overlay/LiveTokensRouter.svelte +71 -13
  17. package/src/editor/pages/ComponentEditorPage.svelte +0 -11
  18. package/src/editor/ui/ManifestFileManager.svelte +15 -5
  19. package/src/editor/ui/ThemeFileManager.svelte +6 -2
  20. package/src/live-tokens/data/manifests/default.json +35 -0
  21. package/src/live-tokens/data/themes/default.json +2295 -0
  22. package/src/live-tokens/data/tokens.generated.css +9 -9
  23. package/src/system/components/CodeSnippet.svelte +4 -0
  24. package/src/system/components/SideNavigation.svelte +13 -13
  25. package/template/README.md +2 -1
package/src/live-tokens/data/tokens.generated.css CHANGED
@@ -54,6 +54,10 @@
54
54
  --dialog-secondary-hover-border-width: var(--border-width-1);
55
55
  --dialog-secondary-hover-radius: var(--radius-md);
56
56
  --dialog-secondary-hover-padding: var(--space-8);
57
+ --columns-count: 12;
58
+ --columns-max-width: 1440px;
59
+ --columns-gutter: 32px;
60
+ --columns-margin: 0px;
57
61
  --overlay-low: color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent);
58
62
  --overlay: color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent);
59
63
  --overlay-high: color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent);
@@ -65,10 +69,6 @@
65
69
  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
66
70
  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
67
71
  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
68
- --columns-count: 12;
69
- --columns-max-width: 1440px;
70
- --columns-gutter: 32px;
71
- --columns-margin: 0px;
72
72
  --color-neutral-100: #dde6ec;
73
73
  --color-neutral-200: #c4cdd3;
74
74
  --color-neutral-300: #a8b1b7;
@@ -206,11 +206,11 @@
206
206
  --border-accent: #006f6d;
207
207
  --border-accent-medium: #259592;
208
208
  --border-accent-strong: #54bbb7;
209
- --text-accent: #009d9a;
210
- --text-accent-secondary: #1f7673;
211
- --text-accent-tertiary: #2d5351;
212
- --text-accent-muted: #2c3837;
213
- --text-accent-disabled: #292a2a;
209
+ --text-accent: #62efea;
210
+ --text-accent-secondary: #5baba8;
211
+ --text-accent-tertiary: #4d7371;
212
+ --text-accent-muted: #3c4847;
213
+ --text-accent-disabled: #313232;
214
214
  --color-special-100: #d2c8ff;
215
215
  --color-special-200: #b19cff;
216
216
  --color-special-300: #9673f5;
package/src/system/components/CodeSnippet.svelte CHANGED
@@ -101,6 +101,10 @@
101
101
  line-height: var(--codesnippet-code-line-height);
102
102
  white-space: pre;
103
103
  overflow-x: auto;
104
+ /* overflow-x: auto alone makes the browser compute overflow-y to auto too,
105
+ so the horizontal scrollbar's gutter trips a spurious vertical scrollbar
106
+ on multi-line snippets. Pin overflow-y so only horizontal scroll exists. */
107
+ overflow-y: hidden;
104
108
  scrollbar-width: thin;
105
109
  scrollbar-color: var(--codesnippet-scrollbar-thumb) transparent;
106
110
  }
package/src/system/components/SideNavigation.svelte CHANGED
@@ -282,7 +282,7 @@
282
282
  --sidenavigation-title-default-label: var(--text-primary);
283
283
  --sidenavigation-title-default-label-font-family: var(--font-display);
284
284
  --sidenavigation-title-default-label-font-size: var(--font-size-2xl);
285
- --sidenavigation-title-default-label-font-weight: var(--font-weight-normal);
285
+ --sidenavigation-title-default-label-font-weight: var(--font-weight-bold);
286
286
  --sidenavigation-title-default-label-line-height: var(--line-height-sm);
287
287
 
288
288
  /* Title — hover */
@@ -295,7 +295,7 @@
295
295
  --sidenavigation-title-hover-label: var(--text-primary);
296
296
  --sidenavigation-title-hover-label-font-family: var(--font-display);
297
297
  --sidenavigation-title-hover-label-font-size: var(--font-size-2xl);
298
- --sidenavigation-title-hover-label-font-weight: var(--font-weight-normal);
298
+ --sidenavigation-title-hover-label-font-weight: var(--font-weight-bold);
299
299
  --sidenavigation-title-hover-label-line-height: var(--line-height-sm);
300
300
 
301
301
  /* Title — active */
@@ -308,7 +308,7 @@
308
308
  --sidenavigation-title-active-label: var(--text-primary);
309
309
  --sidenavigation-title-active-label-font-family: var(--font-display);
310
310
  --sidenavigation-title-active-label-font-size: var(--font-size-2xl);
311
- --sidenavigation-title-active-label-font-weight: var(--font-weight-normal);
311
+ --sidenavigation-title-active-label-font-weight: var(--font-weight-bold);
312
312
  --sidenavigation-title-active-label-line-height: var(--line-height-sm);
313
313
 
314
314
  /* Toggle — default */
@@ -339,8 +339,8 @@
339
339
  --sidenavigation-section-default-accent-width: var(--border-width-3);
340
340
  --sidenavigation-section-default-text: var(--text-primary);
341
341
  --sidenavigation-section-default-text-font-family: var(--font-sans);
342
- --sidenavigation-section-default-text-font-size: var(--font-size-md);
343
- --sidenavigation-section-default-text-font-weight: var(--font-weight-normal);
342
+ --sidenavigation-section-default-text-font-size: var(--font-size-lg);
343
+ --sidenavigation-section-default-text-font-weight: var(--font-weight-medium);
344
344
  --sidenavigation-section-default-text-line-height: var(--line-height-md);
345
345
 
346
346
  /* Section header — hover */
@@ -349,8 +349,8 @@
349
349
  --sidenavigation-section-hover-accent-width: var(--border-width-3);
350
350
  --sidenavigation-section-hover-text: var(--text-primary);
351
351
  --sidenavigation-section-hover-text-font-family: var(--font-sans);
352
- --sidenavigation-section-hover-text-font-size: var(--font-size-md);
353
- --sidenavigation-section-hover-text-font-weight: var(--font-weight-normal);
352
+ --sidenavigation-section-hover-text-font-size: var(--font-size-lg);
353
+ --sidenavigation-section-hover-text-font-weight: var(--font-weight-medium);
354
354
  --sidenavigation-section-hover-text-line-height: var(--line-height-md);
355
355
 
356
356
  /* Section header — active (this section's page is the current route) */
@@ -359,8 +359,8 @@
359
359
  --sidenavigation-section-active-accent-width: var(--border-width-3);
360
360
  --sidenavigation-section-active-text: var(--text-primary);
361
361
  --sidenavigation-section-active-text-font-family: var(--font-sans);
362
- --sidenavigation-section-active-text-font-size: var(--font-size-md);
363
- --sidenavigation-section-active-text-font-weight: var(--font-weight-normal);
362
+ --sidenavigation-section-active-text-font-size: var(--font-size-lg);
363
+ --sidenavigation-section-active-text-font-weight: var(--font-weight-medium);
364
364
  --sidenavigation-section-active-text-line-height: var(--line-height-md);
365
365
 
366
366
  /* Item — default */
@@ -370,8 +370,8 @@
370
370
  --sidenavigation-item-default-accent-width: var(--border-width-3);
371
371
  --sidenavigation-item-default-text: var(--text-tertiary);
372
372
  --sidenavigation-item-default-text-font-family: var(--font-sans);
373
- --sidenavigation-item-default-text-font-size: var(--font-size-sm);
374
- --sidenavigation-item-default-text-font-weight: var(--font-weight-light);
373
+ --sidenavigation-item-default-text-font-size: var(--font-size-md);
374
+ --sidenavigation-item-default-text-font-weight: var(--font-weight-semibold);
375
375
  --sidenavigation-item-default-text-line-height: var(--line-height-md);
376
376
 
377
377
  /* Item — hover */
@@ -381,7 +381,7 @@
381
381
  --sidenavigation-item-hover-accent-width: var(--border-width-3);
382
382
  --sidenavigation-item-hover-text: var(--text-secondary);
383
383
  --sidenavigation-item-hover-text-font-family: var(--font-sans);
384
- --sidenavigation-item-hover-text-font-size: var(--font-size-sm);
384
+ --sidenavigation-item-hover-text-font-size: var(--font-size-md);
385
385
  --sidenavigation-item-hover-text-font-weight: var(--font-weight-light);
386
386
  --sidenavigation-item-hover-text-line-height: var(--line-height-md);
387
387
 
@@ -392,7 +392,7 @@
392
392
  --sidenavigation-item-active-accent-width: var(--border-width-3);
393
393
  --sidenavigation-item-active-text: var(--text-primary);
394
394
  --sidenavigation-item-active-text-font-family: var(--font-sans);
395
- --sidenavigation-item-active-text-font-size: var(--font-size-sm);
395
+ --sidenavigation-item-active-text-font-size: var(--font-size-md);
396
396
  --sidenavigation-item-active-text-font-weight: var(--font-weight-normal);
397
397
  --sidenavigation-item-active-text-line-height: var(--line-height-md);
398
398
 
package/template/README.md CHANGED
@@ -15,7 +15,8 @@ This project follows the package's [recommended layout](https://github.com/motio
15
15
 
16
16
  - `src/pages/Home.svelte` — the starter page. Replace it with your own content.
17
17
  - `src/App.svelte` — your routes. `<LiveTokensRouter>` adds the dev-only
18
- `/editor` (theme tokens) and `/components` (per-component aliases) routes.
18
+ `/editor` (theme tokens), `/components` (per-component aliases), and `/docs`
19
+ (the user guide) routes.
19
20
  - `src/system/styles/tokens.css` — your theme token vocabulary. The dev server
20
21
  writes edits here when you use the in-browser editor.
21
22
  - `src/styles/site.css` — themed page typography. Yours to edit.