디자인 시스템

<div class="stage">
  <div class="tok" id="tok"><span class="sw" id="sw"></span><code id="tokv">--accent</code></div>
  <div class="grid">
    <button class="c btn">Button</button>
    <div class="c chip">Chip</div>
    <div class="c bar"><span id="barfill"></span></div>
    <div class="c link">Link text</div>
    <div class="c avatar"></div>
    <div class="c toggle"><span id="knob"></span></div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;flex-direction:column;gap:10px}
.tok{display:flex;align-items:center;gap:8px;font:700 11px/1 monospace;color:var(--muted)}
.sw{width:14px;height:14px;border-radius:4px;background:var(--accent);transition:background .4s}
.grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center}
.c{border-radius:8px;display:grid;place-items:center;font:600 11px/1 sans-serif;height:100%}
.btn{background:var(--accent);color:#fff;border:none;transition:background .4s}
.chip{background:var(--surface);border:1px solid var(--accent);color:var(--accent);transition:color .4s,border-color .4s}
.bar{background:var(--line);position:relative;overflow:hidden;height:40%;align-self:center}
.bar span{position:absolute;inset:0 60% 0 0;background:var(--accent);transition:background .4s}
.link{color:var(--accent);text-decoration:underline;transition:color .4s}
.avatar{width:60%;aspect-ratio:1;border-radius:50%;background:var(--accent);justify-self:center;transition:background .4s}
.toggle{width:70%;height:44%;border-radius:20px;background:var(--line);position:relative;justify-self:center}
.toggle span{position:absolute;top:10%;left:8%;width:36%;height:80%;border-radius:50%;background:var(--accent);transition:background .4s}

const colors = ['#5b5bf7', '#f25c8a', '#18c29c', '#e08a2b'];
const sw = document.getElementById('sw');
const el = document.querySelectorAll('.btn,.bar span,.avatar,.toggle span');
const chip = document.querySelector('.chip');
const link = document.querySelector('.link');
const tokv = document.getElementById('tokv');
let i = 0;
function apply() {
  const c = colors[i % colors.length];
  sw.style.background = c;
  el.forEach((n) => { n.style.background = c; });
  chip.style.borderColor = c;
  chip.style.color = c;
  link.style.color = c;
  tokv.textContent = '--accent: ' + c;
  i++;
}
apply();
setInterval(apply, 1800);