From e532637cbc75906281d587e961d58ec4b8ca1837 Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Sat, 28 Dec 2024 15:51:35 +0000
Subject: [PATCH] fix: correct tabs button color on hover in dark mode (#526)

* fix: tabs toggle button color in dark mode

* chore: update css
---
 assets/css/compiled/main.css | 8 ++++++++
 exampleSite/hugo_stats.json  | 2 ++
 layouts/shortcodes/tabs.html | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index f4c238dd..ee130305 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3258,6 +3258,14 @@ body:is(html[class~="dark"] *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-ring-opacity));
 }
+.data-\[state\=selected\]\:dark\:hx-border-primary-500:is(html[class~="dark"] *)[data-state="selected"] {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+}
+.data-\[state\=selected\]\:dark\:hx-text-primary-600:is(html[class~="dark"] *)[data-state="selected"] {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
+}
 @media (prefers-contrast: more) {
 
   .contrast-more\:dark\:hx-border-current:is(html[class~="dark"] *) {
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
index ab09e996..65d58c9f 100644
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -197,6 +197,8 @@
       "dark:placeholder:hx-text-gray-400",
       "data-[state=closed]:hx-hidden",
       "data-[state=open]:hx-hidden",
+      "data-[state=selected]:dark:hx-border-primary-500",
+      "data-[state=selected]:dark:hx-text-primary-600",
       "data-[state=selected]:hx-block",
       "data-[state=selected]:hx-border-primary-500",
       "data-[state=selected]:hx-text-primary-600",
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index c1df7cc5..83ad4f37 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -9,7 +9,7 @@
   <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
     {{- range $i, $item := $items -}}
       <button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
+        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
         role="tab"
         type="button"
         aria-controls="tabs-panel-{{ $i }}"