diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index 389b71352a8e..00f0c665b0b5 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -2,50 +2,44 @@ @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/typography/typography'; -@use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @use 'm2-autocomplete'; @use 'm3-autocomplete'; @mixin base($theme) { + $tokens: m2-autocomplete.get-unthemable-tokens(); @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), base)); - } @else { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed(m2-autocomplete.get-unthemable-tokens()); - } + $tokens: map.get(m3-autocomplete.get-tokens($theme), base); } + + @include token-utils.values($tokens); } @mixin color($theme) { + $tokens: m2-autocomplete.get-color-tokens($theme); @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), color)); - } @else { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed(m2-autocomplete.get-color-tokens($theme)); - } + $tokens: map.get(m3-autocomplete.get-tokens($theme), color); } + + @include token-utils.values($tokens); } @mixin typography($theme) { + $tokens: m2-autocomplete.get-typography-tokens($theme); @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values( - map.get(m3-autocomplete.get-tokens($theme), typography)); - } @else { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed(m2-autocomplete.get-typography-tokens($theme)); - } + $tokens: map.get(m3-autocomplete.get-tokens($theme), typography); } + + @include token-utils.values($tokens); } @mixin density($theme) { + $tokens: m2-autocomplete.get-density-tokens($theme); @if inspection.get-theme-version($theme) == 1 { - @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), density)); - } @else { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values-mixed(m2-autocomplete.get-density-tokens($theme)); - } + $tokens: map.get(m3-autocomplete.get-tokens($theme), density); } + + @include token-utils.values($tokens); } /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss index e3536aaf087a..bc3660c3f872 100644 --- a/src/material/core/theming/_all-theme.scss +++ b/src/material/core/theming/_all-theme.scss @@ -43,6 +43,8 @@ @mixin all-component-themes($theme) { $dedupe-key: 'angular-material-theme'; @include theming.private-check-duplicate-theme-styles($theme, $dedupe-key) { + @include autocomplete-theme.theme($theme); + @include core-theme.theme($theme); @include card-theme.theme($theme); @include progress-bar-theme.theme($theme); @@ -50,7 +52,6 @@ @include form-field-theme.theme($theme); @include input-theme.theme($theme); @include select-theme.theme($theme); - @include autocomplete-theme.theme($theme); @include dialog-theme.theme($theme); @include chips-theme.theme($theme); @include slide-toggle-theme.theme($theme); @@ -126,6 +127,8 @@ } @mixin all-component-colors($theme) { + @include autocomplete-theme.color($theme); + @include core-theme.color($theme); @include card-theme.color($theme); @include progress-bar-theme.color($theme); @@ -133,7 +136,6 @@ @include form-field-theme.color($theme); @include input-theme.color($theme); @include select-theme.color($theme); - @include autocomplete-theme.color($theme); @include dialog-theme.color($theme); @include chips-theme.color($theme); @include slide-toggle-theme.color($theme); diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss index 0018fb5d7072..3a38b41cf090 100644 --- a/src/material/core/tokens/_token-utils.scss +++ b/src/material/core/tokens/_token-utils.scss @@ -69,6 +69,17 @@ @return _create-var(--mat-#{$token}, $sys-fallback); } +// Outputs a map of token values as CSS variable definitions. +@mixin values($tokens) { + @include sass-utils.current-selector-or-root() { + @each $key, $value in $tokens { + @if $value != null { + --mat-#{$key}: #{$value}; + } + } + } +} + // Outputs a map of tokens. @mixin create-token-values($tokens) { @include _create-token-values-internal($tokens, false);