Merge branch 'main' into fix-color-contrast

Author: userquin

.github/workflows/autofix.yml

@@ -32,8 +32,8 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 🎨 Check for non-RTL CSS classes
-        run: pnpm rtl:check
+      - name: 🎨 Check for non-RTL/non-a11y CSS classes
+        run: pnpm lint:css
 
       - name: 🌐 Compare translations
         run: pnpm i18n:check

.gitignore

@@ -40,5 +40,7 @@ test-results/
 # generated files
 shared/types/lexicons
 
+**/__screenshots__/**
+
 # output
 .vercel

.nuxtrc

@@ -1 +1 @@
-setups.@nuxt/test-utils="3.23.0"
+setups.@nuxt/test-utils="4.0.0"

app/assets/main.css

@@ -27,6 +27,14 @@
   --accent: var(--accent-color, oklch(1 0 0));
   --accent-muted: var(--accent-color, oklch(0.922 0 0));
 
+  /* accent colors */
+  --swatch-coral: oklch(0.704 0.177 14.75);
+  --swatch-amber: oklch(0.828 0.165 84.429);
+  --swatch-emerald: oklch(0.792 0.153 166.95);
+  --swatch-sky: oklch(0.787 0.128 230.318);
+  --swatch-violet: oklch(0.78 0.148 286.067);
+  --swatch-magenta: oklch(0.78 0.15 330);
+
   /* syntax highlighting colors */
   --syntax-fn: oklch(0.727 0.137 299.149);
   --syntax-str: oklch(0.829 0.088 252.458);
@@ -89,6 +97,14 @@
   --accent: var(--accent-color, oklch(0.145 0 0));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
+  /* accent colors */
+  --swatch-coral: oklch(0.7 0.19 14.75);
+  --swatch-amber: oklch(0.8 0.25 84.429);
+  --swatch-emerald: oklch(0.7 0.17 166.95);
+  --swatch-sky: oklch(0.7 0.15 230.318);
+  --swatch-violet: oklch(0.7 0.17 286.067);
+  --swatch-magenta: oklch(0.75 0.18 330);
+
   --syntax-fn: oklch(0.502 0.188 294.988);
   --syntax-str: oklch(0.425 0.152 252);
   --syntax-kw: oklch(0.588 0.193 20.469);
@@ -155,6 +171,26 @@
   }
 }
 
+/*
+ * Forced Colors Mode (WHCM) Override for Icons
+ *
+ * By default, `forced-color-adjust: preserve-parent-color` (from UnoConfig) works fine
+ * for most icons as they inherit the correct text color.
+ *
+ * However, if icons disappear in specific contexts (e.g., inside buttons with
+ * complex backgrounds or transparent states), uncomment the following block
+ * to enforce visibility using `CanvasText`.
+ */
+/* 
+@media (forced-colors: active) {
+  [class^='i-'],
+  [class*=' i-'] {
+    forced-color-adjust: none !important;
+    color: CanvasText !important;
+  }
+}
+*/
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

app/components/Compare/FacetSelector.vue

