Edit Colour Token

Name

Also known as (comma separated)

Brief definition Named colour value.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "tokenName", "type": "text", "label": "Token name", "default": "color-brand-primary" }, { "id": "value", "type": "color", "label": "Token value", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "usage", "type": "select", "label": "Applied as", "default": "background", "options": [ "background", "text", "border" ] }, { "id": "showCode", "type": "toggle", "label": "Show token declaration", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"token-card\">\n {{#if showCode}}<code class=\"token-card__code\">--{{tokenName}}: {{value}};</code>{{/if}}\n <div class=\"token-card__preview token-card__preview--{{usage}}\" style=\"--tv:{{value}};\">Aa</div>\n <p class=\"token-card__label\">{{tokenName}} &middot; applied as {{usage}}</p>\n</div>\n<style>\n.token-card { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; max-width: 260px; box-sizing: border-box; }\n.token-card__code { display: block; margin-bottom: 14px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; word-break: break-all; }\n.token-card__preview { width: 100%; height: 72px; border-radius: 10px; display: grid; place-items: center; font: 600 22px/1 system-ui, sans-serif; box-sizing: border-box; }\n.token-card__preview--background { background: var(--tv); color: #241430; }\n.token-card__preview--text { background: #ffffff; color: var(--tv); border: 1.5px solid #24143020; }\n.token-card__preview--border { background: #ffffff; color: #241430; border: 4px solid var(--tv); }\n.token-card__label { margin: 10px 0 0; font-size: 12px; color: #24143099; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl max-w-[260px] box-border\">\n {{#if showCode}}<code class=\"block mb-3.5 px-2.5 py-2 bg-[#24143012] rounded-md text-xs font-mono break-all\">--{{tokenName}}: {{value}};</code>{{/if}}\n <div class=\"token-tw token-tw--{{usage}} w-full h-[72px] rounded-[10px] grid place-items-center text-[22px] font-semibold box-border\" style=\"--tv:{{value}};\">Aa</div>\n <p class=\"mt-2.5 text-xs text-[#24143099]\">{{tokenName}} &middot; applied as {{usage}}</p>\n</div>\n<style>\n.token-tw--background { background: var(--tv); color: #241430; }\n.token-tw--text { background: #ffffff; color: var(--tv); border: 1.5px solid #24143020; }\n.token-tw--border { background: #ffffff; color: #241430; border: 4px solid var(--tv); }\n</style>", "react": "export function ColourToken({\n tokenName = \"{{tokenName}}\",\n value = \"{{value}}\",\n usage = \"{{usage}}\",\n showCode = {{showCode}},\n}) {\n const preview = {\n background: { background: value, color: \"#241430\" },\n text: { background: \"#ffffff\", color: value, border: \"1.5px solid #24143020\" },\n border: { background: \"#ffffff\", color: \"#241430\", border: `4px solid ${value}` },\n }[usage];\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, maxWidth: 260, boxSizing: \"border-box\" }}>\n {showCode && (\n <code style={{ display: \"block\", marginBottom: 14, padding: \"8px 10px\", background: \"#24143012\", borderRadius: 6, font: \"12px/1.4 ui-monospace, monospace\", wordBreak: \"break-all\" }}>\n --{tokenName}: {value};\n </code>\n )}\n <div style={{ width: \"100%\", height: 72, borderRadius: 10, display: \"grid\", placeItems: \"center\", fontSize: 22, fontWeight: 600, boxSizing: \"border-box\", ...preview }}>Aa</div>\n <p style={{ margin: \"10px 0 0\", fontSize: 12, color: \"#24143099\" }}>{tokenName} &middot; applied as {usage}</p>\n </div>\n );\n}" }