From e2db74855d30b5e95639515c8cc1339b4db23bb7 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 13 Mar 2024 09:29:37 +0100 Subject: [PATCH] fix(material/core): avoid solid ripples in buttons The changes from #28664 appear to have caused ripples to be solid in some setups. These changes add a fallback to the old behavior if that's the case. Fixes #28706. --- src/material/core/tokens/m2/mat/_fab-small.scss | 4 +++- src/material/core/tokens/m2/mat/_fab.scss | 4 +++- src/material/core/tokens/m2/mat/_filled-button.scss | 4 +++- src/material/core/tokens/m2/mat/_icon-button.scss | 6 +++++- src/material/core/tokens/m2/mat/_outlined-button.scss | 6 +++++- src/material/core/tokens/m2/mat/_protected-button.scss | 4 +++- src/material/core/tokens/m2/mat/_text-button.scss | 6 +++++- 7 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/material/core/tokens/m2/mat/_fab-small.scss b/src/material/core/tokens/m2/mat/_fab-small.scss index beb74723bb9b..b980384d4338 100644 --- a/src/material/core/tokens/m2/mat/_fab-small.scss +++ b/src/material/core/tokens/m2/mat/_fab-small.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:meta'; @use '@material/ripple/ripple-theme' as mdc-ripple-theme; @use '../../token-utils'; @use '../../../theming/theming'; @@ -63,8 +64,9 @@ $prefix: (mat, fab-small); $foreground-color: null; $state-layer-color: null; $ripple-color: null; + $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast); - @if (token-utils.$private-is-internal-build) { + @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') { $is-dark: inspection.get-theme-type($theme) == dark; $container-color: inspection.get-theme-color($theme, $palette-name); $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark); diff --git a/src/material/core/tokens/m2/mat/_fab.scss b/src/material/core/tokens/m2/mat/_fab.scss index e3aed807d262..cc8f48ed6723 100644 --- a/src/material/core/tokens/m2/mat/_fab.scss +++ b/src/material/core/tokens/m2/mat/_fab.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:meta'; @use '@material/ripple/ripple-theme' as mdc-ripple-theme; @use '../../token-utils'; @use '../../../theming/theming'; @@ -63,8 +64,9 @@ $prefix: (mat, fab); $foreground-color: null; $state-layer-color: null; $ripple-color: null; + $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast); - @if (token-utils.$private-is-internal-build) { + @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') { $is-dark: inspection.get-theme-type($theme) == dark; $container-color: inspection.get-theme-color($theme, $palette-name); $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark); diff --git a/src/material/core/tokens/m2/mat/_filled-button.scss b/src/material/core/tokens/m2/mat/_filled-button.scss index 5fc78f2070ff..19dcbf51bbbf 100644 --- a/src/material/core/tokens/m2/mat/_filled-button.scss +++ b/src/material/core/tokens/m2/mat/_filled-button.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:meta'; @use '@material/ripple/ripple-theme' as mdc-ripple-theme; @use '../../token-utils'; @use '../../../theming/theming'; @@ -58,10 +59,11 @@ $prefix: (mat, filled-button); @function private-get-color-palette-color-tokens($theme, $palette-name) { $state-layer-color: null; $ripple-color: null; + $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. - @if (token-utils.$private-is-internal-build) { + @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') { $is-dark: inspection.get-theme-type($theme) == dark; $container-color: inspection.get-theme-color($theme, $palette-name); $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark); diff --git a/src/material/core/tokens/m2/mat/_icon-button.scss b/src/material/core/tokens/m2/mat/_icon-button.scss index 48013f246243..591af6611bf7 100644 --- a/src/material/core/tokens/m2/mat/_icon-button.scss +++ b/src/material/core/tokens/m2/mat/_icon-button.scss @@ -47,10 +47,14 @@ $prefix: (mat, icon-button); // Generates the mapping for the properties that change based on the button palette color. @function private-get-color-palette-color-tokens($theme, $palette-name) { $color: inspection.get-theme-color($theme, $palette-name); + $ripple-opacity: 0.1; @return ( state-layer-color: $color, - ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color), + ripple-color: if( + meta.type-of($color) == color, + rgba($color, $ripple-opacity), + inspection.get-theme-color($theme, foreground, base, $ripple-opacity)), ); } diff --git a/src/material/core/tokens/m2/mat/_outlined-button.scss b/src/material/core/tokens/m2/mat/_outlined-button.scss index 6f706fe55019..2626386bc1ea 100644 --- a/src/material/core/tokens/m2/mat/_outlined-button.scss +++ b/src/material/core/tokens/m2/mat/_outlined-button.scss @@ -57,10 +57,14 @@ $prefix: (mat, outlined-button); // Generates the mapping for the properties that change based on the button palette color. @function private-get-color-palette-color-tokens($theme, $palette-name) { $color: inspection.get-theme-color($theme, $palette-name); + $ripple-opacity: 0.1; @return ( state-layer-color: $color, - ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color), + ripple-color: if( + meta.type-of($color) == color, + rgba($color, $ripple-opacity), + inspection.get-theme-color($theme, foreground, base, $ripple-opacity)), ); } diff --git a/src/material/core/tokens/m2/mat/_protected-button.scss b/src/material/core/tokens/m2/mat/_protected-button.scss index 5550574dab5d..26c621efcd1b 100644 --- a/src/material/core/tokens/m2/mat/_protected-button.scss +++ b/src/material/core/tokens/m2/mat/_protected-button.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:meta'; @use '@material/ripple/ripple-theme' as mdc-ripple-theme; @use '../../token-utils'; @use '../../../theming/theming'; @@ -58,10 +59,11 @@ $prefix: (mat, protected-button); @function private-get-color-palette-color-tokens($theme, $palette-name) { $state-layer-color: null; $ripple-color: null; + $contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast); // Ideally we would derive all values directly from the theme, but it causes a lot of regressions // internally. For now we fall back to the old hardcoded behavior only for internal apps. - @if (token-utils.$private-is-internal-build) { + @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') { $is-dark: inspection.get-theme-type($theme) == dark; $container-color: inspection.get-theme-color($theme, $palette-name); $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark); diff --git a/src/material/core/tokens/m2/mat/_text-button.scss b/src/material/core/tokens/m2/mat/_text-button.scss index aeb4474a4267..75603f1151df 100644 --- a/src/material/core/tokens/m2/mat/_text-button.scss +++ b/src/material/core/tokens/m2/mat/_text-button.scss @@ -60,10 +60,14 @@ $prefix: (mat, text-button); // Generates the mapping for the properties that change based on the button palette color. @function private-get-color-palette-color-tokens($theme, $palette-name) { $color: inspection.get-theme-color($theme, $palette-name); + $ripple-opacity: 0.1; @return ( state-layer-color: $color, - ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $color), + ripple-color: if( + meta.type-of($color) == color, + rgba($color, $ripple-opacity), + inspection.get-theme-color($theme, foreground, base, $ripple-opacity)), ); }