Skip to content

Commit c20bac7

Browse files
committed
fix(material/checkbox): derive checkmark color from palette
Fixes that the checkbox's checkmark color isn't derived from the palette.
1 parent cfdfa9a commit c20bac7

File tree

1 file changed

+14
-12
lines changed

1 file changed

+14
-12
lines changed

src/material/core/tokens/m2/mdc/_checkbox.scss

+14-12
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,12 @@
33
@use '../../../theming/theming';
44
@use '../../../theming/inspection';
55
@use '../../../style/sass-utils';
6+
@use '../../../mdc-helpers/mdc-helpers';
67
@use '../../token-utils';
7-
@use '@material/theme/theme-color' as mdc-theme-color;
88

99
// The prefix used to generate the fully qualified name for tokens in this file.
1010
$prefix: (mdc, checkbox);
1111

12-
// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
13-
// This function falls back to determining the tone based on whether the theme is light or dark.
14-
@function _contrast-tone($value, $is-dark, $light-color: '#fff', $dark-color: '#000') {
15-
@if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
16-
@return if(mdc-theme-color.contrast-tone($value) == 'dark', $dark-color, $light-color);
17-
}
18-
19-
@return if($is-dark, $light-color, $dark-color);
20-
}
21-
2212
// Tokens that can't be configured through Angular Material's current theming API,
2313
// but may be in a future version of the theming API.
2414
//
@@ -62,14 +52,26 @@ $prefix: (mdc, checkbox);
6252
inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
6353
$active-border-color:
6454
theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
55+
$selected-checkmark-color: null;
56+
57+
// Ideally we would derive all values directly from the theme, but it causes a lot of regressions
58+
// internally. For now we fall back to the old hardcoded behavior only for internal apps.
59+
@if (token-utils.$private-is-internal-build) {
60+
$contrast-tone: mdc-helpers.variable-safe-contrast-tone($palette-selected, $is-dark);
61+
$selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff);
62+
}
63+
@else {
64+
$selected-checkmark-color:
65+
inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
66+
}
6567

6668
@return (
6769
// The color of the checkbox fill when the checkbox is selected and disabled.
6870
disabled-selected-icon-color: $disabled-color,
6971
// The color of the checkbox border when the checkbox is unselected and disabled.
7072
disabled-unselected-icon-color: $disabled-color,
7173
// The color of the checkmark when the checkbox is selected.
72-
selected-checkmark-color: _contrast-tone($palette-selected, $is-dark),
74+
selected-checkmark-color: $selected-checkmark-color,
7375
// The color of the checkbox fill when the checkbox is selected and focused.
7476
selected-focus-icon-color: $palette-selected,
7577
// The color of the checkbox fill when the checkbox is selected and hovered.

0 commit comments

Comments
 (0)