feat: extract button and link component, unify and improve design (#1071)

Co-authored-by: Robin <robin.kehl@singular-it.de>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Nathan Knowler <nathan@knowler.dev>
Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: 6 people

app/app.vue

@@ -121,7 +121,9 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
+    <LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
+      $t('common.skip_link')
+    }}</LinkBase>
 
     <AppHeader :show-logo="!isHomepage" />
 
@@ -140,19 +142,9 @@ if (import.meta.client) {
 .skip-link {
   position: fixed;
   top: -100%;
-  inset-inline-start: 0;
-  padding: 0.5rem 1rem;
-  background: var(--fg);
-  color: var(--bg);
-  font-size: 0.875rem;
   z-index: 100;
-  transition: top 0.2s ease;
 }
 
-.skip-link:hover {
-  color: var(--bg);
-  text-decoration: underline;
-}
 .skip-link:focus {
   top: 0;
 }

app/assets/main.css

@@ -160,7 +160,8 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
+  /* Offset for fixed header - otherwise anchor headers are cutted */
+  scroll-padding-top: 5rem;
   scrollbar-gutter: stable;
 }
 
@@ -186,26 +187,13 @@ body {
   line-height: 1.6;
 }
 
-/* Default link styling for accessibility on dark background */
-a {
-  color: var(--fg);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-color: var(--fg-subtle);
-  transition:
-    color 0.2s ease,
-    text-decoration-color 0.2s ease;
-}
-
-a:hover {
-  color: var(--accent);
-  text-decoration-color: var(--accent);
-}
-
-a:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
+: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;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */
@@ -215,18 +203,7 @@ dd {
 
 /* Reset button styles */
 button {
-  background: transparent;
-  border: none;
   cursor: pointer;
-  font: inherit;
-  padding: 0;
-}
-
-button:focus-visible,
-select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
 }
 
 /* Selection */

app/components/AppFooter.vue

@@ -14,58 +14,28 @@ const isHome = computed(() => route.name === 'index')
           <BuildEnvironment v-if="!isHome" footer />
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
-        <div class="hidden sm:flex items-center gap-6 min-h-11">
-          <NuxtLink :to="{ name: 'about' }" class="link-subtle font-mono text-xs flex items-center">
+        <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
+          <LinkBase :to="{ name: 'about' }">
             {{ $t('footer.about') }}
-          </NuxtLink>
-          <NuxtLink
-            :to="{ name: 'blog' }"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
-          >
+          </LinkBase>
+          <LinkBase :to="{ name: 'blog' }">
             {{ $t('footer.blog') }}
-          </NuxtLink>
-          <NuxtLink
-            :to="{ name: 'privacy' }"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
-          </NuxtLink>
-          <a
-            href="https://docs.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase to="https://docs.npmx.dev">
             {{ $t('footer.docs') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://repo.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase to="https://repo.npmx.dev">
             {{ $t('footer.source') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://social.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase to="https://social.npmx.dev">
             {{ $t('footer.social') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://chat.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase to="https://chat.npmx.dev">
             {{ $t('footer.chat') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
+          </LinkBase>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">

app/components/AppHeader.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { LinkBase } from '#components'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
@@ -150,52 +151,39 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="flex-shrink-0 flex items-center gap-0.5 sm:gap-2">
+      <div class="hidden sm:flex flex-shrink-0">
         <!-- Desktop: Compare link -->
-        <NuxtLink
+        <LinkBase
+          class="border-none"
+          variant="button-secondary"
           :to="{ name: 'compare' }"
-          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"
+          keyshortcut="c"
         >
           {{ $t('nav.compare') }}
-          <kbd
-            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-            aria-hidden="true"
-          >
-            c
-          </kbd>
-        </NuxtLink>
+        </LinkBase>
 
         <!-- Desktop: Settings link -->
-        <NuxtLink
+        <LinkBase
+          class="border-none"
+          variant="button-secondary"
           :to="{ name: 'settings' }"
-          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=","
+          keyshortcut=","
         >
           {{ $t('nav.settings') }}
-          <kbd
-            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-            aria-hidden="true"
-          >
-            ,
-          </kbd>
-        </NuxtLink>
+        </LinkBase>
 
-        <!-- Desktop: Account menu -->
-        <div class="hidden sm:block">
-          <HeaderAccountMenu />
-        </div>
-
-        <!-- Mobile: Menu button (always visible, click to open 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-accent/70 rounded"
-          :aria-label="$t('nav.open_menu')"
-          @click="showMobileMenu = true"
-        >
-          <span class="w-6 h-6 inline-block i-carbon:menu" aria-hidden="true" />
-        </button>
+        <HeaderAccountMenu />
       </div>
+
+      <!-- Mobile: Menu button (always visible, click to open menu) -->
+      <ButtonBase
+        type="button"
+        class="sm:hidden flex"
+        :aria-label="$t('nav.open_menu')"
+        :aria-expanded="showMobileMenu"
+        @click="showMobileMenu = !showMobileMenu"
+        classicon="i-carbon:menu"
+      />
     </nav>
 
     <!-- Mobile menu -->

app/components/BuildEnvironment.vue

@@ -17,27 +17,19 @@ const buildInfo = useAppConfig().buildInfo
       <NuxtTime :datetime="buildInfo.time" :locale="locale" relative />
     </i18n-t>
     <span>&middot;</span>
-    <NuxtLink
+    <LinkBase
       v-if="buildInfo.env === 'release'"
-      external
-      :href="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
-      target="_blank"
-      class="hover:text-fg transition-colors"
+      :to="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
     >
       v{{ buildInfo.version }}
-    </NuxtLink>
+    </LinkBase>
     <span v-else class="tracking-wider">{{ buildInfo.env }}</span>
 
     <template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
       <span>&middot;</span>
-      <NuxtLink
-        external
-        :href="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`"
-        target="_blank"
-        class="hover:text-fg transition-colors"
-      >
+      <LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`">
         {{ buildInfo.shortCommit }}
-      </NuxtLink>
+      </LinkBase>
     </template>
   </div>
 </template>

app/components/Button/Base.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    'disabled'?: boolean
+    'type'?: 'button' | 'submit'
+    'variant'?: 'primary' | 'secondary'
+    'size'?: 'small' | 'medium'
+    'keyshortcut'?: string
+
+    /**
+     * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
+     */
+    'aria-keyshortcuts'?: never
+
+    'classicon'?: string
+  }>(),
+  {
+    type: 'button',
+    variant: 'secondary',
+    size: 'medium',
+  },
+)
+
+const el = useTemplateRef('el')
+
+defineExpose({
+  focus: () => el.value?.focus(),
+})
+</script>
+
+<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',
+    }"
+    :type="props.type"
+    :disabled="
+      /**
+       * Unfortunately Vue _sometimes_ doesn't handle `disabled` correct,
+       * resulting in an invalid `disabled=false` attribute in the final HTML.
+       *
+       * This fixes this.
+       */
+      disabled ? true : undefined
+    "
+    :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"
+    >
+      {{ keyshortcut }}
+    </kbd>
+  </button>
+</template>

app/components/Button/Group.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{
+  as?: string | Component
+}>()
+</script>
+
+<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"
+  >
+    <slot />
+  </component>
+</template>