Edit Radius Token

Name

Also known as (comma separated)

Brief definition Named corner-radius value.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "name", "type": "text", "label": "Token name", "default": "radius-md" }, { "id": "value", "type": "number", "label": "Radius value (px)", "default": 12, "min": 0, "max": 48, "step": 2 }, { "id": "shape", "type": "select", "label": "Applied to", "default": "box", "options": [ "box", "button", "avatar" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rtok\">\n <code class=\"rtok__code\">--{{name}}: {{value}}px;</code>\n <div class=\"rtok__row\">\n <span class=\"rtok__shape rtok__shape--box\" style=\"border-radius:{{value}}px;background:{{accent}};\"></span>\n <span class=\"rtok__shape rtok__shape--button\" style=\"border-radius:{{value}}px;background:{{accent}};\">Button</span>\n <span class=\"rtok__shape rtok__shape--avatar\" style=\"border-radius:{{value}}px;background:{{accent}};\">A</span>\n </div>\n <p class=\"rtok__hint\">shown on: {{shape}}</p>\n</div>\n<style>\n.rtok { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.rtok__code { display: block; margin-bottom: 14px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; }\n.rtok__row { display: flex; align-items: center; gap: 12px; height: 64px; }\n.rtok__shape { display: none; box-sizing: border-box; }\n.rtok__shape--box { width: 56px; height: 56px; }\n.rtok__shape--button { padding: 12px 18px; font: 600 13px system-ui, sans-serif; color: #241430; }\n.rtok__shape--avatar { width: 48px; height: 48px; display: none; align-items: center; justify-content: center; font-weight: 700; }\n.rtok--x{}\n.rtok__hint { margin: 10px 0 0; font-size: 11px; color: #24143099; }\n</style>", "tailwind": "<div class=\"rtoktw rtoktw--{{shape}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border\">\n <code class=\"block mb-3.5 px-2.5 py-2 bg-[#24143012] rounded-md text-xs font-mono\">--{{name}}: {{value}}px;</code>\n <div class=\"flex items-center gap-3 h-16\">\n <span class=\"rtoktw__shape rtoktw__shape--box hidden w-14 h-14 box-border\" style=\"border-radius:{{value}}px;background:{{accent}};\"></span>\n <span class=\"rtoktw__shape rtoktw__shape--button hidden px-4.5 py-3 font-semibold text-[13px] box-border\" style=\"border-radius:{{value}}px;background:{{accent}};\">Button</span>\n <span class=\"rtoktw__shape rtoktw__shape--avatar hidden w-12 h-12 items-center justify-center font-bold box-border\" style=\"border-radius:{{value}}px;background:{{accent}};\">A</span>\n </div>\n <p class=\"mt-2.5 text-[11px] text-[#24143099]\">shown on: {{shape}}</p>\n</div>\n<style>\n.rtoktw--box .rtoktw__shape--box, .rtoktw--button .rtoktw__shape--button, .rtoktw--avatar .rtoktw__shape--avatar { display: flex; }\n</style>", "react": "export function RadiusToken({\n name = \"{{name}}\",\n value = {{value}},\n shape = \"{{shape}}\",\n accent = \"{{accent}}\",\n}) {\n let el;\n if (shape === \"box\") el = <span style={{ width: 56, height: 56, borderRadius: value, background: accent, boxSizing: \"border-box\" }} />;\n else if (shape === \"button\") el = <span style={{ padding: \"12px 18px\", borderRadius: value, background: accent, fontWeight: 600, fontSize: 13, boxSizing: \"border-box\" }}>Button</span>;\n else el = <span style={{ width: 48, height: 48, borderRadius: value, background: accent, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 700, boxSizing: \"border-box\" }}>A</span>;\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <code style={{ display: \"block\", marginBottom: 14, padding: \"8px 10px\", background: \"#24143012\", borderRadius: 6, font: \"12px/1.4 ui-monospace, monospace\" }}>--{name}: {value}px;</code>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, height: 64 }}>{el}</div>\n <p style={{ margin: \"10px 0 0\", fontSize: 11, color: \"#24143099\" }}>shown on: {shape}</p>\n </div>\n );\n}" }