Use the theme's chip and tag components for every pill on the site

Links are .wt-chip, labels are .wt-tag, highlighted labels .wt-tag--accent.
Bumps Weircon-wind for the status tag variants.

Claude-Session: https://claude.ai/code/session_012LCTmU2ewo8tnM1dByYAoG

src/components/Header.astro

@@ -27,7 +27,7 @@ const isActive = (href: string) => (href === '/' || href === '/en' ? path === hr
       </ul>
       {andet && (
         <a href={andet.path} hreflang={andet.lang} lang={andet.lang}
-           class="mr-1 rounded-full border border-border px-2.5 py-0.5 text-sm text-muted transition-colors hover:border-accent hover:text-accent">{andet.lang === 'en' ? 'English' : 'Dansk'}</a>
+           class="wt-chip mr-1">{andet.lang === 'en' ? 'English' : 'Dansk'}</a>
       )}
       <button type="button" data-palette-open class="theme-toggle" title="Søg (⌘K / Ctrl K)" aria-label="Åbn søgning og kommandopalette">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

src/components/PostCard.astro

@@ -12,7 +12,7 @@ const d = date.toLocaleDateString('da-DK', { year: 'numeric', month: 'long', day
   {tags.length > 0 && (
     <div class="mt-3 flex flex-wrap gap-1.5">
       {tags.map((t) => (
-        <a href={`/tags/${t}`} class="rounded-full border border-border px-2.5 py-0.5 text-xs text-muted transition-colors hover:border-accent hover:text-accent">#{t}</a>
+        <a href={`/tags/${t}`} class="wt-chip">#{t}</a>
       ))}
     </div>
   )}

src/components/ProjektSide.astro

@@ -64,12 +64,12 @@ const alternates = oversat
         {d.platforme.length > 0 && <div><dt class="inline text-muted">{T.koerer} </dt><dd class="inline">{d.platforme.join(', ')}</dd></div>}
       </dl>
       <div class="mt-5 flex flex-wrap gap-2">
-        <a href={repo} class="rounded-full border border-border px-3 py-1 text-sm hover:border-accent hover:text-accent">{T.kilde}</a>
+        <a href={repo} class="wt-chip">{T.kilde}</a>
         {aur.map((a) => (
-          <a href={a.url} class="rounded-full border border-border px-3 py-1 text-sm hover:border-accent hover:text-accent">AUR: {a.navn}</a>
+          <a href={a.url} class="wt-chip">AUR: {a.navn}</a>
         ))}
         {d.aur.some((n) => n.endsWith('-bin')) && (
-          <a href="/tarballz/" class="rounded-full border border-border px-3 py-1 text-sm hover:border-accent hover:text-accent">{T.bin}</a>
+          <a href="/tarballz/" class="wt-chip">{T.bin}</a>
         )}
       </div>
     </header>

src/pages/blog/[...slug].astro

@@ -49,7 +49,7 @@ const crumbs = breadcrumb([
       {post.data.tags.length > 0 && (
         <div class="mt-4 flex flex-wrap gap-1.5">
           {post.data.tags.map((t) => (
-            <a href={`/tags/${t}`} class="rounded-full border border-border px-2.5 py-0.5 text-xs text-muted hover:border-accent hover:text-accent">#{t}</a>
+            <a href={`/tags/${t}`} class="wt-chip">#{t}</a>
           ))}
         </div>
       )}

src/pages/cv.astro

@@ -90,7 +90,7 @@ const sprog = ['Dansk (modersmål)', 'Engelsk (flydende i tale og skrift)'];
     </p>
     <div class="mt-4 flex flex-wrap gap-2">
       {['Peppol', 'Peppol Access Point', 'Oxalis', 'NemHandel', 'e-faktura', 'Electronic invoicing', 'OIOUBL / UBL', 'e-Delivery (AS4)', 'EN 16931', 'e-procurement'].map((k) => (
-        <span class="rounded-full border border-border bg-surface/60 px-3 py-1 text-sm">{k}</span>
+        <span class="wt-tag">{k}</span>
       ))}
     </div>
   </section>
@@ -117,7 +117,7 @@ const sprog = ['Dansk (modersmål)', 'Engelsk (flydende i tale og skrift)'];
     </p>
     <div class="mt-4 flex flex-wrap gap-2">
       {['Incident response', 'Hændelseshåndtering', 'Eskalering', 'Post-incident review', 'Sårbarhedshåndtering', 'Interessentkommunikation', 'ISO/IEC 27001', 'ISMS', 'Informationssikkerhed'].map((k) => (
-        <span class="rounded-full border border-border bg-surface/60 px-3 py-1 text-sm">{k}</span>
+        <span class="wt-tag">{k}</span>
       ))}
     </div>
   </section>
@@ -207,11 +207,11 @@ const sprog = ['Dansk (modersmål)', 'Engelsk (flydende i tale og skrift)'];
     <div>
       <h2 class="text-sm font-semibold uppercase tracking-widest text-accent">Primære kompetencer</h2>
       <div class="mt-4 flex flex-wrap gap-2">
-        {primaere.map((k) => <span class="rounded-full border border-border bg-surface/60 px-3 py-1 text-sm">{k}</span>)}
+        {primaere.map((k) => <span class="wt-tag">{k}</span>)}
       </div>
       <h2 class="mt-8 text-sm font-semibold uppercase tracking-widest text-accent">Sekundære</h2>
       <div class="mt-4 flex flex-wrap gap-2">
-        {sekundaere.map((k) => <span class="rounded-full border border-border bg-surface/40 px-3 py-1 text-sm text-muted">{k}</span>)}
+        {sekundaere.map((k) => <span class="wt-tag wt-muted">{k}</span>)}
       </div>
     </div>
     <div>

src/pages/en/cv.astro

@@ -68,7 +68,7 @@ const skills = [
     </p>
     <div class="mt-4 flex flex-wrap gap-2">
       {['Peppol', 'Peppol Access Point', 'Oxalis', 'NemHandel', 'E-invoicing', 'OIOUBL / UBL', 'eDelivery (AS4)', 'EN 16931', 'E-procurement'].map((k) => (
-        <span class="rounded-full border border-border bg-surface/60 px-3 py-1 text-sm">{k}</span>
+        <span class="wt-tag">{k}</span>
       ))}
     </div>
   </section>
@@ -153,7 +153,7 @@ const skills = [
         <div>
           <h3 class="text-sm font-medium text-text">{s.k}</h3>
           <div class="mt-2 flex flex-wrap gap-2">
-            {s.v.map((k) => <span class="rounded-full border border-border bg-surface/60 px-3 py-1 text-sm">{k}</span>)}
+            {s.v.map((k) => <span class="wt-tag">{k}</span>)}
           </div>
         </div>
       ))}

src/pages/nemhandel.astro

@@ -52,12 +52,12 @@ import Base from '../layouts/Base.astro';
           var d = await r.json();
           if (!r.ok) { box.innerHTML = '<div class="rounded-2xl border border-border bg-surface/60 p-5"><p class="text-sm text-muted">Peppol-opslag ikke tilgængeligt lige nu.</p></div>'; return; }
           if (!d.on_peppol) {
-            box.innerHTML = '<div class="rounded-2xl border border-border bg-surface/60 p-5"><div class="flex items-baseline justify-between gap-2"><h2 class="text-xl font-semibold tracking-tight">Peppol-netværk</h2><span class="rounded-full border border-border px-3 py-1 text-sm text-muted">Ikke fundet</span></div><p class="mt-2 text-sm text-muted">Virksomheden blev ikke fundet i Peppol Directory via CVR-opslag (kan stadig være på Peppol under et andet identifikator-scheme).</p></div>';
+            box.innerHTML = '<div class="rounded-2xl border border-border bg-surface/60 p-5"><div class="flex items-baseline justify-between gap-2"><h2 class="text-xl font-semibold tracking-tight">Peppol-netværk</h2><span class="wt-tag wt-muted">Ikke fundet</span></div><p class="mt-2 text-sm text-muted">Virksomheden blev ikke fundet i Peppol Directory via CVR-opslag (kan stadig være på Peppol under et andet identifikator-scheme).</p></div>';
             return;
           }
           var docs = (d.doctypes || []).map(function (dt) {
             var label = PROF[dt.customization] || dt.customization;
-            return '<span class="rounded-full border border-border bg-surface-2 px-2.5 py-1 text-sm">' + esc(dt.document) + ' · ' + esc(label) + '</span>';
+            return '<span class="wt-tag">' + esc(dt.document) + ' · ' + esc(label) + '</span>';
           }).join('');
           box.innerHTML = '<div class="rounded-2xl border border-border bg-surface/60 p-5">' +
             '<div class="flex flex-wrap items-baseline justify-between gap-2"><h2 class="text-xl font-semibold tracking-tight">Peppol-netværk</h2>' +
@@ -93,10 +93,10 @@ import Base from '../layouts/Base.astro';
             caps.innerHTML =
               (data.networks.length ? '<p class="text-xs font-semibold uppercase tracking-widest text-accent">Netværk</p>' +
                 '<div class="mt-2 flex flex-wrap gap-2">' + data.networks.map(function (n) {
-                  return '<span class="rounded-full border border-border bg-surface-2 px-3 py-1 text-sm">' + esc(n) + '</span>'; }).join('') + '</div>' : '') +
+                  return '<span class="wt-tag">' + esc(n) + '</span>'; }).join('') + '</div>' : '') +
               (data.profiles.length ? '<p class="mt-4 text-xs font-semibold uppercase tracking-widest text-accent">Profilpakker</p>' +
                 '<div class="mt-2 flex flex-wrap gap-2">' + data.profiles.map(function (p) {
-                  return '<span class="rounded-full border border-border bg-surface-2 px-3 py-1 text-sm">' + esc(p) + '</span>'; }).join('') + '</div>' : '');
+                  return '<span class="wt-tag">' + esc(p) + '</span>'; }).join('') + '</div>' : '');
           } else {
             caps.innerHTML = '<p class="text-sm text-muted">' + (data.registered
               ? 'Registreret, men ingen profildata i seneste opdatering.'

src/pages/profiler.astro

@@ -81,12 +81,12 @@ const kilde = (p: (typeof profiles)[number]) => {
           class="rounded-2xl border border-border bg-surface/60 p-5 transition-colors hover:border-accent/50"
         >
           <div class="flex flex-wrap items-center gap-2">
-            <span class="rounded-full border border-accent/40 bg-accent/10 px-2.5 py-0.5 text-xs font-medium text-accent">
+            <span class="wt-tag wt-tag--accent">
               {p.standard}
             </span>
             {p.kategori && (
               <span
-                class="rounded-full border border-border bg-surface-2 px-2.5 py-0.5 text-xs text-muted"
+                class="wt-tag wt-muted"
                 title="Gruppen profilen står under i Nemhandelsregistrets dropdown"
               >
                 Register: {p.kategori}
@@ -112,7 +112,7 @@ const kilde = (p: (typeof profiles)[number]) => {
 
           <div class="mt-3 flex flex-wrap gap-1.5">
             {p.dokumenter.map((d) => (
-              <span class="rounded-full border border-border bg-surface-2 px-2 py-0.5 text-xs">{d}</span>
+              <span class="wt-tag">{d}</span>
             ))}
           </div>
 

src/pages/tags/index.astro

@@ -11,7 +11,7 @@ const tags = [...counts.entries()].sort((a, b) => b[1] - a[1]);
   <h1 class="text-4xl font-bold tracking-tight">Tags</h1>
   <div class="mt-8 flex flex-wrap gap-2">
     {tags.map(([t, n]) => (
-      <a href={`/tags/${t}`} class="rounded-full border border-border bg-surface/60 px-3.5 py-1.5 text-sm transition-colors hover:border-accent hover:text-accent">
+      <a href={`/tags/${t}`} class="wt-chip">
         #{t} <span class="text-muted">({n})</span>
       </a>
     ))}

src/pages/ubl.astro

@@ -103,8 +103,7 @@ const idx = profiles.map((p) => ({
       }
 
       function badge(text, kind) {
-        var cls = kind === 'ok' ? 'border-accent/40 bg-accent/10 text-accent' : 'border-border bg-surface-2 text-text';
-        return '<span class="rounded-full border ' + cls + ' px-2.5 py-0.5 text-xs">' + esc(text) + '</span>';
+        return '<span class="wt-tag' + (kind === 'ok' ? ' wt-tag--accent' : '') + '">' + esc(text) + '</span>';
       }
       function row(dt, dd) {
         return '<div class="grid gap-1 sm:grid-cols-[10rem_1fr]"><dt class="text-muted">' + esc(dt) +