Skip to content

Commit

Permalink
fix(material-experimental/theming): fix up M3 checkbox
Browse files Browse the repository at this point in the history 
Fixes that the M3 checkbox didn't have the correct disabled colors.
  • Loading branch information
@crisbeto
crisbeto committed Jan 16, 2024
1 parent cbeeb3a commit 1e48cd4
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 61 deletions.
12 changes: 12 additions & 0 deletions src/material-experimental/theming/_custom-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,18 @@
);
}

/// Generates custom tokens for mat-checkbox.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for mat-checkbox
@function checkbox($systems, $exclude-hardcoded) {
@return (
disabled-label-color: mat.private-safe-color-change(
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
);
}


/// Generates custom tokens for the mat-radio.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
Expand Down
147 changes: 86 additions & 61 deletions src/material-experimental/theming/_m3-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,10 @@
/// different). This is a temporary workaround until MDC updates to use the correct names for the
/// tokens.
/// @param {Map} $tokens The map of checkbox tokens with the official tokens names
/// @param {Map} $all-tokens Map of all checkbox tokens, including hardcoded values.
/// This is necessary in order to do opacity lookups.
/// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation.
@function _fix-checkbox-tokens($tokens) {
@function _fix-checkbox-tokens($tokens, $all-tokens) {
$rename-keys: (
selected-icon-color: selected-checkmark-color,
selected-disabled-icon-color: disabled-selected-checkmark-color,
Expand All @@ -184,7 +186,20 @@
unselected-outline-color: unselected-icon-color,
unselected-pressed-outline-color: unselected-pressed-icon-color
);
@return _rename-map-keys($tokens, $rename-keys);

$remapped-tokens: _rename-map-keys($tokens, $rename-keys);
$remapped-all-tokens: _rename-map-keys($all-tokens, $rename-keys);

@return _combine-color-tokens($remapped-tokens, $remapped-all-tokens, (
(
color: disabled-selected-icon-color,
opacity: disabled-selected-icon-opacity,
),
(
color: disabled-unselected-icon-color,
opacity: disabled-unselected-icon-opacity,
),
));
}

/// Fixes inconsistent values in the text field color tokens. Applies to both filled and outlined
Expand All @@ -196,32 +211,32 @@
@function _fix-text-field-color-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-active-indicator-color',
opacity: 'disabled-active-indicator-opacity'
color: disabled-active-indicator-color,
opacity: disabled-active-indicator-opacity
),
(
color: 'disabled-container-color',
opacity: 'disabled-container-opacity'
color: disabled-container-color,
opacity: disabled-container-opacity
),
(
color: 'disabled-input-text-color',
opacity: 'disabled-input-text-opacity'
color: disabled-input-text-color,
opacity: disabled-input-text-opacity
),
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity'
color: disabled-label-text-color,
opacity: disabled-label-text-opacity
),
(
color: 'disabled-leading-icon-color',
opacity: 'disabled-leading-icon-opacity'
color: disabled-leading-icon-color,
opacity: disabled-leading-icon-opacity
),
(
color: 'disabled-supporting-text-color',
opacity: 'disabled-supporting-text-opacity'
color: disabled-supporting-text-color,
opacity: disabled-supporting-text-opacity
),
(
color: 'disabled-trailing-icon-color',
opacity: 'disabled-trailing-icon-opacity'
color: disabled-trailing-icon-color,
opacity: disabled-trailing-icon-opacity
)
));
}
Expand All @@ -235,32 +250,32 @@
@function _fix-filled-text-field-tokens($initial-tokens, $all-tokens) {
$tokens: _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-active-indicator-color',
opacity: 'disabled-active-indicator-opacity'
color: disabled-active-indicator-color,
opacity: disabled-active-indicator-opacity
),
(
color: 'disabled-container-color',
opacity: 'disabled-container-opacity'
color: disabled-container-color,
opacity: disabled-container-opacity
),
(
color: 'disabled-input-text-color',
opacity: 'disabled-input-text-opacity'
color: disabled-input-text-color,
opacity: disabled-input-text-opacity
),
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity'
color: disabled-label-text-color,
opacity: disabled-label-text-opacity
),
(
color: 'disabled-leading-icon-color',
opacity: 'disabled-leading-icon-opacity'
color: disabled-leading-icon-color,
opacity: disabled-leading-icon-opacity
),
(
color: 'disabled-supporting-text-color',
opacity: 'disabled-supporting-text-opacity'
color: disabled-supporting-text-color,
opacity: disabled-supporting-text-opacity
),
(
color: 'disabled-trailing-icon-color',
opacity: 'disabled-trailing-icon-opacity'
color: disabled-trailing-icon-color,
opacity: disabled-trailing-icon-opacity
)
));

