diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index d364606b0d5c..4aa0131854f7 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -822,9 +822,7 @@ /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values /// @return {Map} A set of custom tokens for the mat-option @function option($systems, $exclude-hardcoded) { - @return (mat.private-merge-all( - _generate-typography-tokens($systems, label-text, label-large), - ( + @return (( selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container), label-text-color: map.get($systems, md-sys-color, on-surface), hover-state-layer-color: mat.private-safe-color-change( @@ -836,7 +834,17 @@ $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) ), selected-state-layer-color: map.get($systems, md-sys-color, secondary-container), - ), + + // According to the spec the options have to be `label-large` in all typography + // dimensions, however this is inconsistent with the designs and with MDC's + // own implementation. This appears to be a bug in the spec, because MDC overrides + // the font size and weight to be `body-large` (see b/261838263). We make the same + // override here so the label looks correct. + label-text-size: map.get($systems, md-sys-typescale, body-large-size), + label-text-weight: map.get($systems, md-sys-typescale, body-large-weight), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-line-height: map.get($systems, md-sys-typescale, label-large-line-height), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), ), ( // Color variants: primary: ( diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index abb91519ac5a..80a50888b649 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -5,6 +5,7 @@ @use '@material/typography/typography' as mdc-typography; @use '../tokens/m2/mat/option' as tokens-mat-option; +@use '../tokens/m2/mdc/list' as tokens-mdc-list; @use '../tokens/token-utils'; @use '../mdc-helpers/mdc-helpers'; @use '../style/vendor-prefixes'; @@ -178,6 +179,18 @@ } } +.mat-mdc-option-multiple { + // Multi-select options in the selected state aren't supposed to change their background color, + // because the checkbox already indicates that they're selected. This happened to work in M2, + // due to `list-item-selected-container-color` being the same as `list-item-container-color`, + // but that's no longer the case in M3. This overrides ensures that the appearance is consistent. + @include token-utils.use-tokens(tokens-mdc-list.$prefix, tokens-mdc-list.get-token-slots()) { + $selected-token: token-utils.get-token-variable(list-item-selected-container-color); + $base-token: token-utils.get-token-variable(list-item-container-color); + #{$selected-token}: var(#{$base-token}, transparent); + } +} + // For options, render the focus indicator when the class .mat-mdc-option-active is present. .mat-mdc-option-active .mat-mdc-focus-indicator::before { content: '';