feat(ui): make version colors consistent (#2171)

Co-authored-by: Willow (GHOST) <git@willow.sh>

Author: MatteoGabriele

app/components/VersionSelector.vue

@@ -486,7 +486,7 @@ watch(
       <span dir="ltr" class="me-1.5">{{ currentVersion }}</span>
       <span
         v-if="currentVersion === latestVersion"
-        class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium me-1.5"
+        class="text-xs px-1.5 py-0.5 rounded badge-accent font-sans font-medium me-1.5"
       >
         latest
       </span>
@@ -577,7 +577,7 @@ watch(
                 v-for="tag in group.primaryVersion.tags"
                 :key="tag"
                 class="text-xs px-1.5 py-0.5 rounded font-sans font-medium"
-                :class="tag === 'latest' ? 'badge-green' : 'badge-subtle'"
+                :class="tag === 'latest' ? 'badge-accent' : 'badge-subtle'"
               >
                 {{ tag }}
               </span>
@@ -613,11 +613,7 @@ watch(
                     v-for="tag in v.tags"
                     :key="tag"
                     class="text-4xs px-1 py-0.5 rounded font-sans font-medium"
-                    :class="
-                      tag === 'latest'
-                        ? 'bg-emerald-500/10 text-emerald-400'
-                        : 'bg-bg-muted text-fg-subtle'
-                    "
+                    :class="tag === 'latest' ? 'badge-accent' : 'badge-subtle'"
                   >
                     {{ tag }}
                   </span>

test/nuxt/components/VersionSelector.spec.ts

@@ -511,9 +511,9 @@ describe('VersionSelector', () => {
       // Find the latest tag span
       const latestTags = component.findAll('span').filter(s => s.text() === 'latest')
       expect(latestTags.length).toBeGreaterThan(0)
-      // Should have green styling
-      const hasGreenStyling = latestTags.some(t => t.classes().some(c => c.includes('green')))
-      expect(hasGreenStyling).toBe(true)
+      // Should have accent styling
+      const hasAccentStyle = latestTags.some(t => t.classes().some(c => c.includes('badge-accent')))
+      expect(hasAccentStyle).toBe(true)
     })
   })
 

uno.config.ts

@@ -156,6 +156,7 @@ export default defineConfig({
     ['badge-purple', 'bg-badge-purple/10 text-badge-purple'],
     ['badge-pink', 'bg-badge-pink/10 text-badge-pink'],
     ['badge-subtle', 'bg-bg-subtle text-fg-subtle'],
+    ['badge-accent', 'bg-accent/10 text-accent'],
   ],
   rules: [
     // Custom scale for active states