From 7ab565a24182e43b9931f93a2c221449a614efe8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 16 Jan 2026 11:55:12 +0000
Subject: [PATCH 1/8] Playground - add some spacing between sections and
 various badge variations for testing

---
 resources/js/pages/Playground.vue | 49 ++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/resources/js/pages/Playground.vue b/resources/js/pages/Playground.vue
index 6c73f167b6..429563ae05 100644
--- a/resources/js/pages/Playground.vue
+++ b/resources/js/pages/Playground.vue
@@ -24,7 +24,7 @@ defineProps(['icons']);
     <ui-dropdown-footer text="Logout" icon="arrow-right" />
 </ui-dropdown>
 
-    <div v-cloak>
+    <div v-cloak class="space-y-12">
         <div class="space-y-12 prose starting-style-transition starting-style-transition-children">
             <h1>Typography <strong>Test</strong> Document</h1>
             <p class="lead">This comprehensive document tests all typography elements supported by both tw-prose and @tailwindcss/typography plugins.</p>
@@ -193,6 +193,53 @@ defineProps(['icons']);
                     <ui-badge size="sm" text="Cyan" color="cyan" />
                     <ui-badge size="sm" text="Purple" color="purple" />
                     <ui-badge size="sm" text="Gray" color="gray" />
+                    <ui-badge size="sm" text="Rose" color="rose" />
+                    <ui-badge size="sm" text="Emerald" color="emerald" />
+                    <ui-badge size="sm" text="Fuchsia" color="fuchsia" />
+                    <ui-badge size="sm" text="Indigo" color="indigo" />
+                    <ui-badge size="sm" text="Lime" color="lime" />
+                    <ui-badge size="sm" text="Orange" color="orange" />
+                    <ui-badge size="sm" text="Sky" color="sky" />
+                    <ui-badge size="sm" text="Teal" color="teal" />
+                    <ui-badge size="sm" text="Violet" color="violet" />
+                    <ui-badge size="sm" text="White" color="white" />
+                    <ui-badge size="sm" text="Yellow" color="yellow" />
+                </div>
+            </section>
+
+            <section class="space-y-4">
+                <ui-heading size="lg">Badges as Links</ui-heading>
+                <div class="mb-4 flex gap-2 sm:gap-3 items-end flex-wrap">
+                    <ui-badge size="lg" text="Green Link" color="green" href="#" />
+                    <ui-badge size="lg" text="Red Link" color="red" href="#" />
+                    <ui-badge size="lg" text="Black Link" color="black" href="#" />
+                    <ui-badge text="Blue Link" color="blue" href="#" />
+                    <ui-badge text="Amber Link" color="amber" href="#" />
+                    <ui-badge text="Pink Link" color="pink" href="#" />
+                    <ui-badge size="sm" text="Cyan Link" color="cyan" href="#" />
+                    <ui-badge size="sm" text="Purple Link" color="purple" href="#" />
+                    <ui-badge size="sm" text="Rose Link" color="rose" href="#" />
+                    <ui-badge size="sm" text="Emerald Link" color="emerald" href="#" />
+                    <ui-badge size="sm" text="Fuchsia Link" color="fuchsia" href="#" />
+                    <ui-badge size="sm" text="Sky Link" color="sky" href="#" />
+                </div>
+            </section>
+
+            <section class="space-y-4">
+                <ui-heading size="lg">Badges as Buttons</ui-heading>
+                <div class="mb-4 flex gap-2 sm:gap-3 items-end flex-wrap">
+                    <ui-badge size="lg" text="Green Button" color="green" as="button" />
+                    <ui-badge size="lg" text="Red Button" color="red" as="button" />
+                    <ui-badge size="lg" text="Black Button" color="black" as="button" />
+                    <ui-badge text="Blue Button" color="blue" as="button" />
+                    <ui-badge text="Amber Button" color="amber" as="button" />
+                    <ui-badge text="Pink Button" color="pink" as="button" />
+                    <ui-badge size="sm" text="Cyan Button" color="cyan" as="button" />
+                    <ui-badge size="sm" text="Purple Button" color="purple" as="button" />
+                    <ui-badge size="sm" text="Rose Button" color="rose" as="button" />
+                    <ui-badge size="sm" text="Emerald Button" color="emerald" as="button" />
+                    <ui-badge size="sm" text="Fuchsia Button" color="fuchsia" as="button" />
+                    <ui-badge size="sm" text="Sky Button" color="sky" as="button" />
                 </div>
             </section>
 

From f9c5d171a246a7c49602b465e5fc8f88d926117e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 16 Jan 2026 12:02:52 +0000
Subject: [PATCH 2/8] Playground - add some badge variations to test

---
 resources/js/pages/Playground.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/resources/js/pages/Playground.vue b/resources/js/pages/Playground.vue
index 429563ae05..8b6521be7b 100644
--- a/resources/js/pages/Playground.vue
+++ b/resources/js/pages/Playground.vue
@@ -193,6 +193,7 @@ defineProps(['icons']);
                     <ui-badge size="sm" text="Cyan" color="cyan" />
                     <ui-badge size="sm" text="Purple" color="purple" />
                     <ui-badge size="sm" text="Gray" color="gray" />
+                    <ui-badge size="sm" text="Default" />
                     <ui-badge size="sm" text="Rose" color="rose" />
                     <ui-badge size="sm" text="Emerald" color="emerald" />
                     <ui-badge size="sm" text="Fuchsia" color="fuchsia" />
@@ -218,10 +219,19 @@ defineProps(['icons']);
                     <ui-badge text="Pink Link" color="pink" href="#" />
                     <ui-badge size="sm" text="Cyan Link" color="cyan" href="#" />
                     <ui-badge size="sm" text="Purple Link" color="purple" href="#" />
+                    <ui-badge size="sm" text="Gray Link" color="gray" href="#" />
+                    <ui-badge size="sm" text="Default Link" href="#" />
                     <ui-badge size="sm" text="Rose Link" color="rose" href="#" />
                     <ui-badge size="sm" text="Emerald Link" color="emerald" href="#" />
                     <ui-badge size="sm" text="Fuchsia Link" color="fuchsia" href="#" />
