시맨틱 컬러

<div class="wrap">
  <div class="toast" id="toast">
    <span class="dot" id="dot"></span>
    <div class="txt"><b id="title">Success</b><span id="desc">저장되었습니다.</span></div>
    <code id="tok">--color-success</code>
  </div>
  <div class="navdots" id="navdots"></div>
</div>

.wrap{width:min(440px,92%);display:grid;justify-items:center}
.toast{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:clamp(10px,2.8vmin,16px);border-radius:12px;border:2px solid var(--line);background:var(--surface);box-shadow:0 10px 26px rgba(0,0,0,.12);transition:border-color .4s;cursor:pointer}
.dot{width:14px;height:14px;border-radius:50%;flex:none}
.txt{display:grid;gap:2px;min-width:0}
.txt b{font:700 clamp(11px,2.8vmin,13px)/1.2 system-ui}
.txt span{font:500 clamp(10px,2.6vmin,12px)/1.3 system-ui;color:var(--muted)}
code{font:600 clamp(8px,2.2vmin,10px)/1 ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.navdots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.navdots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.navdots i.on{background:var(--fg)}

const STATES = [
  { title: 'Info', ko: '새 버전이 있습니다.', color: '#2563eb', token: '--color-info' },
  { title: 'Success', ko: '저장되었습니다.', color: '#16a34a', token: '--color-success' },
  { title: 'Warning', ko: '용량이 얼마 안 남았습니다.', color: '#d97706', token: '--color-warning' },
  { title: 'Danger', ko: '삭제하면 되돌릴 수 없습니다.', color: '#dc2626', token: '--color-danger' },
];
let idx = 0;
const toast = document.getElementById('toast'), dot = document.getElementById('dot'), title = document.getElementById('title'), desc = document.getElementById('desc'), tok = document.getElementById('tok');
const navdots = document.getElementById('navdots');
navdots.innerHTML = STATES.map(() => '<i></i>').join('');

function render() {
  const s = STATES[idx];
  dot.style.background = s.color;
  toast.style.borderColor = s.color;
  title.textContent = s.title;
  title.style.color = s.color;
  desc.textContent = s.ko;
  tok.textContent = s.token;
  [].forEach.call(navdots.children, (el, i) => el.classList.toggle('on', i === idx));
}
render();
toast.addEventListener('click', () => { idx = (idx + 1) % STATES.length; render(); });
setInterval(() => { idx = (idx + 1) % STATES.length; render(); }, 2200);