From a2fe9ba630e8e454a47c20f9d0b83b4d7931b92b Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 3 Jun 2025 06:26:13 -0600 Subject: [PATCH] fix(material/button): use system colors for state layers and text --- src/material/button/_m2-button.scss | 68 +++++++++++++----------- src/material/button/_m2-fab.scss | 24 +++++---- src/material/button/_m2-icon-button.scss | 12 +++-- 3 files changed, 58 insertions(+), 46 deletions(-) diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss index 647cfc109bca..2feec8aebb02 100644 --- a/src/material/button/_m2-button.scss +++ b/src/material/button/_m2-button.scss @@ -52,55 +52,56 @@ button-filled-container-color: map.get($system, surface), button-filled-disabled-container-color: $disabled-container, button-filled-disabled-label-text-color: $disabled, - button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), + button-filled-disabled-state-layer-color: map.get($system, on-surface-variant), button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), - button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base), + button-filled-label-text-color: map.get($system, on-surface), button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), - button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base), + button-filled-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), + button-filled-state-layer-color: map.get($system, on-surface), button-outlined-disabled-label-text-color: $disabled, button-outlined-disabled-outline-color: $outline, - button-outlined-disabled-state-layer-color: - inspection.get-theme-color($theme, foreground, base), + button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant), button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), - button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, base), + button-outlined-label-text-color: map.get($system, on-surface), button-outlined-outline-color: $outline, - button-outlined-pressed-state-layer-opacity: - map.get($system, pressed-state-layer-opacity), - button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base), + button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), + button-outlined-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), + button-outlined-state-layer-color: map.get($system, on-surface), button-protected-container-color: map.get($system, surface), button-protected-disabled-container-color: $disabled-container, button-protected-disabled-label-text-color: $disabled, - button-protected-disabled-state-layer-color: - inspection.get-theme-color($theme, foreground, base), + button-protected-disabled-state-layer-color: map.get($system, on-surface-variant), button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), - button-protected-label-text-color: inspection.get-theme-color($theme, foreground, base), - button-protected-pressed-state-layer-opacity: - map.get($system, pressed-state-layer-opacity), - button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base), + button-protected-label-text-color: map.get($system, on-surface), + button-protected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), + button-protected-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), + button-protected-state-layer-color: map.get($system, on-surface), button-text-disabled-label-text-color: $disabled, - button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), + button-text-disabled-state-layer-color: map.get($system, on-surface-variant), button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), - button-text-label-text-color: inspection.get-theme-color($theme, foreground, base), + button-text-label-text-color: map.get($system, on-surface), button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), - button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base), + button-text-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), + button-text-state-layer-color: map.get($system, on-surface), button-tonal-container-color: map.get($system, surface), button-tonal-disabled-container-color: $disabled-container, button-tonal-disabled-label-text-color: $disabled, - button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), + button-tonal-disabled-state-layer-color: map.get($system, on-surface-variant), button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), - button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, base), + button-tonal-label-text-color: map.get($system, on-surface), button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), - button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base), + button-tonal-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), + button-tonal-state-layer-color: map.get($system, on-surface), ); } @@ -116,22 +117,27 @@ @return ( button-filled-container-color: map.get($system, primary), button-filled-label-text-color: map.get($system, on-primary), - button-filled-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%), + button-filled-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)), button-filled-state-layer-color: map.get($system, on-primary), button-outlined-label-text-color: map.get($system, primary), button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color), - button-outlined-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%), + button-outlined-ripple-color: m3-utils.color-with-opacity( + map.get($system, primary), map.get($system, pressed-state-layer-opacity)), button-outlined-state-layer-color: map.get($system, primary), button-protected-container-color: map.get($system, primary), button-protected-label-text-color: map.get($system, on-primary), - button-protected-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%), + button-protected-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)), button-protected-state-layer-color: map.get($system, on-primary), button-text-label-text-color: map.get($system, primary), - button-text-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%), + button-text-ripple-color: m3-utils.color-with-opacity( + map.get($system, primary), map.get($system, pressed-state-layer-opacity)), button-text-state-layer-color: map.get($system, primary), button-tonal-container-color: map.get($system, primary), button-tonal-label-text-color: map.get($system, on-primary), - button-tonal-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%), + button-tonal-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)), button-tonal-state-layer-color: map.get($system, on-primary), ); } diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss index 0e953b5371a3..49790186cca3 100644 --- a/src/material/button/_m2-fab.scss +++ b/src/material/button/_m2-fab.scss @@ -39,23 +39,25 @@ fab-container-color: map.get($system, surface), fab-disabled-state-container-color: $disabled-container, fab-disabled-state-foreground-color: $disabled, - fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), + fab-disabled-state-layer-color: map.get($system, on-surface-variant), fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), - fab-foreground-color: inspection.get-theme-color($theme, foreground, base), + fab-foreground-color: map.get($system, on-surface), fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), - fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), + fab-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), fab-small-container-color: map.get($system, surface), fab-small-disabled-state-container-color: $disabled-container, fab-small-disabled-state-foreground-color: $disabled, - fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), + fab-small-disabled-state-layer-color: map.get($system, on-surface-variant), fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), - fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base), + fab-small-foreground-color: map.get($system, on-surface), fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), - fab-small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - fab-small-state-layer-color: inspection.get-theme-color($theme, foreground, base), - fab-state-layer-color: inspection.get-theme-color($theme, foreground, base), + fab-small-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), + fab-small-state-layer-color: map.get($system, on-surface), + fab-state-layer-color: map.get($system, on-surface), ); } @@ -67,10 +69,12 @@ @return ( fab-container-color: map.get($system, primary), fab-foreground-color: map.get($system, on-primary), - fab-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%), + fab-ripple-color: m3-utils.color-with-opacity( + map.get($system, primary), map.get($system, pressed-state-layer-opacity)), fab-small-container-color: map.get($system, primary), fab-small-foreground-color: map.get($system, on-primary), - fab-small-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%), + fab-small-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)), fab-small-state-layer-color: map.get($system, on-primary), fab-state-layer-color: map.get($system, on-primary), ); diff --git a/src/material/button/_m2-icon-button.scss b/src/material/button/_m2-icon-button.scss index f22ca1f7bd52..18cb0a168879 100644 --- a/src/material/button/_m2-icon-button.scss +++ b/src/material/button/_m2-icon-button.scss @@ -19,14 +19,15 @@ $is-dark: inspection.get-theme-type($theme) == dark; @return ( - icon-button-disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)), - icon-button-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base), + icon-button-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%), + icon-button-disabled-state-layer-color: map.get($system, on-surface-variant), icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), icon-button-icon-color: inherit, icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), - icon-button-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1), - icon-button-state-layer-color: inspection.get-theme-color($theme, foreground, base), + icon-button-ripple-color: m3-utils.color-with-opacity( + map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)), + icon-button-state-layer-color: map.get($system, on-surface), ); } @@ -38,7 +39,8 @@ @return ( icon-button-icon-color: map.get($system, primary), icon-button-state-layer-color: map.get($system, primary), - icon-button-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%), + icon-button-ripple-color: m3-utils.color-with-opacity( + map.get($system, primary), map.get($system, pressed-state-layer-opacity)), ); }