+                    <ui-badge size="sm" text="Indigo Link" color="indigo" href="#" />
+                    <ui-badge size="sm" text="Lime Link" color="lime" href="#" />
+                    <ui-badge size="sm" text="Orange Link" color="orange" href="#" />
                     <ui-badge size="sm" text="Sky Link" color="sky" href="#" />
+                    <ui-badge size="sm" text="Teal Link" color="teal" href="#" />
+                    <ui-badge size="sm" text="Violet Link" color="violet" href="#" />
+                    <ui-badge size="sm" text="White Link" color="white" href="#" />
+                    <ui-badge size="sm" text="Yellow Link" color="yellow" href="#" />
                 </div>
             </section>
 
@@ -236,10 +246,19 @@ defineProps(['icons']);
                     <ui-badge text="Pink Button" color="pink" as="button" />
                     <ui-badge size="sm" text="Cyan Button" color="cyan" as="button" />
                     <ui-badge size="sm" text="Purple Button" color="purple" as="button" />
+                    <ui-badge size="sm" text="Gray Button" color="gray" as="button" />
+                    <ui-badge size="sm" text="Default Button" as="button" />
                     <ui-badge size="sm" text="Rose Button" color="rose" as="button" />
                     <ui-badge size="sm" text="Emerald Button" color="emerald" as="button" />
                     <ui-badge size="sm" text="Fuchsia Button" color="fuchsia" as="button" />
+                    <ui-badge size="sm" text="Indigo Button" color="indigo" as="button" />
+                    <ui-badge size="sm" text="Lime Button" color="lime" as="button" />
+                    <ui-badge size="sm" text="Orange Button" color="orange" as="button" />
                     <ui-badge size="sm" text="Sky Button" color="sky" as="button" />
+                    <ui-badge size="sm" text="Teal Button" color="teal" as="button" />
+                    <ui-badge size="sm" text="Violet Button" color="violet" as="button" />
+                    <ui-badge size="sm" text="White Button" color="white" as="button" />
+                    <ui-badge size="sm" text="Yellow Button" color="yellow" as="button" />
                 </div>
             </section>
 

From e9720f9543ed17d5af6e09a44786287a5470d4b6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 16 Jan 2026 12:04:57 +0000
Subject: [PATCH 3/8] Badges - start making opaque values

