@angular/material 19.0.0-next.8 → 19.0.0-next.9

package/core/_core-theme.scss

@@ -18,15 +18,16 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include ripple-theme.base($theme);
     @include option-theme.base($theme);
     @include optgroup-theme.base($theme);
     @include pseudo-checkbox-theme.base($theme);
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-app.$prefix,
-        tokens-mat-app.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-app.$prefix,
+        tokens-mat-app.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -34,15 +35,16 @@
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include ripple-theme.color($theme);
     @include option-theme.color($theme);
     @include optgroup-theme.color($theme);
     @include pseudo-checkbox-theme.color($theme);
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-app.$prefix,
-        tokens-mat-app.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-app.$prefix,
+        tokens-mat-app.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -50,8 +52,7 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include option-theme.typography($theme);
     @include optgroup-theme.typography($theme);
     @include pseudo-checkbox-theme.typography($theme);
@@ -62,8 +63,7 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include option-theme.density($theme);
     @include optgroup-theme.density($theme);
     @include pseudo-checkbox-theme.density($theme);
@@ -84,11 +84,19 @@
   $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
 
   @return (
-    (prefix: tokens-mat-app.$prefix, tokens: $app-tokens),
-    (prefix: tokens-mat-ripple.$prefix, tokens: $ripple-tokens),
-    (prefix: tokens-mat-option.$prefix, tokens: $option-tokens),
-    (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens),
-    (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens),
+    (namespace: tokens-mat-app.$prefix, tokens: $app-tokens, prefix: 'app-'),
+    (namespace: tokens-mat-ripple.$prefix, tokens: $ripple-tokens, prefix: 'ripple-'),
+    (namespace: tokens-mat-option.$prefix, tokens: $option-tokens, prefix: 'option-'),
+    (
+      namespace: tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens: $full-pseudo-checkbox-tokens,
+      prefix: 'pseudo-checkbox-full-'
+    ),
+    (
+      namespace: tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens: $minimal-pseudo-checkbox-tokens,
+      prefix: 'pseudo-checkbox-minimal-'
+    )
   );
 }
 
@@ -104,8 +112,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -122,23 +129,37 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
   $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
-  $mat-optgroup-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mat-optgroup.$prefix, $options...);
-  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
-    tokens-mat-full-pseudo-checkbox.$prefix, $options...);
-  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
-    tokens-mat-minimal-pseudo-checkbox.$prefix, $options...);
+  $mat-optgroup-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-optgroup.$prefix,
+    $options...
+  );
+  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $options...
+  );
+  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $options...
+  );
 
   @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens);
   @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
   @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, $mat-optgroup-tokens);
-  @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
-    $mat-full-pseudo-checkbox-tokens);
-  @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
-    $mat-minimal-pseudo-checkbox-tokens);
+  @include token-utils.create-token-values(
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $mat-full-pseudo-checkbox-tokens
+  );
+  @include token-utils.create-token-values(
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $mat-minimal-pseudo-checkbox-tokens
+  );
 }

package/core/_core.scss

@@ -16,7 +16,7 @@
   // background color. However, if it isn't defined anywhere, then MSS
   // complains in its verification stage.
   html {
-    --mat-app-on-surface: initial;
+    --mat-sys-on-surface: initial;
   }
 
   // Wrapper element that provides the theme background when the

package/core/option/_optgroup-theme.scss

@@ -10,18 +10,19 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
-        tokens-mat-optgroup.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-optgroup.$prefix,
+        tokens-mat-optgroup.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -29,11 +30,12 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
-        tokens-mat-optgroup.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-optgroup.$prefix,
+        tokens-mat-optgroup.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -41,14 +43,17 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
 }
 
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-optgroup.$prefix, tokens: tokens-mat-optgroup.get-token-slots()),
+    (
+      namespace: tokens-mat-optgroup.$prefix,
+      tokens: tokens-mat-optgroup.get-token-slots(),
+    )
   );
 }
 
@@ -56,8 +61,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -74,9 +78,12 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mat-optgroup.$prefix, map.get($tokens, tokens-mat-optgroup.$prefix));
+      tokens-mat-optgroup.$prefix,
+      map.get($tokens, tokens-mat-optgroup.$prefix)
+    );
   }
 }

package/core/option/_option-theme.scss

@@ -12,8 +12,8 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs color theme styles for the mat-option.
@@ -24,21 +24,26 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme)
+      );
     }
 
     .mat-accent {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values(
+        tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme, accent)
+      );
     }
 
     .mat-warn {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values(
+        tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme, warn)
+      );
     }
   }
 }
@@ -48,11 +53,12 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-option.$prefix,
+        tokens-mat-option.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -62,8 +68,8 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs the CSS variable values for the given tokens.
@@ -71,7 +77,10 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots()),
+    (
+      namespace: tokens-mat-option.$prefix,
+      tokens: tokens-mat-option.get-token-slots(),
+    )
   );
 }
 
@@ -84,8 +93,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -102,7 +110,8 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
 }

package/core/ripple/_ripple-theme.scss

