From 66847d51043300f3578a301bd19348526cc6862b Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Tue, 15 Sep 2026 01:52:09 +0200
Subject: [PATCH] Cover a disabled icon button's colour inside a toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The reviewer asked this run to look closely at it; no test exercised
it. toolbar.css's primary recolour already excludes :disabled and
[aria-disabled] so button.css's own disabled colour wins there — this
pins that a disabled button in a standard toolbar resolves to the
disabled formula, not primary, while an enabled sibling resolves to
primary (plan step 36, navigation group).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 tests/Browser/BarsTest.php | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/tests/Browser/BarsTest.php b/tests/Browser/BarsTest.php
index 1a08f147..045059cb 100644
--- a/tests/Browser/BarsTest.php
+++ b/tests/Browser/BarsTest.php
@@ -317,9 +317,10 @@ function toolbarScaffoldProbe()
                     ['title' => 'Sent', 'icon' => 'send', 'url' => '/toolbar-scaffold-probe'],
                 ]">
                     <x-toolbar variant="docked" rounded place="bottom" label="Formatting" id="toolbar">
-                        <x-button icon="format_bold" tooltip="Bold" />
+                        <x-button id="bold-btn" icon="format_bold" tooltip="Bold" />
                         <x-divider vertical />
-                        <x-button icon="format_italic" tooltip="Italic" />
+                        <x-button id="italic-btn" icon="format_italic" tooltip="Italic" />
+                        <x-button id="underline-btn" icon="format_underlined" tooltip="Underline" disabled />
                     </x-toolbar>
 
                     <div style="height: 200vh"></div>
@@ -357,6 +358,21 @@ it('rounds a docked toolbar and its divider from 840px, clear of the window\'s e
         ->assertNoJavaScriptErrors();
 });
 
+it('draws a disabled icon button inside a toolbar disabled, not in the toolbar\'s primary recolour', function () {
+    // toolbar.css recolours a standard (non-vibrant) toolbar's icon buttons to primary, but its
+    // selector excludes :disabled and [aria-disabled] so button.css's own disabled colour still
+    // wins there (resources/css/components/toolbar.css). A scratch element resolves each formula
+    // to a real rgb string, so the comparison does not have to guess the browser's serialization.
+    $primary = "(() => { const d = document.createElement('span'); d.style.color = 'var(--md-sys-color-primary)'; document.body.appendChild(d); const v = getComputedStyle(d).color; d.remove(); return v; })()";
+    $disabledColor = "(() => { const d = document.createElement('span'); d.style.color = 'color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent)'; document.body.appendChild(d); const v = getComputedStyle(d).color; d.remove(); return v; })()";
+
+    toolbarScaffoldProbe()->resize(1024, 800)
+        ->assertScript("getComputedStyle(document.querySelector('#bold-btn')).color === {$primary}")
+        ->assertScript("getComputedStyle(document.querySelector('#underline-btn')).color !== {$primary}")
+        ->assertScript("getComputedStyle(document.querySelector('#underline-btn')).color === {$disabledColor}")
+        ->assertNoJavaScriptErrors();
+});
+
 function tabsFirstPaintProbe(): void
 {
     Route::middleware('web')->get('/tabs-first-paint-probe', fn () => Blade::render(<<<'BLADE'