|
3 | 3 | @use '../../../theming/theming';
|
4 | 4 | @use '../../../theming/inspection';
|
5 | 5 | @use '../../../style/sass-utils';
|
| 6 | +@use '../../../mdc-helpers/mdc-helpers'; |
6 | 7 | @use '../../token-utils';
|
7 |
| -@use '@material/theme/theme-color' as mdc-theme-color; |
8 | 8 |
|
9 | 9 | // The prefix used to generate the fully qualified name for tokens in this file.
|
10 | 10 | $prefix: (mdc, checkbox);
|
11 | 11 |
|
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 |
| - |
22 | 12 | // Tokens that can't be configured through Angular Material's current theming API,
|
23 | 13 | // but may be in a future version of the theming API.
|
24 | 14 | //
|
@@ -62,14 +52,26 @@ $prefix: (mdc, checkbox);
|
62 | 52 | inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
|
63 | 53 | $active-border-color:
|
64 | 54 | 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 | + } |
65 | 67 |
|
66 | 68 | @return (
|
67 | 69 | // The color of the checkbox fill when the checkbox is selected and disabled.
|
68 | 70 | disabled-selected-icon-color: $disabled-color,
|
69 | 71 | // The color of the checkbox border when the checkbox is unselected and disabled.
|
70 | 72 | disabled-unselected-icon-color: $disabled-color,
|
71 | 73 | // 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, |
73 | 75 | // The color of the checkbox fill when the checkbox is selected and focused.
|
74 | 76 | selected-focus-icon-color: $palette-selected,
|
75 | 77 | // The color of the checkbox fill when the checkbox is selected and hovered.
|
|
0 commit comments