Edit Colour

Name

Also known as (comma separated)

Brief definition Visual colour value.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "colorValue", "type": "color", "label": "Colour value", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020" ] }, { "id": "onBackground", "type": "toggle", "label": "Apply as background", "default": true }, { "id": "onText", "type": "toggle", "label": "Apply as text colour", "default": true }, { "id": "onBorder", "type": "toggle", "label": "Apply as border colour", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"co-wrap\">\n <div class=\"co-row\">\n <div class=\"co-chip\" style=\"background:{{#if onBackground}}{{colorValue}}{{/if}}{{#unless onBackground}}#e5e5e5{{/unless}};\">bg</div>\n <div class=\"co-chip\" style=\"color:{{#if onText}}{{colorValue}}{{/if}}{{#unless onText}}#999999{{/unless}};\">text</div>\n <div class=\"co-chip\" style=\"border-color:{{#if onBorder}}{{colorValue}}{{/if}}{{#unless onBorder}}#cccccc{{/unless}};\">border</div>\n </div>\n <p class=\"co-caption\">One value, {{colorValue}}, applied wherever a colour property accepts it.</p>\n</div>\n<style>\n.co-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.co-row { display: flex; gap: 10px; }\n.co-chip { flex: 1; height: 64px; border-radius: 8px; border: 3px solid transparent; background: #FAF7F2; display: flex; align-items: center; justify-content: center; font-weight: 700; box-sizing: border-box; }\n.co-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[300px]\">\n <div class=\"flex gap-2.5\">\n <div class=\"flex-1 h-16 rounded-lg border-[3px] border-transparent flex items-center justify-center font-bold box-border\" style=\"background:{{#if onBackground}}{{colorValue}}{{/if}}{{#unless onBackground}}#e5e5e5{{/unless}};\">bg</div>\n <div class=\"flex-1 h-16 rounded-lg border-[3px] border-transparent bg-[#FAF7F2] flex items-center justify-center font-bold box-border\" style=\"color:{{#if onText}}{{colorValue}}{{/if}}{{#unless onText}}#999999{{/unless}};\">text</div>\n <div class=\"flex-1 h-16 rounded-lg bg-[#FAF7F2] flex items-center justify-center font-bold box-border border-[3px]\" style=\"border-color:{{#if onBorder}}{{colorValue}}{{/if}}{{#unless onBorder}}#cccccc{{/unless}};\">border</div>\n </div>\n <p class=\"mt-3 text-xs text-[#241430]/80\">One value, {{colorValue}}, applied wherever a colour property accepts it.</p>\n</div>", "react": "export function ColourDemo({\n colorValue = \"{{colorValue}}\",\n onBackground = {{onBackground}},\n onText = {{onText}},\n onBorder = {{onBorder}},\n}) {\n const chip = { flex: 1, height: 64, borderRadius: 8, border: \"3px solid transparent\", background: \"#FAF7F2\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 700, boxSizing: \"border-box\" };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}>\n <div style={{ display: \"flex\", gap: 10 }}>\n <div style={{ ...chip, background: onBackground ? colorValue : \"#e5e5e5\" }}>bg</div>\n <div style={{ ...chip, color: onText ? colorValue : \"#999999\" }}>text</div>\n <div style={{ ...chip, borderColor: onBorder ? colorValue : \"#cccccc\" }}>border</div>\n </div>\n <p style={{ marginTop: 12, fontSize: 12, color: \"#241430cc\" }}>One value, {colorValue}, applied wherever a colour property accepts it.</p>\n </div>\n );\n}" }