fix: accessible badges for light & dark themes (#412)

Author: jellydeck

app/assets/main.css

@@ -22,13 +22,25 @@
   --border-subtle: oklch(0.239 0 0);
   --border-hover: oklch(0.371 0 0);
 
+  /* accent color, set by user from settings */
   --accent: var(--accent-color, oklch(1 0 0));
   --accent-muted: var(--accent-color, oklch(0.922 0 0));
 
+  /* syntax highlighting colors */
   --syntax-fn: oklch(0.727 0.137 299.149);
   --syntax-str: oklch(0.829 0.088 252.458);
   --syntax-kw: oklch(0.721 0.162 15.494);
   --syntax-comment: oklch(0.551 0.019 250.976);
+
+  /* badge colors for background & text */
+  --badge-orange: oklch(0.67 0.185 55);
+  --badge-yellow: oklch(0.588 0.183 91);
+  --badge-green: oklch(0.566 0.202 165);
+  --badge-cyan: oklch(0.571 0.181 210);
+  --badge-blue: oklch(0.579 0.191 252);
+  --badge-indigo: oklch(0.573 0.262 276.966);
+  --badge-purple: oklch(0.495 0.172 295);
+  --badge-pink: oklch(0.584 0.189 343);
 }
 
 :root[data-theme='light'] {
@@ -49,9 +61,18 @@
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
   --syntax-fn: oklch(0.502 0.188 294.988);
-  --syntax-str: oklch(0.54 0.191 257.481);
+  --syntax-str: oklch(0.425 0.152 252);
   --syntax-kw: oklch(0.588 0.193 20.469);
   --syntax-comment: oklch(0.551 0.019 250.976);
+
+  --badge-blue: oklch(0.579 0.191 252);
+  --badge-yellow: oklch(0.588 0.183 91);
+  --badge-green: oklch(0.566 0.202 165);
+  --badge-indigo: oklch(0.457 0.24 277.023);
+  --badge-purple: oklch(0.495 0.172 295);
+  --badge-orange: oklch(0.67 0.185 55);
+  --badge-pink: oklch(0.584 0.189 343);
+  --badge-cyan: oklch(0.571 0.181 210);
 }
 
 html {

app/components/VersionSelector.vue

@@ -480,7 +480,7 @@ watch(
       <span>{{ currentVersion }}</span>
       <span
         v-if="currentVersion === latestVersion"
-        class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 font-sans font-medium"
+        class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium"
       >
         latest
       </span>
@@ -567,12 +567,8 @@ watch(
               <span
                 v-for="tag in group.primaryVersion.tags"
                 :key="tag"
-                class="text-[10px] px-1.5 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="text-xs px-1.5 py-0.5 rounded font-sans font-medium"
+                :class="tag === 'latest' ? 'badge-green' : 'badge-subtle'"
               >
                 {{ tag }}
               </span>

app/pages/docs/[...path].vue

@@ -120,9 +120,7 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
             </span>
           </div>
           <div class="flex items-center gap-3 shrink-0">
-            <span
-              class="text-xs px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
-            >
+            <span class="text-xs px-2 py-1 rounded badge-green border border-badge-green/50">
               API Docs
             </span>
           </div>
@@ -242,7 +240,7 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 }
 
 .docs-content .docs-symbol:target .docs-symbol-header {
-  @apply bg-amber-500/10 -mx-3 px-3 py-1 rounded-md;
+  @apply bg-badge-yellow/10 -mx-3 px-3 py-1 rounded-md;
 }
 
 /* Symbol header (name + badges) */
@@ -264,28 +262,28 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 }
 
 .docs-content .docs-badge--function {
-  @apply bg-blue-500/15 text-blue-400;
+  @apply badge-blue;
 }
 .docs-content .docs-badge--class {
-  @apply bg-amber-500/15 text-amber-400;
+  @apply badge-yellow;
 }
 .docs-content .docs-badge--interface {
-  @apply bg-emerald-500/15 text-emerald-400;
+  @apply badge-green;
 }
 .docs-content .docs-badge--typeAlias {
-  @apply bg-violet-500/15 text-violet-400;
+  @apply badge-indigo;
 }
 .docs-content .docs-badge--variable {
-  @apply bg-orange-500/15 text-orange-400;
+  @apply badge-orange;
 }
 .docs-content .docs-badge--enum {
-  @apply bg-pink-500/15 text-pink-400;
+  @apply badge-pink;
 }
 .docs-content .docs-badge--namespace {
-  @apply bg-cyan-500/15 text-cyan-400;
+  @apply badge-cyan;
 }
 .docs-content .docs-badge--async {
-  @apply bg-purple-500/15 text-purple-400;
+  @apply badge-purple;
 }
 
 /* Signature code block - now uses Shiki */
@@ -346,15 +344,15 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 
 /* Deprecation warning */
 .docs-content .docs-deprecated {
-  @apply bg-amber-500/10 border border-amber-500/20 rounded-lg p-4 mb-5;
+  @apply bg-badge-orange/20 border border-badge-orange rounded-lg p-4 mb-5;
 }
 
 .docs-content .docs-deprecated strong {
-  @apply text-amber-400 text-sm;
+  @apply text-badge-orange text-sm;
 }
 
 .docs-content .docs-deprecated p {
-  @apply text-amber-300/80 text-sm mt-2 mb-0;
+  @apply text-badge-orange text-sm mt-2 mb-0;
 }
 
 /* Parameters, Returns, Examples, See Also sections */
@@ -407,12 +405,12 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 }
 
 .docs-content .docs-link {
-  @apply text-blue-400 hover:text-blue-300 underline underline-offset-2;
+  @apply text-badge-blue hover:text-badge-blue/80 underline underline-offset-2;
 }
 
 /* Symbol cross-reference links */
 .docs-content .docs-symbol-link {
-  @apply text-emerald-400 hover:text-emerald-300 underline underline-offset-2;
+  @apply text-badge-green hover:text-badge-green/80 underline underline-offset-2;
 }
 
 /* Unknown symbol references shown as code */

