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

package/button/_button-theme.scss

@@ -14,12 +14,14 @@
 @use '../core/style/sass-utils';
 
 @mixin _text-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-text-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-text-button.get-color-tokens($theme)
   );
@@ -29,12 +31,14 @@
 }
 
 @mixin _filled-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-filled-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-filled-button.get-color-tokens($theme)
   );
@@ -44,12 +48,14 @@
 }
 
 @mixin _protected-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-protected-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-protected-button.get-color-tokens($theme)
   );
@@ -59,12 +65,14 @@
 }
 
 @mixin _outlined-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-outlined-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-outlined-button.get-color-tokens($theme)
   );
@@ -75,38 +83,75 @@
 
 @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');
-  $mdc-text-button-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mdc-text-button.$prefix, $options...);
-  $mdc-protected-button-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mdc-protected-button.$prefix, $options...);
-  $mdc-filled-button-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mdc-filled-button.$prefix, $options...);
-  $mdc-outlined-button-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mdc-outlined-button.$prefix, $options...);
-  $mat-text-button-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-text-button.$prefix, $options...);
-  $mat-protected-button-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-protected-button.$prefix, $options...);
-  $mat-filled-button-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-filled-button.$prefix, $options...);
-  $mat-outlined-button-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-outlined-button.$prefix, $options...);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mdc-text-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-text-button.$prefix,
+    $options...
+  );
+  $mdc-protected-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-protected-button.$prefix,
+    $options...
+  );
+  $mdc-filled-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-filled-button.$prefix,
+    $options...
+  );
+  $mdc-outlined-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-outlined-button.$prefix,
+    $options...
+  );
+  $mat-text-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-text-button.$prefix,
+    $options...
+  );
+  $mat-protected-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-protected-button.$prefix,
+    $options...
+  );
+  $mat-filled-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-filled-button.$prefix,
+    $options...
+  );
+  $mat-outlined-button-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-outlined-button.$prefix,
+    $options...
+  );
 
   @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
   @include token-utils.create-token-values(
-      tokens-mdc-protected-button.$prefix, $mdc-protected-button-tokens);
+    tokens-mdc-protected-button.$prefix,
+    $mdc-protected-button-tokens
+  );
   @include token-utils.create-token-values(
-      tokens-mdc-filled-button.$prefix, $mdc-filled-button-tokens);
+    tokens-mdc-filled-button.$prefix,
+    $mdc-filled-button-tokens
+  );
   @include token-utils.create-token-values(
-    tokens-mdc-outlined-button.$prefix, $mdc-outlined-button-tokens);
+    tokens-mdc-outlined-button.$prefix,
+    $mdc-outlined-button-tokens
+  );
   @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
   @include token-utils.create-token-values(
-      tokens-mat-protected-button.$prefix, $mat-protected-button-tokens);
+    tokens-mat-protected-button.$prefix,
+    $mat-protected-button-tokens
+  );
   @include token-utils.create-token-values(
-      tokens-mat-filled-button.$prefix, $mat-filled-button-tokens);
+    tokens-mat-filled-button.$prefix,
+    $mat-filled-button-tokens
+  );
   @include token-utils.create-token-values(
-      tokens-mat-outlined-button.$prefix, $mat-outlined-button-tokens);
+    tokens-mat-outlined-button.$prefix,
+    $mat-outlined-button-tokens
+  );
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -115,26 +160,41 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
-        tokens-mdc-text-button.get-unthemable-tokens());
-      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
-        tokens-mdc-filled-button.get-unthemable-tokens());
-      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
-        tokens-mdc-protected-button.get-unthemable-tokens());
-      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
-        tokens-mdc-outlined-button.get-unthemable-tokens());
-
-      @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
-        tokens-mat-text-button.get-unthemable-tokens());
-      @include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
-        tokens-mat-filled-button.get-unthemable-tokens());
-      @include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
-        tokens-mat-protected-button.get-unthemable-tokens());
-      @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
-        tokens-mat-outlined-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-text-button.$prefix,
+        tokens-mdc-text-button.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-button.$prefix,
+        tokens-mdc-filled-button.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-protected-button.$prefix,
+        tokens-mdc-protected-button.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-unthemable-tokens()
+      );
+
+      @include token-utils.create-token-values(
+        tokens-mat-text-button.$prefix,
+        tokens-mat-text-button.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-filled-button.$prefix,
+        tokens-mat-filled-button.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-protected-button.$prefix,
+        tokens-mat-protected-button.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-outlined-button.$prefix,
+        tokens-mat-outlined-button.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -147,8 +207,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 {
     @include sass-utils.current-selector-or-root() {
       @include _text-button-variant($theme, null);
       @include _filled-button-variant($theme, null);
@@ -219,26 +278,41 @@
 @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-mdc-text-button.$prefix,
-        tokens-mdc-text-button.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
-        tokens-mdc-filled-button.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
-        tokens-mdc-protected-button.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
-        tokens-mdc-outlined-button.get-typography-tokens($theme));
-
-      @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
-        tokens-mat-text-button.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
-        tokens-mat-filled-button.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
-        tokens-mat-protected-button.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
-        tokens-mat-outlined-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-text-button.$prefix,
+        tokens-mdc-text-button.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-button.$prefix,
+        tokens-mdc-filled-button.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-protected-button.$prefix,
+        tokens-mdc-protected-button.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-typography-tokens($theme)
+      );
+
+      @include token-utils.create-token-values(
+        tokens-mat-text-button.$prefix,
+        tokens-mat-text-button.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-filled-button.$prefix,
+        tokens-mat-filled-button.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-protected-button.$prefix,
+        tokens-mat-protected-button.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-outlined-button.$prefix,
+        tokens-mat-outlined-button.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -248,33 +322,47 @@
 @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-mdc-text-button.$prefix,
-        tokens-mdc-text-button.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
-        tokens-mdc-filled-button.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
-        tokens-mdc-protected-button.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
-        tokens-mdc-outlined-button.get-density-tokens($theme));
-
-      @include token-utils.create-token-values(tokens-mat-text-button.$prefix,
-        tokens-mat-text-button.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
-        tokens-mat-filled-button.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
-        tokens-mat-protected-button.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
-        tokens-mat-outlined-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-text-button.$prefix,
+        tokens-mdc-text-button.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-button.$prefix,
+        tokens-mdc-filled-button.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-protected-button.$prefix,
+        tokens-mdc-protected-button.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-button.$prefix,
+        tokens-mdc-outlined-button.get-density-tokens($theme)
+      );
+
+      @include token-utils.create-token-values(
+        tokens-mat-text-button.$prefix,
+        tokens-mat-text-button.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-filled-button.$prefix,
+        tokens-mat-filled-button.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-protected-button.$prefix,
+        tokens-mat-protected-button.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-outlined-button.$prefix,
+        tokens-mat-outlined-button.get-density-tokens($theme)
+      );
     }
   }
 }
 
