diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index dd31dc0543e2..6c24991b1b9f 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -526,8 +526,8 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox @function full-pseudo-checkbox($systems, $exclude-hardcoded) { - $disabled-color-base: map.get($systems, 'md-sys-color', 'on-surface'); - $disabled-color: if($disabled-color-base == null, null, rgba($disabled-color-base, 0.38)); + $disabled-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38); @return ( selected-icon-color: map.get($systems, 'md-sys-color', 'primary'), @@ -544,12 +544,10 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the minimal variant of mat-pseudo-checkbox @function minimal-pseudo-checkbox($systems, $exclude-hardcoded) { - $disabled-color-base: map.get($systems, 'md-sys-color', 'on-surface'); - $disabled-color: if($disabled-color-base == null, null, rgba($disabled-color-base, 0.38)); - @return ( selected-checkmark-color: map.get($systems, 'md-sys-color', 'primary'), - disabled-selected-checkmark-color: $disabled-color, + disabled-selected-checkmark-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), ); } @@ -561,7 +559,8 @@ @return ( ripple-color: map.get($systems, md-sys-color, on-surface), checked-ripple-color: map.get($systems, md-sys-color, primary), - disabled-label-color: map.get($systems, md-sys-color, on-surface), + disabled-label-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), ); } @@ -628,8 +627,8 @@ /// @return {Map} A set of custom tokens for the mat-slider @function slider($systems, $exclude-hardcoded) { $ripple-color: map.get($systems, md-sys-color, primary); - $hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)}); - $focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)}); + $hover-ripple-color: mat.private-safe-color-change($ripple-color, $alpha: 0.05); + $focus-ripple-color: mat.private-safe-color-change($ripple-color, $alpha: 0.2); @return ( ripple-color: $ripple-color,