---
 resources/js/components/ui/Badge.vue | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index 7a7d131f51..19a09c0571 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -49,26 +49,26 @@ const badgeClasses = computed(() => {
                 lg: 'font-medium text-sm leading-7 px-2.5 rounded-lg [&_svg]:size-4 gap-2',
             },
             color: {
-                amber: 'bg-amber-100 dark:bg-amber-300/6 border-amber-400 dark:border-amber-400/25 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-200/70 [button]:hover:bg-amber-200/70 dark:[button]:hover:bg-amber-200/9',
+                amber: 'bg-amber-50 dark:bg-amber-300/6 border-amber-400 dark:border-amber-400/25 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 [button]:hover:bg-amber-200/70 dark:[button]:hover:bg-amber-200/9',
                 black: 'bg-gray-900 dark:bg-gray-300/6 border-black dark:border-black/25 text-white dark:text-gray-300 [a]:hover:bg-black/90 [button]:hover:bg-black/90 dark:[button]:hover:bg-black/9',
-                blue: 'bg-blue-100/80 dark:bg-blue-300/6 border-blue-300 dark:border-blue-300/25 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-200/60 [button]:hover:bg-blue-200/60 dark:[button]:hover:bg-blue-200/9',
-                cyan: 'bg-cyan-100/80 dark:bg-cyan-300/6 border-cyan-400 dark:border-cyan-400/25 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-200/60 [button]:hover:bg-cyan-200/60 dark:[button]:hover:bg-cyan-200/9',
+                blue: 'bg-blue-50 dark:bg-blue-300/6 border-blue-300 dark:border-blue-300/25 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-200/60 [button]:hover:bg-blue-200/60 dark:[button]:hover:bg-blue-200/9',
+                cyan: 'bg-cyan-50 dark:bg-cyan-300/6 border-cyan-400 dark:border-cyan-400/25 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-200/60 [button]:hover:bg-cyan-200/60 dark:[button]:hover:bg-cyan-200/9',
                 default: 'bg-gray-800/5 dark:bg-gray-800 border-gray-300 dark:border-gray-300/25 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-800/10 dark:[a]:hover:bg-gray-700/50 [button]:hover:bg-gray-200/50 dark:[button]:hover:bg-gray-200/9',
-                emerald: 'bg-emerald-100/80 border-emerald-400 dark:border-emerald-400/25 text-emerald-700 dark:bg-emerald-300/6 dark:text-emerald-300 [a]:hover:bg-emerald-200/60 [button]:hover:bg-emerald-200/60 dark:[button]:hover:bg-emerald-200/9',
-                fuchsia: 'bg-fuchsia-100/80 dark:bg-fuschia-300/6 border-fuchsia-300 dark:border-fuchsia-300/25 text-fuchsia-700 dark:text-fuschia-300 [a]:hover:bg-fuchsia-200/60 dark:[a]:hover:bg-fuchsia-300/15 [button]:hover:bg-fuchsia-200/60 dark:[button]:hover:bg-fuchsia-200/9',
-                green: 'bg-green-100/80 border-green-400 dark:border-green-400/25 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15 [button]:hover:bg-green-200/60 dark:[button]:hover:bg-green-200/9',
-                indigo: 'bg-indigo-100/80 border-indigo-300 dark:border-indigo-300/25 text-indigo-700 dark:bg-indigo-300/6 dark:text-indigo-300 [a]:hover:bg-indigo-200/60 dark:[a]:hover:bg-indigo-300/15 [button]:hover:bg-indigo-200/60 dark:[button]:hover:bg-indigo-200/9',
+                emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-400/25 text-emerald-700 dark:bg-emerald-300/6 dark:text-emerald-300 [a]:hover:bg-emerald-200/60 [button]:hover:bg-emerald-200/60 dark:[button]:hover:bg-emerald-200/9',
+                fuchsia: 'bg-fuchsia-50 dark:bg-fuschia-300/6 border-fuchsia-300 dark:border-fuchsia-300/25 text-fuchsia-700 dark:text-fuschia-300 [a]:hover:bg-fuchsia-200/60 dark:[a]:hover:bg-fuchsia-300/15 [button]:hover:bg-fuchsia-200/60 dark:[button]:hover:bg-fuchsia-200/9',
+                green: 'bg-green-50 border-green-400 dark:border-green-400/25 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15 [button]:hover:bg-green-200/60 dark:[button]:hover:bg-green-200/9',
+                indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-300/25 text-indigo-700 dark:bg-indigo-300/6 dark:text-indigo-300 [a]:hover:bg-indigo-200/60 dark:[a]:hover:bg-indigo-300/15 [button]:hover:bg-indigo-200/60 dark:[button]:hover:bg-indigo-200/9',
                 lime: 'bg-lime-100 dark:bg-lime-300/6 border-lime-400 dark:border-lime-400/25 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-200/80 dark:[a]:hover:bg-lime-300/15 [button]:hover:bg-lime-200/80 dark:[button]:hover:bg-lime-200/9',
                 orange: 'bg-orange-100 dark:bg-orange-300/6 border-orange-400 dark:border-orange-400/25 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-200/60 [button]:hover:bg-orange-200/60 dark:[a]:hover:bg-orange-300/15 dark:[button]:hover:bg-orange-200/9',
-                pink: 'bg-pink-100/80 dark:bg-pink-300/6 border-pink-300 dark:border-pink-300/25 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-200/60 dark:[a]:hover:bg-pink-300/15 [button]:hover:bg-pink-200/60 dark:[button]:hover:bg-pink-200/9',
-                purple: 'bg-purple-100/80 dark:bg-purple-300/6 border-purple-300 dark:border-purple-300/25 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-200/60 dark:[a]:hover:bg-purple-300/15 [button]:hover:bg-purple-200/60 dark:[button]:hover:bg-purple-200/9',
-                red: 'bg-red-100/80 dark:bg-red-300/6 border-red-400 dark:border-red-400/25 text-red-700 dark:text-red-300 [a]:hover:bg-red-200/60 dark:[a]:hover:bg-red-300/15 [button]:hover:bg-red-200/60 dark:[button]:hover:bg-red-200/9',
-                rose: 'bg-rose-100/80 dark:bg-rose-300/6 border-rose-300 dark:border-rose-300/25 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-200/60 dark:[a]:hover:bg-rose-300/15 [button]:hover:bg-rose-200/60 dark:[button]:hover:bg-rose-200/9',
-                sky: 'bg-sky-100/80 dark:bg-sky-300/6 border-sky-300 dark:border-sky-300/25 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-200/60 dark:[a]:hover:bg-sky-300/15 [button]:hover:bg-sky-200/60 dark:[button]:hover:bg-sky-200/10',
+                pink: 'bg-pink-50 dark:bg-pink-300/6 border-pink-300 dark:border-pink-300/25 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-200/60 dark:[a]:hover:bg-pink-300/15 [button]:hover:bg-pink-200/60 dark:[button]:hover:bg-pink-200/9',
+                purple: 'bg-purple-50 dark:bg-purple-300/6 border-purple-300 dark:border-purple-300/25 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-200/60 dark:[a]:hover:bg-purple-300/15 [button]:hover:bg-purple-200/60 dark:[button]:hover:bg-purple-200/9',
+                red: 'bg-red-50 dark:bg-red-300/6 border-red-400 dark:border-red-400/25 text-red-700 dark:text-red-300 [a]:hover:bg-red-200/60 dark:[a]:hover:bg-red-300/15 [button]:hover:bg-red-200/60 dark:[button]:hover:bg-red-200/9',
+                rose: 'bg-rose-50 dark:bg-rose-300/6 border-rose-300 dark:border-rose-300/25 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-200/60 dark:[a]:hover:bg-rose-300/15 [button]:hover:bg-rose-200/60 dark:[button]:hover:bg-rose-200/9',
+                sky: 'bg-sky-50 dark:bg-sky-300/6 border-sky-300 dark:border-sky-300/25 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-200/60 dark:[a]:hover:bg-sky-300/15 [button]:hover:bg-sky-100 dark:[button]:hover:bg-sky-200/10',
                 teal: 'bg-teal-100 dark:bg-teal-300/6 border-teal-400 dark:border-teal-400/25 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-200/70 [button]:hover:bg-teal-200/70 dark:[a]:hover:bg-teal-300/15 dark:[button]:hover:bg-teal-200/9',
-                violet: 'bg-violet-100/80 dark:bg-violet-300/6 border-violet-300 dark:border-violet-300/25 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-200/60 [button]:hover:bg-violet-200/60 dark:[a]:hover:bg-violet-300/15 dark:[button]:hover:bg-violet-200/9',
+                violet: 'bg-violet-50 dark:bg-violet-300/6 border-violet-300 dark:border-violet-300/25 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-200/60 [button]:hover:bg-violet-200/60 dark:[a]:hover:bg-violet-300/15 dark:[button]:hover:bg-violet-200/9',
                 white: 'bg-white border-gray-300 dark:border-gray-300/25 text-gray-700 dark:bg-gray-300/6 dark:text-gray-300 [a]:hover:bg-gray-200/30 [button]:hover:bg-gray-200/30 dark:[a]:hover:bg-gray-300/15 dark:[button]:hover:bg-gray-200/9',
-                yellow: 'bg-yellow-100 dark:bg-yellow-300/6 border-yellow-400 dark:border-yellow-400/25 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 dark:[a]:hover:bg-yellow-300/15 [button]:hover:bg-yellow-200/80 dark:[button]:hover:bg-yellow-200/9',
+                yellow: 'bg-yellow-50 dark:bg-yellow-300/6 border-yellow-400 dark:border-yellow-400/25 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 dark:[a]:hover:bg-yellow-300/15 [button]:hover:bg-yellow-200/80 dark:[button]:hover:bg-yellow-200/9',
             },
             pill: { true: 'rounded-full' },
             asButton: { true: 'shadow-ui-sm no-underline!' }

From e2cc962d80ea03cd66241acb8c89499b7339dd55 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 16 Jan 2026 12:07:33 +0000
Subject: [PATCH 4/8] Badges - convert everything to use opaque values

---
 resources/js/components/ui/Badge.vue | 40 ++++++++++++++--------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index 19a09c0571..a38ee0b461 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -49,26 +49,26 @@ const badgeClasses = computed(() => {
                 lg: 'font-medium text-sm leading-7 px-2.5 rounded-lg [&_svg]:size-4 gap-2',
             },
             color: {
-                amber: 'bg-amber-50 dark:bg-amber-300/6 border-amber-400 dark:border-amber-400/25 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 [button]:hover:bg-amber-200/70 dark:[button]:hover:bg-amber-200/9',
-                black: 'bg-gray-900 dark:bg-gray-300/6 border-black dark:border-black/25 text-white dark:text-gray-300 [a]:hover:bg-black/90 [button]:hover:bg-black/90 dark:[button]:hover:bg-black/9',
-                blue: 'bg-blue-50 dark:bg-blue-300/6 border-blue-300 dark:border-blue-300/25 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-200/60 [button]:hover:bg-blue-200/60 dark:[button]:hover:bg-blue-200/9',
-                cyan: 'bg-cyan-50 dark:bg-cyan-300/6 border-cyan-400 dark:border-cyan-400/25 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-200/60 [button]:hover:bg-cyan-200/60 dark:[button]:hover:bg-cyan-200/9',
-                default: 'bg-gray-800/5 dark:bg-gray-800 border-gray-300 dark:border-gray-300/25 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-800/10 dark:[a]:hover:bg-gray-700/50 [button]:hover:bg-gray-200/50 dark:[button]:hover:bg-gray-200/9',
-                emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-400/25 text-emerald-700 dark:bg-emerald-300/6 dark:text-emerald-300 [a]:hover:bg-emerald-200/60 [button]:hover:bg-emerald-200/60 dark:[button]:hover:bg-emerald-200/9',
-                fuchsia: 'bg-fuchsia-50 dark:bg-fuschia-300/6 border-fuchsia-300 dark:border-fuchsia-300/25 text-fuchsia-700 dark:text-fuschia-300 [a]:hover:bg-fuchsia-200/60 dark:[a]:hover:bg-fuchsia-300/15 [button]:hover:bg-fuchsia-200/60 dark:[button]:hover:bg-fuchsia-200/9',
-                green: 'bg-green-50 border-green-400 dark:border-green-400/25 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15 [button]:hover:bg-green-200/60 dark:[button]:hover:bg-green-200/9',
-                indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-300/25 text-indigo-700 dark:bg-indigo-300/6 dark:text-indigo-300 [a]:hover:bg-indigo-200/60 dark:[a]:hover:bg-indigo-300/15 [button]:hover:bg-indigo-200/60 dark:[button]:hover:bg-indigo-200/9',
-                lime: 'bg-lime-100 dark:bg-lime-300/6 border-lime-400 dark:border-lime-400/25 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-200/80 dark:[a]:hover:bg-lime-300/15 [button]:hover:bg-lime-200/80 dark:[button]:hover:bg-lime-200/9',
-                orange: 'bg-orange-100 dark:bg-orange-300/6 border-orange-400 dark:border-orange-400/25 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-200/60 [button]:hover:bg-orange-200/60 dark:[a]:hover:bg-orange-300/15 dark:[button]:hover:bg-orange-200/9',
-                pink: 'bg-pink-50 dark:bg-pink-300/6 border-pink-300 dark:border-pink-300/25 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-200/60 dark:[a]:hover:bg-pink-300/15 [button]:hover:bg-pink-200/60 dark:[button]:hover:bg-pink-200/9',
-                purple: 'bg-purple-50 dark:bg-purple-300/6 border-purple-300 dark:border-purple-300/25 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-200/60 dark:[a]:hover:bg-purple-300/15 [button]:hover:bg-purple-200/60 dark:[button]:hover:bg-purple-200/9',
-                red: 'bg-red-50 dark:bg-red-300/6 border-red-400 dark:border-red-400/25 text-red-700 dark:text-red-300 [a]:hover:bg-red-200/60 dark:[a]:hover:bg-red-300/15 [button]:hover:bg-red-200/60 dark:[button]:hover:bg-red-200/9',
-                rose: 'bg-rose-50 dark:bg-rose-300/6 border-rose-300 dark:border-rose-300/25 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-200/60 dark:[a]:hover:bg-rose-300/15 [button]:hover:bg-rose-200/60 dark:[button]:hover:bg-rose-200/9',
-                sky: 'bg-sky-50 dark:bg-sky-300/6 border-sky-300 dark:border-sky-300/25 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-200/60 dark:[a]:hover:bg-sky-300/15 [button]:hover:bg-sky-100 dark:[button]:hover:bg-sky-200/10',
-                teal: 'bg-teal-100 dark:bg-teal-300/6 border-teal-400 dark:border-teal-400/25 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-200/70 [button]:hover:bg-teal-200/70 dark:[a]:hover:bg-teal-300/15 dark:[button]:hover:bg-teal-200/9',
-                violet: 'bg-violet-50 dark:bg-violet-300/6 border-violet-300 dark:border-violet-300/25 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-200/60 [button]:hover:bg-violet-200/60 dark:[a]:hover:bg-violet-300/15 dark:[button]:hover:bg-violet-200/9',
-                white: 'bg-white border-gray-300 dark:border-gray-300/25 text-gray-700 dark:bg-gray-300/6 dark:text-gray-300 [a]:hover:bg-gray-200/30 [button]:hover:bg-gray-200/30 dark:[a]:hover:bg-gray-300/15 dark:[button]:hover:bg-gray-200/9',
-                yellow: 'bg-yellow-50 dark:bg-yellow-300/6 border-yellow-400 dark:border-yellow-400/25 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 dark:[a]:hover:bg-yellow-300/15 [button]:hover:bg-yellow-200/80 dark:[button]:hover:bg-yellow-200/9',
+                amber: 'bg-amber-50 dark:bg-gray-900 border-amber-400 dark:border-amber-700 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 [button]:hover:bg-amber-200 dark:[button]:hover:bg-gray-800',
+                black: 'bg-gray-900 dark:bg-gray-900 border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
+                blue: 'bg-blue-50 dark:bg-gray-900 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-100 [button]:hover:bg-blue-100 dark:[button]:hover:bg-gray-800',
+                cyan: 'bg-cyan-50 dark:bg-gray-900 border-cyan-400 dark:border-cyan-700 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-100 [button]:hover:bg-cyan-100 dark:[button]:hover:bg-gray-800',
+                default: 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-200 dark:[button]:hover:bg-gray-800',
+                emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-700 text-emerald-700 dark:bg-gray-900 dark:text-emerald-300 [a]:hover:bg-emerald-100 [button]:hover:bg-emerald-100 dark:[button]:hover:bg-gray-800',
+                fuchsia: 'bg-fuchsia-50 dark:bg-gray-900 border-fuchsia-300 dark:border-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-300 [a]:hover:bg-fuchsia-100 dark:[a]:hover:bg-fuchsia-900 [button]:hover:bg-fuchsia-100 dark:[button]:hover:bg-gray-800',
+                green: 'bg-green-50 border-green-400 dark:border-green-700 text-green-700 dark:bg-gray-900 dark:text-green-300 [a]:hover:bg-green-100 dark:[a]:hover:bg-green-900 [button]:hover:bg-green-100 dark:[button]:hover:bg-gray-800',
+                indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:bg-gray-900 dark:text-indigo-300 [a]:hover:bg-indigo-100 dark:[a]:hover:bg-indigo-900 [button]:hover:bg-indigo-100 dark:[button]:hover:bg-gray-800',
+                lime: 'bg-lime-100 dark:bg-gray-900 border-lime-400 dark:border-lime-700 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-200 dark:[a]:hover:bg-lime-900 [button]:hover:bg-lime-200 dark:[button]:hover:bg-gray-800',
+                orange: 'bg-orange-100 dark:bg-gray-900 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 [button]:hover:bg-orange-100 dark:[a]:hover:bg-orange-900 dark:[button]:hover:bg-gray-800',
+                pink: 'bg-pink-50 dark:bg-gray-900 border-pink-300 dark:border-pink-700 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-100 dark:[a]:hover:bg-pink-900 [button]:hover:bg-pink-100 dark:[button]:hover:bg-gray-800',
+                purple: 'bg-purple-50 dark:bg-gray-900 border-purple-300 dark:border-purple-700 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-100 dark:[a]:hover:bg-purple-900 [button]:hover:bg-purple-100 dark:[button]:hover:bg-gray-800',
+                red: 'bg-red-50 dark:bg-gray-900 border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 [a]:hover:bg-red-100 dark:[a]:hover:bg-red-900 [button]:hover:bg-red-100 dark:[button]:hover:bg-gray-800',
+                rose: 'bg-rose-50 dark:bg-gray-900 border-rose-300 dark:border-rose-700 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-100 dark:[a]:hover:bg-rose-900 [button]:hover:bg-rose-100 dark:[button]:hover:bg-gray-800',
+                sky: 'bg-sky-50 dark:bg-gray-900 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-100 dark:[a]:hover:bg-sky-900 [button]:hover:bg-sky-100 dark:[button]:hover:bg-sky-900',
+                teal: 'bg-teal-100 dark:bg-gray-900 border-teal-400 dark:border-teal-700 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-200 dark:[a]:hover:bg-teal-900 [button]:hover:bg-teal-200 dark:[button]:hover:bg-gray-800',
+                violet: 'bg-violet-50 dark:bg-gray-900 border-violet-300 dark:border-violet-700 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-100 [button]:hover:bg-violet-100 dark:[a]:hover:bg-violet-900 dark:[button]:hover:bg-gray-800',
+                white: 'bg-white border-gray-300 dark:border-gray-700 text-gray-700 dark:bg-gray-900 dark:text-gray-300 [a]:hover:bg-gray-100 [button]:hover:bg-gray-100 dark:[a]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
+                yellow: 'bg-yellow-50 dark:bg-gray-900 border-yellow-400 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-200 dark:[a]:hover:bg-yellow-900 [button]:hover:bg-yellow-200 dark:[button]:hover:bg-gray-800',
             },
             pill: { true: 'rounded-full' },
             asButton: { true: 'shadow-ui-sm no-underline!' }

From 3a4f8a29ad12f4c5ea108aba3b8de9562e021755 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 16 Jan 2026 12:16:37 +0000
Subject: [PATCH 5/8] Badges - ensure AA hover state

---
 resources/js/components/ui/Badge.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index a38ee0b461..7ae60de72b 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -58,17 +58,17 @@ const badgeClasses = computed(() => {
                 fuchsia: 'bg-fuchsia-50 dark:bg-gray-900 border-fuchsia-300 dark:border-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-300 [a]:hover:bg-fuchsia-100 dark:[a]:hover:bg-fuchsia-900 [button]:hover:bg-fuchsia-100 dark:[button]:hover:bg-gray-800',
                 green: 'bg-green-50 border-green-400 dark:border-green-700 text-green-700 dark:bg-gray-900 dark:text-green-300 [a]:hover:bg-green-100 dark:[a]:hover:bg-green-900 [button]:hover:bg-green-100 dark:[button]:hover:bg-gray-800',
                 indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:bg-gray-900 dark:text-indigo-300 [a]:hover:bg-indigo-100 dark:[a]:hover:bg-indigo-900 [button]:hover:bg-indigo-100 dark:[button]:hover:bg-gray-800',
-                lime: 'bg-lime-100 dark:bg-gray-900 border-lime-400 dark:border-lime-700 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-200 dark:[a]:hover:bg-lime-900 [button]:hover:bg-lime-200 dark:[button]:hover:bg-gray-800',
-                orange: 'bg-orange-100 dark:bg-gray-900 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 [button]:hover:bg-orange-100 dark:[a]:hover:bg-orange-900 dark:[button]:hover:bg-gray-800',
+                lime: 'bg-lime-50 dark:bg-gray-900 border-lime-400 dark:border-lime-700 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-100 dark:[a]:hover:bg-lime-900 [button]:hover:bg-lime-100 dark:[button]:hover:bg-gray-800',
+                orange: 'bg-orange-50 dark:bg-gray-900 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 [button]:hover:bg-orange-100 dark:[a]:hover:bg-orange-900 dark:[button]:hover:bg-gray-800',
                 pink: 'bg-pink-50 dark:bg-gray-900 border-pink-300 dark:border-pink-700 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-100 dark:[a]:hover:bg-pink-900 [button]:hover:bg-pink-100 dark:[button]:hover:bg-gray-800',
                 purple: 'bg-purple-50 dark:bg-gray-900 border-purple-300 dark:border-purple-700 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-100 dark:[a]:hover:bg-purple-900 [button]:hover:bg-purple-100 dark:[button]:hover:bg-gray-800',
                 red: 'bg-red-50 dark:bg-gray-900 border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 [a]:hover:bg-red-100 dark:[a]:hover:bg-red-900 [button]:hover:bg-red-100 dark:[button]:hover:bg-gray-800',
                 rose: 'bg-rose-50 dark:bg-gray-900 border-rose-300 dark:border-rose-700 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-100 dark:[a]:hover:bg-rose-900 [button]:hover:bg-rose-100 dark:[button]:hover:bg-gray-800',
                 sky: 'bg-sky-50 dark:bg-gray-900 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-100 dark:[a]:hover:bg-sky-900 [button]:hover:bg-sky-100 dark:[button]:hover:bg-sky-900',
-                teal: 'bg-teal-100 dark:bg-gray-900 border-teal-400 dark:border-teal-700 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-200 dark:[a]:hover:bg-teal-900 [button]:hover:bg-teal-200 dark:[button]:hover:bg-gray-800',
+                teal: 'bg-teal-50 dark:bg-gray-900 border-teal-400 dark:border-teal-700 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-100 dark:[a]:hover:bg-teal-900 [button]:hover:bg-teal-100 dark:[button]:hover:bg-teal-900',
                 violet: 'bg-violet-50 dark:bg-gray-900 border-violet-300 dark:border-violet-700 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-100 [button]:hover:bg-violet-100 dark:[a]:hover:bg-violet-900 dark:[button]:hover:bg-gray-800',
                 white: 'bg-white border-gray-300 dark:border-gray-700 text-gray-700 dark:bg-gray-900 dark:text-gray-300 [a]:hover:bg-gray-100 [button]:hover:bg-gray-100 dark:[a]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
-                yellow: 'bg-yellow-50 dark:bg-gray-900 border-yellow-400 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-200 dark:[a]:hover:bg-yellow-900 [button]:hover:bg-yellow-200 dark:[button]:hover:bg-gray-800',
+                yellow: 'bg-yellow-50 dark:bg-gray-900 border-yellow-400 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-100 dark:[a]:hover:bg-yellow-900 [button]:hover:bg-yellow-100 dark:[button]:hover:bg-yellow-900',
             },
             pill: { true: 'rounded-full' },
             asButton: { true: 'shadow-ui-sm no-underline!' }

From 4465fb6791f8cafdd1a2ec54090f3c0f8dfc73fe Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 16 Jan 2026 12:29:15 +0000
Subject: [PATCH 6/8] Badges - try fixing dark mode

---
 resources/js/components/ui/Badge.vue | 38 ++++++++++++++--------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index 7ae60de72b..ff0802cf46 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -49,26 +49,26 @@ const badgeClasses = computed(() => {
                 lg: 'font-medium text-sm leading-7 px-2.5 rounded-lg [&_svg]:size-4 gap-2',
             },
             color: {
-                amber: 'bg-amber-50 dark:bg-gray-900 border-amber-400 dark:border-amber-700 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 [button]:hover:bg-amber-200 dark:[button]:hover:bg-gray-800',
-                black: 'bg-gray-900 dark:bg-gray-900 border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
-                blue: 'bg-blue-50 dark:bg-gray-900 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-100 [button]:hover:bg-blue-100 dark:[button]:hover:bg-gray-800',
-                cyan: 'bg-cyan-50 dark:bg-gray-900 border-cyan-400 dark:border-cyan-700 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-100 [button]:hover:bg-cyan-100 dark:[button]:hover:bg-gray-800',
+                amber: 'bg-amber-50 dark:bg-gray-800 border-amber-400 dark:border-amber-700 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 [button]:hover:bg-amber-200 dark:[button]:hover:bg-gray-700',
+                black: 'bg-gray-900 dark:bg-black border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
+                blue: 'bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-100 [button]:hover:bg-blue-100 dark:[button]:hover:bg-gray-700',
+                cyan: 'bg-cyan-50 dark:bg-gray-800 border-cyan-400 dark:border-cyan-700 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-100 [button]:hover:bg-cyan-100 dark:[button]:hover:bg-gray-700',
                 default: 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-200 dark:[button]:hover:bg-gray-800',
-                emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-700 text-emerald-700 dark:bg-gray-900 dark:text-emerald-300 [a]:hover:bg-emerald-100 [button]:hover:bg-emerald-100 dark:[button]:hover:bg-gray-800',
-                fuchsia: 'bg-fuchsia-50 dark:bg-gray-900 border-fuchsia-300 dark:border-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-300 [a]:hover:bg-fuchsia-100 dark:[a]:hover:bg-fuchsia-900 [button]:hover:bg-fuchsia-100 dark:[button]:hover:bg-gray-800',
-                green: 'bg-green-50 border-green-400 dark:border-green-700 text-green-700 dark:bg-gray-900 dark:text-green-300 [a]:hover:bg-green-100 dark:[a]:hover:bg-green-900 [button]:hover:bg-green-100 dark:[button]:hover:bg-gray-800',
-                indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:bg-gray-900 dark:text-indigo-300 [a]:hover:bg-indigo-100 dark:[a]:hover:bg-indigo-900 [button]:hover:bg-indigo-100 dark:[button]:hover:bg-gray-800',
-                lime: 'bg-lime-50 dark:bg-gray-900 border-lime-400 dark:border-lime-700 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-100 dark:[a]:hover:bg-lime-900 [button]:hover:bg-lime-100 dark:[button]:hover:bg-gray-800',
-                orange: 'bg-orange-50 dark:bg-gray-900 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 [button]:hover:bg-orange-100 dark:[a]:hover:bg-orange-900 dark:[button]:hover:bg-gray-800',
-                pink: 'bg-pink-50 dark:bg-gray-900 border-pink-300 dark:border-pink-700 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-100 dark:[a]:hover:bg-pink-900 [button]:hover:bg-pink-100 dark:[button]:hover:bg-gray-800',
-                purple: 'bg-purple-50 dark:bg-gray-900 border-purple-300 dark:border-purple-700 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-100 dark:[a]:hover:bg-purple-900 [button]:hover:bg-purple-100 dark:[button]:hover:bg-gray-800',
-                red: 'bg-red-50 dark:bg-gray-900 border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 [a]:hover:bg-red-100 dark:[a]:hover:bg-red-900 [button]:hover:bg-red-100 dark:[button]:hover:bg-gray-800',
-                rose: 'bg-rose-50 dark:bg-gray-900 border-rose-300 dark:border-rose-700 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-100 dark:[a]:hover:bg-rose-900 [button]:hover:bg-rose-100 dark:[button]:hover:bg-gray-800',
-                sky: 'bg-sky-50 dark:bg-gray-900 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-100 dark:[a]:hover:bg-sky-900 [button]:hover:bg-sky-100 dark:[button]:hover:bg-sky-900',
-                teal: 'bg-teal-50 dark:bg-gray-900 border-teal-400 dark:border-teal-700 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-100 dark:[a]:hover:bg-teal-900 [button]:hover:bg-teal-100 dark:[button]:hover:bg-teal-900',
-                violet: 'bg-violet-50 dark:bg-gray-900 border-violet-300 dark:border-violet-700 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-100 [button]:hover:bg-violet-100 dark:[a]:hover:bg-violet-900 dark:[button]:hover:bg-gray-800',
-                white: 'bg-white border-gray-300 dark:border-gray-700 text-gray-700 dark:bg-gray-900 dark:text-gray-300 [a]:hover:bg-gray-100 [button]:hover:bg-gray-100 dark:[a]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
-                yellow: 'bg-yellow-50 dark:bg-gray-900 border-yellow-400 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-100 dark:[a]:hover:bg-yellow-900 [button]:hover:bg-yellow-100 dark:[button]:hover:bg-yellow-900',
+                emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-700 text-emerald-700 dark:bg-gray-800 dark:text-emerald-300 [a]:hover:bg-emerald-100 [button]:hover:bg-emerald-100 dark:[button]:hover:bg-gray-700',
+                fuchsia: 'bg-fuchsia-50 dark:bg-gray-800 border-fuchsia-300 dark:border-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-300 [a]:hover:bg-fuchsia-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-fuchsia-100 dark:[button]:hover:bg-gray-700',
+                green: 'bg-green-50 border-green-400 dark:border-green-700 text-green-700 dark:bg-gray-800 dark:text-green-300 [a]:hover:bg-green-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-green-100 dark:[button]:hover:bg-gray-700',
+                indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:bg-gray-800 dark:text-indigo-300 [a]:hover:bg-indigo-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-indigo-100 dark:[button]:hover:bg-gray-700',
+                lime: 'bg-lime-50 dark:bg-gray-800 border-lime-400 dark:border-lime-700 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-lime-100 dark:[button]:hover:bg-gray-700',
+                orange: 'bg-orange-50 dark:bg-gray-800 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 [button]:hover:bg-orange-100 dark:[a]:hover:bg-gray-700 dark:[button]:hover:bg-gray-700',
+                pink: 'bg-pink-50 dark:bg-gray-800 border-pink-300 dark:border-pink-700 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-pink-100 dark:[button]:hover:bg-gray-700',
+                purple: 'bg-purple-50 dark:bg-gray-800 border-purple-300 dark:border-purple-700 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-purple-100 dark:[button]:hover:bg-gray-700',
+                red: 'bg-red-50 dark:bg-gray-800 border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 [a]:hover:bg-red-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-red-100 dark:[button]:hover:bg-gray-700',
+                rose: 'bg-rose-50 dark:bg-gray-800 border-rose-300 dark:border-rose-700 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-rose-100 dark:[button]:hover:bg-gray-700',
+                sky: 'bg-sky-50 dark:bg-gray-800 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-sky-100 dark:[button]:hover:bg-gray-700',
+                teal: 'bg-teal-50 dark:bg-gray-800 border-teal-400 dark:border-teal-700 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-teal-100 dark:[button]:hover:bg-gray-700',
+                violet: 'bg-violet-50 dark:bg-gray-800 border-violet-300 dark:border-violet-700 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-100 [button]:hover:bg-violet-100 dark:[a]:hover:bg-gray-700 dark:[button]:hover:bg-gray-700',
+                white: 'bg-white border-gray-300 dark:border-gray-700 text-gray-700 dark:bg-gray-800 dark:text-gray-300 [a]:hover:bg-gray-100 [button]:hover:bg-gray-100 dark:[a]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
+                yellow: 'bg-yellow-50 dark:bg-gray-800 border-yellow-400 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-yellow-100 dark:[button]:hover:bg-gray-700',
             },
             pill: { true: 'rounded-full' },
             asButton: { true: 'shadow-ui-sm no-underline!' }

From 1eee82a54ff2e63a282b7f001672153b59100b1a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 16 Jan 2026 14:41:39 +0000
Subject: [PATCH 7/8] Badges / dark mode - consistent hover colors

---
 resources/js/components/ui/Badge.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index ff0802cf46..aae5a9f900 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -49,25 +49,25 @@ const badgeClasses = computed(() => {
                 lg: 'font-medium text-sm leading-7 px-2.5 rounded-lg [&_svg]:size-4 gap-2',
             },
             color: {
-                amber: 'bg-amber-50 dark:bg-gray-800 border-amber-400 dark:border-amber-700 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 [button]:hover:bg-amber-200 dark:[button]:hover:bg-gray-700',
-                black: 'bg-gray-900 dark:bg-black border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
-                blue: 'bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-100 [button]:hover:bg-blue-100 dark:[button]:hover:bg-gray-700',
-                cyan: 'bg-cyan-50 dark:bg-gray-800 border-cyan-400 dark:border-cyan-700 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-100 [button]:hover:bg-cyan-100 dark:[button]:hover:bg-gray-700',
-                default: 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-200 dark:[button]:hover:bg-gray-800',
-                emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-700 text-emerald-700 dark:bg-gray-800 dark:text-emerald-300 [a]:hover:bg-emerald-100 [button]:hover:bg-emerald-100 dark:[button]:hover:bg-gray-700',
+                amber: 'bg-amber-50 dark:bg-gray-800 border-amber-400 dark:border-amber-700 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-amber-200 dark:[button]:hover:bg-gray-700',
+                black: 'bg-gray-900 dark:bg-black border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-700',
+                blue: 'bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-blue-100 dark:[button]:hover:bg-gray-700',
+                cyan: 'bg-cyan-50 dark:bg-gray-800 border-cyan-400 dark:border-cyan-700 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-cyan-100 dark:[button]:hover:bg-gray-700',
+                default: 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-200 dark:[button]:hover:bg-gray-700',
+                emerald: 'bg-emerald-50 border-emerald-400 dark:border-emerald-700 text-emerald-700 dark:bg-gray-800 dark:text-emerald-300 [a]:hover:bg-emerald-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-emerald-100 dark:[button]:hover:bg-gray-700',
                 fuchsia: 'bg-fuchsia-50 dark:bg-gray-800 border-fuchsia-300 dark:border-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-300 [a]:hover:bg-fuchsia-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-fuchsia-100 dark:[button]:hover:bg-gray-700',
                 green: 'bg-green-50 border-green-400 dark:border-green-700 text-green-700 dark:bg-gray-800 dark:text-green-300 [a]:hover:bg-green-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-green-100 dark:[button]:hover:bg-gray-700',
                 indigo: 'bg-indigo-50 border-indigo-300 dark:border-indigo-700 text-indigo-700 dark:bg-gray-800 dark:text-indigo-300 [a]:hover:bg-indigo-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-indigo-100 dark:[button]:hover:bg-gray-700',
                 lime: 'bg-lime-50 dark:bg-gray-800 border-lime-400 dark:border-lime-700 text-lime-700 dark:text-lime-300 [a]:hover:bg-lime-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-lime-100 dark:[button]:hover:bg-gray-700',
-                orange: 'bg-orange-50 dark:bg-gray-800 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 [button]:hover:bg-orange-100 dark:[a]:hover:bg-gray-700 dark:[button]:hover:bg-gray-700',
+                orange: 'bg-orange-50 dark:bg-gray-800 border-orange-400 dark:border-orange-700 text-orange-700 dark:text-orange-300 [a]:hover:bg-orange-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-orange-100 dark:[button]:hover:bg-gray-700',
                 pink: 'bg-pink-50 dark:bg-gray-800 border-pink-300 dark:border-pink-700 text-pink-800 dark:text-pink-300 [a]:hover:bg-pink-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-pink-100 dark:[button]:hover:bg-gray-700',
                 purple: 'bg-purple-50 dark:bg-gray-800 border-purple-300 dark:border-purple-700 text-purple-800 dark:text-purple-300 [a]:hover:bg-purple-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-purple-100 dark:[button]:hover:bg-gray-700',
                 red: 'bg-red-50 dark:bg-gray-800 border-red-400 dark:border-red-700 text-red-700 dark:text-red-300 [a]:hover:bg-red-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-red-100 dark:[button]:hover:bg-gray-700',
                 rose: 'bg-rose-50 dark:bg-gray-800 border-rose-300 dark:border-rose-700 text-rose-800 dark:text-rose-300 [a]:hover:bg-rose-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-rose-100 dark:[button]:hover:bg-gray-700',
                 sky: 'bg-sky-50 dark:bg-gray-800 border-sky-300 dark:border-sky-700 text-sky-700 dark:text-sky-300 [a]:hover:bg-sky-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-sky-100 dark:[button]:hover:bg-gray-700',
                 teal: 'bg-teal-50 dark:bg-gray-800 border-teal-400 dark:border-teal-700 text-teal-700 dark:text-teal-300 [a]:hover:bg-teal-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-teal-100 dark:[button]:hover:bg-gray-700',
-                violet: 'bg-violet-50 dark:bg-gray-800 border-violet-300 dark:border-violet-700 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-100 [button]:hover:bg-violet-100 dark:[a]:hover:bg-gray-700 dark:[button]:hover:bg-gray-700',
-                white: 'bg-white border-gray-300 dark:border-gray-700 text-gray-700 dark:bg-gray-800 dark:text-gray-300 [a]:hover:bg-gray-100 [button]:hover:bg-gray-100 dark:[a]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
+                violet: 'bg-violet-50 dark:bg-gray-800 border-violet-300 dark:border-violet-700 text-violet-700 dark:text-violet-300 [a]:hover:bg-violet-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-violet-100 dark:[button]:hover:bg-gray-700',
+                white: 'bg-white border-gray-300 dark:border-gray-700 text-gray-700 dark:bg-gray-800 dark:text-gray-300 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-100 dark:[button]:hover:bg-gray-700',
                 yellow: 'bg-yellow-50 dark:bg-gray-800 border-yellow-400 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300 [a]:hover:bg-yellow-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-yellow-100 dark:[button]:hover:bg-gray-700',
             },
             pill: { true: 'rounded-full' },

From e52e996b3fad2411458374c0402d39b2fa405ce2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 16 Jan 2026 14:45:01 +0000
Subject: [PATCH 8/8] Badges / dark mode / hover - fix black

---
 resources/js/components/ui/Badge.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index aae5a9f900..18b3b93f9e 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -50,7 +50,7 @@ const badgeClasses = computed(() => {
             },
             color: {
                 amber: 'bg-amber-50 dark:bg-gray-800 border-amber-400 dark:border-amber-700 text-amber-700 dark:text-amber-300 [a]:hover:bg-amber-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-amber-200 dark:[button]:hover:bg-gray-700',
-                black: 'bg-gray-900 dark:bg-black border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-700',
+                black: 'bg-gray-900 dark:bg-black border-black dark:border-gray-700 text-white dark:text-gray-300 [a]:hover:bg-gray-800 dark:[a]:hover:bg-gray-800 [button]:hover:bg-gray-800 dark:[button]:hover:bg-gray-800',
                 blue: 'bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 [a]:hover:bg-blue-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-blue-100 dark:[button]:hover:bg-gray-700',
                 cyan: 'bg-cyan-50 dark:bg-gray-800 border-cyan-400 dark:border-cyan-700 text-cyan-700 dark:text-cyan-300 [a]:hover:bg-cyan-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-cyan-100 dark:[button]:hover:bg-gray-700',
                 default: 'bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700 dark:text-gray-100 text-gray-700 [a]:hover:bg-gray-100 dark:[a]:hover:bg-gray-700 [button]:hover:bg-gray-200 dark:[button]:hover:bg-gray-700',