feat: tweak button & link styles

app/app.vue

@@ -142,11 +142,12 @@ if (import.meta.client) {
 .skip-link {
   position: fixed;
   top: -100%;
+  left: 0.25rem;
   z-index: 100;
 }
 
 .skip-link:focus {
-  top: 0;
+  top: 0.25rem;
 }
 </style>
 

app/assets/main.css

@@ -222,13 +222,8 @@ body {
   line-height: 1.6;
 }
 
-:focus-visible,
 :-moz-focusring {
-  /* weird Firefox behavior makes it necessary to add `!important` 
-  or otherwise the selector would need to be more specific,
-  which it explicitly should not be. */
-  outline: 2px solid var(--accent) !important;
-  outline-offset: 2px !important;
+  outline: auto;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */

app/components/AppFooter.vue

@@ -25,7 +25,7 @@ const showModal = () => modalRef.value?.showModal?.()
           </LinkBase>
           <button
             type="button"
-            class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            class="group cursor-pointer gap-x-1 items-center rounded-sm font-mono text-fg hover:decoration-accent active:scale-[0.98] underline underline-offset-[0.2rem] decoration-1 decoration-fg/30 outline-2 outline-transparent focus-visible:(outline-offset-2 outline-accent text-accent) transition-colors duration-200"
             @click.prevent="showModal"
             aria-haspopup="dialog"
           >

app/components/AppHeader.vue

@@ -193,7 +193,7 @@ 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 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 focus-visible(outline-2 outline-accent)"
         :aria-label="$t('nav.tap_to_search')"
         @click="expandMobileSearch"
       >
@@ -207,7 +207,7 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded focus-visible:(outline-2 outline-accent)"
         >
           <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
@@ -251,12 +251,12 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0">
-        <!-- Desktop: Explore link -->
+      <div class="hidden sm:flex flex-shrink-0 space-x-0.5 md:space-x-2">
+        <!-- Desktop links -->
         <LinkBase
           v-for="link in desktopLinks"
           :key="link.name"
-          class="border-none"
+          class="border-0"
           variant="button-secondary"
           :to="link.to"
           :aria-keyshortcuts="link.keyshortcut"

app/components/Button/Base.vue

@@ -5,10 +5,9 @@ const props = withDefaults(
     type?: 'button' | 'submit'
     variant?: 'primary' | 'secondary'
     size?: 'small' | 'medium'
+    classicon?: string
     ariaKeyshortcuts?: string
     block?: boolean
-
-    classicon?: string
   }>(),
   {
     type: 'button',
@@ -28,16 +27,15 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-colors duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
-        variant === 'secondary',
-      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
-        variant === 'primary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
+      'opacity-40 cursor-not-allowed border-transparent': disabled,
     }"
     :type="props.type"
     :disabled="

app/components/Button/Group.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+    class="inline-flex items-stretch [&>*:not(:first-child)]:(-ms-px rounded-is-none) [&>*:not(:last-child)]:rounded-ie-none [&>*:focus-visible]:(relative z-40)"
   >
     <slot />
   </component>

app/components/CallToAction.vue

@@ -37,7 +37,7 @@ const socialLinks = computed(() => [
       <div
         v-for="link in socialLinks"
         :key="link.id"
-        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
+        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent"
       >
         <h3 class="z-1 flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />

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-accent/70 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-2 outline-offset-2 outline-accent) rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"

app/components/Compare/FacetSelector.vue

@@ -69,7 +69,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-accent/70"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200"
           :class="
             facet.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'

app/components/Header/AccountMenu.client.vue

@@ -56,13 +56,13 @@ function openAuthModal() {
 </script>
 
 <template>
-  <div ref="accountMenuRef" class="relative flex min-w-28 justify-end">
+  <div ref="accountMenuRef">
     <ButtonBase
       type="button"
+      class="border-0"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
-      class="border-none"
     >
       <!-- Stacked avatars when connected -->
       <span
@@ -106,7 +106,7 @@ function openAuthModal() {
       </span>
 
       <!-- "connect" text when not connected -->
-      <span v-if="!hasAnyConnection" class="font-mono text-sm">
+      <span v-if="!hasAnyConnection" class="font-sans text-sm">
         {{ $t('account_menu.connect') }}
       </span>
 
@@ -137,7 +137,7 @@ function openAuthModal() {
     >
       <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-72 z-50" role="menu">
         <div
-          class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden px-1"
+          class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/10 overflow-hidden px-1"
         >
           <!-- Connected accounts section -->
           <div v-if="hasAnyConnection" class="py-1">
@@ -227,10 +227,12 @@ function openAuthModal() {
               v-if="!isNpmConnected"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 group flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openConnectorModal"
             >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+              <span
+                class="w-8 h-8 rounded-full bg-bg-muted group-hover:bg-bg-subtle flex items-center justify-center"
+              >
                 <span
                   v-if="isNpmConnecting"
                   class="i-carbon-circle-dash w-4 h-4 text-yellow-500 animate-spin"
@@ -254,10 +256,12 @@ function openAuthModal() {
               v-if="!atprotoUser"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 group flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openAuthModal"
             >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+              <span
+                class="w-8 h-8 rounded-full bg-bg-muted group-hover:bg-bg-subtle flex items-center justify-center"
+              >
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">

app/components/Header/AccountMenu.server.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="relative flex min-w-28 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
+    class="inline-flex gap-x-1.5 items-center justify-center font-mono rounded-md text-sm px-4 py-2 bg-transparent text-fg"
+  >
+    <span class="font-sans 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>
 </template>

app/components/Header/SearchBox.vue

@@ -109,7 +109,8 @@ defineExpose({ focus })
       <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
         <div class="search-box relative flex items-center">
           <span
-            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+            aria-hidden="true"
+            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
           >
             /
           </span>
@@ -127,7 +128,7 @@ defineExpose({ focus })
             @blur="isSearchFocused = false"
             size="small"
           />
-          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
+          <button type="submit" class="sr-only" tabindex="-1">{{ $t('search.button') }}</button>
         </div>
       </div>
     </form>

app/components/LicenseDisplay.vue

@@ -18,7 +18,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         :href="token.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="link-subtle"
+        class="focus-visible:(outline-2 outline-accent) rounded-sm"
         :title="$t('package.license.view_spdx')"
       >
         {{ token.value }}

app/components/Link/Base.vue

@@ -70,26 +70,23 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
       'text-bg bg-fg': variant === 'button-primary',
       'bg-transparent text-fg': variant === 'button-secondary',
     }"
-    ><slot
-  /></span>
+  >
+    <slot />
+  </span>
   <NuxtLink
     v-else
-    class="group/link gap-x-1 items-center"
+    class="group cursor-pointer gap-x-1.5 items-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent) transition-colors duration-200"
     :class="{
       'flex': block,
       'inline-flex': !block,
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
-        !isLinkAnchor && isLink && !noUnderline,
-      'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
+      'font-mono text-fg hover:(decoration-accent) focus-visible:(text-accent outline-offset-2)':
         isLink,
-      'justify-center font-mono border border-border rounded-md transition-all duration-200':
-        isButton,
+      'justify-center border border-solid border-border rounded-md  outline-offset-2': isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
-      'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
-        variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
-        variant === 'button-primary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
     }"
     :to="to"
     :aria-keyshortcuts="ariaKeyshortcuts"

app/components/Package/Dependencies.vue

@@ -85,7 +85,7 @@ const numberFormatter = useNumberFormatter()
         )
       "
     >
-      <ul class="px-1 space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
+      <ul class="space-y-1 list-none m-0 px-1" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
@@ -143,7 +143,7 @@ const numberFormatter = useNumberFormatter()
       <button
         v-if="sortedDependencies.length > 10 && !depsExpanded"
         type="button"
-        class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
+        class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:(outline-2 outline-offset-2 outline-accent)"
         @click="depsExpanded = true"
       >
         {{

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-accent/70 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-2 outline-accent outline-offset-2) hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.get_started.pm_label')"
@@ -150,7 +150,7 @@ function handleKeydown(event: KeyboardEvent) {
           :key="pm.id"
           role="option"
           :aria-selected="selectedPM === pm.id"
-          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-colors duration-150"
+          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-color cursor-pointer duration-150"
           :class="[
             selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
             highlightedIndex === index ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',

app/components/Package/Versions.vue

@@ -324,7 +324,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <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 rounded-sm"
+            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm focus-visible:(outline-2 outline-offset-2 outline-accent)"
             :aria-expanded="expandedTags.has(row.tag)"
             :aria-label="
               expandedTags.has(row.tag)
@@ -465,7 +465,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <div class="p-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-start rounded-sm"
+          class="flex items-center gap-2 text-start rounded-sm focus-visible:(outline-2 outline-offset-2 outline-accent)"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
             otherVersionsExpanded

app/components/Package/WeeklyDownloadStats.vue

@@ -222,7 +222,6 @@ const config = computed(() => {
           v-if="hasWeeklyDownloads"
           type="button"
           @click="openChartModal"
-          class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
           :title="$t('package.downloads.analyze')"
           classicon="i-carbon:data-analytics"
         >

app/components/PackageProvenanceSection.vue

@@ -33,7 +33,7 @@ defineProps<{
           :href="details.buildSummaryUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="link text-sm text-fg-muted inline-flex"
+          class="link text-sm text-fg-muted inline-flex rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
         >
           {{ $t('package.provenance_section.view_build_summary') }}
         </a>
@@ -49,7 +49,7 @@ defineProps<{
               :href="details.sourceCommitUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link font-mono text-sm block min-w-0 truncate"
+              class="link font-mono text-sm block min-w-0 truncate rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
               :title="details.sourceCommitSha ?? details.sourceCommitUrl"
             >
               {{
@@ -70,7 +70,7 @@ defineProps<{
               :href="details.buildFileUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link font-mono text-sm block min-w-0 break-words"
+              class="link font-mono text-sm block min-w-0 break-words rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
               :title="details.buildFilePath ?? details.buildFileUrl"
             >
               {{ details.buildFilePath ?? details.buildFileUrl }}
@@ -87,7 +87,7 @@ defineProps<{
               :href="details.publicLedgerUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link text-sm inline-flex"
+              class="link text-sm inline-flex rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
             >
               {{ $t('package.provenance_section.transparency_log_entry') }}
             </a>