feat: tweak button & link styles

app/assets/main.css

@@ -186,13 +186,22 @@ 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;
+}
+
+input:focus {
+  border: 1px solid var(--accent);
+}
+
+input[type='text']:focus-visible,
+input[type='search']:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
+}
+
+select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */

app/components/AppHeader.vue

@@ -151,7 +151,7 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0">
+      <div class="hidden sm:flex flex-shrink-0 space-x-0.5 md:space-x-2">
         <!-- Desktop: Compare link -->
         <LinkBase
           class="border-none"

app/components/Button/Base.vue

@@ -4,6 +4,7 @@ const props = withDefaults(
     'disabled'?: boolean
     'type'?: 'button' | 'submit'
     'variant'?: 'primary' | 'secondary'
+    'class'?: string
     'size'?: 'small' | 'medium'
     'keyshortcut'?: string
 
@@ -32,15 +33,8 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-flex 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="{
-      '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 text-bg border-fg hover:enabled:(bg-fg text-bg/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',
-    }"
+    class="rounded-md outline-none group"
+    :class="props.class"
     :type="props.type"
     :disabled="
       /**
@@ -54,17 +48,29 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      v-if="classicon"
-      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
-      aria-hidden="true"
-    />
-    <slot />
-    <kbd
-      v-if="keyshortcut"
-      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
-      aria-hidden="true"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
+      :class="{
+        'text-sm px-4 py-2': size === 'medium',
+        'text-xs px-2 py-0.5': size === 'small',
+        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
+        'text-bg bg-fg border-fg hover:(bg-fg/80 rounded-xl) active:rounded-xl':
+          variant === 'primary',
+        'opacity-40 cursor-not-allowed border-transparent': disabled,
+      }"
     >
-      {{ keyshortcut }}
-    </kbd>
+      <span
+        v-if="classicon"
+        :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
+        aria-hidden="true"
+      />
+      <slot />
+      <kbd
+        v-if="keyshortcut"
+        class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+        aria-hidden="true"
+      >
+        {{ keyshortcut }}
+      </kbd>
+    </span>
   </button>
 </template>

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="flex [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
   >
     <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/Header/AccountMenu.client.vue

@@ -225,10 +225,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"
@@ -252,10 +254,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>
               <div class="flex-1 min-w-0">

app/components/Link/Base.vue

@@ -12,6 +12,7 @@ const props = withDefaults(
       'type'?: never
       'variant'?: 'button-primary' | 'button-secondary' | 'link'
       'size'?: 'small' | 'medium'
+      'class'?: string
 
       'keyshortcut'?: string
 
@@ -62,35 +63,40 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border  rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
       'text-bg bg-fg': variant === 'button-primary',
       'bg-transparent text-fg': variant === 'button-secondary',
     }"
-    ><slot
-  /></span>
+  >
+    <slot />
+  </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center"
-    :class="{
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
-      'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
-        isLink,
-      'font-mono border border-border rounded-md transition-all duration-200': isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
-      'bg-transparent text-fg hover:(bg-fg/10) focus-visible:(bg-fg/10)':
-        variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
-    }"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-offset-2 outline-accent)"
+    :class="[
+      {
+        'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
+          !isLinkAnchor && isLink,
+        'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+          isLink,
+        'border border-solid border-border rounded-md transition-all duration-200': isButton,
+        'text-sm px-4 py-2': isButtonMedium,
+        'text-xs px-2 py-0.5': isButtonSmall,
+        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
+        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
+      },
+      props.class,
+    ]"
     :to="to"
     :aria-keyshortcuts="keyshortcut"
     :target="isLinkExternal ? '_blank' : undefined"
   >
     <span
       v-if="classicon"
+      class="text-fg"
       :class="[isButtonSmall ? 'size-3' : 'size-4', classicon]"
       aria-hidden="true"
     />
@@ -108,7 +114,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     />
     <kbd
       v-if="keyshortcut"
-      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs group-hover:text-accent bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ keyshortcut }}

app/components/Settings/AccentColorPicker.vue

@@ -17,7 +17,7 @@ onPrehydrate(el => {
 
 <template>
   <fieldset
-    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-2 outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
     <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
     <label

app/components/Settings/BgThemePicker.vue

@@ -15,7 +15,7 @@ onPrehydrate(el => {
 
 <template>
   <fieldset
-    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-2 outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
     <legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
     <label

app/components/Settings/Toggle.client.vue

@@ -23,7 +23,7 @@ const checked = defineModel<boolean>({
       {{ label }}
     </span>
     <span
-      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
+      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-2 outline-accent/70 outline-offset-2 outline-solid)"
       :class="
         checked
           ? 'bg-accent border-accent group-hover:bg-accent/80'

app/pages/settings.vue

@@ -50,7 +50,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-accent/70 shrink-0 p-1.5 -mx-1.5"
+            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-accent/70 shrink-0 p-1.5 -mx-1.5 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
             @click="router.back()"
             v-show="router.options.history.state.back !== null"
           >
@@ -162,7 +162,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-accent/70 cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
                   @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">
@@ -190,15 +190,13 @@ const setLocale: typeof setNuxti18nLocale = locale => {
 
             <!-- Simple help link for source locale -->
             <template v-else>
-              <a
-                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-accent/70 rounded"
+              <LinkBase
+                classicon="i-carbon:logo-github"
+                class="font-sans"
+                to="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
               >
-                <span class="i-carbon:logo-github w-4 h-4" aria-hidden="true" />
                 {{ $t('settings.help_translate') }}
-              </a>
+              </LinkBase>
             </template>
           </div>
         </section>