@motion-proto/live-tokens 0.33.1 → 0.35.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.
- package/.claude/skills/live-tokens-build-page/SKILL.md +3 -3
- package/.claude/skills/live-tokens-create-component/SKILL.md +3 -3
- package/CHANGELOG.md +59 -0
- package/README.md +8 -6
- package/bin/cli.mjs +19 -5
- package/bin/migrate-routes.mjs +179 -0
- package/dist-plugin/{chunk-MJO4T3CM.js → chunk-D77VD4Z6.js} +55 -0
- package/dist-plugin/index.cjs +27 -0
- package/dist-plugin/index.d.cts +1 -0
- package/dist-plugin/index.d.ts +1 -0
- package/dist-plugin/index.js +17 -1
- package/dist-plugin/tokensCssMigrations/index.cjs +59 -0
- package/dist-plugin/tokensCssMigrations/index.d.cts +55 -1
- package/dist-plugin/tokensCssMigrations/index.d.ts +55 -1
- package/dist-plugin/tokensCssMigrations/index.js +9 -1
- package/package.json +3 -2
- package/src/editor/core/cssVarSync.ts +3 -3
- package/src/editor/core/routing/ownedRoutes.ts +11 -0
- package/src/editor/core/routing/router.ts +2 -1
- package/src/editor/docs/Docs.svelte +3 -2
- package/src/editor/docs/content/creating-components.md +2 -2
- package/src/editor/docs/content/getting-started.md +2 -2
- package/src/editor/docs/content.generated.ts +2 -2
- package/src/editor/overlay/LiveEditorOverlay.svelte +8 -5
- package/src/editor/overlay/LiveTokensRouter.svelte +12 -9
- package/src/editor/pages/Editor.svelte +2 -1
- package/src/editor/ui/EditorViewSwitcher.svelte +7 -4
- package/template/README.md +5 -4
- package/template/src/App.svelte +4 -3
- package/template/src/pages/Home.svelte +2 -2
package/template/README.md
CHANGED
|
@@ -14,9 +14,10 @@ Open http://localhost:5173.
|
|
|
14
14
|
This project follows the package's [recommended layout](https://github.com/motionproto/live-tokens#recommended-project-layout): all editable state lives under `src/` and is committed, so `npm install` and upgrades never touch your styles.
|
|
15
15
|
|
|
16
16
|
- `src/pages/Home.svelte` — the starter page. Replace it with your own content.
|
|
17
|
-
- `src/App.svelte` — your routes. `<LiveTokensRouter>` adds
|
|
18
|
-
|
|
19
|
-
(
|
|
17
|
+
- `src/App.svelte` — your routes. `<LiveTokensRouter>` adds dev-only routes under
|
|
18
|
+
a reserved `/live-tokens/*` namespace (so they never collide with your pages):
|
|
19
|
+
`/live-tokens/editor` (theme tokens), `/live-tokens/components` (per-component
|
|
20
|
+
aliases), and `/live-tokens/docs` (the user guide).
|
|
20
21
|
- `src/system/styles/tokens.css` — your theme token vocabulary. The dev server
|
|
21
22
|
writes edits here when you use the in-browser editor.
|
|
22
23
|
- `src/styles/site.css` — themed page typography. Yours to edit.
|
|
@@ -24,7 +25,7 @@ This project follows the package's [recommended layout](https://github.com/motio
|
|
|
24
25
|
## Editing live
|
|
25
26
|
|
|
26
27
|
Run `npm run dev`, then click **Open Token Editor** on the home page (or visit
|
|
27
|
-
`/editor`). Changes persist to `src/system/styles/tokens.css` and the JSON under
|
|
28
|
+
`/live-tokens/editor`). Changes persist to `src/system/styles/tokens.css` and the JSON under
|
|
28
29
|
`src/live-tokens/data/`. The editor is dev-only — `npm run build` ships plain
|
|
29
30
|
CSS variables and the components you used, nothing else.
|
|
30
31
|
|
package/template/src/App.svelte
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { LiveTokensRouter } from '@motion-proto/live-tokens';
|
|
3
3
|
|
|
4
|
-
// <LiveTokensRouter> owns the dev-only /editor and
|
|
5
|
-
//
|
|
6
|
-
//
|
|
4
|
+
// <LiveTokensRouter> owns the dev-only /live-tokens/editor and
|
|
5
|
+
// /live-tokens/components routes (a reserved namespace, so they never collide
|
|
6
|
+
// with your pages). Declare your own pages here. Lazy imports keep each page's
|
|
7
|
+
// CSS side-effects out of the editor routes; omit `label` to keep a route
|
|
7
8
|
// reachable by URL but hidden from the overlay nav rail.
|
|
8
9
|
const pages = {
|
|
9
10
|
'/': {
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
</p>
|
|
23
23
|
{#if isDev}
|
|
24
24
|
<div class="actions">
|
|
25
|
-
<Button on:click={() => navigate('/editor')}>Open Token Editor</Button>
|
|
26
|
-
<Button variant="secondary" on:click={() => navigate('/components')}>Components</Button>
|
|
25
|
+
<Button on:click={() => navigate('/live-tokens/editor')}>Open Token Editor</Button>
|
|
26
|
+
<Button variant="secondary" on:click={() => navigate('/live-tokens/components')}>Components</Button>
|
|
27
27
|
</div>
|
|
28
28
|
{/if}
|
|
29
29
|
</Card>
|