refactor: rename link variants

Author: essenmitsosse

app/components/Link/Base.vue

@@ -12,13 +12,13 @@ const props = withDefaults(
        * If you want a button use `TagButton` instead.
        * */
       type?: never
-      variant?: 'primary' | 'secondary' | 'tag'
+      variant?: 'button-primary' | 'button-secondary' | 'tag'
     } &
       /** This makes sure the link always has either `to` or `href` */
       (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
       NuxtLinkProps
   >(),
-  { variant: 'secondary' },
+  { variant: 'button-secondary' },
 )
 </script>
 
@@ -30,8 +30,8 @@ const props = withDefaults(
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
       'bg-bg-muted text-fg-muted': variant === 'tag',
-      'text-bg bg-fg': variant === 'primary',
-      'bg-transparent text-fg': variant === 'secondary',
+      'text-bg bg-fg': variant === 'button-primary',
+      'bg-transparent text-fg': variant === 'button-secondary',
     }"
     ><slot
   /></span>
@@ -42,8 +42,8 @@ const props = withDefaults(
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
       'bg-bg-muted text-fg-muted hover:(text-fg border-border-hover)': variant === 'tag',
-      'text-bg bg-fg hover:(bg-fg/90)': variant === 'primary',
-      'bg-transparent text-fg hover:(bg-fg text-bg border-fg)': variant === 'secondary',
+      'text-bg bg-fg hover:(bg-fg/90)': variant === 'button-primary',
+      'bg-transparent text-fg hover:(bg-fg text-bg border-fg)': variant === 'button-secondary',
     }"
     :to="to"
     :href="href"

app/pages/@[org].vue

@@ -234,7 +234,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
 
     <!-- Empty state -->

app/pages/package-code/[...path].vue

@@ -359,7 +359,9 @@ defineOgImageComponent('Default', {
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
-      <LinkBase :to="packageRoute()">{{ $t('code.go_to_package') }}</LinkBase>
+      <LinkBase variant="button-secondary" :to="packageRoute()">{{
+        $t('code.go_to_package')
+      }}</LinkBase>
     </div>
 
     <!-- Loading state -->
@@ -371,7 +373,9 @@ defineOgImageComponent('Default', {
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
-      <LinkBase :to="packageRoute(version)">{{ $t('code.back_to_package') }}</LinkBase>
+      <LinkBase variant="button-secondary" :to="packageRoute(version)">{{
+        $t('code.back_to_package')
+      }}</LinkBase>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -473,6 +477,7 @@ defineOgImageComponent('Default', {
             {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
           <LinkBase
+            variant="button-secondary"
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
@@ -527,6 +532,7 @@ defineOgImageComponent('Default', {
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
           <LinkBase
+            variant="button-secondary"
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"

app/pages/package/[...package].vue

@@ -1151,7 +1151,7 @@ defineOgImageComponent('Package', {
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
   </main>
 </template>

app/pages/~[username]/index.vue

@@ -224,7 +224,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
 
     <!-- Package list -->

app/pages/~[username]/orgs.vue

@@ -156,7 +156,7 @@ defineOgImageComponent('Default', {
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
-        <LinkBase :to="`/~${npmUser}/orgs`" class="mt-4">{{
+        <LinkBase variant="button-secondary" :to="`/~${npmUser}/orgs`" class="mt-4">{{
           $t('user.orgs_page.view_your_orgs')
         }}</LinkBase>
       </div>