-/// Outputs the CSS variable values for the given tokens.
-/// @param {Map} $tokens The token values to emit.
-@mixin overrides($tokens: ()) {
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
   $mdc-filled-button-tokens: tokens-mdc-filled-button.get-token-slots();
   $mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots();
   $mdc-outlined-button-tokens: tokens-mdc-outlined-button.get-token-slots();
@@ -284,19 +372,56 @@
   $mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots();
   $mat-text-button-tokens: tokens-mat-text-button.get-token-slots();
 
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mdc-filled-button.$prefix, tokens: $mdc-filled-button-tokens),
-    (prefix: tokens-mat-filled-button.$prefix, tokens: $mat-filled-button-tokens),
-    (prefix: tokens-mdc-outlined-button.$prefix, tokens: $mdc-outlined-button-tokens),
-    (prefix: tokens-mat-outlined-button.$prefix, tokens: $mat-outlined-button-tokens),
-    (prefix: tokens-mdc-protected-button.$prefix, tokens: $mdc-protected-button-tokens),
-    (prefix: tokens-mat-protected-button.$prefix, tokens: $mat-protected-button-tokens),
-    (prefix: tokens-mdc-text-button.$prefix, tokens: $mdc-text-button-tokens),
-    (prefix: tokens-mat-text-button.$prefix, tokens: $mat-text-button-tokens),
+  @return (
+    (
+      namespace: tokens-mdc-filled-button.$prefix,
+      tokens: $mdc-filled-button-tokens,
+      prefix: 'filled-',
+    ),
+    (
+      namespace: tokens-mat-filled-button.$prefix,
+      tokens: $mat-filled-button-tokens,
+      prefix: 'filled-',
+    ),
+    (
+      namespace: tokens-mdc-outlined-button.$prefix,
+      tokens: $mdc-outlined-button-tokens,
+      prefix: 'outlined-',
+    ),
+    (
+      namespace: tokens-mat-outlined-button.$prefix,
+      tokens: $mat-outlined-button-tokens,
+      prefix: 'outlined-',
+    ),
+    (
+      namespace: tokens-mdc-protected-button.$prefix,
+      tokens: $mdc-protected-button-tokens,
+      prefix: 'protected-',
+    ),
+    (
+      namespace: tokens-mat-protected-button.$prefix,
+      tokens: $mat-protected-button-tokens,
+      prefix: 'protected-',
+    ),
+    (
+      namespace: tokens-mdc-text-button.$prefix,
+      tokens: $mdc-text-button-tokens,
+      prefix: 'text-',
+    ),
+    (
+      namespace: tokens-mat-text-button.$prefix,
+      tokens: $mat-text-button-tokens,
+      prefix: 'text-',
+    ),
   );
 }
 
