From 2e174c7d20c0bbeb51ce9793e67380c4f15f4586 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 16 May 2024 12:22:31 +0200
Subject: [PATCH] chore(Button): improve `subtle` variant hover state

---
 src/theme/button.ts                              |  2 +-
 .../components/__snapshots__/Button.spec.ts.snap |  2 +-
 .../__snapshots__/Pagination.spec.ts.snap        | 16 ++++++++--------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/theme/button.ts b/src/theme/button.ts
index ed4963b7..7771b96a 100644
--- a/src/theme/button.ts
+++ b/src/theme/button.ts
@@ -90,7 +90,7 @@ export default (config: { colors: string[] }) => ({
   })), ...config.colors.map((color: string) => ({
     color,
     variant: 'subtle',
-    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-100 disabled:bg-${color}-50 dark:bg-${color}-400/10 dark:hover:bg-${color}-950 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+    class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/20 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/20 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
   })), ...config.colors.map((color: string) => ({
     color,
     variant: 'ghost',
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 86496f5a..d785b5b3 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -222,7 +222,7 @@ exports[`Button > renders with variant solid correctly 1`] = `
 `;
 
 exports[`Button > renders with variant subtle correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
   <!--v-if--><span class="">Button</span>
   <!--v-if-->
 </button>"
diff --git a/test/components/__snapshots__/Pagination.spec.ts.snap b/test/components/__snapshots__/Pagination.spec.ts.snap
index cff5e9fb..59c07ae6 100644
--- a/test/components/__snapshots__/Pagination.spec.ts.snap
+++ b/test/components/__snapshots__/Pagination.spec.ts.snap
@@ -1616,31 +1616,31 @@ exports[`Pagination > renders with variant solid correctly 1`] = `
 
 exports[`Pagination > renders with variant subtle correctly 1`] = `
 "<nav>
-  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-left-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="1">
       <!--v-if--><span class="min-w-5">1</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
+    </button><button type="button" data-type="page" aria-label="Page 2" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="2">
       <!--v-if--><span class="min-w-5">2</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
+    </button><button type="button" data-type="page" aria-label="Page 3" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="3">
       <!--v-if--><span class="min-w-5">3</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
+    </button><button type="button" data-type="page" aria-label="Page 4" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="4">
       <!--v-if--><span class="min-w-5">4</span>
       <!--v-if-->
-    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
+    </button><button type="button" data-type="page" aria-label="Page 5" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5" value="5">
       <!--v-if--><span class="min-w-5">5</span>
       <!--v-if-->
-    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-400/10 dark:hover:bg-primary-950 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-1.5 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 hover:bg-primary-500/20 disabled:bg-primary-500/10 dark:bg-primary-400/10 dark:hover:bg-primary-400/20 dark:disabled:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1.5"><span class="iconify i-heroicons:chevron-double-right-20-solid shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button></div>