Skip to content

Commit 339905c

Browse files
authored
fix(material-experimental/theming): disabled radio button incorrect label color (#28415)
Fixes that disabled radio buttons didn't have the correct color of the label when disabled. Also switches some existing `rgba` calls to use the `safe-color-change` function.
1 parent b117e1c commit 339905c

File tree

1 file changed

+8
-9
lines changed

1 file changed

+8
-9
lines changed

src/material-experimental/theming/_custom-tokens.scss

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -526,8 +526,8 @@
526526
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
527527
/// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox
528528
@function full-pseudo-checkbox($systems, $exclude-hardcoded) {
529-
$disabled-color-base: map.get($systems, 'md-sys-color', 'on-surface');
530-
$disabled-color: if($disabled-color-base == null, null, rgba($disabled-color-base, 0.38));
529+
$disabled-color: mat.private-safe-color-change(
530+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38);
531531

532532
@return (
533533
selected-icon-color: map.get($systems, 'md-sys-color', 'primary'),
@@ -544,12 +544,10 @@
544544
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
545545
/// @return {Map} A set of custom tokens for the minimal variant of mat-pseudo-checkbox
546546
@function minimal-pseudo-checkbox($systems, $exclude-hardcoded) {
547-
$disabled-color-base: map.get($systems, 'md-sys-color', 'on-surface');
548-
$disabled-color: if($disabled-color-base == null, null, rgba($disabled-color-base, 0.38));
549-
550547
@return (
551548
selected-checkmark-color: map.get($systems, 'md-sys-color', 'primary'),
552-
disabled-selected-checkmark-color: $disabled-color,
549+
disabled-selected-checkmark-color: mat.private-safe-color-change(
550+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
553551
);
554552
}
555553

@@ -561,7 +559,8 @@
561559
@return (
562560
ripple-color: map.get($systems, md-sys-color, on-surface),
563561
checked-ripple-color: map.get($systems, md-sys-color, primary),
564-
disabled-label-color: map.get($systems, md-sys-color, on-surface),
562+
disabled-label-color: mat.private-safe-color-change(
563+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
565564
);
566565
}
567566

@@ -628,8 +627,8 @@
628627
/// @return {Map} A set of custom tokens for the mat-slider
629628
@function slider($systems, $exclude-hardcoded) {
630629
$ripple-color: map.get($systems, md-sys-color, primary);
631-
$hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)});
632-
$focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)});
630+
$hover-ripple-color: mat.private-safe-color-change($ripple-color, $alpha: 0.05);
631+
$focus-ripple-color: mat.private-safe-color-change($ripple-color, $alpha: 0.2);
633632

634633
@return (
635634
ripple-color: $ripple-color,

0 commit comments

Comments
 (0)