Add color transition to tooltip icons and "other versions"

Author: 4bh1zd

app/components/Package/Versions.vue

@@ -569,10 +569,10 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
           <TooltipApp interactive position="top">
             <span
               tabindex="0"
-              class="block cursor-help shrink-0 -m-2 p-2 -me-1 focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+              class="group/tooltip block cursor-help shrink-0 -m-2 p-2 -me-1 focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
             >
               <span
-                class="block i-lucide:info w-3.5 h-3.5 text-fg-subtle"
+                class="block i-lucide:info w-3.5 h-3.5 text-fg-subtle transition-colors group-hover/tooltip:text-fg"
                 role="img"
                 :aria-label="$t('package.versions.filter_help')"
               />
@@ -783,7 +783,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
       <div class="p-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-start rounded-sm w-full"
+          class="group/version-row flex items-center gap-2 text-start rounded-sm w-full"
           :class="otherVersionsContainsCurrent() ? 'bg-bg-subtle' : ''"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
@@ -809,7 +809,9 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
               aria-hidden="true"
             />
           </span>
-          <span class="text-xs text-fg-muted py-1.5">
+          <span
+            class="text-xs text-fg-muted py-1.5 group-hover/version-row:text-fg transition-colors"
+          >
             {{ $t('package.versions.other_versions') }}
             <span v-if="hiddenTagRows.length > 0" class="text-fg-subtle">
               ({{

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

@@ -671,7 +671,7 @@ const showSkeleton = shallowRef(false)
                 <TooltipApp v-if="sizeTooltip" :text="sizeTooltip" interactive>
                   <span
                     tabindex="0"
-                    class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+                    class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle hover:text-fg transition-colors cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
                   >
                     <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
                   </span>