fix(ui): improve highlighted button and spinner contrast (#11279)

Co-authored-by: 🏔️ Peak <122374094+peaklabs-dev@users.noreply.github.com>

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);
 }
 

resources/css/utilities.css

@@ -131,7 +131,7 @@
 }
 
 @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 {

resources/views/components/unsaved-bar.blade.php

@@ -67,7 +67,7 @@
             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>

tests/Feature/HighlightedButtonStylingTest.php

@@ -10,10 +10,23 @@ test('highlighted buttons use the shared coollabs style in every color scheme',
 
     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');
+});

tests/Feature/SentinelUnsavedBarFlashTest.php

@@ -76,9 +76,9 @@ test('unsaved bar keyboard shortcut remains visible in light mode', function ()
     $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 () {