@angular/material 19.0.0-next.8 → 19.0.0-rc.0

package/chips/_chips-theme.scss

@@ -13,13 +13,16 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-unthemable-tokens());
+        tokens-mdc-chip.$prefix,
+        tokens-mdc-chip.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mat-chip.$prefix, tokens-mat-chip.get-unthemable-tokens());
+        tokens-mat-chip.$prefix,
+        tokens-mat-chip.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -32,35 +35,50 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme));
+        tokens-mdc-chip.$prefix,
+        tokens-mdc-chip.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme));
+        tokens-mat-chip.$prefix,
+        tokens-mat-chip.get-color-tokens($theme)
+      );
 
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
           @include token-utils.create-token-values(
-            tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, primary));
+            tokens-mdc-chip.$prefix,
+            tokens-mdc-chip.get-color-tokens($theme, primary)
+          );
           @include token-utils.create-token-values(
-            tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary));
+            tokens-mat-chip.$prefix,
+            tokens-mat-chip.get-color-tokens($theme, primary)
+          );
         }
 
         &.mat-accent {
           @include token-utils.create-token-values(
-            tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, accent));
+            tokens-mdc-chip.$prefix,
+            tokens-mdc-chip.get-color-tokens($theme, accent)
+          );
           @include token-utils.create-token-values(
-            tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent));
+            tokens-mat-chip.$prefix,
+            tokens-mat-chip.get-color-tokens($theme, accent)
+          );
         }
 
         &.mat-warn {
           @include token-utils.create-token-values(
-            tokens-mdc-chip.$prefix, tokens-mdc-chip.get-color-tokens($theme, warn));
+            tokens-mdc-chip.$prefix,
+            tokens-mdc-chip.get-color-tokens($theme, warn)
+          );
           @include token-utils.create-token-values(
-            tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn));
+            tokens-mat-chip.$prefix,
+            tokens-mat-chip.get-color-tokens($theme, warn)
+          );
         }
       }
     }
@@ -72,13 +90,16 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-typography-tokens($theme));
+        tokens-mdc-chip.$prefix,
+        tokens-mdc-chip.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-chip.$prefix, tokens-mat-chip.get-typography-tokens($theme));
+        tokens-mat-chip.$prefix,
+        tokens-mat-chip.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -88,25 +109,38 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     .mat-mdc-chip.mat-mdc-standard-chip {
       @include token-utils.create-token-values(
-        tokens-mdc-chip.$prefix, tokens-mdc-chip.get-density-tokens($theme));
+        tokens-mdc-chip.$prefix,
+        tokens-mdc-chip.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-chip.$prefix, tokens-mat-chip.get-density-tokens($theme));
+        tokens-mat-chip.$prefix,
+        tokens-mat-chip.get-density-tokens($theme)
+      );
     }
   }
 }
 
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mdc-chip.$prefix,
+      tokens: tokens-mdc-chip.get-token-slots(),
+    ),
+    (
+      namespace: tokens-mat-chip.$prefix,
+      tokens: tokens-mat-chip.get-token-slots(),
+    ),
+  );
+}
+
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mdc-chip.$prefix, tokens: tokens-mdc-chip.get-token-slots()),
-    (prefix: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots()),
-  );
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-chips.
@@ -118,8 +152,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
     @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);
@@ -136,7 +169,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'
+  );
   $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...);
   $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mdc-chip.$prefix, $mdc-chip-tokens);

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);
@@ -71,29 +71,34 @@
   }
 }
 
-// This theme is a special case where not all of the imported tokens are supported in `overrides`.
-// To aid the docs token extraction, we have to pull the `overrides` token config out into a
-// separate function.
-// !!!Important!!! renaming or removal of this function requires the `extract-tokens.ts` script to
-// be updated as well.
-@function _get-supported-overrides-tokens() {
+@function _define-overrides() {
   $app-tokens: tokens-mat-app.get-token-slots();
   $ripple-tokens: tokens-mat-ripple.get-token-slots();
   $option-tokens: tokens-mat-option.get-token-slots();
+  $optgroup-tokens: tokens-mat-optgroup.get-token-slots();
   $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
   $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-optgroup.$prefix, tokens: $optgroup-tokens, prefix: 'optgroup-'),
+    (
+      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-'
+    )
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _get-supported-overrides-tokens()...);
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
@@ -104,8 +109,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 +126,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

@@ -1,12 +1,9 @@
-@use '@angular/cdk';
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './style/elevation';
 
-// Mixin that renders all of the core styles that are not theme-dependent.
-@mixin core() {
-  @include cdk.a11y-visually-hidden();
-}
+/// @deprecated This mixin is a no-op and is going to be removed in v21.
+@mixin core() {}
 
 // Emits the mat-app-background CSS class. This predefined class sets the
 // background color and text color of an element.
@@ -16,7 +13,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,23 +43,29 @@
 @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()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-optgroup.$prefix,
+      tokens: tokens-mat-optgroup.get-token-slots(),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @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 +82,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,17 +68,24 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-option.$prefix,
+      tokens: tokens-mat-option.get-token-slots(),
+    ),
+  );
 }
 
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots()),
-  );
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-option.
@@ -84,8 +97,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 +114,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,28 +42,35 @@
 @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)
+      );
     }
   }
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-ripple.$prefix,
+      tokens: tokens-mat-ripple.get-token-slots(),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @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 +87,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)
+    );
   }
 }