Edit Accent Colour

Name

Also known as (comma separated)

Brief definition Highlight colour for important interactions.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2" ] }, { "id": "checked", "type": "toggle", "label": "Checkbox checked", "default": true }, { "id": "rangeValue", "type": "number", "label": "Slider value", "default": 60, "min": 0, "max": 100, "step": 5 }, { "id": "label", "type": "text", "label": "Checkbox label", "default": "Accept terms" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ac-wrap\">\n <label class=\"ac-row\"><input type=\"checkbox\" class=\"ac-check\" style=\"accent-color:{{accent}};\" {{#if checked}}checked{{/if}}> {{label}}</label>\n <input type=\"range\" class=\"ac-range\" min=\"0\" max=\"100\" value=\"{{rangeValue}}\" style=\"accent-color:{{accent}};\" aria-label=\"Volume\">\n <button type=\"button\" class=\"ac-btn\" style=\"background:{{accent}};\">Primary action</button>\n <p class=\"ac-caption\">accent-color: {{accent}} &mdash; the browser tints native controls without extra markup</p>\n</div>\n<style>\n.ac-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 280px; }\n.ac-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }\n.ac-check { width: 18px; height: 18px; }\n.ac-range { width: 100%; display: block; margin-bottom: 14px; }\n.ac-btn { border: none; padding: 10px 16px; border-radius: 8px; color: #241430; font: 700 13px system-ui, sans-serif; cursor: pointer; }\n.ac-caption { margin: 4px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[280px]\">\n <label class=\"flex items-center gap-2 mb-3.5\"><input type=\"checkbox\" class=\"w-[18px] h-[18px]\" style=\"accent-color:{{accent}};\" {{#if checked}}checked{{/if}}> {{label}}</label>\n <input type=\"range\" class=\"w-full block mb-3.5\" min=\"0\" max=\"100\" value=\"{{rangeValue}}\" style=\"accent-color:{{accent}};\" aria-label=\"Volume\">\n <button type=\"button\" class=\"border-none px-4 py-2.5 rounded-lg text-[#241430] font-bold text-sm\" style=\"background:{{accent}};\">Primary action</button>\n <p class=\"mt-1 text-xs text-[#241430]/80\">accent-color: {{accent}} &mdash; the browser tints native controls without extra markup</p>\n</div>", "react": "export function AccentColour({\n accent = \"{{accent}}\",\n checked = {{checked}},\n rangeValue = {{rangeValue}},\n label = \"{{label}}\",\n}) {\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", width: 280 }}>\n <label style={{ display: \"flex\", alignItems: \"center\", gap: 8, marginBottom: 14 }}>\n <input type=\"checkbox\" style={{ accentColor: accent, width: 18, height: 18 }} checked={checked} readOnly /> {label}\n </label>\n <input type=\"range\" min={0} max={100} value={rangeValue} readOnly style={{ accentColor: accent, width: \"100%\", display: \"block\", marginBottom: 14 }} aria-label=\"Volume\" />\n <button type=\"button\" style={{ background: accent, border: \"none\", padding: \"10px 16px\", borderRadius: 8, color: \"#241430\", fontWeight: 700, fontSize: 13 }}>\n Primary action\n </button>\n <p style={{ marginTop: 4, fontSize: 12, color: \"#241430cc\" }}>accent-color: {accent} &mdash; the browser tints native controls without extra markup</p>\n </div>\n );\n}" }