Expand All @@ -284,8 +299,8 @@
@function _fix-text-button-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity',
color: disabled-label-text-color,
opacity: disabled-label-text-opacity,
),
));
}
Expand All @@ -297,12 +312,12 @@
@function _fix-filled-button-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity',
color: disabled-label-text-color,
opacity: disabled-label-text-opacity,
),
(
color: 'disabled-container-color',
opacity: 'disabled-container-opacity',
color: disabled-container-color,
opacity: disabled-container-opacity,
)
));
}
Expand All @@ -314,12 +329,12 @@
@function _fix-protected-button-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity',
color: disabled-label-text-color,
opacity: disabled-label-text-opacity,
),
(
color: 'disabled-container-color',
opacity: 'disabled-container-opacity',
color: disabled-container-color,
opacity: disabled-container-opacity,
)
));
}
Expand All @@ -331,12 +346,12 @@
@function _fix-outlined-button-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity',
color: disabled-label-text-color,
opacity: disabled-label-text-opacity,
),
(
color: 'disabled-outline-color',
opacity: 'disabled-outline-opacity',
color: disabled-outline-color,
opacity: disabled-outline-opacity,
)
));
}
Expand All @@ -350,36 +365,36 @@
@function _fix-outlined-text-field-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-outline-color',
opacity: 'disabled-outline-opacity'
color: disabled-outline-color,
opacity: disabled-outline-opacity
),
(
color: 'disabled-active-indicator-color',
opacity: 'disabled-active-indicator-opacity'
color: disabled-active-indicator-color,
opacity: disabled-active-indicator-opacity
),
(
color: 'disabled-container-color',
opacity: 'disabled-container-opacity'
color: disabled-container-color,
opacity: disabled-container-opacity
),
(
color: 'disabled-input-text-color',
opacity: 'disabled-input-text-opacity'
color: disabled-input-text-color,
opacity: disabled-input-text-opacity
),
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity'
color: disabled-label-text-color,
opacity: disabled-label-text-opacity
),
(
color: 'disabled-leading-icon-color',
opacity: 'disabled-leading-icon-opacity'
color: disabled-leading-icon-color,
opacity: disabled-leading-icon-opacity
),
(
color: 'disabled-supporting-text-color',
opacity: 'disabled-supporting-text-opacity'
color: disabled-supporting-text-color,
opacity: disabled-supporting-text-opacity
),
(
color: 'disabled-trailing-icon-color',
opacity: 'disabled-trailing-icon-opacity'
color: disabled-trailing-icon-color,
opacity: disabled-trailing-icon-opacity
)
));
}
Expand Down Expand Up @@ -439,7 +454,12 @@
// Get the official MDC component tokens
_namespace-tokens(
(mdc, checkbox),
_fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
_fix-checkbox-tokens(
mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded),
// Need to pass in the hardcoded values, because they
// include opacities that are used for the disabled state.
mdc-tokens.md-comp-checkbox-values($systems, false)
),
$token-slots
),
_namespace-tokens(
Expand Down Expand Up @@ -707,6 +727,11 @@
custom-tokens.minimal-pseudo-checkbox($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, checkbox),
custom-tokens.checkbox($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, radio),
custom-tokens.radio($systems, $exclude-hardcoded),
Expand Down
2 changes: 2 additions & 0 deletions src/material/core/tokens/m2/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
@use './mat/option' as tokens-mat-option;
@use './mat/optgroup' as tokens-mat-optgroup;
@use './mat/paginator' as tokens-mat-paginator;
@use './mat/checkbox' as tokens-mat-checkbox;
@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
@use './mat/radio' as tokens-mat-radio;
Expand Down Expand Up @@ -125,6 +126,7 @@
_get-tokens-for-module($theme, tokens-mat-option),
_get-tokens-for-module($theme, tokens-mat-outlined-button),
_get-tokens-for-module($theme, tokens-mat-paginator),
_get-tokens-for-module($theme, tokens-mat-checkbox),
_get-tokens-for-module($theme, tokens-mat-full-pseudo-checkbox),
_get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox),
_get-tokens-for-module($theme, tokens-mat-protected-button),
Expand Down

0 comments on commit 1e48cd4

Please sign in to comment.