noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Leave a disabled icon button's colours alone inside a toolbar

Browse Source 
Plan step 36, navigation review. The toolbar's recolouring rules
(primary in a standard toolbar, on-primary-container and the pressed
fill in a vibrant one) outrank button.css's disabled rule by
specificity, so a disabled icon button in a toolbar drew in full
primary. They now skip `:disabled` and `aria-disabled`, and the header
no longer claims each override only meets a button's base selector.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 01:10:29 +02:00
co-authored by Claude Opus 5
parent ed92e916b9
commit 52beb676bc
2 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/toolbar.css
+8 -7
View File
@@ -24,9 +24,9 @@
* `<x-button>` and `<x-fab>` draw their own ink from `data-md-color`/`data-md-variant`, not a
* utility, so a toolbar's recolouring rules — vibrant's icon buttons, a standard toolbar's primary
* ones (N-13), a docked FAB's flattened shadow — sit in this file's own `material.components`
* layer like everything else: each only overrides the single `color`/`background-color`/
* `box-shadow` declaration button.css or fab.css puts on its own base selector, so a toolbar's
* more specific selector always wins without needing to sit outside the layer.
* layer like everything else, each more specific than the button.css or fab.css rule it overrides,
* whichever file an application imports first. The recolouring leaves a disabled button alone, so
* button.css's disabled colours still apply inside a toolbar.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -72,18 +72,19 @@
color: var(--md-sys-color-on-primary-container);
}
[data-md-toolbar][data-md-vibrant] [data-md-icon-button]:not([aria-pressed='true']) {
[data-md-toolbar][data-md-vibrant] [data-md-icon-button]:not([aria-pressed='true'], :disabled, [aria-disabled='true']) {
color: var(--md-sys-color-on-primary-container);
}
[data-md-toolbar][data-md-vibrant] [data-md-icon-button][aria-pressed='true'] {
[data-md-toolbar][data-md-vibrant] [data-md-icon-button][aria-pressed='true']:not(:disabled, [aria-disabled='true']) {
background-color: var(--md-sys-color-surface-container);
color: var(--md-sys-color-on-surface);
}
/* M3's colour list for a standard toolbar ends "Standard button (Primary)", as the vibrant list
ends "Standard button (On primary container)" — the row above (N-13). */
[data-md-toolbar]:not([data-md-vibrant]) [data-md-icon-button]:not([aria-pressed='true']) {
ends "Standard button (On primary container)" — the row above (N-13). A disabled button keeps
button.css's disabled colours in either. */
[data-md-toolbar]:not([data-md-vibrant]) [data-md-icon-button]:not([aria-pressed='true'], :disabled, [aria-disabled='true']) {
color: var(--md-sys-color-primary);
}
tests/Feature/Components/AppBarTest.php
+9 -1
View File
@@ -212,8 +212,16 @@ it('keeps a toolbar at the bottom clear of the navigation bar', function () {
->and($css->declarations('[data-md-toolbar][data-md-vertical][data-md-toolbar-place=\'end\'], [data-md-toolbar-group][data-md-vertical][data-md-toolbar-place=\'end\']'))
->toBe(['inset-inline-end' => 'calc(var(--md-sys-measurement-space300) + var(--material-safe-right, env(safe-area-inset-right)))'])
// A standard toolbar's standard buttons are primary (N-13).
->and($css->declarations('[data-md-toolbar]:not([data-md-vibrant]) [data-md-icon-button]:not([aria-pressed=\'true\'])'))
->and($css->declarations('[data-md-toolbar]:not([data-md-vibrant]) [data-md-icon-button]:not([aria-pressed=\'true\'], :disabled, [aria-disabled=\'true\'])'))
->toBe(['color' => 'var(--md-sys-color-primary)']);
// A disabled icon button keeps button.css's disabled ink in a toolbar of either colour.
foreach (['[data-md-toolbar]:not([data-md-vibrant]) [data-md-icon-button]', '[data-md-toolbar][data-md-vibrant] [data-md-icon-button]'] as $scope) {
preg_match_all('/'.preg_quote($scope, '/').'[^{]*\{[^}]*\bcolor:/', $css->css, $rules);
expect($rules[0])->not->toBeEmpty()
->each->toContain(":disabled, [aria-disabled='true']");
}
});
it('offers M3\'s three contrast levels, marking the one in force', function () {