Export · #426
Sandbox files, not a magic link
The export is 3 real files — sandbox.config.json, package.json, index.html — that make a working static sandbox. Paste them into a new sandbox and the tokens run. The usual one-click version is a link with compressed parameters, and the note below explains why this build ships files instead.
Opening it
- 1. Create a new static sandbox.
- 2. Replace the files with the 3 below, keeping their names.
- 3. The preview renders from index.html; edit a token and it follows.
Why there is no one-click link
- A define link encodes the whole project into the URL with the lz-string compression a third party maintains. This build cannot fetch that service to check its own output, so it will not print a link that might open nothing.
- An unverified link is worse than no link here: it looks like the feature works until the moment a reader clicks it. The file set works the moment it is pasted.
- If the compressor were vendored in, the page would need the same scrutiny as the cache rules — one module, one output, printed where it is documented.
The bundle (1.6 KB)
sandbox.config.json · 0.0 KB
{
"template": "static"
}
package.json · 0.1 KB
{
"name": "motif-single-file",
"version": "0.0.0",
"private": true,
"description": "Motif UI tokens as a static page."
}
index.html · 1.1 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Motif tokens in a sandbox</title>
<style>
:root {
--color-bg: #06070b;
--color-panel: #0b0d14;
--color-raised: #10131d;
--color-edge: rgba(255, 255, 255, 0.08);
--color-edge-strong: rgba(255, 255, 255, 0.16);
--color-ink: #edf0f7;
--color-ink-dim: #9aa3b5;
--color-ink-faint: #747b87;
--color-accent: #8b5cf6;
--color-accent-2: #22d3ee;
--color-accent-3: #f472b6;
--color-mint: #34d399;
--color-amber: #fbbf24;
--color-danger: #f87171;
--radius-lg: 24px;
}
body { margin: 0; padding: 3rem 1.25rem; background: var(--color-bg); color: var(--color-ink);
font-family: ui-sans-serif, system-ui, sans-serif; }
.card { max-width: 38rem; margin: 0 auto; padding: 1.5rem; border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius-lg); background: var(--color-panel); }
p { color: var(--color-ink-dim); }
</style>
</head>
<body>
<div class="card">
<h1>Motif tokens, running in a sandbox</h1>
<p>14 colour tokens, inlined. Edit any value and the page follows.</p>
</div>
</body>
</html>