Edit CSS Variable

Name

Also known as (comma separated)

Brief definition Reusable CSS custom property.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "accent", "type": "color", "label": "--accent value", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "size", "type": "number", "label": "Swatch size", "default": 56, "min": 32, "max": 88, "step": 4 }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 28, "step": 2 }, { "id": "bound", "type": "toggle", "label": "Consumers read var(--accent)", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"cv-wrap\" style=\"--accent:{{accent}};\" role=\"img\" aria-label=\"Three elements sharing one custom property; toggling the binding disconnects them\">\n <pre class=\"cv-code\">:root { --accent: {{accent}}; }</pre>\n <div class=\"cv-row\">\n <div class=\"cv-swatch {{#if bound}}cv-swatch--live{{/if}}{{#unless bound}}cv-swatch--static{{/unless}}\" style=\"width:{{size}}px;height:{{size}}px;border-radius:{{radius}}px;\"></div>\n <div class=\"cv-ring {{#if bound}}cv-ring--live{{/if}}{{#unless bound}}cv-ring--static{{/unless}}\" style=\"width:{{size}}px;height:{{size}}px;border-radius:{{radius}}px;\"></div>\n <button type=\"button\" class=\"cv-btn {{#if bound}}cv-btn--live{{/if}}{{#unless bound}}cv-btn--static{{/unless}}\">Button</button>\n </div>\n <p class=\"cv-caption\">{{#if bound}}All three read var(--accent) — one edit updates every consumer at once.{{/if}}{{#unless bound}}Disconnected — each would need its own edit to match.{{/unless}}</p>\n</div>\n<style>\n.cv-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.cv-code { background: #241430; color: #FAF7F2; padding: 12px; border-radius: 8px; font: 12px/1.6 ui-monospace, monospace; margin: 0 0 14px; }\n.cv-row { display: flex; align-items: center; gap: 14px; }\n.cv-swatch--live { background: var(--accent); }\n.cv-swatch--static { background: #cccccc; }\n.cv-ring { border: 4px solid; background: #FAF7F2; box-sizing: border-box; }\n.cv-ring--live { border-color: var(--accent); }\n.cv-ring--static { border-color: #cccccc; }\n.cv-btn { padding: 8px 14px; border-radius: 8px; border: 1.5px solid; background: transparent; font: 600 13px system-ui, sans-serif; }\n.cv-btn--live { color: var(--accent); border-color: var(--accent); }\n.cv-btn--static { color: #999999; border-color: #cccccc; }\n.cv-caption { margin: 14px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[320px]\" style=\"--accent:{{accent}};\" role=\"img\" aria-label=\"Three elements sharing one custom property; toggling the binding disconnects them\">\n <pre class=\"bg-[#241430] text-[#FAF7F2] p-3 rounded-lg text-xs leading-relaxed m-0 mb-3.5\">:root { --accent: {{accent}}; }</pre>\n <div class=\"flex items-center gap-3.5\">\n <div class=\"rounded-[var(--r)]\" style=\"width:{{size}}px;height:{{size}}px;border-radius:{{radius}}px;background:{{#if bound}}var(--accent){{/if}}{{#unless bound}}#cccccc{{/unless}};\"></div>\n <div class=\"border-4 box-border bg-[#FAF7F2]\" style=\"width:{{size}}px;height:{{size}}px;border-radius:{{radius}}px;border-color:{{#if bound}}var(--accent){{/if}}{{#unless bound}}#cccccc{{/unless}};\"></div>\n <button type=\"button\" class=\"px-3.5 py-2 rounded-lg border-[1.5px] bg-transparent font-semibold text-sm\" style=\"color:{{#if bound}}var(--accent){{/if}}{{#unless bound}}#999999{{/unless}};border-color:{{#if bound}}var(--accent){{/if}}{{#unless bound}}#cccccc{{/unless}};\">Button</button>\n </div>\n <p class=\"mt-3.5 text-xs text-[#241430]/80\">{{#if bound}}All three read var(--accent) — one edit updates every consumer at once.{{/if}}{{#unless bound}}Disconnected — each would need its own edit to match.{{/unless}}</p>\n</div>", "react": "export function CssVariable({\n accent = \"{{accent}}\",\n size = {{size}},\n radius = {{radius}},\n bound = {{bound}},\n}) {\n const color = bound ? accent : \"#cccccc\";\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320, \"--accent\": accent }}\n role=\"img\" aria-label=\"Three elements sharing one custom property; toggling the binding disconnects them\">\n <pre style={{ background: \"#241430\", color: \"#FAF7F2\", padding: 12, borderRadius: 8, font: \"12px/1.6 ui-monospace, monospace\", margin: \"0 0 14px\" }}>\n{`:root { --accent: ${accent}; }`}\n </pre>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 14 }}>\n <div style={{ width: size, height: size, borderRadius: radius, background: color }} />\n <div style={{ width: size, height: size, borderRadius: radius, border: `4px solid ${color}`, background: \"#FAF7F2\", boxSizing: \"border-box\" }} />\n <button type=\"button\" style={{ padding: \"8px 14px\", borderRadius: 8, border: `1.5px solid ${bound ? accent : \"#cccccc\"}`,\n background: \"transparent\", color: bound ? accent : \"#999999\", fontWeight: 600, fontSize: 13 }}>\n Button\n </button>\n </div>\n <p style={{ marginTop: 14, fontSize: 12, color: \"#241430cc\" }}>\n {bound ? \"All three read var(--accent) — one edit updates every consumer at once.\" : \"Disconnected — each would need its own edit to match.\"}\n </p>\n </div>\n );\n}" }