feat: accessible rings, accent colors & visual changes

app/assets/main.css

@@ -196,9 +196,9 @@ a:hover {
 }
 
 a:focus-visible {
-  outline: 2px solid var(--border);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */
@@ -215,6 +215,13 @@ button {
   padding: 0;
 }
 
+button:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);

app/components/AppFooter.vue

@@ -15,14 +15,14 @@ const isHome = computed(() => route.name === 'index')
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6">
-          <NuxtLink to="/about" class="link-subtle font-mono text-xs min-h-11 flex items-center">
+          <NuxtLink to="/about" class="link-subtle font-mono text-xs flex items-center">
             {{ $t('footer.about') }}
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs flex items-center gap-1"
           >
             {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -31,7 +31,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs flex items-center gap-1"
           >
             {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -40,7 +40,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs flex items-center gap-1"
           >
             {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -49,7 +49,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs flex items-center gap-1"
           >
             {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />

app/components/AppHeader.vue

@@ -95,18 +95,11 @@ onKeyStroke(
       <button
         v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
-        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded"
         :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>
 
@@ -116,16 +109,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 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>
@@ -163,11 +149,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 gap-0.5 sm:gap-2">
         <!-- 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 font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
           aria-keyshortcuts="c"
         >
           {{ $t('nav.compare') }}
@@ -182,7 +168,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 font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
@@ -202,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-accent/70 rounded"
           :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"

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="'Geist Mono',ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+      font-size="420"
+      font-weight="500"
+      text-anchor="middle"
+    >
+      <tspan>/</tspan>
+    </text>
+  </svg>
+</template>

app/components/CollapsibleSection.vue

@@ -76,7 +76,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"
@@ -85,7 +85,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-accent/70 rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"
@@ -118,14 +118,17 @@ useHead({
       </component>
 
       <!-- Actions slot for buttons or other elements -->
-      <slot name="actions" />
+      <div class="pe-1">
+        <slot name="actions" />
+      </div>
     </div>
 
     <div
       :id="contentId"
       class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
+      :inert="!isOpen"
     >
-      <div class="min-h-0 min-w-0">
+      <div class="min-h-0 min-w-0 p-1">
         <slot />
       </div>
     </div>

app/components/Compare/FacetSelector.vue

@@ -34,7 +34,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'
@@ -51,7 +51,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'
@@ -77,7 +77,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"
           :aria-label="facet.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-accent/70"
           :class="
             facet.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'

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-accent/70 rounded"
           :aria-label="$t('compare.selector.remove_package', { package: pkg })"
           @click="removePackage(pkg)"
         >
@@ -82,12 +82,12 @@ 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" />
@@ -101,7 +101,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-2 outline-accent/70)"
           aria-autocomplete="list"
           @focus="isInputFocused = true"
           @blur="handleBlur"

app/components/Header/AccountMenu.client.vue

@@ -59,7 +59,7 @@ function openAuthModal() {
   <div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
     <button
       type="button"
-      class="relative flex items-center gap-2 px-2 py-1.5 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 gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-accent/70"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"

app/components/Header/AuthModal.client.vue

@@ -34,7 +34,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-accent/70"
         @click="logout"
       >
         {{ $t('auth.modal.disconnect') }}
@@ -61,13 +61,13 @@ 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-accent focus-visible:(outline-2 outline-accent/70)"
           />
         </div>
 
         <details class="text-sm">
           <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
+            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
           >
             {{ $t('auth.modal.what_is_atmosphere') }}
           </summary>
@@ -99,21 +99,21 @@ 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-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-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-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
         @click="handleCreateAccount"
       >
         {{ $t('auth.modal.create_account') }}
       </button>
-      <hr />
+      <hr class="color-border" />
       <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-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') }}