Radius Token

Named corner-radius value.

--radius-md: 12px;
Button A

shown on: box

html

<div class="rtok">
  <code class="rtok__code">--radius-md: 12px;</code>
  <div class="rtok__row">
    <span class="rtok__shape rtok__shape--box" style="border-radius:12px;background:#F5C2E0;"></span>
    <span class="rtok__shape rtok__shape--button" style="border-radius:12px;background:#F5C2E0;">Button</span>
    <span class="rtok__shape rtok__shape--avatar" style="border-radius:12px;background:#F5C2E0;">A</span>
  </div>
  <p class="rtok__hint">shown on: box</p>
</div>
<style>
.rtok { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.rtok__code { display: block; margin-bottom: 14px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; }
.rtok__row { display: flex; align-items: center; gap: 12px; height: 64px; }
.rtok__shape { display: none; box-sizing: border-box; }
.rtok__shape--box { width: 56px; height: 56px; }
.rtok__shape--button { padding: 12px 18px; font: 600 13px system-ui, sans-serif; color: #241430; }
.rtok__shape--avatar { width: 48px; height: 48px; display: none; align-items: center; justify-content: center; font-weight: 700; }
.rtok--x{}
.rtok__hint { margin: 10px 0 0; font-size: 11px; color: #24143099; }
</style>

tailwind

<div class="rtoktw rtoktw--box font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border">
  <code class="block mb-3.5 px-2.5 py-2 bg-[#24143012] rounded-md text-xs font-mono">--radius-md: 12px;</code>
  <div class="flex items-center gap-3 h-16">
    <span class="rtoktw__shape rtoktw__shape--box hidden w-14 h-14 box-border" style="border-radius:12px;background:#F5C2E0;"></span>
    <span class="rtoktw__shape rtoktw__shape--button hidden px-4.5 py-3 font-semibold text-[13px] box-border" style="border-radius:12px;background:#F5C2E0;">Button</span>
    <span class="rtoktw__shape rtoktw__shape--avatar hidden w-12 h-12 items-center justify-center font-bold box-border" style="border-radius:12px;background:#F5C2E0;">A</span>
  </div>
  <p class="mt-2.5 text-[11px] text-[#24143099]">shown on: box</p>
</div>
<style>
.rtoktw--box .rtoktw__shape--box, .rtoktw--button .rtoktw__shape--button, .rtoktw--avatar .rtoktw__shape--avatar { display: flex; }
</style>

react

export function RadiusToken({
  name = "radius-md",
  value = 12,
  shape = "box",
  accent = "#F5C2E0",
}) {
  let el;
  if (shape === "box") el = <span style={{ width: 56, height: 56, borderRadius: value, background: accent, boxSizing: "border-box" }} />;
  else if (shape === "button") el = <span style={{ padding: "12px 18px", borderRadius: value, background: accent, fontWeight: 600, fontSize: 13, boxSizing: "border-box" }}>Button</span>;
  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>;
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <code style={{ display: "block", marginBottom: 14, padding: "8px 10px", background: "#24143012", borderRadius: 6, font: "12px/1.4 ui-monospace, monospace" }}>--{name}: {value}px;</code>
      <div style={{ display: "flex", alignItems: "center", gap: 12, height: 64 }}>{el}</div>
      <p style={{ margin: "10px 0 0", fontSize: 11, color: "#24143099" }}>shown on: {shape}</p>
    </div>
  );
}