CSS Variable

Reusable CSS custom property.

:root { --accent: #A8E6C1; }

html

<div class="cv-wrap" style="--accent:#A8E6C1;" role="img" aria-label="Three elements sharing one custom property; toggling the binding disconnects them">
  <pre class="cv-code">:root { --accent: #A8E6C1; }</pre>
  <div class="cv-row">
    <div class="cv-swatch cv-swatch--live" style="width:56px;height:56px;border-radius:10px;"></div>
    <div class="cv-ring cv-ring--live" style="width:56px;height:56px;border-radius:10px;"></div>
    <button type="button" class="cv-btn cv-btn--live">Button</button>
  </div>
  <p class="cv-caption">All three read var(--accent) — one edit updates every consumer at once.</p>
</div>
<style>
.cv-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.cv-code { background: #241430; color: #FAF7F2; padding: 12px; border-radius: 8px; font: 12px/1.6 ui-monospace, monospace; margin: 0 0 14px; }
.cv-row { display: flex; align-items: center; gap: 14px; }
.cv-swatch--live { background: var(--accent); }
.cv-swatch--static { background: #cccccc; }
.cv-ring { border: 4px solid; background: #FAF7F2; box-sizing: border-box; }
.cv-ring--live { border-color: var(--accent); }
.cv-ring--static { border-color: #cccccc; }
.cv-btn { padding: 8px 14px; border-radius: 8px; border: 1.5px solid; background: transparent; font: 600 13px system-ui, sans-serif; }
.cv-btn--live { color: var(--accent); border-color: var(--accent); }
.cv-btn--static { color: #999999; border-color: #cccccc; }
.cv-caption { margin: 14px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" style="--accent:#A8E6C1;" role="img" aria-label="Three elements sharing one custom property; toggling the binding disconnects them">
  <pre class="bg-[#241430] text-[#FAF7F2] p-3 rounded-lg text-xs leading-relaxed m-0 mb-3.5">:root { --accent: #A8E6C1; }</pre>
  <div class="flex items-center gap-3.5">
    <div class="rounded-[var(--r)]" style="width:56px;height:56px;border-radius:10px;background:var(--accent);"></div>
    <div class="border-4 box-border bg-[#FAF7F2]" style="width:56px;height:56px;border-radius:10px;border-color:var(--accent);"></div>
    <button type="button" class="px-3.5 py-2 rounded-lg border-[1.5px] bg-transparent font-semibold text-sm" style="color:var(--accent);border-color:var(--accent);">Button</button>
  </div>
  <p class="mt-3.5 text-xs text-[#241430]/80">All three read var(--accent) — one edit updates every consumer at once.</p>
</div>

react

export function CssVariable({
  accent = "#A8E6C1",
  size = 56,
  radius = 10,
  bound = true,
}) {
  const color = bound ? accent : "#cccccc";
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320, "--accent": accent }}
      role="img" aria-label="Three elements sharing one custom property; toggling the binding disconnects them">
      <pre style={{ background: "#241430", color: "#FAF7F2", padding: 12, borderRadius: 8, font: "12px/1.6 ui-monospace, monospace", margin: "0 0 14px" }}>
{`:root { --accent: ${accent}; }`}
      </pre>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{ width: size, height: size, borderRadius: radius, background: color }} />
        <div style={{ width: size, height: size, borderRadius: radius, border: `4px solid ${color}`, background: "#FAF7F2", boxSizing: "border-box" }} />
        <button type="button" style={{ padding: "8px 14px", borderRadius: 8, border: `1.5px solid ${bound ? accent : "#cccccc"}`,
          background: "transparent", color: bound ? accent : "#999999", fontWeight: 600, fontSize: 13 }}>
          Button
        </button>
      </div>
      <p style={{ marginTop: 14, fontSize: 12, color: "#241430cc" }}>
        {bound ? "All three read var(--accent) — one edit updates every consumer at once." : "Disconnected — each would need its own edit to match."}
      </p>
    </div>
  );
}