diff --git a/resources/css/components/toolbar.css b/resources/css/components/toolbar.css index 0372a20e..d53903a3 100644 --- a/resources/css/components/toolbar.css +++ b/resources/css/components/toolbar.css @@ -7,8 +7,12 @@ * floating a 64px pill in surface-container (or primary-container, `vibrant`) at elevation 3, * 8px at its ends and 4px between controls; `vertical` stands it on end * - * Unlayered on purpose: a vibrant toolbar recolours the icon buttons inside it, which draw their - * ink as utilities, and a rule in any layer loses to a utility. + * Placed over the page, a horizontal toolbar keeps 16dp from the window's edge and a vertical one + * 24dp, which is M3's minimum for each. + * + * Unlayered on purpose: a toolbar recolours the icon buttons inside it โ€” primary in a standard + * one, on-primary-container in a vibrant one โ€” and they draw their ink as utilities, which a rule + * in any layer loses to. */ [data-toolbar] { @@ -60,6 +64,13 @@ 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. An icon button carries its own + ink as a utility, so the container's `color` never reaches it and this rule has to. */ +[data-toolbar]:not([data-vibrant]) [data-icon-button]:not([aria-pressed="true"]) { + color: var(--md-sys-color-primary); +} + /* A floating toolbar and its FAB, side by side (or stacked, vertical). */ [data-toolbar-group] { display: inline-flex; @@ -95,6 +106,14 @@ translate: 0 -50%; } +/* "Horizontal toolbars should have a minimum 16dp margin from the edge of the window. Vertical + toolbars should have a minimum 24dp margin" + (docs/reference/m3/components-navigation-selection-inputs.md ยง Toolbars). */ +[data-toolbar][data-vertical][data-toolbar-place="end"], +[data-toolbar-group][data-vertical][data-toolbar-place="end"] { + inset-inline-end: calc(1.5rem + var(--material-safe-right, env(safe-area-inset-right))); +} + [data-toolbar][data-variant="docked"][data-toolbar-place="bottom"] { inset-inline: 0; bottom: var(--material-bottom-bar, 0px); diff --git a/tests/Feature/Components/AppBarTest.php b/tests/Feature/Components/AppBarTest.php index cce2723e..cb3d9bdb 100644 --- a/tests/Feature/Components/AppBarTest.php +++ b/tests/Feature/Components/AppBarTest.php @@ -86,7 +86,11 @@ it('keeps a toolbar at the bottom clear of the navigation bar', function () { expect($css) // Never a sum: --material-bottom-bar already swallows the bottom safe area (N-02). ->toContain('bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + 1rem);') - ->toContain('bottom: var(--material-bottom-bar, 0px);'); + ->toContain('bottom: var(--material-bottom-bar, 0px);') + // A vertical toolbar keeps 24dp from the edge where a horizontal one keeps 16 (N-12). + ->toContain('inset-inline-end: calc(1.5rem + var(--material-safe-right, env(safe-area-inset-right)));') + // A standard toolbar's standard buttons are primary (N-13). + ->toContain('[data-toolbar]:not([data-vibrant]) [data-icon-button]:not([aria-pressed="true"]) {'); }); it('offers M3\'s three contrast levels, marking the one in force', function () {