カラーテーマスウォッチピッカー

<div class="d11-02-12-wrap">
          <div class="d11-02-12-preview">
            <div class="d11-02-12-bar"></div>
            <div class="d11-02-12-body">
              <span class="d11-02-12-chip">タグ</span>
              <button type="button" class="d11-02-12-btn">ボタン</button>
            </div>
          </div>
          <div class="d11-02-12-swatches">
            <button type="button" class="d11-02-12-sw is-on" style="--c:#5b6ef5" data-c="#5b6ef5" aria-label="インディゴ"></button>
            <button type="button" class="d11-02-12-sw" style="--c:#f43f5e" data-c="#f43f5e" aria-label="ローズ"></button>
            <button type="button" class="d11-02-12-sw" style="--c:#22c07d" data-c="#22c07d" aria-label="グリーン"></button>
            <button type="button" class="d11-02-12-sw" style="--c:#f59e0b" data-c="#f59e0b" aria-label="アンバー"></button>
          </div>
        </div>

.d11-02-12-wrap{width:230px}
        .d11-02-12-preview{--accent:#5b6ef5;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);background:#fff;margin-bottom:14px}
        .d11-02-12-bar{height:10px;background:var(--accent);transition:background .3s}
        .d11-02-12-body{padding:16px;display:flex;align-items:center;gap:10px}
        .d11-02-12-chip{font-size:11px;padding:4px 10px;border-radius:999px;background:#eef0fe;color:var(--accent);font-weight:700;transition:.3s}
        .d11-02-12-btn{margin-left:auto;border:0;border-radius:8px;padding:8px 16px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:background .3s}
        .d11-02-12-swatches{display:flex;gap:10px;justify-content:center}
        .d11-02-12-sw{width:26px;height:26px;border-radius:50%;background:var(--c);border:2px solid transparent;cursor:pointer;transition:transform .2s}
        .d11-02-12-sw.is-on{border-color:#26264a;transform:scale(1.15)}

(function(){
        var root=document.querySelector('#item-11-02-12 .d11-02-12-wrap');if(!root)return;
        var preview=root.querySelector('.d11-02-12-preview'),sws=root.querySelectorAll('.d11-02-12-sw');
        sws.forEach(function(sw){
          sw.addEventListener('click',function(){
            sws.forEach(function(x){x.classList.remove('is-on');});
            sw.classList.add('is-on');
            preview.style.setProperty('--accent',sw.dataset.c);
          });
        });
      })();