From 2361f853eeb126b3b17689088c55da91a6f24333 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 7 Nov 2024 14:15:09 +0100 Subject: [PATCH] fix(multiple): avoid repeating selectors in m3 themes In #29596 we switched to outputting each group of tokens under a different selector in order to work around an Sass deprecation warning. Now that M3 themes are purely token-based, we can switch back to the old approach which produces smaller themes and makes the tokens easier to read in the dev tools. We have to keep the workaround in place for M2 themes, because they mixed CSS variables with other rules. --- .../autocomplete/_autocomplete-theme.scss | 8 +-- src/material/badge/_badge-theme.scss | 10 +-- .../bottom-sheet/_bottom-sheet-theme.scss | 6 +- .../button-toggle/_button-toggle-theme.scss | 16 ++--- src/material/button/_button-theme.scss | 64 +++++++++---------- src/material/button/_fab-theme.scss | 26 ++++---- src/material/button/_icon-button-theme.scss | 10 +-- src/material/card/_card-theme.scss | 24 +++---- src/material/checkbox/_checkbox-theme.scss | 20 +++--- src/material/chips/_chips-theme.scss | 28 ++++---- src/material/core/_core-theme.scss | 4 +- src/material/core/option/_optgroup-theme.scss | 4 +- src/material/core/option/_option-theme.scss | 8 +-- src/material/core/ripple/_ripple-theme.scss | 6 +- .../_pseudo-checkbox-theme.scss | 8 +-- .../_color-api-backwards-compatibility.scss | 27 +++++--- src/material/core/tokens/_token-utils.scss | 25 ++++++-- .../datepicker/_datepicker-theme.scss | 15 +++-- src/material/dialog/_dialog-theme.scss | 12 ++-- src/material/divider/_divider-theme.scss | 4 +- src/material/expansion/_expansion-theme.scss | 8 +-- .../form-field/_form-field-theme.scss | 32 +++++----- src/material/grid-list/_grid-list-theme.scss | 2 +- src/material/icon/_icon-theme.scss | 4 +- src/material/list/_list-theme.scss | 30 ++++----- src/material/menu/_menu-theme.scss | 6 +- src/material/paginator/_paginator-theme.scss | 6 +- .../progress-bar/_progress-bar-theme.scss | 4 +- .../_progress-spinner-theme.scss | 8 +-- src/material/radio/_radio-theme.scss | 24 +++---- src/material/select/_select-theme.scss | 12 ++-- src/material/sidenav/_sidenav-theme.scss | 4 +- .../slide-toggle/_slide-toggle-theme.scss | 20 +++--- src/material/slider/_slider-theme.scss | 20 +++--- src/material/snack-bar/_snack-bar-theme.scss | 8 +-- .../snack-bar/snack-bar-container.scss | 2 +- src/material/sort/_sort-theme.scss | 6 +- src/material/stepper/_stepper-theme.scss | 10 +-- src/material/table/_table-theme.scss | 8 +-- src/material/tabs/_tabs-theme.scss | 32 +++++----- .../timepicker/_timepicker-theme.scss | 8 +-- src/material/toolbar/_toolbar-theme.scss | 8 +-- src/material/tooltip/_tooltip-theme.scss | 8 +-- src/material/tree/_tree-theme.scss | 6 +- 44 files changed, 314 insertions(+), 287 deletions(-) diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index a7b7903d51b9..7f0e0aa071af 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -12,7 +12,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-unthemable-tokens() ); @@ -25,7 +25,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-color-tokens($theme) ); @@ -38,7 +38,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-typography-tokens($theme) ); @@ -51,7 +51,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-density-tokens($theme) ); diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 05010f81b40a..0ddc4bca886e 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -15,7 +15,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-badge.$prefix, tokens-mat-badge.get-unthemable-tokens() ); @@ -33,21 +33,21 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-badge.$prefix, tokens-mat-badge.get-color-tokens($theme) ); } .mat-badge-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-badge.$prefix, tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent) ); } .mat-badge-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-badge.$prefix, tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn) ); @@ -62,7 +62,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-badge.$prefix, tokens-mat-badge.get-typography-tokens($theme) ); diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index dc4911e699ed..2709138335d0 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -12,7 +12,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens() ); @@ -25,7 +25,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-color-tokens($theme) ); @@ -38,7 +38,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-typography-tokens($theme) ); diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index 1b0ddd312550..b2adc49dc527 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -15,11 +15,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-legacy-button-toggle.$prefix, tokens-mat-legacy-button-toggle.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-standard-button-toggle.$prefix, tokens-mat-standard-button-toggle.get-unthemable-tokens() ); @@ -37,11 +37,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-legacy-button-toggle.$prefix, tokens-mat-legacy-button-toggle.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-standard-button-toggle.$prefix, tokens-mat-standard-button-toggle.get-color-tokens($theme) ); @@ -56,11 +56,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-legacy-button-toggle.$prefix, tokens-mat-legacy-button-toggle.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-standard-button-toggle.$prefix, tokens-mat-standard-button-toggle.get-typography-tokens($theme) ); @@ -75,11 +75,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-legacy-button-toggle.$prefix, tokens-mat-legacy-button-toggle.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-standard-button-toggle.$prefix, tokens-mat-standard-button-toggle.get-density-tokens($theme) ); diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index 37aeb9f029d3..ab66b2f1ac5c 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -26,8 +26,8 @@ tokens-mat-text-button.get-color-tokens($theme) ); - @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens); - @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(tokens-mdc-text-button.$prefix, $mdc-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, $mat-tokens); } @mixin _filled-button-variant($theme, $palette) { @@ -43,8 +43,8 @@ tokens-mat-filled-button.get-color-tokens($theme) ); - @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens); - @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(tokens-mdc-filled-button.$prefix, $mdc-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-filled-button.$prefix, $mat-tokens); } @mixin _protected-button-variant($theme, $palette) { @@ -60,8 +60,8 @@ tokens-mat-protected-button.get-color-tokens($theme) ); - @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens); - @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(tokens-mdc-protected-button.$prefix, $mdc-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-protected-button.$prefix, $mat-tokens); } @mixin _outlined-button-variant($theme, $palette) { @@ -77,8 +77,8 @@ tokens-mat-outlined-button.get-color-tokens($theme) ); - @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens); - @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(tokens-mdc-outlined-button.$prefix, $mdc-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-outlined-button.$prefix, $mat-tokens); } @mixin _theme-from-tokens($tokens, $options...) { @@ -162,36 +162,36 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-text-button.$prefix, tokens-mdc-text-button.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-filled-button.$prefix, tokens-mdc-filled-button.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-protected-button.$prefix, tokens-mdc-protected-button.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-button.$prefix, tokens-mdc-outlined-button.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-text-button.$prefix, tokens-mat-text-button.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-filled-button.$prefix, tokens-mat-filled-button.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-protected-button.$prefix, tokens-mat-protected-button.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-outlined-button.$prefix, tokens-mat-outlined-button.get-unthemable-tokens() ); @@ -280,36 +280,36 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-text-button.$prefix, tokens-mdc-text-button.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-filled-button.$prefix, tokens-mdc-filled-button.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-protected-button.$prefix, tokens-mdc-protected-button.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-button.$prefix, tokens-mdc-outlined-button.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-text-button.$prefix, tokens-mat-text-button.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-filled-button.$prefix, tokens-mat-filled-button.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-protected-button.$prefix, tokens-mat-protected-button.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-outlined-button.$prefix, tokens-mat-outlined-button.get-typography-tokens($theme) ); @@ -324,36 +324,36 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-text-button.$prefix, tokens-mdc-text-button.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-filled-button.$prefix, tokens-mdc-filled-button.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-protected-button.$prefix, tokens-mdc-protected-button.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-button.$prefix, tokens-mdc-outlined-button.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-text-button.$prefix, tokens-mat-text-button.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-filled-button.$prefix, tokens-mat-filled-button.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-protected-button.$prefix, tokens-mat-protected-button.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-outlined-button.$prefix, tokens-mat-outlined-button.get-density-tokens($theme) ); diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss index 3cea2a9e5856..6794595502cf 100644 --- a/src/material/button/_fab-theme.scss +++ b/src/material/button/_fab-theme.scss @@ -18,15 +18,15 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-fab.$prefix, tokens-mdc-fab.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-fab-small.$prefix, tokens-mdc-fab-small.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-unthemable-tokens() ); @@ -47,8 +47,8 @@ tokens-mat-fab.get-color-tokens($theme) ); - @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-tokens); - @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(tokens-mdc-fab.$prefix, $mdc-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-fab.$prefix, $mat-tokens); } @mixin _fab-small-variant($theme, $palette) { @@ -64,8 +64,8 @@ tokens-mat-fab-small.get-color-tokens($theme) ); - @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-tokens); - @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(tokens-mdc-fab-small.$prefix, $mdc-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-fab-small.$prefix, $mat-tokens); } /// Outputs color theme styles for the mat-fab. @@ -80,7 +80,7 @@ @include sass-utils.current-selector-or-root() { @include _fab-variant($theme, null); @include _fab-small-variant($theme, null); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-color-tokens($theme) ); @@ -123,15 +123,15 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-fab.$prefix, tokens-mat-fab.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-fab-small.$prefix, tokens-mat-fab-small.get-typography-tokens($theme) ); @@ -146,11 +146,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-fab.$prefix, tokens-mat-fab.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-fab-small.$prefix, tokens-mat-fab-small.get-density-tokens($theme) ); diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index e3a066c92484..8e2bae6f9375 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -14,7 +14,7 @@ } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-unthemable-tokens() ); @@ -35,8 +35,8 @@ tokens-mat-icon-button.get-color-tokens($theme) ); - @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens); - @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens); + @include token-utils.create-token-values-mixed(tokens-mdc-icon-button.$prefix, $mdc-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-icon-button.$prefix, $mat-tokens); } /// Outputs color theme styles for the mat-icon-button. @@ -72,7 +72,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-icon-button.$prefix, tokens-mat-icon-button.get-typography-tokens($theme) ); @@ -97,7 +97,7 @@ $calculated-size: map.get($size-map, $density-scale); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-icon-button.$prefix, tokens-mat-icon-button.get-density-tokens($theme) ); diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 2a64d885a303..012f2c9185e5 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -14,15 +14,15 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens() ); @@ -35,15 +35,15 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-card.$prefix, tokens-mat-card.get-color-tokens($theme) ); @@ -56,15 +56,15 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-card.$prefix, tokens-mat-card.get-typography-tokens($theme) ); @@ -77,15 +77,15 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-card.$prefix, tokens-mat-card.get-density-tokens($theme) ); diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index c06151d37f53..da1b555ae4df 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -15,11 +15,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-unthemable-tokens() ); @@ -37,11 +37,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-color-tokens($theme) ); @@ -49,14 +49,14 @@ .mat-mdc-checkbox { &.mat-primary { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, primary) ); } &.mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, warn) ); @@ -72,11 +72,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-typography-tokens($theme) ); @@ -93,11 +93,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-checkbox.$prefix, tokens-mat-checkbox.get-density-tokens($theme) ); diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 811c74ac61ff..2ba7e4e15750 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -15,11 +15,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { .mat-mdc-standard-chip { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-chip.$prefix, tokens-mdc-chip.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-unthemable-tokens() ); @@ -37,11 +37,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { .mat-mdc-standard-chip { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme) ); @@ -49,33 +49,33 @@ &.mat-mdc-chip-selected, &.mat-mdc-chip-highlighted { &.mat-primary { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, primary) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary) ); } &.mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, accent) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent) ); } &.mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, warn) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn) ); @@ -92,11 +92,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { .mat-mdc-standard-chip { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-chip.$prefix, tokens-mdc-chip.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-typography-tokens($theme) ); @@ -111,11 +111,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { .mat-mdc-chip.mat-mdc-standard-chip { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-chip.$prefix, tokens-mdc-chip.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-chip.$prefix, tokens-mat-chip.get-density-tokens($theme) ); diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index b0479b86dd24..79b113ba49cc 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -24,7 +24,7 @@ @include optgroup-theme.base($theme); @include pseudo-checkbox-theme.base($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-app.$prefix, tokens-mat-app.get-unthemable-tokens() ); @@ -41,7 +41,7 @@ @include optgroup-theme.color($theme); @include pseudo-checkbox-theme.color($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-app.$prefix, tokens-mat-app.get-color-tokens($theme) ); diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss index 5e22e9160e5d..6ee2d3b13e2b 100644 --- a/src/material/core/option/_optgroup-theme.scss +++ b/src/material/core/option/_optgroup-theme.scss @@ -19,7 +19,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-optgroup.$prefix, tokens-mat-optgroup.get-color-tokens($theme) ); @@ -32,7 +32,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-optgroup.$prefix, tokens-mat-optgroup.get-typography-tokens($theme) ); diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss index 6fb51175850e..40951a96c406 100644 --- a/src/material/core/option/_option-theme.scss +++ b/src/material/core/option/_option-theme.scss @@ -26,21 +26,21 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-option.$prefix, tokens-mat-option.get-color-tokens($theme) ); } .mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-option.$prefix, tokens-mat-option.get-color-tokens($theme, accent) ); } .mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-option.$prefix, tokens-mat-option.get-color-tokens($theme, warn) ); @@ -55,7 +55,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-option.$prefix, tokens-mat-option.get-typography-tokens($theme) ); diff --git a/src/material/core/ripple/_ripple-theme.scss b/src/material/core/ripple/_ripple-theme.scss index f401269fcd1a..8059c0936978 100644 --- a/src/material/core/ripple/_ripple-theme.scss +++ b/src/material/core/ripple/_ripple-theme.scss @@ -18,7 +18,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-ripple.$prefix, tokens-mat-ripple.get-color-tokens($theme) ); @@ -31,7 +31,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-ripple.$prefix, tokens-mat-ripple.get-typography-tokens($theme) ); @@ -44,7 +44,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-ripple.$prefix, tokens-mat-ripple.get-density-tokens($theme) ); diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index 77cf9f11438e..a776891f10ad 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -8,11 +8,11 @@ @mixin _palette-styles($theme, $palette-name) { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-full-pseudo-checkbox.$prefix, tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-minimal-pseudo-checkbox.$prefix, tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name) ); @@ -33,11 +33,11 @@ tokens-mat-minimal-pseudo-checkbox.$prefix, $options... ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens ); diff --git a/src/material/core/theming/_color-api-backwards-compatibility.scss b/src/material/core/theming/_color-api-backwards-compatibility.scss index 39fb9e1be688..b48c2972c27e 100644 --- a/src/material/core/theming/_color-api-backwards-compatibility.scss +++ b/src/material/core/theming/_color-api-backwards-compatibility.scss @@ -23,7 +23,7 @@ // from the bundle. $_overrides-only: true; -@mixin color-variant-styles($theme, $color-variant) { +@mixin _color-variant-styles($theme, $color-variant) { $primary-options: (color-variant: $color-variant, emit-overrides-only: $_overrides-only); // Some components use the secondary color rather than primary color for `.mat-primary`. @@ -33,10 +33,21 @@ $_overrides-only: true; emit-overrides-only: $_overrides-only ); - @include option-theme.color($theme, $secondary-options...); - @include progress-spinner-theme.color($theme, $primary-options...); - @include pseudo-checkbox-theme.color($theme, $primary-options...); - @include stepper-theme.color($theme, $primary-options...); + & { + @include option-theme.color($theme, $secondary-options...); + } + + & { + @include progress-spinner-theme.color($theme, $primary-options...); + } + + & { + @include pseudo-checkbox-theme.color($theme, $primary-options...); + } + + & { + @include stepper-theme.color($theme, $primary-options...); + } &.mat-icon { @include icon-theme.color($theme, $primary-options...); @@ -105,7 +116,7 @@ $_overrides-only: true; @mixin color-variants-backwards-compatibility($theme) { .mat-primary { - @include color-variant-styles($theme, primary); + @include _color-variant-styles($theme, primary); } .mat-badge { @include badge-theme.color($theme, $color-variant: primary, @@ -113,7 +124,7 @@ $_overrides-only: true; } .mat-accent { - @include color-variant-styles($theme, tertiary); + @include _color-variant-styles($theme, tertiary); } .mat-badge-accent { @include badge-theme.color($theme, $color-variant: tertiary, @@ -121,7 +132,7 @@ $_overrides-only: true; } .mat-warn { - @include color-variant-styles($theme, error); + @include _color-variant-styles($theme, error); } .mat-badge-warn { @include badge-theme.color($theme, $color-variant: error, diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss index 83e9674934fe..c747c0ea7087 100644 --- a/src/material/core/tokens/_token-utils.scss +++ b/src/material/core/tokens/_token-utils.scss @@ -118,11 +118,26 @@ $_system-fallbacks: m3-system.create-system-fallbacks(); // Outputs a map of tokens under a specific prefix. @mixin create-token-values($prefix, $tokens) { - @if $tokens != null { - // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility - // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should - // figure out a better way to do this or move all the concrete styles out of the theme. - & { + @include _create-token-values-internal($prefix, $tokens, false); +} + +// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with +// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/ +@mixin create-token-values-mixed($prefix, $tokens) { + @include _create-token-values-internal($prefix, $tokens, true); +} + +@mixin _create-token-values-internal($prefix, $tokens, $in-place) { + @if ($tokens != null) { + @if ($in-place) { + & { + @each $key, $value in $tokens { + @if $value != null { + #{_create-var-name($prefix, $key)}: #{$value}; + } + } + } + } @else { @each $key, $value in $tokens { @if $value != null { #{_create-var-name($prefix, $key)}: #{$value}; diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index 460e6b08f059..b5d4ff6ac4a1 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -26,7 +26,7 @@ $calendar-weekday-table-font-size: 11px !default; $palette-name ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-datepicker.$prefix, map.merge($calendar-tokens, $range-tokens) ); @@ -40,7 +40,7 @@ $calendar-weekday-table-font-size: 11px !default; @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-unthemable-tokens() ); @@ -58,7 +58,7 @@ $calendar-weekday-table-font-size: 11px !default; @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-color-tokens($theme) ); @@ -80,7 +80,8 @@ $calendar-weekday-table-font-size: 11px !default; $theme, accent ); - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, + $accent-tokens); } &.mat-warn { @@ -88,7 +89,7 @@ $calendar-weekday-table-font-size: 11px !default; $theme, warn ); - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens); + @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $warn-tokens); } } } @@ -101,7 +102,7 @@ $calendar-weekday-table-font-size: 11px !default; @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-typography-tokens($theme) ); @@ -124,7 +125,7 @@ $calendar-weekday-table-font-size: 11px !default; ); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $tokens); + @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $tokens); } } diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index dbeb3a77c04e..f33dd9fa5507 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -14,11 +14,11 @@ } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens() ); @@ -31,11 +31,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme) ); @@ -48,11 +48,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme) ); diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index c32ae4f48efb..6b1ecabc35c6 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -11,7 +11,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens() ); @@ -24,7 +24,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-divider.$prefix, tokens-mat-divider.get-color-tokens($theme) ); diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index e37fd00fccc1..cdc60a8461d9 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -12,7 +12,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-expansion.$prefix, tokens-mat-expansion.get-unthemable-tokens() ); @@ -25,7 +25,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-expansion.$prefix, tokens-mat-expansion.get-color-tokens($theme) ); @@ -41,7 +41,7 @@ $theme: inspection.private-get-typography-back-compat-theme($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-expansion.$prefix, tokens-mat-expansion.get-typography-tokens($theme) ); @@ -54,7 +54,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-expansion.$prefix, tokens-mat-expansion.get-density-tokens($theme) ); diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index e312f2f17086..13ecaffad535 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -16,15 +16,15 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-filled-text-field.$prefix, tokens-mdc-filled-text-field.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-text-field.$prefix, tokens-mdc-outlined-text-field.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, tokens-mat-form-field.get-unthemable-tokens() ); @@ -42,45 +42,45 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-filled-text-field.$prefix, tokens-mdc-filled-text-field.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-text-field.$prefix, tokens-mdc-outlined-text-field.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, tokens-mat-form-field.get-color-tokens($theme) ); } .mat-mdc-form-field.mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-filled-text-field.$prefix, tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-text-field.$prefix, tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent) ); } .mat-mdc-form-field.mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-filled-text-field.$prefix, tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-text-field.$prefix, tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn) ); @@ -95,15 +95,15 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-filled-text-field.$prefix, tokens-mdc-filled-text-field.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-outlined-text-field.$prefix, tokens-mdc-outlined-text-field.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, tokens-mat-form-field.get-typography-tokens($theme) ); @@ -118,7 +118,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-form-field.$prefix, tokens-mat-form-field.get-density-tokens($theme) ); diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss index 3e8aa20c9a95..5ae82b3ed0c3 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -27,7 +27,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-typography-tokens($theme) ); diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index b7aed62fca0c..551ee717db53 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -8,7 +8,7 @@ @mixin _palette-colors($theme, $palette-name) { $color: inspection.get-theme-color($theme, $palette-name, text); $tokens: tokens-mat-icon.private-get-icon-color-tokens($color); - @include token-utils.create-token-values(tokens-mat-icon.$prefix, $tokens); + @include token-utils.create-token-values-mixed(tokens-mat-icon.$prefix, $tokens); } /// Outputs base theme styles (styles not dependent on the color, typography, or density settings) @@ -31,7 +31,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-icon.$prefix, tokens-mat-icon.get-color-tokens($theme) ); diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 748d4123b330..69ab84fb2ec9 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -17,11 +17,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-list.$prefix, tokens-mdc-list.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-list.$prefix, tokens-mat-list.get-unthemable-tokens() ); @@ -34,11 +34,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-list.$prefix, tokens-mdc-list.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-list.$prefix, tokens-mat-list.get-color-tokens($theme) ); @@ -46,7 +46,7 @@ .mdc-list-item__start, .mdc-list-item__end { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, primary) ); @@ -55,7 +55,7 @@ .mat-accent { .mdc-list-item__start, .mdc-list-item__end { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, accent) ); @@ -65,7 +65,7 @@ .mat-warn { .mdc-list-item__start, .mdc-list-item__end { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, warn) ); @@ -73,19 +73,19 @@ } .mat-mdc-list-option { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, primary) ); } .mat-mdc-list-option.mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, accent) ); } .mat-mdc-list-option.mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, warn) ); @@ -123,11 +123,11 @@ $density-scale: inspection.get-theme-density($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-list.$prefix, tokens-mdc-list.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-list.$prefix, tokens-mat-list.get-density-tokens($theme) ); @@ -135,7 +135,7 @@ .mdc-list-item__start, .mdc-list-item__end { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-density-tokens($theme) ); @@ -185,11 +185,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-list.$prefix, tokens-mdc-list.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-list.$prefix, tokens-mat-list.get-typography-tokens($theme) ); diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index f8b46f3ba833..6bad25053474 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -12,7 +12,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-menu.$prefix, tokens-mat-menu.get-unthemable-tokens() ); @@ -25,7 +25,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-menu.$prefix, tokens-mat-menu.get-color-tokens($theme) ); @@ -38,7 +38,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-menu.$prefix, tokens-mat-menu.get-typography-tokens($theme) ); diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 94f2e317c228..c2290940a82b 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -20,7 +20,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-paginator.$prefix, tokens-mat-paginator.get-color-tokens($theme) ); @@ -33,7 +33,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-paginator.$prefix, tokens-mat-paginator.get-typography-tokens($theme) ); @@ -54,7 +54,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-paginator.$prefix, tokens-mat-paginator.get-density-tokens($theme) ); diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss index c1961ee546e0..00db674780bf 100644 --- a/src/material/progress-bar/_progress-bar-theme.scss +++ b/src/material/progress-bar/_progress-bar-theme.scss @@ -14,7 +14,7 @@ } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-linear-progress.$prefix, tokens-mdc-linear-progress.get-unthemable-tokens() ); @@ -23,7 +23,7 @@ } @mixin _palette-styles($theme, $palette-name) { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-linear-progress.$prefix, tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name) ); diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss index cb137fd16f66..70917492251a 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -13,7 +13,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-circular-progress.$prefix, tokens-mdc-circular-progress.get-unthemable-tokens() ); @@ -31,20 +31,20 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-circular-progress.$prefix, tokens-mdc-circular-progress.get-color-tokens($theme, primary) ); .mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-circular-progress.$prefix, tokens-mdc-circular-progress.get-color-tokens($theme, accent) ); } .mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-circular-progress.$prefix, tokens-mdc-circular-progress.get-color-tokens($theme, warn) ); diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index 7f0adcc5f216..74a7a386f64a 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -15,11 +15,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-unthemable-tokens() ); @@ -38,33 +38,33 @@ } @else { .mat-mdc-radio-button { &.mat-primary { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, primary) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-color-tokens($theme, primary) ); } &.mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-color-tokens($theme) ); } &.mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, warn) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-color-tokens($theme, warn) ); @@ -80,11 +80,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-typography-tokens($theme) ); @@ -101,11 +101,11 @@ $density-scale: inspection.get-theme-density($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-radio.$prefix, tokens-mdc-radio.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-radio.$prefix, tokens-mat-radio.get-density-tokens($theme) ); diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index 3aa20b0d7e45..3c4ba1a88ee6 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -16,7 +16,7 @@ } @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); + @include token-utils.create-token-values-mixed(tokens-mat-select.$prefix, $mat-tokens); } } } @@ -31,20 +31,20 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-select.$prefix, tokens-mat-select.get-color-tokens($theme) ); .mat-mdc-form-field.mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-select.$prefix, tokens-mat-select.get-color-tokens($theme, accent) ); } .mat-mdc-form-field.mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-select.$prefix, tokens-mat-select.get-color-tokens($theme, warn) ); @@ -60,7 +60,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-select.$prefix, tokens-mat-select.get-typography-tokens($theme) ); @@ -75,7 +75,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-select.$prefix, tokens-mat-select.get-density-tokens($theme) ); diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index 82f7c988f69f..8bf69e5b9f23 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -11,7 +11,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-unthemable-tokens() ); @@ -24,7 +24,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-color-tokens($theme) ); diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 7f6431fe5aff..d2c302bd1c1e 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -15,13 +15,13 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-switch.$prefix, tokens-mdc-switch.get-unthemable-tokens() ); .mat-mdc-slide-toggle { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-switch.$prefix, tokens-mat-switch.get-unthemable-tokens() ); @@ -43,7 +43,7 @@ // Add values for MDC slide toggles tokens @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-switch.$prefix, tokens-mdc-switch.get-color-tokens($theme) ); @@ -58,21 +58,21 @@ } .mat-mdc-slide-toggle { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-switch.$prefix, tokens-mat-switch.get-color-tokens($theme) ); // Change the color palette related tokens to accent or warn if applicable &.mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-switch.$prefix, tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent) ); } &.mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-switch.$prefix, tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn) ); @@ -89,13 +89,13 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-switch.$prefix, tokens-mdc-switch.get-typography-tokens($theme) ); .mat-mdc-slide-toggle { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-switch.$prefix, tokens-mat-switch.get-typography-tokens($theme) ); @@ -111,13 +111,13 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-switch.$prefix, tokens-mdc-switch.get-density-tokens($theme) ); .mat-mdc-slide-toggle { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-switch.$prefix, tokens-mat-switch.get-density-tokens($theme) ); diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss index 533e9a0979ac..52f0210cd2fe 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -15,11 +15,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-slider.$prefix, tokens-mdc-slider.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-slider.$prefix, tokens-mat-slider.get-unthemable-tokens() ); @@ -37,32 +37,32 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-slider.$prefix, tokens-mdc-slider.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-slider.$prefix, tokens-mat-slider.get-color-tokens($theme) ); .mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-slider.$prefix, tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-slider.$prefix, tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent) ); } .mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-slider.$prefix, tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-slider.$prefix, tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn) ); @@ -78,7 +78,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-slider.$prefix, tokens-mdc-slider.get-typography-tokens($theme) ); @@ -93,7 +93,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-slider.$prefix, tokens-mdc-slider.get-density-tokens($theme) ); diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index ac7a9d7feaf1..ed50ba742648 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -14,7 +14,7 @@ } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-snack-bar.$prefix, tokens-mdc-snack-bar.get-unthemable-tokens() ); @@ -27,11 +27,11 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-snack-bar.$prefix, tokens-mdc-snack-bar.get-color-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-snack-bar.$prefix, tokens-mat-snack-bar.get-color-tokens($theme) ); @@ -44,7 +44,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-snack-bar.$prefix, tokens-mdc-snack-bar.get-typography-tokens($theme) ); diff --git a/src/material/snack-bar/snack-bar-container.scss b/src/material/snack-bar/snack-bar-container.scss index 6e1f29084cd0..fc55d2269cf4 100644 --- a/src/material/snack-bar/snack-bar-container.scss +++ b/src/material/snack-bar/snack-bar-container.scss @@ -116,7 +116,7 @@ $_side-padding: 8px; } // Darken the ripples in the button so they're visible against the dark background. - @include token-utils.create-token-values(tokens-mat-text-button.$prefix, ( + @include token-utils.create-token-values-mixed(tokens-mat-text-button.$prefix, ( state-layer-color: currentColor, ripple-color: currentColor, )); diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index bfdb239fe1bd..33b9e546c2fe 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -19,7 +19,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-sort.$prefix, tokens-mat-sort.get-color-tokens($theme) ); @@ -32,7 +32,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-sort.$prefix, tokens-mat-sort.get-typography-tokens($theme) ); @@ -45,7 +45,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-sort.$prefix, tokens-mat-sort.get-density-tokens($theme) ); diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index 1f4468b31246..a2748c8a7ee5 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -26,20 +26,20 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-stepper.$prefix, tokens-mat-stepper.get-color-tokens($theme) ); .mat-step-header.mat-accent { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-stepper.$prefix, tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent) ); } .mat-step-header.mat-warn { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-stepper.$prefix, tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn) ); @@ -55,7 +55,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-stepper.$prefix, tokens-mat-stepper.get-typography-tokens($theme) ); @@ -70,7 +70,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-stepper.$prefix, tokens-mat-stepper.get-density-tokens($theme) ); diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index f30a9a415c18..6773c8e84322 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -12,7 +12,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-table.$prefix, tokens-mat-table.get-unthemable-tokens() ); @@ -25,7 +25,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-table.$prefix, tokens-mat-table.get-color-tokens($theme) ); @@ -38,7 +38,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-table.$prefix, tokens-mat-table.get-typography-tokens($theme) ); @@ -51,7 +51,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-table.$prefix, tokens-mat-table.get-density-tokens($theme) ); diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index a41a02caf286..368ce348aa42 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -17,19 +17,19 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-secondary-navigation-tab.$prefix, tokens-mdc-secondary-navigation-tab.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens() ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tab-header-with-background.$prefix, tokens-mat-tab-header-with-background.get-unthemable-tokens() ); @@ -74,22 +74,22 @@ } @mixin _background-styles($theme, $palette-name) { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tab-header-with-background.$prefix, tokens-mat-tab-header-with-background.get-color-tokens($theme, $palette-name) ); } @mixin _palette-styles($theme, $palette-name) { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-secondary-navigation-tab.$prefix, tokens-mdc-secondary-navigation-tab.get-color-tokens($theme, $palette-name) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-color-tokens($theme, $palette-name) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-color-tokens($theme, $palette-name) ); @@ -102,19 +102,19 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { .mat-mdc-tab-header { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-secondary-navigation-tab.$prefix, tokens-mdc-secondary-navigation-tab.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-typography-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tab-header-with-background.$prefix, tokens-mat-tab-header-with-background.get-typography-tokens($theme) ); @@ -129,19 +129,19 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { .mat-mdc-tab-header { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-secondary-navigation-tab.$prefix, tokens-mdc-secondary-navigation-tab.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-density-tokens($theme) ); - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tab-header-with-background.$prefix, tokens-mat-tab-header-with-background.get-density-tokens($theme) ); diff --git a/src/material/timepicker/_timepicker-theme.scss b/src/material/timepicker/_timepicker-theme.scss index cba2368163ee..da6d3640d47b 100644 --- a/src/material/timepicker/_timepicker-theme.scss +++ b/src/material/timepicker/_timepicker-theme.scss @@ -15,7 +15,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-timepicker.$prefix, tokens-mat-timepicker.get-unthemable-tokens() ); @@ -33,7 +33,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-timepicker.$prefix, tokens-mat-timepicker.get-color-tokens($theme) ); @@ -48,7 +48,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-timepicker.$prefix, tokens-mat-timepicker.get-typography-tokens($theme) ); @@ -63,7 +63,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-timepicker.$prefix, tokens-mat-timepicker.get-density-tokens($theme) ); diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss index 8e0a2fe444b4..b19bd8ebc7b7 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -8,7 +8,7 @@ @use '../core/style/sass-utils'; @mixin _palette-styles($theme, $palette-name) { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-toolbar.$prefix, tokens-mat-toolbar.private-get-color-palette-color-tokens( $background-color: inspection.get-theme-color($theme, $palette-name), @@ -25,7 +25,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-color-tokens($theme) ); @@ -55,7 +55,7 @@ $theme: inspection.private-get-typography-back-compat-theme($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-typography-tokens($theme) ); @@ -68,7 +68,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-density-tokens($theme) ); diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index 0fe51f32e01f..d8798a221aa9 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -12,7 +12,7 @@ } @else { // Add default values for tokens not related to color, typography, or density. @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-plain-tooltip.$prefix, tokens-mdc-plain-tooltip.get-unthemable-tokens() ); @@ -25,7 +25,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-plain-tooltip.$prefix, tokens-mdc-plain-tooltip.get-color-tokens($theme) ); @@ -38,7 +38,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-plain-tooltip.$prefix, tokens-mdc-plain-tooltip.get-typography-tokens($theme) ); @@ -51,7 +51,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mdc-plain-tooltip.$prefix, tokens-mdc-plain-tooltip.get-density-tokens($theme) ); diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss index 865b365491fd..7fbba9b10065 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -19,7 +19,7 @@ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); } @else { @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tree.$prefix, tokens-mat-tree.get-color-tokens($theme) ); @@ -35,7 +35,7 @@ $theme: inspection.private-get-typography-back-compat-theme($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tree.$prefix, tokens-mat-tree.get-typography-tokens($theme) ); @@ -50,7 +50,7 @@ $density-scale: inspection.get-theme-density($theme); @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( + @include token-utils.create-token-values-mixed( tokens-mat-tree.$prefix, tokens-mat-tree.get-density-tokens($theme) );