@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.
- package/.claude/skills/live-tokens-build-page/SKILL.md +6 -4
- package/README.md +28 -3
- package/dist-plugin/index.cjs +120 -115
- package/dist-plugin/index.js +120 -115
- package/package.json +14 -5
- package/src/editor/core/store/editorPersistence.ts +23 -1
- package/src/editor/docs/CodeBlock.svelte +92 -0
- package/src/editor/docs/Docs.svelte +658 -0
- package/src/editor/docs/Docs.svelte.d.ts +2 -0
- package/src/editor/docs/chapters.ts +44 -0
- package/src/editor/docs/content/01-overview.md +31 -0
- package/src/editor/docs/content/creating-components.md +40 -0
- package/src/editor/docs/content/editing-tokens.md +74 -0
- package/src/editor/docs/content/getting-started.md +67 -0
- package/src/editor/docs/content/themes-workflow.md +60 -0
- package/src/editor/overlay/LiveTokensRouter.svelte +71 -13
- package/src/editor/pages/ComponentEditorPage.svelte +0 -11
- package/src/editor/ui/ManifestFileManager.svelte +15 -5
- package/src/editor/ui/ThemeFileManager.svelte +6 -2
- package/src/live-tokens/data/manifests/default.json +35 -0
- package/src/live-tokens/data/themes/default.json +2295 -0
- package/src/live-tokens/data/tokens.generated.css +9 -9
- package/src/system/components/CodeSnippet.svelte +4 -0
- package/src/system/components/SideNavigation.svelte +13 -13
- package/template/README.md +2 -1
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import hljs from 'highlight.js/lib/core';
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
lang?: string;
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
let { lang, text }: Props = $props();
|
|
9
|
+
|
|
10
|
+
function escapeHtml(s: string): string {
|
|
11
|
+
return s
|
|
12
|
+
.replace(/&/g, '&')
|
|
13
|
+
.replace(/</g, '<')
|
|
14
|
+
.replace(/>/g, '>');
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
let resolvedLang = $derived(lang && hljs.getLanguage(lang) ? lang : null);
|
|
18
|
+
let highlighted = $derived.by(() => {
|
|
19
|
+
if (!resolvedLang) return escapeHtml(text);
|
|
20
|
+
try {
|
|
21
|
+
return hljs.highlight(text, { language: resolvedLang, ignoreIllegals: true }).value;
|
|
22
|
+
} catch {
|
|
23
|
+
return escapeHtml(text);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<div class="code-block">
|
|
29
|
+
<pre><code class="hljs">{@html highlighted}</code></pre>
|
|
30
|
+
{#if lang}
|
|
31
|
+
<span class="lang-tag">{lang}</span>
|
|
32
|
+
{/if}
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<style>
|
|
36
|
+
.code-block {
|
|
37
|
+
position: relative;
|
|
38
|
+
margin: 0 0 var(--space-20, 1.25rem);
|
|
39
|
+
background: var(--surface-neutral-lower, #162027);
|
|
40
|
+
border: var(--border-width-1, 1px) solid var(--border-neutral-subtle, #3a4146);
|
|
41
|
+
border-radius: var(--radius-xl, 0.5rem);
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
pre {
|
|
46
|
+
margin: 0;
|
|
47
|
+
padding: var(--space-16, 1rem) var(--space-20, 1.25rem);
|
|
48
|
+
overflow-x: auto;
|
|
49
|
+
font-size: var(--font-size-sm, 0.875rem);
|
|
50
|
+
line-height: var(--line-height-md, 1.6);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
pre code {
|
|
54
|
+
font-family: var(--font-mono, ui-monospace, monospace);
|
|
55
|
+
background: none;
|
|
56
|
+
color: var(--text-primary, #fff);
|
|
57
|
+
padding: 0;
|
|
58
|
+
border: 0;
|
|
59
|
+
white-space: pre;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.lang-tag {
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 0;
|
|
65
|
+
right: 0;
|
|
66
|
+
padding: var(--space-4, 0.25rem) var(--space-12, 0.75rem);
|
|
67
|
+
font-family: var(--font-mono, ui-monospace, monospace);
|
|
68
|
+
font-size: var(--font-size-xs, 0.75rem);
|
|
69
|
+
color: var(--text-tertiary, #7e8285);
|
|
70
|
+
text-transform: uppercase;
|
|
71
|
+
letter-spacing: var(--letter-spacing-wider, 0.06em);
|
|
72
|
+
background: color-mix(in srgb, var(--surface-neutral-lowest, #040c13) 60%, transparent);
|
|
73
|
+
border-left: var(--border-width-1, 1px) solid var(--border-neutral-faint, #1c2327);
|
|
74
|
+
border-bottom: var(--border-width-1, 1px) solid var(--border-neutral-faint, #1c2327);
|
|
75
|
+
border-radius: 0 var(--radius-xl, 0.5rem) 0 var(--radius-md, 0.25rem);
|
|
76
|
+
pointer-events: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* highlight.js token overrides keyed to design-system tokens */
|
|
80
|
+
pre code :global(.hljs-keyword),
|
|
81
|
+
pre code :global(.hljs-built_in) { color: var(--text-brand, #ff75b1); }
|
|
82
|
+
pre code :global(.hljs-string) { color: var(--text-accent, #009d9a); }
|
|
83
|
+
pre code :global(.hljs-comment) { color: var(--text-tertiary, #7e8285); font-style: italic; }
|
|
84
|
+
pre code :global(.hljs-number) { color: var(--text-brand-secondary, #df2d88); }
|
|
85
|
+
pre code :global(.hljs-title),
|
|
86
|
+
pre code :global(.hljs-title.function_),
|
|
87
|
+
pre code :global(.hljs-attr) { color: var(--text-secondary, #c2cacf); }
|
|
88
|
+
pre code :global(.hljs-name),
|
|
89
|
+
pre code :global(.hljs-variable) { color: var(--text-primary, #fff); }
|
|
90
|
+
pre code :global(.hljs-tag),
|
|
91
|
+
pre code :global(.hljs-meta) { color: var(--text-accent-secondary, #1f7673); }
|
|
92
|
+
</style>
|