on active scale down for feedback

Author: jellydeck

app/components/Button/Base.vue

@@ -48,7 +48,7 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md font-mono border border-solid 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="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 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',

app/components/Link/Base.vue

@@ -75,7 +75,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent focus-visible:(outline-2 outline-accent)"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
     :class="[
       {
         'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':