From 4cad41f99f5bd44f6329d7915efadf6816574567 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 26 Jan 2024 13:28:33 -0500 Subject: [PATCH 1/4] fix(material/select): m3 native select invalid arrow color --- src/material/select/select.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/material/select/select.scss b/src/material/select/select.scss index e27bbf5bc32c..e153f1bf56ce 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -83,6 +83,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 +103,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); } From fd1359083467c602a47553f36eadff4edc0267c1 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 26 Jan 2024 17:30:19 -0500 Subject: [PATCH 2/4] fix(material/select): m3 option background color --- src/material/select/select.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/material/select/select.scss b/src/material/select/select.scss index e153f1bf56ce..d9b08b70463d 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -163,6 +163,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 { From 24b9c15ceaa3bb1ed1889bc70d286db3e2d24969 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 2 Feb 2024 12:25:14 -0500 Subject: [PATCH 3/4] fix(material/select): m3 box-shadow --- src/material-experimental/theming/_custom-tokens.scss | 2 ++ src/material/core/tokens/m2/mat/_select.scss | 5 ++++- src/material/select/_select-theme.scss | 7 ++++++- src/material/select/select.scss | 6 +++++- 4 files changed, 17 insertions(+), 3 deletions(-) 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 d9b08b70463d..271d07d1f7ab 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -32,6 +32,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( @@ -131,7 +136,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; From 95e452b9d201b25cb7ef4f44c2f63e697f5a6d7b Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 2 Feb 2024 17:05:47 -0500 Subject: [PATCH 4/4] fixup! fix(material/select): m3 box-shadow --- src/material/select/select.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/material/select/select.scss b/src/material/select/select.scss index 271d07d1f7ab..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';