Theming

Applying a visual configuration across a system.

html

<div class="theming theming--medium">
  <p class="theming__hint">One theme, three components</p>
  <div class="theming__row">
    <button type="button" class="theming__button" style="background:#F5C2E0;border-radius:10px;">Get started</button>
    <span class="theming__badge" style="border-color:#F5C2E0;border-radius:10px;">New</span>
    <a class="theming__link" href="#" style="color:#F5C2E0;">Learn more</a>
  </div>
</div>
<style>
.theming { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.theming__hint { margin: 0 0 14px; font-size: 11px; color: #24143099; }
.theming__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.theming__button { border: none; padding: 10px 18px; color: #241430; cursor: pointer; }
.theming__badge { display: inline-block; padding: 4px 10px; border: 2px solid; font-size: 12px; }
.theming__link { text-decoration: underline; }
.theming--normal .theming__button, .theming--normal .theming__badge, .theming--normal .theming__link { font-weight: 400; }
.theming--medium .theming__button, .theming--medium .theming__badge, .theming--medium .theming__link { font-weight: 600; }
.theming--bold .theming__button, .theming--bold .theming__badge, .theming--bold .theming__link { font-weight: 800; }
</style>

tailwind

<div class="themingtw themingtw--medium font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3.5 text-[11px] text-[#24143099]">One theme, three components</p>
  <div class="flex items-center gap-3.5 flex-wrap">
    <button type="button" class="border-none py-2.5 px-4.5 text-[#241430] cursor-pointer" style="background:#F5C2E0;border-radius:10px;">Get started</button>
    <span class="inline-block py-1 px-2.5 border-2 text-xs" style="border-color:#F5C2E0;border-radius:10px;">New</span>
    <a class="underline" href="#" style="color:#F5C2E0;">Learn more</a>
  </div>
</div>
<style>
.themingtw--normal button, .themingtw--normal span, .themingtw--normal a { font-weight: 400; }
.themingtw--medium button, .themingtw--medium span, .themingtw--medium a { font-weight: 600; }
.themingtw--bold button, .themingtw--bold span, .themingtw--bold a { font-weight: 800; }
</style>

react

export function Theming({
  brandColor = "#F5C2E0",
  radius = 10,
  emphasis = "medium",
  label = "Get started",
}) {
  const weight = { normal: 400, medium: 600, bold: 800 }[emphasis];
  return (
    <div style={{ font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 14px", fontSize: 11, color: "#24143099" }}>One theme, three components</p>
      <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
        <button type="button" style={{ border: "none", padding: "10px 18px", color: "#241430", cursor: "pointer", background: brandColor, borderRadius: radius, fontWeight: weight }}>{label}</button>
        <span style={{ display: "inline-block", padding: "4px 10px", border: `2px solid ${brandColor}`, fontSize: 12, borderRadius: radius, fontWeight: weight }}>New</span>
        <a href="#" style={{ textDecoration: "underline", color: brandColor, fontWeight: weight }}>Learn more</a>
      </div>
    </div>
  );
}