Edit Theming

Name

Also known as (comma separated)

Brief definition Applying a visual configuration across a system.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "brandColor", "type": "color", "label": "Brand colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 24, "step": 2 }, { "id": "emphasis", "type": "select", "label": "Text weight", "default": "medium", "options": [ "normal", "medium", "bold" ] }, { "id": "label", "type": "text", "label": "Button label", "default": "Get started" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"theming theming--{{emphasis}}\">\n <p class=\"theming__hint\">One theme, three components</p>\n <div class=\"theming__row\">\n <button type=\"button\" class=\"theming__button\" style=\"background:{{brandColor}};border-radius:{{radius}}px;\">{{label}}</button>\n <span class=\"theming__badge\" style=\"border-color:{{brandColor}};border-radius:{{radius}}px;\">New</span>\n <a class=\"theming__link\" href=\"#\" style=\"color:{{brandColor}};\">Learn more</a>\n </div>\n</div>\n<style>\n.theming { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.theming__hint { margin: 0 0 14px; font-size: 11px; color: #24143099; }\n.theming__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }\n.theming__button { border: none; padding: 10px 18px; color: #241430; cursor: pointer; }\n.theming__badge { display: inline-block; padding: 4px 10px; border: 2px solid; font-size: 12px; }\n.theming__link { text-decoration: underline; }\n.theming--normal .theming__button, .theming--normal .theming__badge, .theming--normal .theming__link { font-weight: 400; }\n.theming--medium .theming__button, .theming--medium .theming__badge, .theming--medium .theming__link { font-weight: 600; }\n.theming--bold .theming__button, .theming--bold .theming__badge, .theming--bold .theming__link { font-weight: 800; }\n</style>", "tailwind": "<div class=\"themingtw themingtw--{{emphasis}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-3.5 text-[11px] text-[#24143099]\">One theme, three components</p>\n <div class=\"flex items-center gap-3.5 flex-wrap\">\n <button type=\"button\" class=\"border-none py-2.5 px-4.5 text-[#241430] cursor-pointer\" style=\"background:{{brandColor}};border-radius:{{radius}}px;\">{{label}}</button>\n <span class=\"inline-block py-1 px-2.5 border-2 text-xs\" style=\"border-color:{{brandColor}};border-radius:{{radius}}px;\">New</span>\n <a class=\"underline\" href=\"#\" style=\"color:{{brandColor}};\">Learn more</a>\n </div>\n</div>\n<style>\n.themingtw--normal button, .themingtw--normal span, .themingtw--normal a { font-weight: 400; }\n.themingtw--medium button, .themingtw--medium span, .themingtw--medium a { font-weight: 600; }\n.themingtw--bold button, .themingtw--bold span, .themingtw--bold a { font-weight: 800; }\n</style>", "react": "export function Theming({\n brandColor = \"{{brandColor}}\",\n radius = {{radius}},\n emphasis = \"{{emphasis}}\",\n label = \"{{label}}\",\n}) {\n const weight = { normal: 400, medium: 600, bold: 800 }[emphasis];\n return (\n <div style={{ font: \"14px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 14px\", fontSize: 11, color: \"#24143099\" }}>One theme, three components</p>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 14, flexWrap: \"wrap\" }}>\n <button type=\"button\" style={{ border: \"none\", padding: \"10px 18px\", color: \"#241430\", cursor: \"pointer\", background: brandColor, borderRadius: radius, fontWeight: weight }}>{label}</button>\n <span style={{ display: \"inline-block\", padding: \"4px 10px\", border: `2px solid ${brandColor}`, fontSize: 12, borderRadius: radius, fontWeight: weight }}>New</span>\n <a href=\"#\" style={{ textDecoration: \"underline\", color: brandColor, fontWeight: weight }}>Learn more</a>\n </div>\n </div>\n );\n}" }