From 0117864028379415b333e201f1205f77e113b826 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 1 Feb 2026 15:30:56 +0530
Subject: [PATCH 01/10] accent colors for light & dark mode

---
 app/assets/main.css                         |  10 +-
 app/components/AppHeader.vue                |  26 +----
 app/components/AppLogo.vue                  |  31 ++++++
 app/components/HeaderAccountMenu.client.vue |   2 +-
 app/composables/useSettings.ts              |  38 +++++--
 app/pages/[...package].vue                  | 116 ++++++++++----------
 app/pages/index.vue                         |   9 +-
 app/utils/prehydrate.ts                     |  39 ++++---
 public-dev/logo.svg                         |  28 +++--
 shared/utils/constants.ts                   |  22 +++-
 10 files changed, 189 insertions(+), 132 deletions(-)
 create mode 100644 app/components/AppLogo.vue

diff --git a/app/assets/main.css b/app/assets/main.css
index 31a9a7188..ea09e84ac 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -129,9 +129,9 @@ a:hover {
 }
 
 a:focus-visible {
-  outline: 2px solid var(--border);
+  outline: 2px solid var(--border-hover);
   outline-offset: 2px;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */
@@ -148,6 +148,12 @@ button {
   padding: 0;
 }
 
+button:focus-visible {
+  outline: 2px solid var(--border-hover);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 9f4c2c52d..75580388e 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -101,14 +101,7 @@ onKeyStroke(
         :aria-label="$t('nav.tap_to_search')"
         @click="expandMobileSearch"
       >
-        <img
-          aria-hidden="true"
-          :alt="$t('alt_logo')"
-          src="/logo.svg"
-          width="96"
-          height="96"
-          class="w-8 h-8 rounded-lg"
-        />
+        <AppLogo class="w-8 h-8 rounded-lg" />
         <span class="i-carbon:search w-4 h-4 text-fg-subtle" aria-hidden="true" />
       </button>
 
@@ -118,16 +111,9 @@ onKeyStroke(
           to="/"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+          class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg focus-visible:outline-accent/50 transition-colors duration-200 rounded"
         >
-          <img
-            aria-hidden="true"
-            :alt="$t('alt_logo')"
-            src="/logo.svg"
-            width="96"
-            height="96"
-            class="w-8 h-8 rounded-lg"
-          />
+          <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
         </NuxtLink>
       </div>
@@ -165,11 +151,11 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6">
+      <div class="flex-shrink-0 flex items-center lg:gap-4">
         <!-- Desktop: Compare link -->
         <NuxtLink
           to="/compare"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle px-2 py-1.5 hover:bg-bg-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           aria-keyshortcuts="c"
         >
           {{ $t('nav.compare') }}
@@ -184,7 +170,7 @@ onKeyStroke(
         <!-- Desktop: Settings link -->
         <NuxtLink
           to="/settings"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle px-2 py-1.5 hover:bg-bg-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
diff --git a/app/components/AppLogo.vue b/app/components/AppLogo.vue
new file mode 100644
index 000000000..d129b47b8
--- /dev/null
+++ b/app/components/AppLogo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    width="96"
+    height="96"
+    :class="class"
+  >
+    <title>{{ $t('alt_logo') }}</title>
+    <rect fill="var(--bg)" width="512" height="512" rx="64" />
+    <rect fill="var(--fg)" x="110" y="310" width="60" height="60" />
+    <text
+      fill="var(--accent)"
+      x="320"
+      y="370"
+      font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+      font-size="420"
+      font-weight="500"
+      text-anchor="middle"
+    >
+      <tspan>/</tspan>
+    </text>
+  </svg>
+</template>
diff --git a/app/components/HeaderAccountMenu.client.vue b/app/components/HeaderAccountMenu.client.vue
index 85bd64ad2..a08a18504 100644
--- a/app/components/HeaderAccountMenu.client.vue
+++ b/app/components/HeaderAccountMenu.client.vue
@@ -58,7 +58,7 @@ function openAuthModal() {
   <div ref="accountMenuRef" class="relative">
     <button
       type="button"
-      class="relative flex items-center justify-end gap-2 px-2 py-1.5 min-w-24 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      class="relative flex items-center justify-end gap-2 px-2 py-1.5 min-w-24 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index 73445a749..11e6c7a0f 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -3,7 +3,7 @@ import { useLocalStorage } from '@vueuse/core'
 import { ACCENT_COLORS } from '#shared/utils/constants'
 import type { LocaleObject } from '@nuxtjs/i18n'
 
-type AccentColorId = keyof typeof ACCENT_COLORS
+type AccentColorId = keyof typeof ACCENT_COLORS.light
 
 /**
  * Application settings stored in localStorage
@@ -70,20 +70,34 @@ export function useRelativeDates() {
  */
 export function useAccentColor() {
   const { settings } = useSettings()
+  const colorMode = useColorMode()
 
-  const accentColors = Object.entries(ACCENT_COLORS).map(([id, value]) => ({
-    id: id as AccentColorId,
-    name: id,
-    value,
-  }))
+  const accentColors = computed(() =>
+    Object.entries(ACCENT_COLORS[colorMode.value as 'light' | 'dark']).map(([id, value]) => ({
+      id: id as AccentColorId,
+      name: id,
+      value,
+    })),
+  )
+
+  const currentAccentColor = computed(() => {
+    const id = settings.value.accentColorId
+    const theme = colorMode.value as 'light' | 'dark'
+    return id ? ACCENT_COLORS[theme][id] : null
+  })
+
+  // Simple client-side check
+  if (process.client) {
+    watchEffect(() => {
+      if (currentAccentColor.value) {
+        document.documentElement.style.setProperty('--accent-color', currentAccentColor.value)
+      } else {
+        document.documentElement.style.removeProperty('--accent-color')
+      }
+    })
+  }
 
   function setAccentColor(id: AccentColorId | null) {
-    const color = id ? ACCENT_COLORS[id] : null
-    if (color) {
-      document.documentElement.style.setProperty('--accent-color', color)
-    } else {
-      document.documentElement.style.removeProperty('--accent-color')
-    }
     settings.value.accentColorId = id
   }
 
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index e7fdf5ab6..d837b0886 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -467,66 +467,10 @@ function handleClick(event: MouseEvent) {
                 </ul>
               </template>
             </ClientOnly>
-
-            <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
-            <nav
-              v-if="displayVersion"
-              :aria-label="$t('package.navigation')"
-              class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
-            >
-              <NuxtLink
-                v-if="docsLink"
-                :to="docsLink"
-                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
-                aria-keyshortcuts="d"
-              >
-                <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
-                {{ $t('package.links.docs') }}
-                <kbd
-                  class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
-                  aria-hidden="true"
-                >
-                  d
-                </kbd>
-              </NuxtLink>
-              <NuxtLink
-                :to="{
-                  name: 'code',
-                  params: {
-                    path: [...pkg.name.split('/'), 'v', displayVersion.version],
-                  },
-                }"
-                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
-                aria-keyshortcuts="."
-              >
-                <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
-                {{ $t('package.links.code') }}
-                <kbd
-                  class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
-                  aria-hidden="true"
-                >
-                  .
-                </kbd>
-              </NuxtLink>
-              <NuxtLink
-                :to="{ path: '/compare', query: { packages: pkg.name } }"
-                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
-                aria-keyshortcuts="c"
-              >
-                <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
-                {{ $t('package.links.compare') }}
-                <kbd
-                  class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
-                  aria-hidden="true"
-                >
-                  c
-                </kbd>
-              </NuxtLink>
-            </nav>
           </div>
 
           <!-- Description container with min-height to prevent CLS -->
-          <div class="max-w-2xl min-h-[4.5rem]">
+          <div class="max-w-2xl ms-1 min-h-[4.5rem]">
             <p v-if="pkg.description" class="text-fg-muted text-base m-0">
               <MarkdownText :text="pkg.description" :package-name="pkg.name" />
             </p>
@@ -535,8 +479,64 @@ function handleClick(event: MouseEvent) {
             </p>
           </div>
 
+          <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
+          <nav
+            v-if="displayVersion"
+            :aria-label="$t('package.navigation')"
+            class="hidden sm:inline-flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 self-center mb-5"
+          >
+            <NuxtLink
+              v-if="docsLink"
+              :to="docsLink"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              aria-keyshortcuts="d"
+            >
+              <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
+              {{ $t('package.links.docs') }}
+              <kbd
+                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
+                aria-hidden="true"
+              >
+                d
+              </kbd>
+            </NuxtLink>
+            <NuxtLink
+              :to="{
+                name: 'code',
+                params: {
+                  path: [...pkg.name.split('/'), 'v', displayVersion.version],
+                },
+              }"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              aria-keyshortcuts="."
+            >
+              <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
+              {{ $t('package.links.code') }}
+              <kbd
+                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
+                aria-hidden="true"
+              >
+                .
+              </kbd>
+            </NuxtLink>
+            <NuxtLink
+              :to="{ path: '/compare', query: { packages: pkg.name } }"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              aria-keyshortcuts="c"
+            >
+              <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
+              {{ $t('package.links.compare') }}
+              <kbd
+                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
+                aria-hidden="true"
+              >
+                c
+              </kbd>
+            </NuxtLink>
+          </nav>
+
           <!-- External links -->
-          <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3">
+          <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0">
             <li v-if="repositoryUrl">
               <a
                 :href="repositoryUrl"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 375d47738..79c757501 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -42,14 +42,7 @@ defineOgImageComponent('Default', {
         dir="ltr"
         class="flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-4 motion-safe:animate-fade-in motion-safe:animate-fill-both"
       >
-        <img
-          aria-hidden="true"
-          :alt="$t('alt_logo')"
-          src="/logo.svg"
-          width="48"
-          height="48"
-          class="w-12 h-12 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl sm:rounded-3xl"
-        />
+        <AppLogo class="w-12 h-12 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl sm:rounded-3xl" />
         <span class="pb-4">npmx</span>
       </h1>
 
diff --git a/app/utils/prehydrate.ts b/app/utils/prehydrate.ts
index 72b79e577..38c60d8c6 100644
--- a/app/utils/prehydrate.ts
+++ b/app/utils/prehydrate.ts
@@ -1,6 +1,5 @@
 import type { ACCENT_COLORS } from '#shared/utils/constants'
-
-type AccentColorId = keyof typeof ACCENT_COLORS
+type AccentColorId = keyof typeof ACCENT_COLORS.light // for both themes color names are same
 
 /**
  * Initialize user preferences before hydration to prevent flash/layout shift.
@@ -14,13 +13,23 @@ export function initPreferencesOnPrehydrate() {
   // All constants must be hardcoded inside the callback.
   onPrehydrate(() => {
     // Accent colors - hardcoded since ACCENT_COLORS can't be referenced
-    const colors: Record<AccentColorId, string> = {
-      rose: 'oklch(0.797 0.084 11.056)',
-      amber: 'oklch(0.828 0.165 84.429)',
-      emerald: 'oklch(0.792 0.153 166.95)',
-      sky: 'oklch(0.787 0.128 230.318)',
-      violet: 'oklch(0.714 0.148 286.067)',
-      coral: 'oklch(0.704 0.177 14.75)',
+    const colors = {
+      light: {
+        rose: 'oklch(0.70 0.15 11.056)',
+        amber: 'oklch(0.73 0.18 84.429)',
+        emerald: 'oklch(0.70 0.17 166.95)',
+        sky: 'oklch(0.70 0.15 230.318)',
+        violet: 'oklch(0.70 0.17 286.067)',
+        coral: 'oklch(0.70 0.19 14.75)',
+      },
+      dark: {
+        rose: 'oklch(0.797 0.084 11.056)',
+        amber: 'oklch(0.828 0.165 84.429)',
+        emerald: 'oklch(0.792 0.153 166.95)',
+        sky: 'oklch(0.787 0.128 230.318)',
+        violet: 'oklch(0.714 0.148 286.067)',
+        coral: 'oklch(0.704 0.177 14.75)',
+      },
     }
 
     // Valid package manager IDs
@@ -29,10 +38,13 @@ export function initPreferencesOnPrehydrate() {
     // Read settings from localStorage
     const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
 
-    // Apply accent color
-    const color = settings.accentColorId ? colors[settings.accentColorId as AccentColorId] : null
-    if (color) {
-      document.documentElement.style.setProperty('--accent-color', color)
+    // Determine theme (default to 'dark')
+    const theme = document.documentElement.dataset.theme === 'light' ? 'light' : 'dark'
+
+    // Apply accent color based on theme
+    const accentColorId = settings.accentColorId as AccentColorId | undefined
+    if (accentColorId && colors[theme][accentColorId]) {
+      document.documentElement.style.setProperty('--accent-color', colors[theme][accentColorId])
     }
 
     // Read and apply package manager preference
@@ -55,7 +67,6 @@ export function initPreferencesOnPrehydrate() {
 
     // Set data attribute for CSS-based visibility
     document.documentElement.dataset.pm = pm
-
     document.documentElement.dataset.collapsed = settings.sidebar?.collapsed?.join(' ') ?? ''
   })
 }
diff --git a/public-dev/logo.svg b/public-dev/logo.svg
index 2be0bf86f..11afac893 100644
--- a/public-dev/logo.svg
+++ b/public-dev/logo.svg
@@ -1,13 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <rect width="512" height="512" rx="64" fill="#0a0a0a"/>
-  <rect x="110" y="310" width="60" height="60" fill="#20461A"/>
-  <text
-    x="320"
-    y="370"
-    font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
-    font-size="420"
-    font-weight="500"
-    text-anchor="middle"
-    fill="#91BA4D"
-  ><tspan>/</tspan></text>
+  <defs>
+    <rect id="bg" width="512" height="512" rx="64"/>
+    <rect id="square" x="110" y="310" width="60" height="60"/>
+    <text
+      id="slash"
+      x="320"
+      y="370"
+      font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+      font-size="420"
+      font-weight="500"
+      text-anchor="middle"
+    ><tspan>/</tspan></text>
+  </defs>
+
+  <use href="#bg" fill="#0a0a0a"/>
+  <use href="#square" fill="var(--accent)"/>
+  <use href="#slash" fill="var(--accent)"/>
 </svg>
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index ad25d9835..ac239da50 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -24,10 +24,20 @@ export const SLINGSHOT_HOST = 'slingshot.microcosm.blue'
 
 // Theming
 export const ACCENT_COLORS = {
-  rose: 'oklch(0.797 0.084 11.056)',
-  amber: 'oklch(0.828 0.165 84.429)',
-  emerald: 'oklch(0.792 0.153 166.95)',
-  sky: 'oklch(0.787 0.128 230.318)',
-  violet: 'oklch(0.714 0.148 286.067)',
-  coral: 'oklch(0.704 0.177 14.75)',
+  light: {
+    rose: 'oklch(0.8 0.15 11.056)',
+    amber: 'oklch(0.8 0.25 84.429)',
+    emerald: 'oklch(0.70 0.17 166.95)',
+    sky: 'oklch(0.70 0.15 230.318)',
+    violet: 'oklch(0.70 0.17 286.067)',
+    coral: 'oklch(0.70 0.19 14.75)',
+  },
+  dark: {
+    rose: 'oklch(0.797 0.084 11.056)',
+    amber: 'oklch(0.828 0.165 84.429)',
+    emerald: 'oklch(0.792 0.153 166.95)',
+    sky: 'oklch(0.787 0.128 230.318)',
+    violet: 'oklch(0.714 0.148 286.067)',
+    coral: 'oklch(0.704 0.177 14.75)',
+  },
 } as const

From 8b27a1386223a63d5efc7d7475d050832d43e3fd Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 1 Feb 2026 17:19:04 +0530
Subject: [PATCH 02/10] fix download chart

---
 app/components/AppLogo.vue                    |  2 +-
 app/components/PackageWeeklyDownloadStats.vue |  2 +-
 app/composables/useSettings.ts                | 49 ++++++++++++-------
 public-dev/logo.svg                           | 28 +++++------
 4 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/app/components/AppLogo.vue b/app/components/AppLogo.vue
index d129b47b8..b16c49868 100644
--- a/app/components/AppLogo.vue
+++ b/app/components/AppLogo.vue
@@ -20,7 +20,7 @@ defineProps<{
       fill="var(--accent)"
       x="320"
       y="370"
-      font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+      font-family="'Geist Mono',ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
       font-size="420"
       font-weight="500"
       text-anchor="middle"
diff --git a/app/components/PackageWeeklyDownloadStats.vue b/app/components/PackageWeeklyDownloadStats.vue
index 46ee35022..249d93075 100644
--- a/app/components/PackageWeeklyDownloadStats.vue
+++ b/app/components/PackageWeeklyDownloadStats.vue
@@ -64,7 +64,7 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const accentColorValueById = computed<Record<string, string>>(() => {
   const map: Record<string, string> = {}
-  for (const item of accentColors) {
+  for (const item of accentColors.value) {
     map[item.id] = item.value
   }
   return map
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index 11e6c7a0f..de66bbc07 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -72,33 +72,44 @@ export function useAccentColor() {
   const { settings } = useSettings()
   const colorMode = useColorMode()
 
-  const accentColors = computed(() =>
-    Object.entries(ACCENT_COLORS[colorMode.value as 'light' | 'dark']).map(([id, value]) => ({
+  const accentColors = computed(() => {
+    const mode = (colorMode.value || 'dark') as 'light' | 'dark'
+    const colors = ACCENT_COLORS[mode]
+
+    return Object.entries(colors).map(([id, value]) => ({
       id: id as AccentColorId,
       name: id,
       value,
-    })),
-  )
-
-  const currentAccentColor = computed(() => {
-    const id = settings.value.accentColorId
-    const theme = colorMode.value as 'light' | 'dark'
-    return id ? ACCENT_COLORS[theme][id] : null
+    }))
   })
 
-  // Simple client-side check
+  function setAccentColor(id: AccentColorId | null) {
+    const mode = (colorMode.value || 'dark') as 'light' | 'dark'
+    const color = id ? ACCENT_COLORS[mode][id] : null
+
+    if (color) {
+      document.documentElement.style.setProperty('--accent-color', color)
+    } else {
+      document.documentElement.style.removeProperty('--accent-color')
+    }
+
+    settings.value.accentColorId = id
+  }
+
+  // Apply color on mount and when theme changes
   if (process.client) {
-    watchEffect(() => {
-      if (currentAccentColor.value) {
-        document.documentElement.style.setProperty('--accent-color', currentAccentColor.value)
-      } else {
-        document.documentElement.style.removeProperty('--accent-color')
-      }
+    onMounted(() => {
+      const id = settings.value.accentColorId
+      if (id) setAccentColor(id)
     })
-  }
 
-  function setAccentColor(id: AccentColorId | null) {
-    settings.value.accentColorId = id
+    watch(
+      () => colorMode.value,
+      () => {
+        const id = settings.value.accentColorId
+        if (id) setAccentColor(id)
+      },
+    )
   }
 
   return {
diff --git a/public-dev/logo.svg b/public-dev/logo.svg
index 11afac893..0f93226fc 100644
--- a/public-dev/logo.svg
+++ b/public-dev/logo.svg
@@ -1,19 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <rect id="bg" width="512" height="512" rx="64"/>
-    <rect id="square" x="110" y="310" width="60" height="60"/>
-    <text
-      id="slash"
-      x="320"
-      y="370"
-      font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
-      font-size="420"
-      font-weight="500"
-      text-anchor="middle"
-    ><tspan>/</tspan></text>
-  </defs>
-
-  <use href="#bg" fill="#0a0a0a"/>
-  <use href="#square" fill="var(--accent)"/>
-  <use href="#slash" fill="var(--accent)"/>
+  <rect width="512" height="512" rx="64" fill="#0a0a0a"/>
+  <rect x="110" y="310" width="60" height="60" fill="#525252"/>
+  <text
+    x="320"
+    y="370"
+    font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    font-size="420"
+    font-weight="500"
+    text-anchor="middle"
+    fill="#fafafa"
+  ><tspan>/</tspan></text>
 </svg>

From 217a5339b311efb92ffd131b9ff6226c7f8e9460 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 1 Feb 2026 17:30:05 +0530
Subject: [PATCH 03/10] fix modal chart

---
 app/components/PackageDownloadAnalytics.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue
index c96f53469..6ccc77e25 100644
--- a/app/components/PackageDownloadAnalytics.vue
+++ b/app/components/PackageDownloadAnalytics.vue
@@ -59,7 +59,7 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const accentColorValueById = computed<Record<string, string>>(() => {
   const map: Record<string, string> = {}
-  for (const item of accentColors) {
+  for (const item of accentColors.value) {
     map[item.id] = item.value
   }
   return map

From 9eb3438b00fadfd53aa3762c08fc247be3e2d363 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 1 Feb 2026 20:16:26 +0530
Subject: [PATCH 04/10] use accent color as focus-ring

default accent-color
otherwise half opacity
---
 app/assets/main.css                           |  4 +--
 app/components/CollapsibleSection.vue         |  2 +-
 app/components/Header/AuthModal.client.vue    | 10 +++---
 app/components/Header/ConnectorModal.vue      |  8 ++---
 app/components/Modal.client.vue               |  2 +-
 app/components/Org/MembersPanel.vue           | 32 +++++++++----------
 app/components/Org/OperationsQueue.vue        | 16 +++++-----
 app/components/Org/TeamsPanel.vue             | 32 +++++++++----------
 app/components/Package/AccessControls.vue     | 14 ++++----
 app/components/Package/ClaimPackageModal.vue  | 14 ++++----
 app/components/Package/Dependencies.vue       |  6 ++--
 app/components/Package/DeprecatedTree.vue     |  2 +-
 app/components/Package/DownloadAnalytics.vue  |  2 +-
 app/components/Package/InstallScripts.vue     |  4 +--
 app/components/Package/Maintainers.vue        | 12 +++----
 app/components/Package/ManagerSelect.vue      |  2 +-
 app/components/Package/MetricsBadges.vue      |  2 +-
 app/components/Package/SkillsModal.vue        |  8 ++---
 app/components/Package/VulnerabilityTree.vue  |  2 +-
 .../Package/WeeklyDownloadStats.vue           |  2 +-
 app/components/Settings/TranslationHelper.vue |  6 ++--
 app/components/Terminal/Execute.vue           |  2 +-
 app/components/Terminal/Install.vue           | 10 +++---
 app/components/UserCombobox.vue               |  2 +-
 app/components/compare/FacetSelector.vue      |  2 +-
 app/pages/[...package].vue                    |  6 ++--
 app/pages/about.vue                           |  2 +-
 app/pages/code/[...path].vue                  |  2 +-
 app/pages/index.vue                           |  2 +-
 app/pages/search.vue                          |  4 +--
 app/pages/settings.vue                        |  8 ++---
 31 files changed, 111 insertions(+), 111 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index ea09e84ac..42e985e55 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -129,7 +129,7 @@ a:hover {
 }
 
 a:focus-visible {
-  outline: 2px solid var(--border-hover);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -149,7 +149,7 @@ button {
 }
 
 button:focus-visible {
-  outline: 2px solid var(--border-hover);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
   border-radius: 4px;
 }
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 7fe7b1621..7aa26538a 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -84,7 +84,7 @@ useHead({
         <button
           :id="buttonId"
           type="button"
-          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index dcc79883c..6af8e719c 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -49,7 +49,7 @@ async function handleLogin() {
         </div>
       </div>
       <button
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="logout"
       >
         {{ $t('auth.modal.disconnect') }}
@@ -76,7 +76,7 @@ async function handleLogin() {
             :placeholder="$t('auth.modal.handle_placeholder')"
             autocomplete="off"
             spellcheck="false"
-            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           />
         </div>
 
@@ -114,13 +114,13 @@ async function handleLogin() {
       <button
         type="submit"
         :disabled="!handleInput.trim()"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       >
         {{ $t('auth.modal.connect') }}
       </button>
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
         @click="handleCreateAccount"
       >
         {{ $t('auth.modal.create_account') }}
@@ -128,7 +128,7 @@ async function handleLogin() {
       <hr />
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
         @click="handleBlueskySignIn"
       >
         {{ $t('auth.modal.connect_bluesky') }}
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index 0e70d3ef7..304282df5 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -70,7 +70,7 @@ function handleDisconnect() {
 
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="handleDisconnect"
       >
         {{ $t('connector.modal.disconnect') }}
@@ -116,7 +116,7 @@ function handleDisconnect() {
         <button
           type="button"
           :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           @click="copy('pnpm npmx-connector')"
         >
           <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
@@ -138,7 +138,7 @@ function handleDisconnect() {
                           :aria-label="
                             copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
                           "
-                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
                           @click="copyCommand"
                         >
                           <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
@@ -224,7 +224,7 @@ function handleDisconnect() {
       <button
         type="submit"
         :disabled="!tokenInput.trim() || isConnecting"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       >
         {{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
       </button>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 0791d3aa2..5c5481b75 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -36,7 +36,7 @@ defineExpose({
         </h2>
         <button
           type="button"
-          class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
         >
diff --git a/app/components/Org/MembersPanel.vue b/app/components/Org/MembersPanel.vue
index 15924b823..25532752f 100644
--- a/app/components/Org/MembersPanel.vue
+++ b/app/components/Org/MembersPanel.vue
@@ -296,7 +296,7 @@ watch(lastExecutionTime, () => {
       </h2>
       <button
         type="button"
-        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         :aria-label="$t('org.members.refresh')"
         :disabled="isLoading"
         @click="refreshData"
@@ -324,7 +324,7 @@ watch(lastExecutionTime, () => {
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         />
       </div>
       <div
@@ -336,7 +336,7 @@ watch(lastExecutionTime, () => {
           v-for="role in ['all', 'owner', 'admin', 'developer'] as const"
           :key="role"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :class="filterRole === role ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="filterRole === role"
           @click="filterRole = role"
@@ -352,7 +352,7 @@ watch(lastExecutionTime, () => {
           id="team-filter"
           v-model="filterTeam"
           name="team-filter"
-          class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         >
           <option :value="null">{{ $t('org.members.all_teams') }}</option>
           <option v-for="team in teamNames" :key="team" :value="team">
@@ -367,7 +367,7 @@ watch(lastExecutionTime, () => {
       >
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :class="sortBy === 'name' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'name'"
           @click="toggleSort('name')"
@@ -377,7 +377,7 @@ watch(lastExecutionTime, () => {
         </button>
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :class="sortBy === 'role' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'role'"
           @click="toggleSort('role')"
@@ -404,7 +404,7 @@ watch(lastExecutionTime, () => {
       </p>
       <button
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="loadMembers"
       >
         {{ $t('common.try_again') }}
@@ -451,7 +451,7 @@ watch(lastExecutionTime, () => {
               :id="`role-${member.name}`"
               :value="member.role"
               :name="`role-${member.name}`"
-              class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
+              class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 cursor-pointer"
               @change="
                 handleChangeRole(
                   member.name,
@@ -466,7 +466,7 @@ watch(lastExecutionTime, () => {
             <!-- Remove button -->
             <button
               type="button"
-              class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
               :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
@@ -480,7 +480,7 @@ watch(lastExecutionTime, () => {
             v-for="team in member.teams"
             :key="team"
             type="button"
-            class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('org.members.view_team', { team })"
             @click="handleTeamClick(team)"
           >
@@ -509,7 +509,7 @@ watch(lastExecutionTime, () => {
             name="new-member-username"
             :placeholder="$t('org.members.username_placeholder')"
             v-bind="noCorrect"
-            class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           />
           <div class="flex items-center gap-2">
             <label for="new-member-role" class="sr-only">{{ $t('org.members.role_label') }}</label>
@@ -517,7 +517,7 @@ watch(lastExecutionTime, () => {
               id="new-member-role"
               v-model="newRole"
               name="new-member-role"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             >
               <option value="developer">{{ $t('org.members.role.developer') }}</option>
               <option value="admin">{{ $t('org.members.role.admin') }}</option>
@@ -529,7 +529,7 @@ watch(lastExecutionTime, () => {
               id="new-member-team"
               v-model="newTeam"
               name="new-member-team"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             >
               <option value="">{{ $t('org.members.no_team') }}</option>
               <option v-for="team in teamNames" :key="team" :value="team">
@@ -539,13 +539,13 @@ watch(lastExecutionTime, () => {
             <button
               type="submit"
               :disabled="!newUsername.trim() || isAddingMember"
-              class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             >
               {{ isAddingMember ? '…' : $t('org.members.add_button') }}
             </button>
             <button
               type="button"
-              class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
               :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
@@ -557,7 +557,7 @@ watch(lastExecutionTime, () => {
       <button
         v-else
         type="button"
-        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="showAddMember = true"
       >
         {{ $t('org.members.add_member') }}
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
index 21b058770..82a437b42 100644
--- a/app/components/Org/OperationsQueue.vue
+++ b/app/components/Org/OperationsQueue.vue
@@ -129,7 +129,7 @@ watch(isExecuting, executing => {
         <button
           v-if="hasOperations"
           type="button"
-          class="px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg bg-bg-subtle border border-border rounded transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg bg-bg-subtle border border-border rounded transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :aria-label="$t('operations.queue.clear_all')"
           @click="handleClearAll"
         >
@@ -137,7 +137,7 @@ watch(isExecuting, executing => {
         </button>
         <button
           type="button"
-          class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :aria-label="$t('operations.queue.refresh')"
           @click="refreshState"
         >
@@ -209,7 +209,7 @@ watch(isExecuting, executing => {
           <button
             v-if="op.status === 'pending'"
             type="button"
-            class="p-1 text-fg-muted hover:text-green-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1 text-fg-muted hover:text-green-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('operations.queue.approve_operation')"
             @click="approveOperation(op.id)"
           >
@@ -218,7 +218,7 @@ watch(isExecuting, executing => {
           <button
             v-if="op.status !== 'running'"
             type="button"
-            class="p-1 text-fg-muted hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1 text-fg-muted hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('operations.queue.remove_operation')"
             @click="removeOperation(op.id)"
           >
@@ -252,7 +252,7 @@ watch(isExecuting, executing => {
           :placeholder="$t('operations.queue.otp_placeholder')"
           autocomplete="one-time-code"
           spellcheck="false"
-          class="flex-1 px-3 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="flex-1 px-3 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         />
         <button
           type="submit"
@@ -269,7 +269,7 @@ watch(isExecuting, executing => {
       <button
         v-if="hasPendingOperations"
         type="button"
-        class="flex-1 px-4 py-2 font-mono text-sm text-fg bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="flex-1 px-4 py-2 font-mono text-sm text-fg bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="handleApproveAll"
       >
         {{ $t('operations.queue.approve_all') }} ({{ pendingOperations.length }})
@@ -278,7 +278,7 @@ watch(isExecuting, executing => {
         v-if="hasApprovedOperations && !hasOtpFailures"
         type="button"
         :disabled="isExecuting"
-        class="flex-1 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="flex-1 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
         @click="handleExecute()"
       >
         {{
@@ -327,7 +327,7 @@ watch(isExecuting, executing => {
           </div>
           <button
             type="button"
-            class="p-0.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-0.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
diff --git a/app/components/Org/TeamsPanel.vue b/app/components/Org/TeamsPanel.vue
index 32ecb5be0..81b6c41dc 100644
--- a/app/components/Org/TeamsPanel.vue
+++ b/app/components/Org/TeamsPanel.vue
@@ -266,7 +266,7 @@ watch(lastExecutionTime, () => {
       <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
       <button
         type="button"
-        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         :aria-label="$t('org.teams.refresh')"
         :disabled="isLoadingTeams"
         @click="loadTeams"
@@ -294,7 +294,7 @@ watch(lastExecutionTime, () => {
           name="teams-search"
           :placeholder="$t('org.teams.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         />
       </div>
       <div
@@ -304,7 +304,7 @@ watch(lastExecutionTime, () => {
       >
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :class="sortBy === 'name' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'name'"
           @click="toggleSort('name')"
@@ -314,7 +314,7 @@ watch(lastExecutionTime, () => {
         </button>
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :class="sortBy === 'members' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'members'"
           @click="toggleSort('members')"
@@ -341,7 +341,7 @@ watch(lastExecutionTime, () => {
       </p>
       <button
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="loadTeams"
       >
         {{ $t('common.try_again') }}
@@ -362,7 +362,7 @@ watch(lastExecutionTime, () => {
         >
           <button
             type="button"
-            class="flex-1 flex items-center gap-2 text-start rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 flex items-center gap-2 text-start rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-expanded="expandedTeams.has(teamName)"
             :aria-controls="`team-${teamName}-members`"
             @click="toggleTeam(teamName)"
@@ -394,7 +394,7 @@ watch(lastExecutionTime, () => {
           <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <button
             type="button"
-            class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('org.teams.delete_team', { name: teamName })"
             @click.stop="handleDestroyTeam(teamName)"
           >
@@ -428,7 +428,7 @@ watch(lastExecutionTime, () => {
               <span class="font-mono text-sm text-fg">{{ teamName }}</span>
               <button
                 type="button"
-                class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                 :aria-label="$t('org.teams.remove_user', { user })"
                 @click="handleRemoveUser(teamName, user)"
               >
@@ -453,18 +453,18 @@ watch(lastExecutionTime, () => {
                 :name="`add-user-${teamName}`"
                 :placeholder="$t('org.teams.username_placeholder')"
                 v-bind="noCorrect"
-                class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
               />
               <button
                 type="submit"
                 :disabled="!newUserUsername.trim() || isAddingUser"
-                class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
               >
                 {{ isAddingUser ? '…' : $t('org.teams.add_button') }}
               </button>
               <button
                 type="button"
-                class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                 :aria-label="$t('org.teams.cancel_add_user')"
                 @click="showAddUserFor = null"
               >
@@ -475,7 +475,7 @@ watch(lastExecutionTime, () => {
           <button
             v-else
             type="button"
-            class="mt-2 px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="mt-2 px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             @click="showAddUserFor = teamName"
           >
             {{ $t('org.teams.add_member') }}
@@ -509,19 +509,19 @@ watch(lastExecutionTime, () => {
               name="new-team-name"
               :placeholder="$t('org.teams.team_name_placeholder')"
               v-bind="noCorrect"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-ie text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-ie text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             />
           </div>
           <button
             type="submit"
             :disabled="!newTeamName.trim() || isCreatingTeam"
-            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           >
             {{ isCreatingTeam ? '…' : $t('org.teams.create_button') }}
           </button>
           <button
             type="button"
-            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('org.teams.cancel_create')"
             @click="showCreateTeam = false"
           >
@@ -532,7 +532,7 @@ watch(lastExecutionTime, () => {
       <button
         v-else
         type="button"
-        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="showCreateTeam = true"
       >
         {{ $t('org.teams.create_team') }}
diff --git a/app/components/Package/AccessControls.vue b/app/components/Package/AccessControls.vue
index d46d61627..4bd849871 100644
--- a/app/components/Package/AccessControls.vue
+++ b/app/components/Package/AccessControls.vue
@@ -157,7 +157,7 @@ watch(
       </h2>
       <button
         type="button"
-        class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         :aria-label="$t('package.access.refresh')"
         :disabled="isLoadingCollaborators"
         @click="loadCollaborators"
@@ -225,7 +225,7 @@ watch(
         <button
           v-if="collab.isTeam"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
           @click="handleRevokeAccess(collab.name)"
         >
@@ -250,7 +250,7 @@ watch(
             id="grant-team-select"
             v-model="selectedTeam"
             name="grant-team"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :disabled="isLoadingTeams"
           >
             <option value="" disabled>
@@ -273,7 +273,7 @@ watch(
             id="grant-permission-select"
             v-model="permission"
             name="grant-permission"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           >
             <option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
             <option value="read-write">{{ $t('package.access.permission.read_write') }}</option>
@@ -281,13 +281,13 @@ watch(
           <button
             type="submit"
             :disabled="!selectedTeam || isGranting"
-            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           >
             {{ isGranting ? '…' : $t('package.access.grant_button') }}
           </button>
           <button
             type="button"
-            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('package.access.cancel_grant')"
             @click="showGrantAccess = false"
           >
@@ -299,7 +299,7 @@ watch(
     <button
       v-else
       type="button"
-      class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
       @click="showGrantAccess = true"
     >
       {{ $t('package.access.grant_access') }}
diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue
index d06278b4a..0489bdd8d 100644
--- a/app/components/Package/ClaimPackageModal.vue
+++ b/app/components/Package/ClaimPackageModal.vue
@@ -174,14 +174,14 @@ const previewPackageJson = computed(() => {
       <div class="flex gap-3">
         <NuxtLink
           :to="`/package/${packageName}`"
-          class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           @click="close"
         >
           {{ $t('claim.modal.view_package') }}
         </NuxtLink>
         <button
           type="button"
-          class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           @click="close"
         >
           {{ $t('common.close') }}
@@ -278,7 +278,7 @@ const previewPackageJson = computed(() => {
               <div class="min-w-0">
                 <NuxtLink
                   :to="`/package/${pkg.name}`"
-                  class="font-mono text-sm text-fg hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  class="font-mono text-sm text-fg hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
                   target="_blank"
                 >
                   {{ pkg.name }}
@@ -328,7 +328,7 @@ const previewPackageJson = computed(() => {
           </div>
           <button
             type="button"
-            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             @click="connectorModal.open"
           >
             {{ $t('claim.modal.connect_button') }}
@@ -356,7 +356,7 @@ const previewPackageJson = computed(() => {
           <button
             type="button"
             :disabled="isPublishing"
-            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             @click="handleClaim"
           >
             {{ isPublishing ? $t('claim.modal.publishing') : $t('claim.modal.claim_button') }}
@@ -368,7 +368,7 @@ const previewPackageJson = computed(() => {
       <button
         v-if="!checkResult.available || !checkResult.valid"
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="close"
       >
         {{ $t('common.close') }}
@@ -385,7 +385,7 @@ const previewPackageJson = computed(() => {
       </div>
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="() => checkAvailability()"
       >
         {{ $t('common.retry') }}
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 247ca6fa4..35250973d 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -145,7 +145,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedDependencies.length > 10 && !depsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="depsExpanded = true"
       >
         {{
@@ -208,7 +208,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedPeerDependencies.length > 10 && !peerDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="peerDepsExpanded = true"
       >
         {{
@@ -262,7 +262,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="optionalDepsExpanded = true"
       >
         {{
diff --git a/app/components/Package/DeprecatedTree.vue b/app/components/Package/DeprecatedTree.vue
index 8cbcb70f7..6ce291c6c 100644
--- a/app/components/Package/DeprecatedTree.vue
+++ b/app/components/Package/DeprecatedTree.vue
@@ -48,7 +48,7 @@ function getDepthStyle(depth: DependencyDepth) {
       <!-- Header -->
       <button
         type="button"
-        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/50"
         :aria-expanded="isExpanded"
         aria-controls="deprecated-tree-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index 1802d8c3a..6ad73d2ed 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -688,7 +688,7 @@ const config = computed(() => {
           v-if="showResetButton"
           type="button"
           aria-label="Reset date range"
-          class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 sm:mb-0"
+          class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 sm:mb-0"
           @click="
             () => {
               hasUserEditedDates = false
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index f1524d366..08d38dd26 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -33,7 +33,7 @@ const isExpanded = shallowRef(false)
         <dt class="font-mono text-xs text-fg-muted">{{ scriptName }}</dt>
         <dd
           tabindex="0"
-          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :title="installScripts.content?.[scriptName]"
         >
           {{ installScripts.content?.[scriptName] || $t('package.install_scripts.script_label') }}
@@ -45,7 +45,7 @@ const isExpanded = shallowRef(false)
     <div v-if="hasNpxDeps" class="mt-3">
       <button
         type="button"
-        class="flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+        class="flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
         :aria-expanded="isExpanded"
         aria-controls="npx-packages-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 3757ea05f..b0162073a 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -222,7 +222,7 @@ watch(
         <button
           v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :aria-label="
             $t('package.maintainers.remove_owner', {
               name: maintainer.name,
@@ -239,7 +239,7 @@ watch(
     <button
       v-if="!canManageOwners && hiddenMaintainersCount > 0"
       type="button"
-      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
       @click="showAllMaintainers = !showAllMaintainers"
     >
       {{
@@ -265,18 +265,18 @@ watch(
             name="add-owner-username"
             :placeholder="$t('package.maintainers.username_placeholder')"
             v-bind="noCorrect"
-            class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           />
           <button
             type="submit"
             :disabled="!newOwnerUsername.trim() || isAdding"
-            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           >
             {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
           </button>
           <button
             type="button"
-            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
           >
@@ -287,7 +287,7 @@ watch(
       <button
         v-else
         type="button"
-        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="showAddOwner = true"
       >
         {{ $t('package.maintainers.add_owner') }}
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index 8a9bc4df7..c69bf5584 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -88,7 +88,7 @@ function handleKeydown(event: KeyboardEvent) {
   <button
     ref="triggerRef"
     type="button"
-    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 hover:text-fg"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.get_started.pm_label')"
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 126e47cea..3768162e8 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -65,7 +65,7 @@ const typesHref = computed(() => {
               ? 'text-fg-muted bg-bg-muted border border-border'
               : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
             typesHref
-              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
+              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50'
               : '',
           ]"
         >
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index b9f835a0b..777724c25 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -62,7 +62,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           :aria-selected="selectedMethod === 'skills-npm'"
           :tabindex="selectedMethod === 'skills-npm' ? 0 : -1"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :class="
             selectedMethod === 'skills-npm'
               ? 'bg-bg border-border shadow-sm text-fg'
@@ -77,7 +77,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           :aria-selected="selectedMethod === 'skills-cli'"
           :tabindex="selectedMethod === 'skills-cli' ? 0 : -1"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :class="
             selectedMethod === 'skills-cli'
               ? 'bg-bg border-border shadow-sm text-fg'
@@ -128,7 +128,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           </code>
           <button
             type="button"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >
@@ -149,7 +149,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
       <li v-for="skill in skills" :key="skill.dirName">
         <button
           type="button"
-          class="w-full flex items-center gap-2 py-1.5 text-start rounded transition-colors hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full flex items-center gap-2 py-1.5 text-start rounded transition-colors hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :aria-expanded="expandedSkills.has(skill.dirName)"
           @click="toggleSkill(skill.dirName)"
         >
diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index 0b5b2a429..ac6708b4f 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/app/components/Package/VulnerabilityTree.vue
@@ -67,7 +67,7 @@ function getDepthStyle(depth: string | undefined) {
       <!-- Header -->
       <button
         type="button"
-        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/50"
         :aria-expanded="isExpanded"
         aria-controls="vuln-tree-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 4c79fb2ae..dee25a53b 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -202,7 +202,7 @@ const config = computed(() => {
         <button
           type="button"
           @click="openChartModal"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           :title="$t('package.downloads.analyze')"
         >
           <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
diff --git a/app/components/Settings/TranslationHelper.vue b/app/components/Settings/TranslationHelper.vue
index 32e336399..03f4b9ecf 100644
--- a/app/components/Settings/TranslationHelper.vue
+++ b/app/components/Settings/TranslationHelper.vue
@@ -84,7 +84,7 @@ ${template}`
       <button
         v-if="hasMoreKeys"
         type="button"
-        class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         @click="showAll = true"
       >
         {{ $t('i18n.show_more_keys', { count: remainingCount }) }}
@@ -102,7 +102,7 @@ ${template}`
           :href="status.githubEditUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs bg-bg hover:bg-bg-subtle border border-border rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs bg-bg hover:bg-bg-subtle border border-border rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         >
           <span class="i-carbon-edit w-3.5 h-3.5" aria-hidden="true" />
           {{ $t('i18n.edit_on_github') }}
@@ -112,7 +112,7 @@ ${template}`
           :href="contributionGuideUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-fg-muted hover:text-fg rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-fg-muted hover:text-fg rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         >
           <span class="i-carbon-document w-3.5 h-3.5" aria-hidden="true" />
           {{ $t('i18n.view_guide') }}
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index e21b82f46..6f203e093 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,7 +70,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 37bd3441f..a931fee6f 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -123,7 +123,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
@@ -150,7 +150,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <NuxtLink
               :to="`/${typesPackageName}`"
-              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
               :title="$t('package.get_started.view_types', { package: typesPackageName })"
             >
               <span
@@ -188,7 +188,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
               {{ runCopied ? $t('common.copied') : $t('common.copy') }}
@@ -222,7 +222,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >
@@ -232,7 +232,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             </button>
             <NuxtLink
               :to="`/${createPackageInfo.packageName}`"
-              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
               :title="`View ${createPackageInfo.packageName}`"
             >
               <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index 9af0abb97..81f2f5dc1 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -154,7 +154,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
       :aria-activedescendant="
         highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined
       "
-      class="w-full px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="w-full px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:opacity-50 disabled:cursor-not-allowed"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
diff --git a/app/components/compare/FacetSelector.vue b/app/components/compare/FacetSelector.vue
index 281d60689..3de676c7b 100644
--- a/app/components/compare/FacetSelector.vue
+++ b/app/components/compare/FacetSelector.vue
@@ -91,7 +91,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :disabled="info.comingSoon"
           :aria-pressed="isFacetSelected(facet)"
           :aria-label="info.label"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           :class="
             info.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index ef9ae0e5a..557a75760 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -524,7 +524,7 @@ function handleClick(event: MouseEvent) {
             <NuxtLink
               v-if="docsLink"
               :to="docsLink"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 inline-flex items-center gap-1.5"
               aria-keyshortcuts="d"
             >
               <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
@@ -543,7 +543,7 @@ function handleClick(event: MouseEvent) {
                   path: [...pkg.name.split('/'), 'v', displayVersion.version],
                 },
               }"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 inline-flex items-center gap-1.5"
               aria-keyshortcuts="."
             >
               <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
@@ -557,7 +557,7 @@ function handleClick(event: MouseEvent) {
             </NuxtLink>
             <NuxtLink
               :to="{ path: '/compare', query: { packages: pkg.name } }"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 inline-flex items-center gap-1.5"
               aria-keyshortcuts="c"
             >
               <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 0a3ccdb84..8aedf4cef 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -292,7 +292,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
       <footer class="mt-16 pt-8 border-t border-border">
         <NuxtLink
           to="/"
-          class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
         >
           <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
           {{ $t('about.back_home') }}
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
index 74f37dadb..bd36cbda2 100644
--- a/app/pages/code/[...path].vue
+++ b/app/pages/code/[...path].vue
@@ -396,7 +396,7 @@ defineOgImageComponent('Default', {
                   v-for="mode in markdownViewModes"
                   :key="mode.key"
                   role="tab"
-                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 inline-flex items-center gap-1.5"
                   :class="
                     markdownViewMode === mode.key
                       ? 'bg-bg shadow text-fg border-border'
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 79c757501..68be75a56 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -92,7 +92,7 @@ defineOgImageComponent('Default', {
 
               <button
                 type="submit"
-                class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
               >
                 {{ $t('search.button') }}
               </button>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index c84816bdb..a572e97cd 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -624,7 +624,7 @@ defineOgImageComponent('Default', {
             </div>
             <button
               type="button"
-              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
               @click="claimPackageModalRef?.open()"
             >
               {{ $t('search.claim_button', { name: query }) }}
@@ -715,7 +715,7 @@ defineOgImageComponent('Default', {
                 <p class="text-sm text-fg-muted mb-3">{{ $t('search.want_to_claim') }}</p>
                 <button
                   type="button"
-                  class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                  class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                   @click="claimPackageModalRef?.open()"
                 >
                   {{ $t('search.claim_button', { name: query }) }}
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index ceca5c04b..1a26e6f8f 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -46,7 +46,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 shrink-0"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 shrink-0"
             @click="router.back()"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
@@ -74,7 +74,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <select
                 id="theme-select"
                 :value="colorMode.preference"
-                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
+                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 cursor-pointer"
                 @change="
                   colorMode.preference = ($event.target as HTMLSelectElement).value as
                     | 'light'
@@ -153,7 +153,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 <select
                   id="language-select"
                   :value="locale"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 cursor-pointer"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
                   <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
@@ -185,7 +185,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 href="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
               >
                 <span class="i-carbon:logo-github w-4 h-4" aria-hidden="true" />
                 {{ $t('settings.help_translate') }}

From 96da2c1eef6e709cd728c74c0ad1e494c01689d2 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 1 Feb 2026 20:45:01 +0530
Subject: [PATCH 05/10] conflict fix

---
 app/pages/[...package].vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 557a75760..fb7eb8a55 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -122,6 +122,12 @@ const displayVersion = computed(() => {
   return pkg.value.versions[latestTag] ?? null
 })
 
+// Process package description
+const pkgDescription = useMarkdown(() => ({
+  text: pkg.value?.description ?? '',
+  packageName: pkg.value?.name,
+}))
+
 //copy package name
 const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
   source: packageName,
@@ -160,6 +166,10 @@ const deprecationNotice = computed(() => {
   return { type: 'version' as const, message: displayVersion.value.deprecated }
 })
 
+const deprecationNoticeMessage = useMarkdown(() => ({
+  text: deprecationNotice.value?.message ?? '',
+}))
+
 const sizeTooltip = computed(() => {
   const chunks = [
     displayVersion.value &&
@@ -506,9 +516,9 @@ function handleClick(event: MouseEvent) {
       <section class="area-details">
         <div class="mb-4">
           <!-- Description container with min-height to prevent CLS -->
-          <div class="max-w-2xl ms-1 min-h-[4.5rem]">
-            <p v-if="pkg.description" class="text-fg-muted text-base m-0">
-              <MarkdownText :text="pkg.description" :package-name="pkg.name" />
+          <div class="max-w-2xl min-h-[4.5rem]">
+            <p v-if="pkgDescription" class="text-fg-muted text-base m-0">
+              <span v-html="pkgDescription" />
             </p>
             <p v-else class="text-fg-subtle text-base m-0 italic">
               {{ $t('package.no_description') }}
@@ -713,8 +723,8 @@ function handleClick(event: MouseEvent) {
                 : $t('package.deprecation.version')
             }}
           </h2>
-          <p v-if="deprecationNotice.message" class="text-base m-0">
-            <MarkdownText :text="deprecationNotice.message" />
+          <p v-if="deprecationNoticeMessage" class="text-base m-0">
+            <span v-html="deprecationNoticeMessage" />
           </p>
           <p v-else class="text-base m-0 italic">
             {{ $t('package.deprecation.no_reason') }}

From 023db121b31119c6b378a235afadc3382c8315b5 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 1 Feb 2026 21:27:46 +0530
Subject: [PATCH 06/10] accent color for ring in uno config

---
 uno.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/uno.config.ts b/uno.config.ts
index 67a80d954..d8407a1c2 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -120,7 +120,7 @@ export default defineConfig({
     ['container-sm', 'max-w-4xl mx-auto px-4 sm:px-6'],
 
     // Focus states - subtle but accessible
-    ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],
+    ['focus-ring', 'outline-none focus-visible:(ring-2 ring-offset-2 ring-fg/50)'],
 
     // Buttons
     [
@@ -149,7 +149,7 @@ export default defineConfig({
     // Form elements
     [
       'input-base',
-      'w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)',
+      'w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-accent/50)',
     ],
 
     // Tags/badges

From 2be900e077522faef0487f067ac55c622ad6da89 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 1 Feb 2026 22:10:39 +0530
Subject: [PATCH 07/10] tweak colors

---
 app/components/AppHeader.vue                  |  6 ++--
 app/components/CollapsibleSection.vue         |  2 +-
 app/components/Header/AccountMenu.client.vue  |  2 +-
 app/components/Header/AuthModal.client.vue    | 10 +++---
 app/components/Header/ConnectorModal.vue      | 12 +++----
 app/components/Header/MobileMenu.vue          |  2 +-
 app/components/Header/SearchBox.vue           |  2 +-
 app/components/Modal.client.vue               |  2 +-
 app/components/Org/MembersPanel.vue           | 32 +++++++++----------
 app/components/Org/OperationsQueue.vue        | 16 +++++-----
 app/components/Org/TeamsPanel.vue             | 32 +++++++++----------
 app/components/Package/AccessControls.vue     | 14 ++++----
 app/components/Package/ClaimPackageModal.vue  | 14 ++++----
 app/components/Package/Dependencies.vue       |  6 ++--
 app/components/Package/DeprecatedTree.vue     |  2 +-
 app/components/Package/DownloadAnalytics.vue  |  2 +-
 app/components/Package/InstallScripts.vue     |  4 +--
 app/components/Package/Maintainers.vue        | 12 +++----
 app/components/Package/ManagerSelect.vue      |  2 +-
 app/components/Package/MetricsBadges.vue      |  2 +-
 app/components/Package/SkillsModal.vue        |  8 ++---
 app/components/Package/VulnerabilityTree.vue  |  2 +-
 .../Package/WeeklyDownloadStats.vue           |  2 +-
 app/components/Settings/TranslationHelper.vue |  8 ++---
 app/components/Terminal/Execute.vue           |  2 +-
 app/components/Terminal/Install.vue           | 10 +++---
 app/components/UserCombobox.vue               |  2 +-
 app/components/compare/FacetSelector.vue      |  2 +-
 app/components/compare/PackageSelector.vue    |  2 +-
 app/pages/[...package].vue                    |  6 ++--
 app/pages/about.vue                           |  2 +-
 app/pages/code/[...path].vue                  |  2 +-
 app/pages/index.vue                           |  4 +--
 app/pages/search.vue                          |  4 +--
 app/pages/settings.vue                        |  8 ++---
 app/utils/prehydrate.ts                       | 12 +++----
 shared/utils/constants.ts                     | 10 +++---
 37 files changed, 131 insertions(+), 131 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index a6a8bf8cc..590567126 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -153,7 +153,7 @@ onKeyStroke(
         <!-- Desktop: Compare link -->
         <NuxtLink
           to="/compare"
-          class="hidden sm:inline-flex link-subtle px-2 py-1.5 hover:bg-bg-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle px-2 py-1.5 hover:bg-bg-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           aria-keyshortcuts="c"
         >
           {{ $t('nav.compare') }}
@@ -168,7 +168,7 @@ onKeyStroke(
         <!-- Desktop: Settings link -->
         <NuxtLink
           to="/settings"
-          class="hidden sm:inline-flex link-subtle px-2 py-1.5 hover:bg-bg-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle px-2 py-1.5 hover:bg-bg-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
@@ -188,7 +188,7 @@ onKeyStroke(
         <!-- Mobile: Menu button (always visible, toggles menu) -->
         <button
           type="button"
-          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 7aa26538a..80b2b1591 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -84,7 +84,7 @@ useHead({
         <button
           :id="buttonId"
           type="button"
-          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index b9287b1a7..e4a64d35f 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -58,7 +58,7 @@ function openAuthModal() {
   <div ref="accountMenuRef" class="relative">
     <button
       type="button"
-      class="relative flex items-center justify-end gap-2 px-2 py-1.5 min-w-24 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+      class="relative flex items-center justify-end gap-2 px-2 py-1.5 min-w-24 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index 6af8e719c..d83d0ad3e 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -49,7 +49,7 @@ async function handleLogin() {
         </div>
       </div>
       <button
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="logout"
       >
         {{ $t('auth.modal.disconnect') }}
@@ -76,7 +76,7 @@ async function handleLogin() {
             :placeholder="$t('auth.modal.handle_placeholder')"
             autocomplete="off"
             spellcheck="false"
-            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           />
         </div>
 
@@ -114,13 +114,13 @@ async function handleLogin() {
       <button
         type="submit"
         :disabled="!handleInput.trim()"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       >
         {{ $t('auth.modal.connect') }}
       </button>
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
         @click="handleCreateAccount"
       >
         {{ $t('auth.modal.create_account') }}
@@ -128,7 +128,7 @@ async function handleLogin() {
       <hr />
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
         @click="handleBlueskySignIn"
       >
         {{ $t('auth.modal.connect_bluesky') }}
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index 304282df5..3d0e6cbcb 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -70,7 +70,7 @@ function handleDisconnect() {
 
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="handleDisconnect"
       >
         {{ $t('connector.modal.disconnect') }}
@@ -116,7 +116,7 @@ function handleDisconnect() {
         <button
           type="button"
           :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           @click="copy('pnpm npmx-connector')"
         >
           <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
@@ -138,7 +138,7 @@ function handleDisconnect() {
                           :aria-label="
                             copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
                           "
-                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
                           @click="copyCommand"
                         >
                           <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
@@ -169,7 +169,7 @@ function handleDisconnect() {
             name="connector-token"
             :placeholder="$t('connector.modal.token_placeholder')"
             v-bind="noCorrect"
-            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           />
         </div>
 
@@ -193,7 +193,7 @@ function handleDisconnect() {
               name="connector-port"
               inputmode="numeric"
               autocomplete="off"
-              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             />
           </div>
         </details>
@@ -224,7 +224,7 @@ function handleDisconnect() {
       <button
         type="submit"
         :disabled="!tokenInput.trim() || isConnecting"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       >
         {{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
       </button>
diff --git a/app/components/Header/MobileMenu.vue b/app/components/Header/MobileMenu.vue
index 1e2f49ead..80c54210b 100644
--- a/app/components/Header/MobileMenu.vue
+++ b/app/components/Header/MobileMenu.vue
@@ -90,7 +90,7 @@ onUnmounted(deactivate)
               <span class="font-mono text-sm text-fg-muted">{{ $t('nav.menu') }}</span>
               <button
                 type="button"
-                class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+                class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
                 :aria-label="$t('common.close')"
                 @click="closeMenu"
               >
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index cbb5d2d74..aeccec710 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -110,7 +110,7 @@ defineExpose({ focus })
             name="q"
             :placeholder="$t('search.placeholder')"
             v-bind="noCorrect"
-            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             @focus="handleSearchFocus"
             @blur="handleSearchBlur"
           />
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 5c5481b75..5d0a272b2 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -36,7 +36,7 @@ defineExpose({
         </h2>
         <button
           type="button"
-          class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
         >
diff --git a/app/components/Org/MembersPanel.vue b/app/components/Org/MembersPanel.vue
index 25532752f..1ce9e2943 100644
--- a/app/components/Org/MembersPanel.vue
+++ b/app/components/Org/MembersPanel.vue
@@ -296,7 +296,7 @@ watch(lastExecutionTime, () => {
       </h2>
       <button
         type="button"
-        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         :aria-label="$t('org.members.refresh')"
         :disabled="isLoading"
         @click="refreshData"
@@ -324,7 +324,7 @@ watch(lastExecutionTime, () => {
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         />
       </div>
       <div
@@ -336,7 +336,7 @@ watch(lastExecutionTime, () => {
           v-for="role in ['all', 'owner', 'admin', 'developer'] as const"
           :key="role"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :class="filterRole === role ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="filterRole === role"
           @click="filterRole = role"
@@ -352,7 +352,7 @@ watch(lastExecutionTime, () => {
           id="team-filter"
           v-model="filterTeam"
           name="team-filter"
-          class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         >
           <option :value="null">{{ $t('org.members.all_teams') }}</option>
           <option v-for="team in teamNames" :key="team" :value="team">
@@ -367,7 +367,7 @@ watch(lastExecutionTime, () => {
       >
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :class="sortBy === 'name' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'name'"
           @click="toggleSort('name')"
@@ -377,7 +377,7 @@ watch(lastExecutionTime, () => {
         </button>
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :class="sortBy === 'role' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'role'"
           @click="toggleSort('role')"
@@ -404,7 +404,7 @@ watch(lastExecutionTime, () => {
       </p>
       <button
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="loadMembers"
       >
         {{ $t('common.try_again') }}
@@ -451,7 +451,7 @@ watch(lastExecutionTime, () => {
               :id="`role-${member.name}`"
               :value="member.role"
               :name="`role-${member.name}`"
-              class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 cursor-pointer"
+              class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 cursor-pointer"
               @change="
                 handleChangeRole(
                   member.name,
@@ -466,7 +466,7 @@ watch(lastExecutionTime, () => {
             <!-- Remove button -->
             <button
               type="button"
-              class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
               :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
@@ -480,7 +480,7 @@ watch(lastExecutionTime, () => {
             v-for="team in member.teams"
             :key="team"
             type="button"
-            class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('org.members.view_team', { team })"
             @click="handleTeamClick(team)"
           >
@@ -509,7 +509,7 @@ watch(lastExecutionTime, () => {
             name="new-member-username"
             :placeholder="$t('org.members.username_placeholder')"
             v-bind="noCorrect"
-            class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           />
           <div class="flex items-center gap-2">
             <label for="new-member-role" class="sr-only">{{ $t('org.members.role_label') }}</label>
@@ -517,7 +517,7 @@ watch(lastExecutionTime, () => {
               id="new-member-role"
               v-model="newRole"
               name="new-member-role"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             >
               <option value="developer">{{ $t('org.members.role.developer') }}</option>
               <option value="admin">{{ $t('org.members.role.admin') }}</option>
@@ -529,7 +529,7 @@ watch(lastExecutionTime, () => {
               id="new-member-team"
               v-model="newTeam"
               name="new-member-team"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             >
               <option value="">{{ $t('org.members.no_team') }}</option>
               <option v-for="team in teamNames" :key="team" :value="team">
@@ -539,13 +539,13 @@ watch(lastExecutionTime, () => {
             <button
               type="submit"
               :disabled="!newUsername.trim() || isAddingMember"
-              class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             >
               {{ isAddingMember ? '…' : $t('org.members.add_button') }}
             </button>
             <button
               type="button"
-              class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
               :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
@@ -557,7 +557,7 @@ watch(lastExecutionTime, () => {
       <button
         v-else
         type="button"
-        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="showAddMember = true"
       >
         {{ $t('org.members.add_member') }}
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
index 82a437b42..f6b59a9e2 100644
--- a/app/components/Org/OperationsQueue.vue
+++ b/app/components/Org/OperationsQueue.vue
@@ -129,7 +129,7 @@ watch(isExecuting, executing => {
         <button
           v-if="hasOperations"
           type="button"
-          class="px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg bg-bg-subtle border border-border rounded transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg bg-bg-subtle border border-border rounded transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :aria-label="$t('operations.queue.clear_all')"
           @click="handleClearAll"
         >
@@ -137,7 +137,7 @@ watch(isExecuting, executing => {
         </button>
         <button
           type="button"
-          class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :aria-label="$t('operations.queue.refresh')"
           @click="refreshState"
         >
@@ -209,7 +209,7 @@ watch(isExecuting, executing => {
           <button
             v-if="op.status === 'pending'"
             type="button"
-            class="p-1 text-fg-muted hover:text-green-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="p-1 text-fg-muted hover:text-green-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('operations.queue.approve_operation')"
             @click="approveOperation(op.id)"
           >
@@ -218,7 +218,7 @@ watch(isExecuting, executing => {
           <button
             v-if="op.status !== 'running'"
             type="button"
-            class="p-1 text-fg-muted hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="p-1 text-fg-muted hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('operations.queue.remove_operation')"
             @click="removeOperation(op.id)"
           >
@@ -252,7 +252,7 @@ watch(isExecuting, executing => {
           :placeholder="$t('operations.queue.otp_placeholder')"
           autocomplete="one-time-code"
           spellcheck="false"
-          class="flex-1 px-3 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="flex-1 px-3 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         />
         <button
           type="submit"
@@ -269,7 +269,7 @@ watch(isExecuting, executing => {
       <button
         v-if="hasPendingOperations"
         type="button"
-        class="flex-1 px-4 py-2 font-mono text-sm text-fg bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="flex-1 px-4 py-2 font-mono text-sm text-fg bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="handleApproveAll"
       >
         {{ $t('operations.queue.approve_all') }} ({{ pendingOperations.length }})
@@ -278,7 +278,7 @@ watch(isExecuting, executing => {
         v-if="hasApprovedOperations && !hasOtpFailures"
         type="button"
         :disabled="isExecuting"
-        class="flex-1 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="flex-1 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
         @click="handleExecute()"
       >
         {{
@@ -327,7 +327,7 @@ watch(isExecuting, executing => {
           </div>
           <button
             type="button"
-            class="p-0.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="p-0.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
diff --git a/app/components/Org/TeamsPanel.vue b/app/components/Org/TeamsPanel.vue
index 81b6c41dc..f9f5b35e0 100644
--- a/app/components/Org/TeamsPanel.vue
+++ b/app/components/Org/TeamsPanel.vue
@@ -266,7 +266,7 @@ watch(lastExecutionTime, () => {
       <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
       <button
         type="button"
-        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         :aria-label="$t('org.teams.refresh')"
         :disabled="isLoadingTeams"
         @click="loadTeams"
@@ -294,7 +294,7 @@ watch(lastExecutionTime, () => {
           name="teams-search"
           :placeholder="$t('org.teams.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         />
       </div>
       <div
@@ -304,7 +304,7 @@ watch(lastExecutionTime, () => {
       >
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :class="sortBy === 'name' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'name'"
           @click="toggleSort('name')"
@@ -314,7 +314,7 @@ watch(lastExecutionTime, () => {
         </button>
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :class="sortBy === 'members' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'members'"
           @click="toggleSort('members')"
@@ -341,7 +341,7 @@ watch(lastExecutionTime, () => {
       </p>
       <button
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="loadTeams"
       >
         {{ $t('common.try_again') }}
@@ -362,7 +362,7 @@ watch(lastExecutionTime, () => {
         >
           <button
             type="button"
-            class="flex-1 flex items-center gap-2 text-start rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="flex-1 flex items-center gap-2 text-start rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-expanded="expandedTeams.has(teamName)"
             :aria-controls="`team-${teamName}-members`"
             @click="toggleTeam(teamName)"
@@ -394,7 +394,7 @@ watch(lastExecutionTime, () => {
           <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <button
             type="button"
-            class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('org.teams.delete_team', { name: teamName })"
             @click.stop="handleDestroyTeam(teamName)"
           >
@@ -428,7 +428,7 @@ watch(lastExecutionTime, () => {
               <span class="font-mono text-sm text-fg">{{ teamName }}</span>
               <button
                 type="button"
-                class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
                 :aria-label="$t('org.teams.remove_user', { user })"
                 @click="handleRemoveUser(teamName, user)"
               >
@@ -453,18 +453,18 @@ watch(lastExecutionTime, () => {
                 :name="`add-user-${teamName}`"
                 :placeholder="$t('org.teams.username_placeholder')"
                 v-bind="noCorrect"
-                class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
               />
               <button
                 type="submit"
                 :disabled="!newUserUsername.trim() || isAddingUser"
-                class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
               >
                 {{ isAddingUser ? '…' : $t('org.teams.add_button') }}
               </button>
               <button
                 type="button"
-                class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
                 :aria-label="$t('org.teams.cancel_add_user')"
                 @click="showAddUserFor = null"
               >
@@ -475,7 +475,7 @@ watch(lastExecutionTime, () => {
           <button
             v-else
             type="button"
-            class="mt-2 px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="mt-2 px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             @click="showAddUserFor = teamName"
           >
             {{ $t('org.teams.add_member') }}
@@ -509,19 +509,19 @@ watch(lastExecutionTime, () => {
               name="new-team-name"
               :placeholder="$t('org.teams.team_name_placeholder')"
               v-bind="noCorrect"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-ie text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-ie text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             />
           </div>
           <button
             type="submit"
             :disabled="!newTeamName.trim() || isCreatingTeam"
-            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           >
             {{ isCreatingTeam ? '…' : $t('org.teams.create_button') }}
           </button>
           <button
             type="button"
-            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('org.teams.cancel_create')"
             @click="showCreateTeam = false"
           >
@@ -532,7 +532,7 @@ watch(lastExecutionTime, () => {
       <button
         v-else
         type="button"
-        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="showCreateTeam = true"
       >
         {{ $t('org.teams.create_team') }}
diff --git a/app/components/Package/AccessControls.vue b/app/components/Package/AccessControls.vue
index 4bd849871..bae03e957 100644
--- a/app/components/Package/AccessControls.vue
+++ b/app/components/Package/AccessControls.vue
@@ -157,7 +157,7 @@ watch(
       </h2>
       <button
         type="button"
-        class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         :aria-label="$t('package.access.refresh')"
         :disabled="isLoadingCollaborators"
         @click="loadCollaborators"
@@ -225,7 +225,7 @@ watch(
         <button
           v-if="collab.isTeam"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
           @click="handleRevokeAccess(collab.name)"
         >
@@ -250,7 +250,7 @@ watch(
             id="grant-team-select"
             v-model="selectedTeam"
             name="grant-team"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :disabled="isLoadingTeams"
           >
             <option value="" disabled>
@@ -273,7 +273,7 @@ watch(
             id="grant-permission-select"
             v-model="permission"
             name="grant-permission"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           >
             <option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
             <option value="read-write">{{ $t('package.access.permission.read_write') }}</option>
@@ -281,13 +281,13 @@ watch(
           <button
             type="submit"
             :disabled="!selectedTeam || isGranting"
-            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           >
             {{ isGranting ? '…' : $t('package.access.grant_button') }}
           </button>
           <button
             type="button"
-            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('package.access.cancel_grant')"
             @click="showGrantAccess = false"
           >
@@ -299,7 +299,7 @@ watch(
     <button
       v-else
       type="button"
-      class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+      class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
       @click="showGrantAccess = true"
     >
       {{ $t('package.access.grant_access') }}
diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue
index 0489bdd8d..9e9d3a081 100644
--- a/app/components/Package/ClaimPackageModal.vue
+++ b/app/components/Package/ClaimPackageModal.vue
@@ -174,14 +174,14 @@ const previewPackageJson = computed(() => {
       <div class="flex gap-3">
         <NuxtLink
           :to="`/package/${packageName}`"
-          class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           @click="close"
         >
           {{ $t('claim.modal.view_package') }}
         </NuxtLink>
         <button
           type="button"
-          class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           @click="close"
         >
           {{ $t('common.close') }}
@@ -278,7 +278,7 @@ const previewPackageJson = computed(() => {
               <div class="min-w-0">
                 <NuxtLink
                   :to="`/package/${pkg.name}`"
-                  class="font-mono text-sm text-fg hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+                  class="font-mono text-sm text-fg hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
                   target="_blank"
                 >
                   {{ pkg.name }}
@@ -328,7 +328,7 @@ const previewPackageJson = computed(() => {
           </div>
           <button
             type="button"
-            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             @click="connectorModal.open"
           >
             {{ $t('claim.modal.connect_button') }}
@@ -356,7 +356,7 @@ const previewPackageJson = computed(() => {
           <button
             type="button"
             :disabled="isPublishing"
-            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             @click="handleClaim"
           >
             {{ isPublishing ? $t('claim.modal.publishing') : $t('claim.modal.claim_button') }}
@@ -368,7 +368,7 @@ const previewPackageJson = computed(() => {
       <button
         v-if="!checkResult.available || !checkResult.valid"
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="close"
       >
         {{ $t('common.close') }}
@@ -385,7 +385,7 @@ const previewPackageJson = computed(() => {
       </div>
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="() => checkAvailability()"
       >
         {{ $t('common.retry') }}
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 35250973d..f868b7692 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -145,7 +145,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedDependencies.length > 10 && !depsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="depsExpanded = true"
       >
         {{
@@ -208,7 +208,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedPeerDependencies.length > 10 && !peerDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="peerDepsExpanded = true"
       >
         {{
@@ -262,7 +262,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="optionalDepsExpanded = true"
       >
         {{
diff --git a/app/components/Package/DeprecatedTree.vue b/app/components/Package/DeprecatedTree.vue
index 247bc65d7..3521876eb 100644
--- a/app/components/Package/DeprecatedTree.vue
+++ b/app/components/Package/DeprecatedTree.vue
@@ -48,7 +48,7 @@ function getDepthStyle(depth: DependencyDepth) {
       <!-- Header -->
       <button
         type="button"
-        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/50"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/70"
         :aria-expanded="isExpanded"
         aria-controls="deprecated-tree-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index 6ad73d2ed..6834824d0 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -688,7 +688,7 @@ const config = computed(() => {
           v-if="showResetButton"
           type="button"
           aria-label="Reset date range"
-          class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 sm:mb-0"
+          class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 sm:mb-0"
           @click="
             () => {
               hasUserEditedDates = false
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index 08d38dd26..54e9a7cf9 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -33,7 +33,7 @@ const isExpanded = shallowRef(false)
         <dt class="font-mono text-xs text-fg-muted">{{ scriptName }}</dt>
         <dd
           tabindex="0"
-          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :title="installScripts.content?.[scriptName]"
         >
           {{ installScripts.content?.[scriptName] || $t('package.install_scripts.script_label') }}
@@ -45,7 +45,7 @@ const isExpanded = shallowRef(false)
     <div v-if="hasNpxDeps" class="mt-3">
       <button
         type="button"
-        class="flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+        class="flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
         :aria-expanded="isExpanded"
         aria-controls="npx-packages-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index b0162073a..6118c609e 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -222,7 +222,7 @@ watch(
         <button
           v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :aria-label="
             $t('package.maintainers.remove_owner', {
               name: maintainer.name,
@@ -239,7 +239,7 @@ watch(
     <button
       v-if="!canManageOwners && hiddenMaintainersCount > 0"
       type="button"
-      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
       @click="showAllMaintainers = !showAllMaintainers"
     >
       {{
@@ -265,18 +265,18 @@ watch(
             name="add-owner-username"
             :placeholder="$t('package.maintainers.username_placeholder')"
             v-bind="noCorrect"
-            class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           />
           <button
             type="submit"
             :disabled="!newOwnerUsername.trim() || isAdding"
-            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           >
             {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
           </button>
           <button
             type="button"
-            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
           >
@@ -287,7 +287,7 @@ watch(
       <button
         v-else
         type="button"
-        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="showAddOwner = true"
       >
         {{ $t('package.maintainers.add_owner') }}
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index c69bf5584..18e8e24c5 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -88,7 +88,7 @@ function handleKeydown(event: KeyboardEvent) {
   <button
     ref="triggerRef"
     type="button"
-    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 hover:text-fg"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.get_started.pm_label')"
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 3768162e8..b1b9c25c4 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -65,7 +65,7 @@ const typesHref = computed(() => {
               ? 'text-fg-muted bg-bg-muted border border-border'
               : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
             typesHref
-              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50'
+              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70'
               : '',
           ]"
         >
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 777724c25..cea041566 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -62,7 +62,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           :aria-selected="selectedMethod === 'skills-npm'"
           :tabindex="selectedMethod === 'skills-npm' ? 0 : -1"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :class="
             selectedMethod === 'skills-npm'
               ? 'bg-bg border-border shadow-sm text-fg'
@@ -77,7 +77,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           :aria-selected="selectedMethod === 'skills-cli'"
           :tabindex="selectedMethod === 'skills-cli' ? 0 : -1"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :class="
             selectedMethod === 'skills-cli'
               ? 'bg-bg border-border shadow-sm text-fg'
@@ -128,7 +128,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           </code>
           <button
             type="button"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >
@@ -149,7 +149,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
       <li v-for="skill in skills" :key="skill.dirName">
         <button
           type="button"
-          class="w-full flex items-center gap-2 py-1.5 text-start rounded transition-colors hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="w-full flex items-center gap-2 py-1.5 text-start rounded transition-colors hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :aria-expanded="expandedSkills.has(skill.dirName)"
           @click="toggleSkill(skill.dirName)"
         >
diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index ac6708b4f..9b505ea0d 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/app/components/Package/VulnerabilityTree.vue
@@ -67,7 +67,7 @@ function getDepthStyle(depth: string | undefined) {
       <!-- Header -->
       <button
         type="button"
-        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/50"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/70"
         :aria-expanded="isExpanded"
         aria-controls="vuln-tree-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index dee25a53b..b672cdadf 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -202,7 +202,7 @@ const config = computed(() => {
         <button
           type="button"
           @click="openChartModal"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           :title="$t('package.downloads.analyze')"
         >
           <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
diff --git a/app/components/Settings/TranslationHelper.vue b/app/components/Settings/TranslationHelper.vue
index 03f4b9ecf..d9ca8e970 100644
--- a/app/components/Settings/TranslationHelper.vue
+++ b/app/components/Settings/TranslationHelper.vue
@@ -68,7 +68,7 @@ ${template}`
         </h4>
         <button
           type="button"
-          class="text-xs text-accent hover:underline rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="text-xs text-accent hover:underline rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           @click="copyMissingKeysTemplate"
         >
           {{ copied ? $t('common.copied') : $t('i18n.copy_keys') }}
@@ -84,7 +84,7 @@ ${template}`
       <button
         v-if="hasMoreKeys"
         type="button"
-        class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         @click="showAll = true"
       >
         {{ $t('i18n.show_more_keys', { count: remainingCount }) }}
@@ -102,7 +102,7 @@ ${template}`
           :href="status.githubEditUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs bg-bg hover:bg-bg-subtle border border-border rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs bg-bg hover:bg-bg-subtle border border-border rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         >
           <span class="i-carbon-edit w-3.5 h-3.5" aria-hidden="true" />
           {{ $t('i18n.edit_on_github') }}
@@ -112,7 +112,7 @@ ${template}`
           :href="contributionGuideUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-fg-muted hover:text-fg rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-fg-muted hover:text-fg rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         >
           <span class="i-carbon-document w-3.5 h-3.5" aria-hidden="true" />
           {{ $t('i18n.view_guide') }}
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index 6f203e093..79bd9a13f 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,7 +70,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index a931fee6f..1b0d219e3 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -123,7 +123,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
@@ -150,7 +150,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <NuxtLink
               :to="`/${typesPackageName}`"
-              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
               :title="$t('package.get_started.view_types', { package: typesPackageName })"
             >
               <span
@@ -188,7 +188,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
               {{ runCopied ? $t('common.copied') : $t('common.copy') }}
@@ -222,7 +222,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >
@@ -232,7 +232,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             </button>
             <NuxtLink
               :to="`/${createPackageInfo.packageName}`"
-              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
               :title="`View ${createPackageInfo.packageName}`"
             >
               <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index 81f2f5dc1..d180d4b4c 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -154,7 +154,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
       :aria-activedescendant="
         highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined
       "
-      class="w-full px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="w-full px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 disabled:opacity-50 disabled:cursor-not-allowed"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
diff --git a/app/components/compare/FacetSelector.vue b/app/components/compare/FacetSelector.vue
index 3de676c7b..a2cd4d089 100644
--- a/app/components/compare/FacetSelector.vue
+++ b/app/components/compare/FacetSelector.vue
@@ -91,7 +91,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :disabled="info.comingSoon"
           :aria-pressed="isFacetSelected(facet)"
           :aria-label="info.label"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           :class="
             info.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
diff --git a/app/components/compare/PackageSelector.vue b/app/components/compare/PackageSelector.vue
index 5200ef72a..c3cf475f9 100644
--- a/app/components/compare/PackageSelector.vue
+++ b/app/components/compare/PackageSelector.vue
@@ -71,7 +71,7 @@ function handleBlur() {
         </NuxtLink>
         <button
           type="button"
-          class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           :aria-label="$t('compare.selector.remove_package', { package: pkg })"
           @click="removePackage(pkg)"
         >
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 8de22a003..69411a158 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -534,7 +534,7 @@ function handleClick(event: MouseEvent) {
             <NuxtLink
               v-if="docsLink"
               :to="docsLink"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 inline-flex items-center gap-1.5"
               aria-keyshortcuts="d"
             >
               <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
@@ -553,7 +553,7 @@ function handleClick(event: MouseEvent) {
                   path: [...pkg.name.split('/'), 'v', displayVersion.version],
                 },
               }"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 inline-flex items-center gap-1.5"
               aria-keyshortcuts="."
             >
               <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
@@ -567,7 +567,7 @@ function handleClick(event: MouseEvent) {
             </NuxtLink>
             <NuxtLink
               :to="{ path: '/compare', query: { packages: pkg.name } }"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 inline-flex items-center gap-1.5"
               aria-keyshortcuts="c"
             >
               <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
diff --git a/app/pages/about.vue b/app/pages/about.vue
index d0c65a46c..718287f90 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -292,7 +292,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
       <footer class="mt-16 pt-8 border-t border-border">
         <NuxtLink
           to="/"
-          class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
         >
           <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
           {{ $t('about.back_home') }}
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
index bd36cbda2..ae8d3f74d 100644
--- a/app/pages/code/[...path].vue
+++ b/app/pages/code/[...path].vue
@@ -396,7 +396,7 @@ defineOgImageComponent('Default', {
                   v-for="mode in markdownViewModes"
                   :key="mode.key"
                   role="tab"
-                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 inline-flex items-center gap-1.5"
+                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 inline-flex items-center gap-1.5"
                   :class="
                     markdownViewMode === mode.key
                       ? 'bg-bg shadow text-fg border-border'
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 68be75a56..a2e054a40 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -86,13 +86,13 @@ defineOgImageComponent('Default', {
                 autofocus
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
-                class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
                 @input="handleInput"
               />
 
               <button
                 type="submit"
-                class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
               >
                 {{ $t('search.button') }}
               </button>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 5aa994a2c..6fc8946df 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -624,7 +624,7 @@ defineOgImageComponent('Default', {
             </div>
             <button
               type="button"
-              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
               @click="claimPackageModalRef?.open()"
             >
               {{ $t('search.claim_button', { name: query }) }}
@@ -720,7 +720,7 @@ defineOgImageComponent('Default', {
                 <p class="text-sm text-fg-muted mb-3">{{ $t('search.want_to_claim') }}</p>
                 <button
                   type="button"
-                  class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                  class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
                   @click="claimPackageModalRef?.open()"
                 >
                   {{ $t('search.claim_button', { name: query }) }}
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 1a26e6f8f..35bd26330 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -46,7 +46,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 shrink-0"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 shrink-0"
             @click="router.back()"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
@@ -74,7 +74,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <select
                 id="theme-select"
                 :value="colorMode.preference"
-                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 cursor-pointer"
+                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 cursor-pointer"
                 @change="
                   colorMode.preference = ($event.target as HTMLSelectElement).value as
                     | 'light'
@@ -153,7 +153,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 <select
                   id="language-select"
                   :value="locale"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 cursor-pointer"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 cursor-pointer"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
                   <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
@@ -185,7 +185,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 href="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+                class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
               >
                 <span class="i-carbon:logo-github w-4 h-4" aria-hidden="true" />
                 {{ $t('settings.help_translate') }}
diff --git a/app/utils/prehydrate.ts b/app/utils/prehydrate.ts
index 38c60d8c6..46888b3a8 100644
--- a/app/utils/prehydrate.ts
+++ b/app/utils/prehydrate.ts
@@ -15,20 +15,20 @@ export function initPreferencesOnPrehydrate() {
     // Accent colors - hardcoded since ACCENT_COLORS can't be referenced
     const colors = {
       light: {
-        rose: 'oklch(0.70 0.15 11.056)',
-        amber: 'oklch(0.73 0.18 84.429)',
+        coral: 'oklch(0.70 0.19 14.75)',
+        amber: 'oklch(0.8 0.25 84.429)',
         emerald: 'oklch(0.70 0.17 166.95)',
         sky: 'oklch(0.70 0.15 230.318)',
         violet: 'oklch(0.70 0.17 286.067)',
-        coral: 'oklch(0.70 0.19 14.75)',
+        magenta: 'oklch(0.75 0.18 330)',
       },
       dark: {
-        rose: 'oklch(0.797 0.084 11.056)',
+        coral: 'oklch(0.704 0.177 14.75)',
         amber: 'oklch(0.828 0.165 84.429)',
         emerald: 'oklch(0.792 0.153 166.95)',
         sky: 'oklch(0.787 0.128 230.318)',
-        violet: 'oklch(0.714 0.148 286.067)',
-        coral: 'oklch(0.704 0.177 14.75)',
+        violet: 'oklch(0.78 0.148 286.067)',
+        magenta: 'oklch(0.78 0.15 330)',
       },
     }
 
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index 5ac2c1cc4..71a7451e7 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -28,19 +28,19 @@ export const SLINGSHOT_HOST = 'slingshot.microcosm.blue'
 // Theming
 export const ACCENT_COLORS = {
   light: {
-    rose: 'oklch(0.8 0.15 11.056)',
+    coral: 'oklch(0.70 0.19 14.75)',
     amber: 'oklch(0.8 0.25 84.429)',
     emerald: 'oklch(0.70 0.17 166.95)',
     sky: 'oklch(0.70 0.15 230.318)',
     violet: 'oklch(0.70 0.17 286.067)',
-    coral: 'oklch(0.70 0.19 14.75)',
+    magenta: 'oklch(0.75 0.18 330)',
   },
   dark: {
-    rose: 'oklch(0.797 0.084 11.056)',
+    coral: 'oklch(0.704 0.177 14.75)',
     amber: 'oklch(0.828 0.165 84.429)',
     emerald: 'oklch(0.792 0.153 166.95)',
     sky: 'oklch(0.787 0.128 230.318)',
-    violet: 'oklch(0.714 0.148 286.067)',
-    coral: 'oklch(0.704 0.177 14.75)',
+    violet: 'oklch(0.78 0.148 286.067)',
+    magenta: 'oklch(0.78 0.15 330)',
   },
 } as const

From ed804429afe11a1b02bdf39f3be4e32369ab6967 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 2 Feb 2026 15:32:23 +0530
Subject: [PATCH 08/10] fix: outline clip

as per dicussion from #650 by @JarvisInvestInsight

Co-Authored-By: J.A.R.V.I.S. <258503261+JarvisInvestInsight@users.noreply.github.com>
---
 app/components/CollapsibleSection.vue         |  2 +-
 app/components/Modal.client.vue               |  6 ++--
 app/components/Package/Dependencies.vue       |  7 ++--
 app/components/Package/DownloadAnalytics.vue  |  6 ++--
 app/components/Package/Maintainers.vue        |  4 +--
 app/components/Package/Versions.vue           | 12 +++----
 .../Package/WeeklyDownloadStats.vue           |  2 +-
 app/components/Readme.vue                     |  2 +-
 app/components/compare/FacetSelector.vue      |  4 +--
 app/components/compare/PackageSelector.vue    |  8 +++--
 app/pages/compare.vue                         |  4 +--
 app/pages/package/[...package].vue            | 34 +++++++++++--------
 12 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index f1c7a0b87..96e42e29e 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -75,7 +75,7 @@ useHead({
 
 <template>
   <section class="scroll-mt-20" :data-anchor-id="id">
-    <div class="flex items-center justify-between mb-3">
+    <div class="flex items-center justify-between mb-3 px-1">
       <component
         :is="headingLevel"
         :id="headingId"
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 3923bb34a..b78215ee6 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -25,7 +25,7 @@ defineExpose({
     <dialog
       ref="dialogRef"
       closedby="any"
-      class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
+      class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white focus-visible:outline focus-visible:outline-accent/70"
       :aria-labelledby="modalTitleId"
       v-bind="$attrs"
     >
@@ -36,11 +36,11 @@ defineExpose({
         </h2>
         <button
           type="button"
-          class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
+          class="text-fg-subtle w-5 h-5 hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
         >
-          <span class="i-carbon-close w-5 h-5" aria-hidden="true" />
+          <span class="i-carbon-close" aria-hidden="true" />
         </button>
       </div>
       <!-- Modal body content -->
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 222ac3f5d..0f153c0b0 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -75,7 +75,10 @@ const sortedOptionalDependencies = computed(() => {
       id="dependencies"
       :title="$t('package.dependencies.title', { count: sortedDependencies.length })"
     >
-      <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
+      <ul
+        class="space-y-1 list-none m-0 p-0 px-1"
+        :aria-label="$t('package.dependencies.list_label')"
+      >
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
@@ -145,7 +148,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedDependencies.length > 10 && !depsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
+        class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded"
         @click="depsExpanded = true"
       >
         {{
diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index 6847faf04..7ac465f5d 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -638,7 +638,7 @@ const config = computed(() => {
           </label>
 
           <div
-            class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
+            class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
           >
             <select
               id="granularity"
@@ -663,7 +663,7 @@ const config = computed(() => {
               {{ $t('package.downloads.start_date') }}
             </label>
             <div
-              class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
+              class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
             >
               <span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
               <input
@@ -683,7 +683,7 @@ const config = computed(() => {
               {{ $t('package.downloads.end_date') }}
             </label>
             <div
-              class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
+              class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
             >
               <span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
               <input
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index edea69066..dd3fb9374 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -168,11 +168,11 @@ watch(
 </script>
 
 <template>
-  <section id="maintainers" v-if="maintainers?.length" class="scroll-mt-20">
+  <section id="maintainers" v-if="maintainers?.length" class="scroll-mt-20 px-1">
     <h2 id="maintainers-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
       <a
         href="#maintainers"
-        class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+        class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline mt-1"
       >
         {{ $t('package.maintainers.title') }}
         <span
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 17c58e96f..1220475e1 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -310,14 +310,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
       <div v-for="row in visibleTagRows" :key="row.id">
         <div
-          class="flex items-center gap-2 pe-2"
+          class="flex items-center gap-2 pe-2 px-1"
           :class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
         >
           <!-- Expand button (only if there are more versions to show) -->
           <button
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
             type="button"
-            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
             :aria-expanded="expandedTags.has(row.tag)"
             :aria-label="
               expandedTags.has(row.tag)
@@ -350,7 +350,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div>
                 <NuxtLink
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
+                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent"
                   :class="
                     row.primaryVersion.deprecated
                       ? 'text-red-400 hover:text-red-300'
@@ -465,10 +465,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
       </div>
 
       <!-- Other versions section -->
-      <div class="pt-1">
+      <div class="p-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+          class="flex items-center gap-2 text-start rounded-sm"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
             otherVersionsExpanded
@@ -567,7 +567,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center gap-2 min-w-0">
                     <button
                       type="button"
-                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-bg rounded-sm"
                       :aria-expanded="expandedMajorGroups.has(group.groupKey)"
                       :aria-label="
                         expandedMajorGroups.has(group.groupKey)
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 2db5cb07f..af80e6e7f 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -200,7 +200,7 @@ const config = computed(() => {
         <button
           type="button"
           @click="openChartModal"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded"
           :title="$t('package.downloads.analyze')"
         >
           <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index ee673e1e9..3f0278e28 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -35,7 +35,7 @@ const handleCopy = async (e: MouseEvent) => {
 
 <template>
   <article
-    class="readme prose prose-invert max-w-[70ch] lg:max-w-none"
+    class="readme prose prose-invert max-w-[70ch] lg:max-w-none px-1"
     v-html="html"
     @click="handleCopy"
   />
diff --git a/app/components/compare/FacetSelector.vue b/app/components/compare/FacetSelector.vue
index a2cd4d089..a1e5a5825 100644
--- a/app/components/compare/FacetSelector.vue
+++ b/app/components/compare/FacetSelector.vue
@@ -44,7 +44,7 @@ function isCategoryNoneSelected(category: string): boolean {
         </span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryAllSelected(category)
               ? 'text-fg-muted'
@@ -63,7 +63,7 @@ function isCategoryNoneSelected(category: string): boolean {
         <span class="text-[10px] text-fg-muted/40">/</span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryNoneSelected(category)
               ? 'text-fg-muted'
diff --git a/app/components/compare/PackageSelector.vue b/app/components/compare/PackageSelector.vue
index 767dc5352..e2745fc3a 100644
--- a/app/components/compare/PackageSelector.vue
+++ b/app/components/compare/PackageSelector.vue
@@ -82,16 +82,18 @@ function handleBlur() {
 
     <!-- Add package input -->
     <div v-if="packages.length < maxPackages" class="relative">
-      <div class="relative">
+      <div class="relative group">
         <label for="package-search" class="sr-only">
           {{ $t('compare.selector.search_label') }}
         </label>
+
         <span
-          class="absolute inset-is-3 top-1/2 -translate-y-1/2 text-fg-subtle flex"
+          class="absolute inset-y-0 start-3 flex items-center text-fg-subtle pointer-events-none group-focus-within:text-accent"
           aria-hidden="true"
         >
           <span class="i-carbon:search w-4 h-4" />
         </span>
+
         <input
           id="package-search"
           v-model="inputValue"
@@ -101,7 +103,7 @@ function handleBlur() {
               ? $t('compare.selector.search_first')
               : $t('compare.selector.search_add')
           "
-          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:outline-none"
+          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
           aria-autocomplete="list"
           @focus="isInputFocused = true"
           @blur="handleBlur"
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index b7c807917..ff44da411 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -86,7 +86,7 @@ useSeoMeta({
           </h2>
           <button
             type="button"
-            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
             :class="isAllSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
             :disabled="isAllSelected"
             :aria-label="$t('compare.facets.select_all')"
@@ -97,7 +97,7 @@ useSeoMeta({
           <span class="text-[10px] text-fg-muted/40" aria-hidden="true">/</span>
           <button
             type="button"
-            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
             :class="isNoneSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
             :disabled="isNoneSelected"
             :aria-label="$t('compare.facets.deselect_all')"
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 13603e3ea..53dcf09ed 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -420,7 +420,7 @@ function handleClick(event: MouseEvent) {
         <div class="flex items-baseline gap-2 sm:gap-3 flex-wrap min-w-0">
           <div class="group relative flex flex-col items-start min-w-0">
             <h1
-              class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
+              class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words group relative"
               :title="pkg.name"
             >
               <NuxtLink
@@ -437,17 +437,21 @@ function handleClick(event: MouseEvent) {
             </h1>
 
             <!-- Floating copy button -->
-            <TooltipAnnounce :text="$t('common.copied')" :isVisible="copiedPkgName">
-              <button
-                type="button"
-                @click="copyPkgName()"
-                class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
-                :aria-label="$t('package.copy_name')"
-              >
-                <span class="i-carbon:copy w-3.5 h-3.5" aria-hidden="true" />
-                {{ $t('package.copy_name') }}
-              </button>
-            </TooltipAnnounce>
+            <button
+              type="button"
+              @click="copyPkgName()"
+              class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
+              :class="
+                copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border'
+              "
+            >
+              <span
+                :class="copiedPkgName ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                class="w-3.5 h-3.5"
+                aria-hidden="true"
+              />
+              {{ copiedPkgName ? $t('common.copied') : $t('package.copy_name') }}
+            </button>
           </div>
           <span
             v-if="resolvedVersion"
@@ -958,7 +962,7 @@ function handleClick(event: MouseEvent) {
         <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-4">
           <a
             href="#readme"
-            class="inline-flex py-4 px-2 items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+            class="inline-flex py-4 px-2 items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline ms-1 mt-1"
           >
             {{ $t('package.readme.title') }}
             <span
@@ -994,7 +998,7 @@ function handleClick(event: MouseEvent) {
           </ClientOnly>
 
           <!-- Keywords -->
-          <section id="keywords" v-if="displayVersion?.keywords?.length" class="scroll-mt-20">
+          <section id="keywords" v-if="displayVersion?.keywords?.length" class="scroll-mt-20 px-1">
             <h2
               id="keywords-heading"
               class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -1043,7 +1047,7 @@ function handleClick(event: MouseEvent) {
             v-if="
               displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)
             "
-            class="scroll-mt-20"
+            class="scroll-mt-20 px-1"
           >
             <h2
               id="compatibility-heading"

From 827ebd71fd913d58a0adc677b2cec715ff39301a Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 2 Feb 2026 15:53:35 +0530
Subject: [PATCH 09/10] add AppLogo test in a11y.spec.ts

---
 test/nuxt/a11y.spec.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 1d0c50dc3..483a402a5 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -56,6 +56,7 @@ afterEach(() => {
 // For server/client variants, we need to import directly to test the specific variant
 import {
   AppFooter,
+  AppLogo,
   AppHeader,
   UserAvatar,
   BuildEnvironment,
@@ -179,6 +180,22 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('AppLogo', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with custom class', async () => {
+      const component = await mountSuspended(AppLogo, {
+        props: { class: 'h-6 w-6 text-accent' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('AppHeader', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(AppHeader)

From 250200794aa93832a98e67c699ac215c8b3a34ba Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 2 Feb 2026 17:41:31 +0530
Subject: [PATCH 10/10] fix(test) default value for colors is dark

---
 app/composables/useSettings.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index de66bbc07..7d58d3644 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -74,7 +74,7 @@ export function useAccentColor() {
 
   const accentColors = computed(() => {
     const mode = (colorMode.value || 'dark') as 'light' | 'dark'
-    const colors = ACCENT_COLORS[mode]
+    const colors = ACCENT_COLORS[mode] ?? ACCENT_COLORS.dark
 
     return Object.entries(colors).map(([id, value]) => ({
       id: id as AccentColorId,