+/// 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, _define-overrides()...);
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-button.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
@@ -306,8 +431,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
     @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/button/_fab-theme.scss

@@ -16,26 +16,33 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-        tokens-mdc-fab.$prefix, tokens-mdc-fab.get-unthemable-tokens());
+        tokens-mdc-fab.$prefix,
+        tokens-mdc-fab.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mdc-fab-small.$prefix, tokens-mdc-fab-small.get-unthemable-tokens());
+        tokens-mdc-fab-small.$prefix,
+        tokens-mdc-fab-small.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-unthemable-tokens());
+        tokens-mdc-extended-fab.$prefix,
+        tokens-mdc-extended-fab.get-unthemable-tokens()
+      );
     }
   }
 }
 
 @mixin _fab-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-fab.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-fab.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-fab.get-color-tokens($theme)
   );
@@ -45,12 +52,14 @@
 }
 
 @mixin _fab-small-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-fab-small.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-fab-small.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-fab-small.get-color-tokens($theme)
   );
@@ -67,13 +76,14 @@
 @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 _fab-variant($theme, null);
       @include _fab-small-variant($theme, null);
       @include token-utils.create-token-values(
-        tokens-mdc-extended-fab.$prefix, tokens-mdc-extended-fab.get-color-tokens($theme));
+        tokens-mdc-extended-fab.$prefix,
+        tokens-mdc-extended-fab.get-color-tokens($theme)
+      );
 
       .mat-mdc-fab {
         &.mat-primary {
@@ -111,15 +121,20 @@
 @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-mdc-extended-fab.$prefix,
-        tokens-mdc-extended-fab.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-fab.$prefix,
-        tokens-mat-fab.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-fab-small.$prefix,
-        tokens-mat-fab-small.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-extended-fab.$prefix,
+        tokens-mdc-extended-fab.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-fab.$prefix,
+        tokens-mat-fab.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-fab-small.$prefix,
+        tokens-mat-fab-small.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -129,28 +144,53 @@
 @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-fab.$prefix,
-        tokens-mat-fab.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-fab-small.$prefix,
-        tokens-mat-fab-small.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-fab.$prefix,
+        tokens-mat-fab.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-fab-small.$prefix,
+        tokens-mat-fab-small.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-fab.$prefix,
+      tokens: tokens-mdc-fab.get-token-slots(),
+    ),
+    (
+      namespace: tokens-mdc-fab-small.$prefix,
+      tokens: tokens-mdc-fab-small.get-token-slots(),
+      prefix: 'small-',
+    ),
+    (
+      namespace: tokens-mdc-extended-fab.$prefix,
+      tokens: tokens-mdc-extended-fab.get-token-slots(),
+      prefix: 'extended-',
+    ),
+    (
+      namespace: tokens-mat-fab.$prefix,
+      tokens: tokens-mat-fab.get-token-slots(),
+    ),
+    (
+      namespace: tokens-mat-fab-small.$prefix,
+      tokens: tokens-mat-fab-small.get-token-slots(),
+      prefix: 'small-',
+    ),
+  );
+}
+
 /// 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-fab.$prefix, tokens: tokens-mdc-fab.get-token-slots()),
-    (prefix: tokens-mdc-fab-small.$prefix, tokens: tokens-mdc-fab-small.get-token-slots()),
-    (prefix: tokens-mdc-extended-fab.$prefix, tokens: tokens-mdc-extended-fab.get-token-slots()),
-    (prefix: tokens-mat-fab.$prefix, tokens: tokens-mat-fab.get-token-slots()),
-    (prefix: tokens-mat-fab-small.$prefix, tokens: tokens-mat-fab-small.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-checkbox.
@@ -162,8 +202,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
     @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);
@@ -180,17 +219,29 @@
 
 @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-extended-fab-tokens: token-utils.get-tokens-for(
-      $tokens, tokens-mdc-extended-fab.$prefix, $options...);
+    $tokens,
+    tokens-mdc-extended-fab.$prefix,
+    $options...
+  );
   $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);
-  $mdc-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab-small.$prefix,
-    $options...);
+  $mdc-fab-small-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-fab-small.$prefix,
+    $options...
+  );
   $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
-  $mat-fab-small-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab-small.$prefix,
-    $options...);
-    @include token-utils.create-token-values(tokens-mdc-extended-fab.$prefix,
-      $mdc-extended-fab-tokens);
+  $mat-fab-small-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-fab-small.$prefix,
+    $options...
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-extended-fab.$prefix,
+    $mdc-extended-fab-tokens
+  );
   @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-fab-tokens);
   @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-fab-small-tokens);
   @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);