From c2b7978e3ee01baeef58632f9c32c94e7c5a7d2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Far=C3=A8s=20SIONI?=
 <82713835+fsioni@users.noreply.github.com>
Date: Tue, 18 Aug 2026 12:21:49 +0200
Subject: [PATCH] fix(ui): improve highlighted button and spinner contrast
 (#11279)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 🏔️ Peak <122374094+peaklabs-dev@users.noreply.github.com>
---
 resources/css/app.css                            | 10 ++++++----
 resources/css/utilities.css                      |  2 +-
 resources/views/components/unsaved-bar.blade.php |  2 +-
 tests/Feature/HighlightedButtonStylingTest.php   | 15 ++++++++++++++-
 tests/Feature/SentinelUnsavedBarFlashTest.php    |  6 +++---
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 636cf2ce8..9dc39b7cc 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -398,9 +398,12 @@ html[data-theme="custom"] .animate-spin {
     color: var(--theme-bright-color) !important;
 }
 
-/* Opt out of the brand spinner when the surrounding surface is a selected/neutral control. */
+/* Opt out of the brand spinner when the surrounding surface is a selected/neutral control
+   or a highlighted button, whose accent surface would camouflage a brand-colored spinner. */
 .dark .animate-spin.spinner-current,
-html[data-theme="custom"] .animate-spin.spinner-current {
+html[data-theme="custom"] .animate-spin.spinner-current,
+html[data-theme="custom"] .button-highlighted .animate-spin,
+html[data-theme="custom"] button[isHighlighted] .animate-spin {
     color: inherit !important;
 }
 
@@ -993,8 +996,7 @@ html[data-theme="custom"] {
 }
 
 html[data-theme="custom"] .control-selected,
-html[data-theme="custom"] .logs-viewer-btn-active,
-html[data-theme="custom"] .button-highlighted:hover {
+html[data-theme="custom"] .logs-viewer-btn-active {
     color: var(--color-accent-foreground);
 }
 
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index 44218b0f3..7c690cba7 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -131,7 +131,7 @@ @utility button {
 }
 
 @utility button-highlighted {
-    @apply border-coollabs-200 bg-linear-to-b from-coollabs-100 to-coollabs-200 text-white! hover:from-coollabs-100 hover:to-coollabs hover:text-white!;
+    @apply border-coollabs-200 bg-linear-to-b from-coollabs-100 to-coollabs-200 text-accent-foreground! hover:from-coollabs-100 hover:to-coollabs hover:text-accent-foreground!;
 }
 
 @utility control-selected {
diff --git a/resources/views/components/unsaved-bar.blade.php b/resources/views/components/unsaved-bar.blade.php
index 1a5f85d3a..8d029c2fb 100644
--- a/resources/views/components/unsaved-bar.blade.php
+++ b/resources/views/components/unsaved-bar.blade.php
@@ -67,7 +67,7 @@ class="h-8 rounded-lg bg-neutral-100 px-3.5 text-[13px] font-medium text-neutral
             class="button-highlighted flex h-8 items-center gap-2 rounded-lg px-4 text-[13px] font-semibold transition-[transform,background-color] active:scale-[0.98]">
             <span>Save changes</span>
             <kbd
-                class="rounded border border-coollabs/20 bg-coollabs/10 px-1.5 py-0.5 text-[10px] leading-none font-medium text-coollabs-200 dark:border-white/20 dark:bg-white/10 dark:text-white/75">Enter</kbd>
+                class="rounded border border-current/20 bg-current/10 px-1.5 py-0.5 text-[10px] leading-none font-medium text-current">Enter</kbd>
         </button>
     </div>
 </div>
diff --git a/tests/Feature/HighlightedButtonStylingTest.php b/tests/Feature/HighlightedButtonStylingTest.php
index eae11deaf..834d792ce 100644
--- a/tests/Feature/HighlightedButtonStylingTest.php
+++ b/tests/Feature/HighlightedButtonStylingTest.php
@@ -10,10 +10,23 @@
 
     expect($utilities)
         ->toContain('@utility button-highlighted')
-        ->toContain('@apply border-coollabs-200 bg-linear-to-b from-coollabs-100 to-coollabs-200 text-white! hover:from-coollabs-100 hover:to-coollabs hover:text-white!;')
+        ->toContain('@apply border-coollabs-200 bg-linear-to-b from-coollabs-100 to-coollabs-200 text-accent-foreground! hover:from-coollabs-100 hover:to-coollabs hover:text-accent-foreground!;')
         ->and($appStyles)
         ->toContain('button[isHighlighted]:not(:disabled)')
         ->toContain('@apply button-highlighted;')
         ->and($views)
         ->not->toContain('dark:bg-warning/15! dark:text-warning! dark:ring-warning/25');
 });
+
+test('custom theme highlighted buttons use the computed contrasting foreground', function () {
+    $utilities = file_get_contents(resource_path('css/utilities.css'));
+    $appStyles = file_get_contents(resource_path('css/app.css'));
+
+    expect($utilities)
+        ->toContain('text-accent-foreground!')
+        ->toContain('hover:text-accent-foreground!')
+        ->not->toContain('text-white! hover:')
+        ->and($appStyles)
+        ->toContain('html[data-theme="custom"] .button-highlighted .animate-spin')
+        ->toContain('html[data-theme="custom"] button[isHighlighted] .animate-spin');
+});
diff --git a/tests/Feature/SentinelUnsavedBarFlashTest.php b/tests/Feature/SentinelUnsavedBarFlashTest.php
index ac8f72ddf..0c5d196c0 100644
--- a/tests/Feature/SentinelUnsavedBarFlashTest.php
+++ b/tests/Feature/SentinelUnsavedBarFlashTest.php
@@ -76,9 +76,9 @@
     $contents = file_get_contents(resource_path('views/components/unsaved-bar.blade.php'));
 
     expect($contents)
-        ->toContain('border-coollabs/20 bg-coollabs/10')
-        ->toContain('text-coollabs-200')
-        ->toContain('dark:border-white/20 dark:bg-white/10 dark:text-white/75');
+        ->toContain('border-current/20 bg-current/10')
+        ->toContain('text-current')
+        ->not->toContain('text-coollabs-200');
 });
 
 test('unsaved bar uses a light surface in light mode', function () {