fix(multiple): avoid repeating selectors in m3 themes

src/dev-app/theme-m3.scss

@@ -35,6 +35,10 @@ html {
   color-scheme: light;
   body:not(.demo-experimental-theme) {
     @include mat.all-component-themes($light-theme);
+    @include mat.checkbox-overrides((
+      disabled-label-color: orange,
+      label-text-color: red,
+    ));
     @include mat.system-level-colors($light-theme);
     @include mat.system-level-typography($light-theme);
     // TODO(mmalerba): Support M3 for experimental components.

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)
       );

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)
       );

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)
       );

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)
       );

src/material/button/_button-theme.scss

@@ -27,8 +27,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) {
@@ -44,8 +44,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) {
@@ -61,8 +61,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) {
@@ -78,12 +78,12 @@
     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 _tonal-button-variant($theme, $palette) {
-  @include token-utils.create-token-values(tokens-mat-tonal-button.$prefix, if(
+  @include token-utils.create-token-values-mixed(tokens-mat-tonal-button.$prefix, if(
     $palette,
     tokens-mat-tonal-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-tonal-button.get-color-tokens($theme)
@@ -181,40 +181,40 @@
     @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()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-tonal-button.$prefix,
         tokens-mat-tonal-button.get-unthemable-tokens()
       );
@@ -318,40 +318,40 @@
     @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)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-tonal-button.$prefix,
         tokens-mat-tonal-button.get-typography-tokens($theme)
       );
@@ -366,40 +366,40 @@
     @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)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-tonal-button.$prefix,
         tokens-mat-tonal-button.get-density-tokens($theme)
       );