diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index ba0bdbbe129d..6e4a9a7d3b18 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -1012,6 +1012,8 @@ map.get($systems, md-sys-color, on-surface), $alpha: 0.38), focused-arrow-color: map.get($systems, md-sys-color, primary), invalid-arrow-color: map.get($systems, md-sys-color, error), + container-elevation-shadow: + _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded), ) ), ( // Color variants: diff --git a/src/material/core/tokens/m2/mat/_select.scss b/src/material/core/tokens/m2/mat/_select.scss index bf0eee0b8d29..742869af839a 100644 --- a/src/material/core/tokens/m2/mat/_select.scss +++ b/src/material/core/tokens/m2/mat/_select.scss @@ -1,6 +1,7 @@ @use '../../token-utils'; @use '../../../theming/inspection'; @use '../../../style/sass-utils'; +@use '@material/elevation/elevation-theme' as mdc-elevation; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, select); @@ -8,7 +9,9 @@ $prefix: (mat, select); // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { - @return (); + @return ( + container-elevation-shadow: mdc-elevation.elevation-box-shadow(8), + ); } // Tokens that can be configured through Angular Material's color theming API. diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index 4ee5adc232b5..2be0c280ab7a 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -15,7 +15,12 @@ @if inspection.get-theme-version($theme) == 1 { @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } - @else {} + @else { + @include sass-utils.current-selector-or-root() { + $mat-tokens: tokens-mat-select.get-unthemable-tokens(); + @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-tokens); + } + } } /// Outputs color theme styles for the mat-select. diff --git a/src/material/select/select.scss b/src/material/select/select.scss index e27bbf5bc32c..913be4c6d7e0 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -1,7 +1,6 @@ @use 'sass:math'; @use '@angular/cdk'; @use '@material/typography/typography' as mdc-typography; -@use '../core/style/elevation'; @use '../core/style/vendor-prefixes'; @use '../core/style/variables'; @use '../core/tokens/token-utils'; @@ -32,6 +31,11 @@ $scale: 0.75 !default; @include token-utils.create-token-slot(letter-spacing, trigger-text-tracking); } } +@include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { + div.mat-mdc-select-panel { + @include token-utils.create-token-slot(box-shadow, container-elevation-shadow); + } +} .mat-mdc-select-disabled { @include token-utils.use-tokens( @@ -83,6 +87,13 @@ $scale: 0.75 !default; } } +.mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow, +.mat-form-field-invalid:not(.mat-form-field-disabled) .mat-mdc-form-field-infix::after { + @include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) { + @include token-utils.create-token-slot(color, invalid-arrow-color); + } +} + .mat-mdc-select-arrow { width: $mat-select-arrow-size * 2; height: $mat-select-arrow-size; @@ -96,10 +107,6 @@ $scale: 0.75 !default; @include token-utils.create-token-slot(color, focused-arrow-color); } - .mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid & { - @include token-utils.create-token-slot(color, invalid-arrow-color); - } - .mat-mdc-form-field .mat-mdc-select.mat-mdc-select-disabled & { @include token-utils.create-token-slot(color, disabled-arrow-color); } @@ -128,7 +135,6 @@ $scale: 0.75 !default; // DOM for the Gmat versions to work. We need to bump up the specificity here // so that it's higher than MDC's styles. div.mat-mdc-select-panel { - @include elevation.elevation(8); width: 100%; // Ensures that the panel matches the overlay width. max-height: $mat-select-panel-max-height; outline: 0; @@ -160,6 +166,10 @@ div.mat-mdc-select-panel { border-bottom-right-radius: 0; transform-origin: bottom center; } + + .mat-mdc-option { + --mdc-list-list-item-container-color: var(--mat-select-panel-background-color); + } } .mat-mdc-select-placeholder {