@@ -9,18 +9,19 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
-        tokens-mat-ripple.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-ripple.$prefix,
+        tokens-mat-ripple.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -28,11 +29,12 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
-        tokens-mat-ripple.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-ripple.$prefix,
+        tokens-mat-ripple.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -40,11 +42,12 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-ripple.$prefix,
-        tokens-mat-ripple.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-ripple.$prefix,
+        tokens-mat-ripple.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -52,7 +55,10 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots()),
+    (
+      namespace: tokens-mat-ripple.$prefix,
+      tokens: tokens-mat-ripple.get-token-slots(),
+    )
   );
 }
 
@@ -60,8 +66,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -78,9 +83,12 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mat-ripple.$prefix, map.get($tokens, tokens-mat-ripple.$prefix));
+      tokens-mat-ripple.$prefix,
+      map.get($tokens, tokens-mat-ripple.$prefix)
+    );
   }
 }

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -8,30 +8,46 @@
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
-      tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name));
-    @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,
-      tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name));
+    @include token-utils.create-token-values(
+      tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
+    );
+    @include token-utils.create-token-values(
+      tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
+    );
   }
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  $mat-full-pseudo-checkbox-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-full-pseudo-checkbox.$prefix, $options...);
-  $mat-minimal-pseudo-checkbox-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-minimal-pseudo-checkbox.$prefix, $options...);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $options...
+  );
+  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $options...
+  );
   @include token-utils.create-token-values(
-      tokens-mat-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens);
+    tokens-mat-full-pseudo-checkbox.$prefix,
+    $mat-full-pseudo-checkbox-tokens
+  );
   @include token-utils.create-token-values(
-      tokens-mat-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens);
+    tokens-mat-minimal-pseudo-checkbox.$prefix,
+    $mat-minimal-pseudo-checkbox-tokens
+  );
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-pseudo-checkbox.
 /// @param {Map} $theme The theme to generate base styles for.
-@mixin base($theme) {}
+@mixin base($theme) {
+}
 
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
@@ -41,8 +57,16 @@
 
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens),
-    (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens),
+    (
+      namespace: tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens: $full-pseudo-checkbox-tokens,
+      prefix: 'full-',
+    ),
+    (
+      namespace: tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens: $minimal-pseudo-checkbox-tokens,
+      prefix: 'minimal-',
+    )
   );
 }
 
@@ -54,8 +78,7 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
     // theme from their parent, rather than implementing their own theming, which is why we
     // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
@@ -96,8 +119,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);

package/core/tokens/_m3-system.scss

@@ -8,8 +8,8 @@
 @use './m3-tokens';
 
 // Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
-$_system-fallback-prefix: mat-app;
+// `color: var(--mdc-text-button-label-text-color, var(--mat-sys-primary));`
+$_system-fallback-prefix: mat-sys;
 
 // Default system level prefix to use when directly calling the `system-level-*` mixins
 $_system-level-prefix: sys;
@@ -36,8 +36,8 @@ $_system-level-prefix: sys;
 /// if the density value is a map, it must have a `scale` value. Density variable definitions will
 /// not be emitted if there are no density values in the config.
 ///
-/// The application variables emitted use the namespace prefix "--mat-app".
-/// e.g. --mat-app-surface: #E5E5E5
+/// The application variables emitted use the namespace prefix "--mat-sys".
+/// e.g. --mat-sys-surface: #E5E5E5
 ///
 /// @param {Map} $config The color configuration with optional keys color, typography, or density.
 @mixin theme($config, $overrides: ()) {
@@ -84,6 +84,25 @@ $_system-level-prefix: sys;
   @include system-level-state($overrides: $overrides, $prefix: $_system-fallback-prefix);
 }
 
+/// Emits the system-level CSS variables for each of the provided override values. E.g. to
+/// change the primary color to red, use `mat.theme-overrides((primary: red));`
+@mixin theme-overrides($overrides, $prefix: $_system-fallback-prefix) {
+  $sys-names: map-merge-all(
+      definitions.md-sys-color-values-light(),
+      definitions.md-sys-typescale-values(),
+      definitions.md-sys-elevation-values(),
+      definitions.md-sys-shape-values(),
+      definitions.md-sys-state-values());
+
+  & {
+    @each $name, $value in $overrides {
+      @if (map.has-key($sys-names, $name)) {
+        --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
+      }
+    }
+  }
+}
+
 @mixin system-level-colors($theme, $overrides: (), $prefix: null) {
   $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
   $base-palettes: (
@@ -186,8 +205,8 @@ $_system-level-prefix: sys;
 }
 
 // Return a new map where the values are the same as the provided map's
-// keys, prefixed with "--mat-app-". For example:
-// (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2)
+// keys, prefixed with "--mat-sys-". For example:
+// (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2)
 @function _create-system-app-vars-map($map) {
   $new-map: ();
   @each $key, $value in $map {
@@ -226,3 +245,12 @@ $_system-level-prefix: sys;
       m3-tokens.generate-density-tokens(0)
   );
 }
+
+/// Creates a single merged map from the provided variable-length map arguments
+@function map-merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}