@@ -29,12 +29,12 @@ function isCategoryNoneSelected(category: string): boolean {
     <div v-for="category in categoryOrder" :key="category">
       <!-- Category header with all/none buttons -->
       <div class="flex items-center gap-2 mb-2">
-        <span class="text-[10px] text-fg-subtle uppercase tracking-wider">
+        <span class="text-3xs text-fg-subtle uppercase tracking-wider">
           {{ getCategoryLabel(category) }}
         </span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryAllSelected(category)
               ? 'text-fg-muted'
@@ -48,10 +48,10 @@ function isCategoryNoneSelected(category: string): boolean {
         >
           {{ $t('compare.facets.all') }}
         </button>
-        <span class="text-[10px] text-fg-muted/40">/</span>
+        <span class="text-2xs text-fg-muted/40">/</span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryNoneSelected(category)
               ? 'text-fg-muted'
@@ -94,7 +94,7 @@ function isCategoryNoneSelected(category: string): boolean {
             aria-hidden="true"
           />
           {{ facet.label }}
-          <span v-if="facet.comingSoon" class="text-[9px]"
+          <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
         </button>

app/components/Compare/PackageSelector.vue

@@ -77,9 +77,18 @@ function removePackage(name: string) {
 }
 
 function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter' && inputValue.value.trim()) {
+  const inputValueTrim = inputValue.value.trim()
+  const hasMatchInPackages = filteredResults.value.find(result => {
+    return result.name === inputValueTrim
+  })
+
+  if (e.key === 'Enter' && inputValueTrim) {
     e.preventDefault()
-    addPackage(inputValue.value.trim())
+    if (showNoDependencyOption.value) {
+      addPackage(NO_DEPENDENCY_ID)
+    } else if (hasMatchInPackages) {
+      addPackage(inputValueTrim)
+    }
   }
 }
 

app/components/DependencyPathPopup.vue

@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Path badge button -->
     <button
       type="button"
-      class="path-badge font-mono text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
+      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 cursor-pointer transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >

app/components/Header/AccountMenu.client.vue

@@ -120,7 +120,7 @@ function openAuthModal() {
       <!-- Operation count badge (when npm connected with pending ops) -->
       <span
         v-if="isNpmConnected && operationCount > 0"
-        class="absolute -top-1 -inset-ie-1 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
+        class="absolute -top-1 -inset-ie-1 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-3xs rounded-full"
         :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
         aria-hidden="true"
       >

app/components/Header/AccountMenu.server.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="flex items-center justify-end gap-2 px-2 py-1.5 min-w-24">
-    <span class="font-mono text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
-    <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
+  <div class="relative flex min-w-24 justify-end">
+    <div
+      class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg border-none"
+    >
+      <span class="font-mono text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
+      <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
+    </div>
   </div>
 </template>

app/components/Header/AuthModal.client.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
+import { ensureValidAtIdentifier } from '@atproto/syntax'
 
 const handleInput = shallowRef('')
+const errorMessage = shallowRef('')
 const route = useRoute()
 const { user, logout } = useAtproto()
 
@@ -13,26 +15,41 @@ const localeSubPath = ['ko', 'pt', 'ja'].includes(currentLang) ? currentLang : '
 const atprotoLink = `https://atproto.com/${localeSubPath}`
 
 async function handleBlueskySignIn() {
-  await authRedirect('https://bsky.social', { redirectTo: route.fullPath })
+  await authRedirect('https://bsky.social', { redirectTo: route.fullPath, locale: locale.value })
 }
 
 async function handleCreateAccount() {
-  await authRedirect('https://npmx.social', { create: true, redirectTo: route.fullPath })
+  await authRedirect('https://npmx.social', {
+    create: true,
+    redirectTo: route.fullPath,
+    locale: locale.value,
+  })
 }
 
 async function handleLogin() {
   if (handleInput.value) {
-    await authRedirect(handleInput.value)
+    // URLS to PDSs are valid for oauth redirects
+    if (!handleInput.value.startsWith('https://')) {
+      try {
+        ensureValidAtIdentifier(handleInput.value)
+      } catch (error) {
+        errorMessage.value =
+          error instanceof Error ? error.message : $t('auth.modal.default_input_error')
+        return
+      }
+    }
+    await authRedirect(handleInput.value, {
+      redirectTo: route.fullPath,
+      locale: locale.value,
+    })
   }
 }
 
 watch(handleInput, newHandleInput => {
+  errorMessage.value = ''
   if (!newHandleInput) return
 
-  const normalized = newHandleInput
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9.-]/g, '')
+  const normalized = newHandleInput.trim().toLowerCase().replace(/@/g, '')
 
   if (normalized !== newHandleInput) {
     handleInput.value = normalized
@@ -81,6 +98,9 @@ watch(handleInput, newHandleInput => {
             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 hover:border-fg-subtle focus:border-accent focus-visible:(outline-2 outline-accent/70)"
           />
+          <p v-if="errorMessage" class="text-red-500 text-xs mt-1" role="alert">
+            {{ errorMessage }}
+          </p>
         </div>
 
         <details class="text-sm">