fix(material/core): output tokens from theme under same selector (#31295)

Fixes that the tokens generated by the `theme` mixins were being separated out into different selectors, rather than being combined.

Author: crisbeto

src/material/core/tokens/_m3-system.scss

@@ -19,6 +19,7 @@
 @use '../theming/config-validation';
 @use '../theming/definition';
 @use '../theming/palettes';
+@use '../style/sass-utils';
 @use './m3';
 @use 'sass:map';
 @use 'sass:meta';
@@ -196,7 +197,7 @@
       m3.md-sys-shape-values(),
       m3.md-sys-state-values());
 
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in $overrides {
       @if (map.has-key($sys-names, $name)) {
         --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
@@ -222,7 +223,7 @@
   $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
   $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
 
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in $sys-colors {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -261,7 +262,7 @@
         typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-typescale-values($font-definition) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
@@ -272,25 +273,26 @@
   $shadow-color: map.get(
       $theme, definition.$internals, palettes, neutral, 0);
 
-  @each $name, $value in m3.md-sys-elevation-values() {
-    $level: map.get($overrides, $name) or $value;
-    $value: elevation.get-box-shadow($level, $shadow-color);
-    & {
+
+  @include sass-utils.current-selector-or-root {
+    @each $name, $value in m3.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow-color);
       --#{$prefix}-#{$name}: #{$value};
     }
   }
 }
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
 }
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
-  & {
+  @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }