Skip to content

Commit 1e48cd4

Browse files
crisbetocrisbeto
committed
fix(material-experimental/theming): fix up M3 checkbox
Fixes that the M3 checkbox didn't have the correct disabled colors.
1 parent cbeeb3a commit 1e48cd4

File tree

3 files changed

+100
-61
lines changed

3 files changed

+100
-61
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -551,6 +551,18 @@
551551
);
552552
}
553553

554+
/// Generates custom tokens for mat-checkbox.
555+
/// @param {Map} $systems The MDC system tokens
556+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
557+
/// @return {Map} A set of custom tokens for mat-checkbox
558+
@function checkbox($systems, $exclude-hardcoded) {
559+
@return (
560+
disabled-label-color: mat.private-safe-color-change(
561+
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
562+
);
563+
}
564+
565+
554566
/// Generates custom tokens for the mat-radio.
555567
/// @param {Map} $systems The MDC system tokens
556568
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

‎src/material-experimental/theming/_m3-tokens.scss

Lines changed: 86 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -166,8 +166,10 @@
166166
/// different). This is a temporary workaround until MDC updates to use the correct names for the
167167
/// tokens.
168168
/// @param {Map} $tokens The map of checkbox tokens with the official tokens names
169+
/// @param {Map} $all-tokens Map of all checkbox tokens, including hardcoded values.
170+
/// This is necessary in order to do opacity lookups.
169171
/// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation.
170-
@function _fix-checkbox-tokens($tokens) {
172+
@function _fix-checkbox-tokens($tokens, $all-tokens) {
171173
$rename-keys: (
172174
selected-icon-color: selected-checkmark-color,
173175
selected-disabled-icon-color: disabled-selected-checkmark-color,
@@ -184,7 +186,20 @@
184186
unselected-outline-color: unselected-icon-color,
185187
unselected-pressed-outline-color: unselected-pressed-icon-color
186188
);
187-
@return _rename-map-keys($tokens, $rename-keys);
189+
190+
$remapped-tokens: _rename-map-keys($tokens, $rename-keys);
191+
$remapped-all-tokens: _rename-map-keys($all-tokens, $rename-keys);
192+
193+
@return _combine-color-tokens($remapped-tokens, $remapped-all-tokens, (
194+
(
195+
color: disabled-selected-icon-color,
196+
opacity: disabled-selected-icon-opacity,
197+
),
198+
(
199+
color: disabled-unselected-icon-color,
200+
opacity: disabled-unselected-icon-opacity,
201+
),
202+
));
188203
}
189204

190205
/// Fixes inconsistent values in the text field color tokens. Applies to both filled and outlined
@@ -196,32 +211,32 @@
196211
@function _fix-text-field-color-tokens($initial-tokens, $all-tokens) {
197212
@return _combine-color-tokens($initial-tokens, $all-tokens, (
198213
(
199-
color: 'disabled-active-indicator-color',
200-
opacity: 'disabled-active-indicator-opacity'
214+
color: disabled-active-indicator-color,
215+
opacity: disabled-active-indicator-opacity
201216
),
202217
(
203-
color: 'disabled-container-color',
204-
opacity: 'disabled-container-opacity'
218+
color: disabled-container-color,
219+
opacity: disabled-container-opacity
205220
),
206221
(
207-
color: 'disabled-input-text-color',
208-
opacity: 'disabled-input-text-opacity'
222+
color: disabled-input-text-color,
223+
opacity: disabled-input-text-opacity
209224
),
210225
(
211-
color: 'disabled-label-text-color',
212-
opacity: 'disabled-label-text-opacity'
226+
color: disabled-label-text-color,
227+
opacity: disabled-label-text-opacity
213228
),
214229
(
215-
color: 'disabled-leading-icon-color',
216-
opacity: 'disabled-leading-icon-opacity'
230+
color: disabled-leading-icon-color,
231+
opacity: disabled-leading-icon-opacity
217232
),
218233
(
219-
color: 'disabled-supporting-text-color',
220-
opacity: 'disabled-supporting-text-opacity'
234+
color: disabled-supporting-text-color,
235+
opacity: disabled-supporting-text-opacity
221236
),
222237
(
223-
color: 'disabled-trailing-icon-color',
224-
opacity: 'disabled-trailing-icon-opacity'
238+
color: disabled-trailing-icon-color,
239+
opacity: disabled-trailing-icon-opacity
225240
)
226241
));
227242
}
@@ -235,32 +250,32 @@
235250
@function _fix-filled-text-field-tokens($initial-tokens, $all-tokens) {
236251
$tokens: _combine-color-tokens($initial-tokens, $all-tokens, (
237252
(
238-
color: 'disabled-active-indicator-color',
239-
opacity: 'disabled-active-indicator-opacity'
253+
color: disabled-active-indicator-color,
254+
opacity: disabled-active-indicator-opacity
240255
),
241256
(
242-
color: 'disabled-container-color',
243-
opacity: 'disabled-container-opacity'
257+
color: disabled-container-color,
258+
opacity: disabled-container-opacity
244259
),
245260
(
246-
color: 'disabled-input-text-color',
247-
opacity: 'disabled-input-text-opacity'
261+
color: disabled-input-text-color,
262+
opacity: disabled-input-text-opacity
248263
),
249264
(
250-
color: 'disabled-label-text-color',
251-
opacity: 'disabled-label-text-opacity'
265+
color: disabled-label-text-color,
266+
opacity: disabled-label-text-opacity
252267
),
253268
(
254-
color: 'disabled-leading-icon-color',
255-
opacity: 'disabled-leading-icon-opacity'
269+
color: disabled-leading-icon-color,
270+
opacity: disabled-leading-icon-opacity
256271
),
257272
(
258-
color: 'disabled-supporting-text-color',
259-
opacity: 'disabled-supporting-text-opacity'
273+
color: disabled-supporting-text-color,
274+
opacity: disabled-supporting-text-opacity
260275
),
261276
(
262-
color: 'disabled-trailing-icon-color',
263-
opacity: 'disabled-trailing-icon-opacity'
277+
color: disabled-trailing-icon-color,
278+
opacity: disabled-trailing-icon-opacity
264279
)
265280
));
266281

@@ -284,8 +299,8 @@
284299
@function _fix-text-button-tokens($initial-tokens, $all-tokens) {
285300
@return _combine-color-tokens($initial-tokens, $all-tokens, (
286301
(
287-
color: 'disabled-label-text-color',
288-
opacity: 'disabled-label-text-opacity',
302+
color: disabled-label-text-color,
303+
opacity: disabled-label-text-opacity,
289304
),
290305
));
291306
}
@@ -297,12 +312,12 @@
297312
@function _fix-filled-button-tokens($initial-tokens, $all-tokens) {
298313
@return _combine-color-tokens($initial-tokens, $all-tokens, (
299314
(
300-
color: 'disabled-label-text-color',
301-
opacity: 'disabled-label-text-opacity',
315+
color: disabled-label-text-color,
316+
opacity: disabled-label-text-opacity,
302317
),
303318
(
304-
color: 'disabled-container-color',
305-
opacity: 'disabled-container-opacity',
319+
color: disabled-container-color,
320+
opacity: disabled-container-opacity,
306321
)
307322
));
308323
}
@@ -314,12 +329,12 @@
314329
@function _fix-protected-button-tokens($initial-tokens, $all-tokens) {
315330
@return _combine-color-tokens($initial-tokens, $all-tokens, (
316331
(
317-
color: 'disabled-label-text-color',
318-
opacity: 'disabled-label-text-opacity',
332+
color: disabled-label-text-color,
333+
opacity: disabled-label-text-opacity,
319334
),
320335
(
321-
color: 'disabled-container-color',
322-
opacity: 'disabled-container-opacity',
336+
color: disabled-container-color,
337+
opacity: disabled-container-opacity,
323338
)
324339
));
325340
}
@@ -331,12 +346,12 @@
331346
@function _fix-outlined-button-tokens($initial-tokens, $all-tokens) {
332347
@return _combine-color-tokens($initial-tokens, $all-tokens, (
333348
(
334-
color: 'disabled-label-text-color',
335-
opacity: 'disabled-label-text-opacity',
349+
color: disabled-label-text-color,
350+
opacity: disabled-label-text-opacity,
336351
),
337352
(
338-
color: 'disabled-outline-color',
339-
opacity: 'disabled-outline-opacity',
353+
color: disabled-outline-color,
354+
opacity: disabled-outline-opacity,
340355
)
341356
));
342357
}
@@ -350,36 +365,36 @@
350365
@function _fix-outlined-text-field-tokens($initial-tokens, $all-tokens) {
351366
@return _combine-color-tokens($initial-tokens, $all-tokens, (
352367
(
353-
color: 'disabled-outline-color',
354-
opacity: 'disabled-outline-opacity'
368+
color: disabled-outline-color,
369+
opacity: disabled-outline-opacity
355370
),
356371
(
357-
color: 'disabled-active-indicator-color',
358-
opacity: 'disabled-active-indicator-opacity'
372+
color: disabled-active-indicator-color,
373+
opacity: disabled-active-indicator-opacity
359374
),
360375
(
361-
color: 'disabled-container-color',
362-
opacity: 'disabled-container-opacity'
376+
color: disabled-container-color,
377+
opacity: disabled-container-opacity
363378
),
364379
(
365-
color: 'disabled-input-text-color',
366-
opacity: 'disabled-input-text-opacity'
380+
color: disabled-input-text-color,
381+
opacity: disabled-input-text-opacity
367382
),
368383
(
369-
color: 'disabled-label-text-color',
370-
opacity: 'disabled-label-text-opacity'
384+
color: disabled-label-text-color,
385+
opacity: disabled-label-text-opacity
371386
),
372387
(
373-
color: 'disabled-leading-icon-color',
374-
opacity: 'disabled-leading-icon-opacity'
388+
color: disabled-leading-icon-color,
389+
opacity: disabled-leading-icon-opacity
375390
),
376391
(
377-
color: 'disabled-supporting-text-color',
378-
opacity: 'disabled-supporting-text-opacity'
392+
color: disabled-supporting-text-color,
393+
opacity: disabled-supporting-text-opacity
379394
),
380395
(
381-
color: 'disabled-trailing-icon-color',
382-
opacity: 'disabled-trailing-icon-opacity'
396+
color: disabled-trailing-icon-color,
397+
opacity: disabled-trailing-icon-opacity
383398
)
384399
));
385400
}
@@ -439,7 +454,12 @@
439454
// Get the official MDC component tokens
440455
_namespace-tokens(
441456
(mdc, checkbox),
442-
_fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
457+
_fix-checkbox-tokens(
458+
mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded),
459+
// Need to pass in the hardcoded values, because they
460+
// include opacities that are used for the disabled state.
461+
mdc-tokens.md-comp-checkbox-values($systems, false)
462+
),
443463
$token-slots
444464
),
445465
_namespace-tokens(
@@ -707,6 +727,11 @@
707727
custom-tokens.minimal-pseudo-checkbox($systems, $exclude-hardcoded),
708728
$token-slots
709729
),
730+
_namespace-tokens(
731+
(mat, checkbox),
732+
custom-tokens.checkbox($systems, $exclude-hardcoded),
733+
$token-slots
734+
),
710735
_namespace-tokens(
711736
(mat, radio),
712737
custom-tokens.radio($systems, $exclude-hardcoded),

‎src/material/core/tokens/m2/_index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
@use './mat/option' as tokens-mat-option;
2222
@use './mat/optgroup' as tokens-mat-optgroup;
2323
@use './mat/paginator' as tokens-mat-paginator;
24+
@use './mat/checkbox' as tokens-mat-checkbox;
2425
@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
2526
@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
2627
@use './mat/radio' as tokens-mat-radio;
@@ -125,6 +126,7 @@
125126
_get-tokens-for-module($theme, tokens-mat-option),
126127
_get-tokens-for-module($theme, tokens-mat-outlined-button),
127128
_get-tokens-for-module($theme, tokens-mat-paginator),
129+
_get-tokens-for-module($theme, tokens-mat-checkbox),
128130
_get-tokens-for-module($theme, tokens-mat-full-pseudo-checkbox),
129131
_get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox),
130132
_get-tokens-for-module($theme, tokens-mat-protected-button),

0 commit comments

Comments
 (0)