Edit Spacing Token

Name

Also known as (comma separated)

Brief definition Named spacing value.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "name", "type": "text", "label": "Token name", "default": "space-3" }, { "id": "value", "type": "number", "label": "Value (px)", "default": 16, "min": 4, "max": 48, "step": 4 }, { "id": "context", "type": "select", "label": "Used as", "default": "stack", "options": [ "stack", "inline", "inset" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"sptok sptok--{{context}}\">\n <code class=\"sptok__code\">--{{name}}: {{value}}px;</code>\n <div class=\"sptok__demo sptok__demo--stack\" style=\"gap:{{value}}px;\"><span style=\"background:{{accent}};\"></span><span style=\"background:{{accent}};\"></span></div>\n <div class=\"sptok__demo sptok__demo--inline\" style=\"gap:{{value}}px;\"><span style=\"background:{{accent}};\"></span><span style=\"background:{{accent}};\"></span></div>\n <div class=\"sptok__demo sptok__demo--inset\" style=\"padding:{{value}}px;background:{{accent}};\"><span class=\"sptok__inner\"></span></div>\n</div>\n<style>\n.sptok { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 260px; box-sizing: border-box; }\n.sptok__code { display: block; margin-bottom: 16px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; }\n.sptok__demo { display: none; box-sizing: border-box; }\n.sptok__demo--stack { flex-direction: column; align-items: center; }\n.sptok__demo--stack span, .sptok__demo--inline span { display: block; width: 60px; height: 24px; border-radius: 5px; }\n.sptok--stack .sptok__demo--stack, .sptok--inline .sptok__demo--inline { display: flex; }\n.sptok--inset .sptok__demo--inset { display: block; border-radius: 10px; width: fit-content; }\n.sptok__inner { display: block; width: 60px; height: 40px; background: #ffffff; border-radius: 6px; }\n</style>", "tailwind": "<div class=\"sptoktw sptoktw--{{context}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[260px] box-border\">\n <code class=\"block mb-4 px-2.5 py-2 bg-[#24143012] rounded-md text-xs font-mono\">--{{name}}: {{value}}px;</code>\n <div class=\"sptoktw__demo sptoktw__demo--stack hidden flex-col items-center\" style=\"gap:{{value}}px;\"><span class=\"block w-[60px] h-6 rounded\" style=\"background:{{accent}};\"></span><span class=\"block w-[60px] h-6 rounded\" style=\"background:{{accent}};\"></span></div>\n <div class=\"sptoktw__demo sptoktw__demo--inline hidden\" style=\"gap:{{value}}px;\"><span class=\"block w-[60px] h-6 rounded\" style=\"background:{{accent}};\"></span><span class=\"block w-[60px] h-6 rounded\" style=\"background:{{accent}};\"></span></div>\n <div class=\"sptoktw__demo sptoktw__demo--inset hidden rounded-[10px] w-fit\" style=\"padding:{{value}}px;background:{{accent}};\"><span class=\"block w-[60px] h-10 bg-white rounded-md\"></span></div>\n</div>\n<style>\n.sptoktw--stack .sptoktw__demo--stack, .sptoktw--inline .sptoktw__demo--inline { display: flex; }\n.sptoktw--inset .sptoktw__demo--inset { display: block; }\n</style>", "react": "export function SpacingToken({\n name = \"{{name}}\",\n value = {{value}},\n context = \"{{context}}\",\n accent = \"{{accent}}\",\n}) {\n const box = { display: \"block\", width: 60, height: 24, borderRadius: 5, background: accent };\n let demo;\n if (context === \"stack\") demo = <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: value }}><span style={box} /><span style={box} /></div>;\n else if (context === \"inline\") demo = <div style={{ display: \"flex\", gap: value }}><span style={box} /><span style={box} /></div>;\n else demo = <div style={{ display: \"block\", width: \"fit-content\", borderRadius: 10, padding: value, background: accent }}><span style={{ display: \"block\", width: 60, height: 40, background: \"#ffffff\", borderRadius: 6 }} /></div>;\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 260, boxSizing: \"border-box\" }}>\n <code style={{ display: \"block\", marginBottom: 16, padding: \"8px 10px\", background: \"#24143012\", borderRadius: 6, font: \"12px/1.4 ui-monospace, monospace\" }}>--{name}: {value}px;</code>\n {demo}\n </div>\n );\n}" }