From d33743580d4fc640e8c92fa80e143dec2b47d724 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 12:59:56 +0100
Subject: [PATCH] ux: standardize pills and tags

---
 .../components/ui/DesignSystemStyles.astro    | 18 ++++++++++++++++++
 frontend/src/pages/admin/invitations.astro    | 15 ++++-----------
 frontend/src/pages/admin/plugins.astro        | 19 ++-----------------
 .../pages/communities/[slug]/plugins.astro    | 14 ++------------
 4 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index be135bc..4caa025 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -847,6 +847,24 @@
     white-space: nowrap;
   }
 
+  .ui-pill-core {
+    background: color-mix(in srgb, var(--color-info) 18%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-info) 35%, transparent);
+    color: var(--color-info);
+  }
+
+  .ui-pill-disabled {
+    background: color-mix(in srgb, var(--color-error) 18%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
+    color: var(--color-error);
+  }
+
+  .ui-pill-recommended {
+    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
+    color: var(--color-primary);
+  }
+
   .loading-small, .empty-small, .error-small {
     color: var(--color-text-muted);
     font-size: 0.875rem;
diff --git a/frontend/src/pages/admin/invitations.astro b/frontend/src/pages/admin/invitations.astro
index e04054d..5d25666 100644
--- a/frontend/src/pages/admin/invitations.astro
+++ b/frontend/src/pages/admin/invitations.astro
@@ -148,10 +148,10 @@ import { API_BASE as apiBase } from '../../lib/api';
           <div class="inv-main">
             <code class="inv-code">${inv.code}</code>
             <div class="inv-meta">
-              ${inv.email ? `<span class="tag email-tag">📧 ${inv.email}</span>` : ''}
-              ${inv.community_name ? `<span class="tag community-tag">🏘️ ${inv.community_name}</span>` : ''}
-              <span class="tag uses-tag">${inv.uses_count}/${inv.max_uses || '∞'} uses</span>
-              ${inv.expires_at ? `<span class="tag expires-tag">⏰ ${new Date(inv.expires_at).toLocaleDateString()}</span>` : ''}
+              ${inv.email ? `<span class="ui-badge email-tag">📧 ${inv.email}</span>` : ''}
+              ${inv.community_name ? `<span class="ui-badge community-tag">🏘️ ${inv.community_name}</span>` : ''}
+              <span class="ui-badge uses-tag">${inv.uses_count}/${inv.max_uses || '∞'} uses</span>
+              ${inv.expires_at ? `<span class="ui-badge expires-tag">⏰ ${new Date(inv.expires_at).toLocaleDateString()}</span>` : ''}
             </div>
             <div class="inv-creator">
               Created by ${inv.created_by_username || 'Unknown'} on ${new Date(inv.created_at).toLocaleDateString()}
@@ -300,13 +300,6 @@ import { API_BASE as apiBase } from '../../lib/api';
     gap: 0.5rem;
   }
 
-  .tag {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    background: var(--color-bg);
-  }
-
   .inv-creator {
     font-size: 0.8125rem;
     color: var(--color-text-muted);
diff --git a/frontend/src/pages/admin/plugins.astro b/frontend/src/pages/admin/plugins.astro
index e6c74ca..7b2fad9 100644
--- a/frontend/src/pages/admin/plugins.astro
+++ b/frontend/src/pages/admin/plugins.astro
@@ -100,21 +100,6 @@ import { API_BASE } from '../../lib/api';
     gap: 0.5rem;
   }
 
-  .plugin-info h3 .badge {
-    font-size: 0.7rem;
-    padding: 0.15rem 0.5rem;
-    border-radius: 1rem;
-    background: var(--color-primary);
-    color: var(--color-primary-contrast);
-    font-weight: normal;
-  }
-
-  .plugin-info h3 .badge.core {
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    color: var(--color-text-muted);
-  }
-
   .plugin-info p {
     margin: 0;
     color: var(--color-text-muted);
@@ -226,8 +211,8 @@ import { API_BASE } from '../../lib/api';
         <div class="plugin-info">
           <h3>
             ${plugin.display_name}
-            ${isCore ? '<span class="badge core">Core</span>' : ''}
-            ${plugin.is_recommended && !isCore ? '<span class="badge">Recommended</span>' : ''}
+            ${isCore ? '<span class="ui-pill ui-pill-core">Core</span>' : ''}
+            ${plugin.is_recommended && !isCore ? '<span class="ui-pill ui-pill-recommended">Recommended</span>' : ''}
           </h3>
           <p>${plugin.description || 'No description'}</p>
         </div>
diff --git a/frontend/src/pages/communities/[slug]/plugins.astro b/frontend/src/pages/communities/[slug]/plugins.astro
index 5968ea6..69140ce 100644
--- a/frontend/src/pages/communities/[slug]/plugins.astro
+++ b/frontend/src/pages/communities/[slug]/plugins.astro
@@ -186,8 +186,8 @@ const { slug } = Astro.params;
                 <div class="plugin-title">
                   <h3>${escapeHtml(p.name)}</h3>
                   <span class="version">v${escapeHtml(p.version)}</span>
-                  ${isCore ? `<span class="ui-pill tag-core">core</span>` : ''}
-                  ${disabledGlobally ? `<span class="ui-pill tag-disabled">disabled globally</span>` : ''}
+                  ${isCore ? `<span class="ui-pill ui-pill-core">core</span>` : ''}
+                  ${disabledGlobally ? `<span class="ui-pill ui-pill-disabled">disabled globally</span>` : ''}
                 </div>
 
                 <div class="plugin-controls">
@@ -433,16 +433,6 @@ const { slug } = Astro.params;
     font-family: monospace;
   }
 
-  .tag-core {
-    background: var(--color-info-muted);
-    color: var(--color-info);
-  }
-
-  .tag-disabled {
-    background: var(--color-error-muted);
-    color: var(--color-error);
-  }
-
   .desc {
     color: var(--color-text-muted);
     margin-bottom: 0.75rem;