Skip to content

Instantly share code, notes, and snippets.

@JamesIves

JamesIves/app.js

Created September 25, 2023 12:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JamesIves/f3ea570691c79239edacfdb91993e36e to your computer and use it in GitHub Desktop.
Save JamesIves/f3ea570691c79239edacfdb91993e36e to your computer and use it in GitHub Desktop.
Download ZIP
Design Token Naming Tool - Simple tool that assists with design token naming.
Raw
app.js
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);
});
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Design Token Naming Tool | James Ives</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<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="body">body
<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>
<script src="app.js"></script>
</body>
</html>
Raw
style.css
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment