Semantic Token

Token whose name describes its purpose.

html

<div class="semtok semtok--alert">
  <p class="semtok__chain"><code>color-danger</code> &rarr; <code>red-500</code> &rarr; <span class="semtok__swatch" style="background:#E8A020;"></span></p>
  <div class="semtok__use semtok__use--alert" style="border-left:4px solid #E8A020;">Something needs attention</div>
  <div class="semtok__use semtok__use--button" style="background:#E8A020;">Delete account</div>
  <div class="semtok__use semtok__use--border" style="border:2px solid #E8A020;">Invalid field</div>
</div>
<style>
.semtok { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.semtok__chain { margin: 0 0 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.semtok__chain code { background: #24143012; padding: 2px 6px; border-radius: 4px; font: 11px ui-monospace, monospace; }
.semtok__swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.semtok__use { display: none; padding: 10px 12px; border-radius: 8px; background: #ffffff; box-sizing: border-box; font-size: 13px; }
.semtok--alert .semtok__use--alert, .semtok--button .semtok__use--button, .semtok--border .semtok__use--border { display: block; }
.semtok__use--button { color: #FAF7F2; font-weight: 600; text-align: center; }
</style>

tailwind

<div class="semtoktw semtoktw--alert font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border">
  <p class="m-0 mb-3.5 flex items-center gap-1.5 flex-wrap"><code class="bg-[#24143012] px-1.5 py-0.5 rounded text-[11px] font-mono">color-danger</code> &rarr; <code class="bg-[#24143012] px-1.5 py-0.5 rounded text-[11px] font-mono">red-500</code> &rarr; <span class="inline-block w-4 h-4 rounded" style="background:#E8A020;"></span></p>
  <div class="semtoktw__use semtoktw__use--alert hidden py-2.5 px-3 rounded-lg bg-white box-border text-[13px]" style="border-left:4px solid #E8A020;">Something needs attention</div>
  <div class="semtoktw__use semtoktw__use--button hidden py-2.5 px-3 rounded-lg box-border text-[13px] text-[#FAF7F2] font-semibold text-center" style="background:#E8A020;">Delete account</div>
  <div class="semtoktw__use semtoktw__use--border hidden py-2.5 px-3 rounded-lg bg-white box-border text-[13px]" style="border:2px solid #E8A020;">Invalid field</div>
</div>
<style>
.semtoktw--alert .semtoktw__use--alert, .semtoktw--button .semtoktw__use--button, .semtoktw--border .semtoktw__use--border { display: block; }
</style>

react

export function SemanticToken({
  semanticName = "color-danger",
  rawToken = "red-500",
  value = "#E8A020",
  context = "alert",
}) {
  let use;
  if (context === "alert") use = <div style={{ padding: "10px 12px", borderRadius: 8, background: "#ffffff", boxSizing: "border-box", fontSize: 13, borderLeft: `4px solid ${value}` }}>Something needs attention</div>;
  else if (context === "button") use = <div style={{ padding: "10px 12px", borderRadius: 8, boxSizing: "border-box", fontSize: 13, background: value, color: "#FAF7F2", fontWeight: 600, textAlign: "center" }}>Delete account</div>;
  else use = <div style={{ padding: "10px 12px", borderRadius: 8, background: "#ffffff", boxSizing: "border-box", fontSize: 13, border: `2px solid ${value}` }}>Invalid field</div>;
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 14px", display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
        <code style={{ background: "#24143012", padding: "2px 6px", borderRadius: 4, fontSize: 11 }}>{semanticName}</code> &rarr;
        <code style={{ background: "#24143012", padding: "2px 6px", borderRadius: 4, fontSize: 11 }}>{rawToken}</code> &rarr;
        <span style={{ display: "inline-block", width: 16, height: 16, borderRadius: 4, background: value }} />
      </p>
      {use}
    </div>
  );
}