<div class="container">
  <div class="intro">
    <div class="intro__container">
      <h1>Design Token Naming Tool</h1>
      <a href="https://jamesiv.es" rel="noopener noreferrer" title="Visit Jamesiv.es" target="_blank">
        <img src="https://jamesiv.es/_next/image?url=%2Fimages%2Ficons%2Ficon.webp&w=48&q=75" alt="James Ives" />
      </a>
    </div>
    <p>Formulates the name of a design token by mixing the following: [category].[concept].[component].[variant].[state].[scale]. Each section is optional, your choice can be cleared by using the N/A button within each section. Learn more <a href="https://jamesiv.es/blog/frontend/design/2023/09/25/lets-chat-about-design-system-tokens" rel="noopener noreferrer" target="_blank">here</a>.</p>
  </div>

  <section>
    <h2>Category</h2>

    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="color">color
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="border">border
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="shadow">shadow
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="duration">duration
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="elevation">elevation
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="typography">typography
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="line-height">line-height
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="size">size
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="space">space
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="transition">transition
    <input class="radio" name="category-radio" style="transform: scale(1);margin-left: 25px;" type="radio" checked value="na">N/A
  </section>

  <section>
    <h2>Concept</h2>
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="heading">heading
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="subheading">subheading
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="body">body
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="content">content
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="surface">surface
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="feedback">feedback
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="cta">cta
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="alert">alert
    <input class="radio" name="concept-radio" style="transform: scale(1);margin-left: 25px;" type="radio" checked value="na">N/A
  </section>

  <section>
    <h2>Component</h2>
    <input class="radio" name="component-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="card">card
    <input class="radio" name="component-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="button">button
    <input class="radio" name="component-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="input">input
    <input class="radio" name="component-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="gallery">gallery
    <input class="radio" name="component-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="select">select
    <input class="radio" name="component-radio" style="transform: scale(1);margin-left: 25px;" type="radio" checked value="na">N/A
  </section>

  <section>
    <h2>Property</h2>
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="font-family">font-family
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="font-size">font-size
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="text">text
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="background">font-size
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="radius">radius
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="padding">padding
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="margin">margin
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="backgroud">background
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="color">font-size
    <input class="radio" name="property-radio" style="transform: scale(1);margin-left: 25px;" type="radio" checked value="na">N/A
  </section>

  <section>
    <h2>Variant</h2>
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="primary">primary
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="secondary">secondary
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="primary">tertiary
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="success">success
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="warning">warning
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="info">info
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="new">new
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="error">error
    <input class="radio" name="variant-radio" style="transform: scale(1);margin-left: 25px;" type="radio" checked value="na">N/A
  </section>

  <section>
    <h2>State</h2>
    <input class="radio" name="state-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="default">default
    <input class="radio" name="state-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="hover">hover
    <input class="radio" name="state-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="focus">focus
    <input class="radio" name="state-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="active">active
    <input class="radio" name="state-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="selected">selected
    <input class="radio" name="state-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="enabled">enabled
    <input class="radio" name="state-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="disabled">disabled
    <input class="radio" name="state-radio" style="transform: scale(1);margin-left: 25px;" type="radio" checked value="na">N/A
  </section>

  <section>
    <h2>Scale</h2>
    <input class="radio" name="scale-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="3xl">3xl
    <input class="radio" name="scale-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="2xl">2xl
    <input class="radio" name="scale-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="xl">xl
    <input class="radio" name="scale-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="lg">lg
    <input class="radio" name="scale-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="md">md
    <input class="radio" name="scale-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="sm">sm
    <input class="radio" name="scale-radio" style="transform: scale(1);margin-left: 25px;" type="radio" value="xs">xs
    <input class="radio" name="scale-radio" style="transform: scale(1);margin-left: 25px;" type="radio" checked value="na">N/A
  </section>

  <section>
    <h2>Token Name</h2>
    <p>The combined token name based on your selections.</p>
    <textarea rows="4" cols="50" id="output"></textarea>
  </section>
</div>

body {
  background-color: white;
  color: black;
  font-family: sans-serif;
  font-smooth: always;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  font-family: serif;
  font-weight: 800;
  font-size: 24px;
  padding-top: 12px;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  padding-bottom: 12px;
}

h1:after {
  height: 3px;
  width: 100%;
  display: block;
  content: "";
  background-color: #fa9f42;
}

h2 {
  font-size: 16px;
  text-transform: uppercase;
}

.container {
  padding: 16px;
}

.intro {
  padding-bottom: 16px;
}

.intro__container {
  display: flex;
  align-items: center;
}

.intro__container img {
  width: 24px;
  height: 24px;
  padding-left: 8px;
}

section {
  color: #000;
  padding-bottom: 2rem;
  background-color: #e5e6e4;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 12px 12px 2px 1px #847577;
}

section p {
  margin-top: 0;
}

window.addEventListener("DOMContentLoaded", function () {
  const check = document.querySelectorAll(".check");
  const radio = document.querySelectorAll(".radio");
  const output = document.querySelector("#output");
  const NOT_APPLICABLE = "na";

  function handleClick() {
    let text1 = "";
    check.forEach(function (check) {
      if (check.checked) {
        text1 += check.value + ",";
      }
    });

    radio.forEach(function (radio) {
      if (radio.checked && radio.value !== NOT_APPLICABLE) {
        text1 += radio.value + "-";
      }
    });

    text1 = text1.substring(0, text1.length - 1);

    output.value = text1;

    const pane = output;
    const trimmed_text = pane.value
      .trim()
      .replace(/\s*[\r\n]+\s*/g, "\n")
      .replace(/(<[^\/][^>]*>)\s*/g, "$1")
      .replace(/\s*(<\/[^>]+>)/g, "$1");
    pane.value = trimmed_text;
  }

  check.forEach(function (check) {
    check.addEventListener("click", handleClick);
  });

  radio.forEach(function (radio) {
    radio.addEventListener("click", handleClick);
  });
});