test/nuxt/components/VersionSelector.spec.ts

@@ -509,9 +509,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 emerald styling
-      const hasEmeraldStyling = latestTags.some(t => t.classes().some(c => c.includes('emerald')))
-      expect(hasEmeraldStyling).toBe(true)
+      // Should have green styling
+      const hasGreenStyling = latestTags.some(t => t.classes().some(c => c.includes('green')))
+      expect(hasGreenStyling).toBe(true)
     })
   })
 

uno.config.ts

@@ -59,6 +59,16 @@ export default defineConfig({
         kw: 'var(--syntax-kw)',
         comment: 'var(--syntax-comment)',
       },
+      badge: {
+        orange: 'var(--badge-orange)',
+        yellow: 'var(--badge-yellow)',
+        green: 'var(--badge-green)',
+        cyan: 'var(--badge-cyan)',
+        blue: 'var(--badge-blue)',
+        indigo: 'var(--badge-indigo)',
+        purple: 'var(--badge-purple)',
+        pink: 'var(--badge-pink)',
+      },
       // Playground provider brand colors
       provider: {
         stackblitz: '#1389FD',
@@ -141,6 +151,15 @@ export default defineConfig({
       'tag',
       'inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover)',
     ],
+    ['badge-orange', 'bg-badge-orange/10 text-badge-orange'],
+    ['badge-yellow', 'bg-badge-yellow/10 text-badge-yellow'],
+    ['badge-green', 'bg-badge-green/10 text-badge-green'],
+    ['badge-cyan', 'bg-badge-cyan/10 text-badge-cyan'],
+    ['badge-blue', 'bg-badge-blue/10 text-badge-blue'],
+    ['badge-indigo', 'bg-badge-indigo/10 text-badge-indigo'],
+    ['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'],
 
     // Code blocks
     [