From 8c1943ef2099b031a47e5652df11aa271b056c2c Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Fri, 26 Apr 2024 13:03:57 -0400
Subject: [PATCH 1/5] feat(material/theming): Add <component>-extend-theme sass
 functions

Initial commit, adds shared logic for appling overrides without
validation of the given tokens.
---
 src/material/checkbox/_checkbox-theme.scss |  7 ++++
 src/material/core/tokens/_token-utils.scss | 45 +++++++++++++++++++---
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index 13d106a71781..371767d8dff0 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -119,6 +119,13 @@
   );
 }
 
+/// Returns a theme config with the given tokens overridden.
+/// @param {Map} $theme The material theme for an application.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme($theme, checkbox, $overrides);
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index 018d8161b2e0..049d703d2ca7 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -3,6 +3,7 @@
 @use './m3-system';
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
 @use 'sass:string';
 
 $_tokens: null;
@@ -138,10 +139,13 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 @function resolve-elevation($tokens, $elevation-token, $shadow-color-token) {
   $elevation: map.get($tokens, $elevation-token);
   $shadow-color: map.get($tokens, $shadow-color-token);
-  @return map.merge($tokens, (
-    $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
-    $shadow-color-token: null,
-  ));
+  @return map.merge(
+    $tokens,
+    (
+      $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
+      $shadow-color-token: null,
+    )
+  );
 }
 
 /// Checks whether a list starts wih a given prefix
@@ -195,7 +199,8 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
   $overrides: map.get($tokens, list.append($prefix, $color-variant));
   @if $overrides == null {
     $variants: _supported-color-variants($tokens, $prefix);
-    $secondary-message: if($variants == (),
+    $secondary-message: if(
+      $variants == (),
       'Mixin does not support color variants',
       'Supported color variants are: #{$variants}'
     );
@@ -246,3 +251,33 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
     }
   }
 }
+
+// Returns a theme config with the given tokens overridden.
+/// @param {Map} $theme The material theme for an application.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $component, $overrides: ()) {
+  $internals: _mat-theming-internals-do-not-access;
+
+  @each $system in (color, typography, density, base) {
+    $system-name: $system + '-tokens';
+    $namespaces: map.get($theme, $internals, $system-name);
+    @each $namespace, $tokens in $namespaces {
+      @if (list.nth($namespace, 2) == $component) {
+        $namespace-overrides: if(
+          list.length($namespace) == 3,
+          map.get($overrides, list.nth($namespace, 3)),
+          $overrides
+        );
+
+        @each $name, $value in $tokens {
+          $token: map.get($namespace-overrides, $name);
+          @if $token != null {
+            $theme: map.set($theme, $internals, $system-name, $namespace, $name, $token);
+          }
+        }
+      }
+    }
+  }
+
+  @return $theme;
+}

From 7d62718560dbb9dbde12ea0bf6a8879b09b16b5e Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Mon, 17 Jun 2024 16:06:37 -0700
Subject: [PATCH 2/5] fix(material/theming): Add validation to shared
 extend-theme logic

Adds validation to the shared extend-theme logic along with tests to
verify its behavior.
---
 src/material/checkbox/_checkbox-theme.scss    |   8 +-
 .../core/theming/tests/m3-theme.spec.ts       | 152 +++++++++++++++++-
 src/material/core/tokens/_token-utils.scss    |  73 +++++++--
 3 files changed, 211 insertions(+), 22 deletions(-)

diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index 371767d8dff0..efbe901724de 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -51,13 +51,15 @@
       &.mat-primary {
         @include token-utils.create-token-values(
           tokens-mdc-checkbox.$prefix,
-          tokens-mdc-checkbox.get-color-tokens($theme, primary));
+          tokens-mdc-checkbox.get-color-tokens($theme, primary)
+        );
       }
 
       &.mat-warn {
         @include token-utils.create-token-values(
           tokens-mdc-checkbox.$prefix,
-          tokens-mdc-checkbox.get-color-tokens($theme, warn));
+          tokens-mdc-checkbox.get-color-tokens($theme, warn)
+        );
       }
     }
   }
@@ -123,7 +125,7 @@
 /// @param {Map} $theme The material theme for an application.
 /// @param {Map} $overrides The token values to override in the theme.
 @function extend-theme($theme, $overrides: ()) {
-  @return token-utils.extend-theme($theme, checkbox, $overrides);
+  @return token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), $overrides);
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts
index e05486afb200..61db15a1ef2e 100644
--- a/src/material/core/theming/tests/m3-theme.spec.ts
+++ b/src/material/core/theming/tests/m3-theme.spec.ts
@@ -1,7 +1,7 @@
-import {parse} from 'postcss';
-import {compileString} from 'sass';
 import {runfiles} from '@bazel/runfiles';
 import * as path from 'path';
+import {parse} from 'postcss';
+import {compileString} from 'sass';
 
 import {createLocalAngularPackageImporter} from '../../../../../tools/sass/local-sass-importer';
 
@@ -112,4 +112,152 @@ describe('M3 theme', () => {
       /Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector/,
     );
   });
+
+  describe('theme extension API', () => {
+    it('should allow overriding token value', () => {
+      const css = transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+          selected-checkmark-color: magenta
+        ));
+
+        html {
+          @include mat.checkbox-theme($theme);
+        }
+      `);
+
+      expect(css).toContain('--mdc-checkbox-selected-checkmark-color: magenta');
+    });
+
+    it('should not override token value for other color variant', () => {
+      const css = transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+          selected-checkmark-color: magenta
+        ));
+
+        html {
+          @include mat.checkbox-theme($theme, $color-variant: secondary);
+        }
+      `);
+
+      expect(css).not.toContain('--mdc-checkbox-selected-checkmark-color: magenta');
+    });
+
+    it('should allow overriding specific color variant separately', () => {
+      const css = transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+          selected-checkmark-color: magenta,
+          tertiary: (
+            selected-checkmark-color: cyan,
+          ),
+        ));
+
+        html {
+          @include mat.checkbox-theme($theme);
+        }
+
+        .tertiary {
+          @include mat.checkbox-color($theme, $color-variant: tertiary);
+        }
+      `);
+
+      expect(css).toContain('--mdc-checkbox-selected-checkmark-color: magenta');
+      expect(css).toContain('--mdc-checkbox-selected-checkmark-color: cyan');
+    });
+  });
+
+  it('should error if used on M2 theme', () => {
+    expect(() =>
+      transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: mat.m2-define-light-theme(mat.$m2-red-palette, mat.$m2-red-palette);
+
+        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+          selected-checkmark-color: magenta
+        ));
+
+        html {
+          @include mat.checkbox-theme($theme);
+        }
+      `),
+    ).toThrowError(/The `extend-theme` functions are only supported for M3 themes/);
+  });
+
+  it('should error on invalid namespace', () => {
+    expect(() =>
+      transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbocks)), (
+          selected-checkmark-color: magenta
+        ));
+
+        html {
+          @include mat.checkbox-theme($theme);
+        }
+      `),
+    ).toThrowError(
+      /Error extending theme: Theme does not have tokes for namespace `\(mat, checkbocks\)`/,
+    );
+  });
+
+  it('should error on ambiguous shorthand token name', () => {
+    expect(() =>
+      transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mdc, radio)), (
+          selected-checkmark-color: magenta
+        ));
+
+        html {
+          @include mat.checkbox-theme($theme);
+        }
+      `),
+    ).toThrowError(
+      /Error extending theme: Ambiguous token name `.*` exists in multiple namespaces: `\(mdc, checkbox\)` and `\(mdc, radio\)`/,
+    );
+  });
+
+  it('should error on unknown variant', () => {
+    expect(() =>
+      transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+          accent: (
+            selected-checkmark-color: magenta
+          )
+        ));
+
+        html {
+          @include mat.checkbox-theme($theme);
+        }
+      `),
+    ).toThrowError(
+      /Error extending theme: Unrecognized color variant `accent`. Allowed variants are: primary, secondary, tertiary, error, surface/,
+    );
+  });
+
+  it('should error on unknown token', () => {
+    expect(() =>
+      transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+          fake-token: red
+        ));
+
+        html {
+          @include mat.checkbox-theme($theme);
+        }
+      `),
+    ).toThrowError(/Error extending theme: Unrecognized token `fake-token`. Allowed tokens are: /);
+  });
 });
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index 049d703d2ca7..2837ef18c951 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -1,5 +1,6 @@
 @use '../style/elevation';
 @use '../style/sass-utils';
+@use '../theming/inspection';
 @use './m3-system';
 @use 'sass:list';
 @use 'sass:map';
@@ -255,29 +256,67 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 // Returns a theme config with the given tokens overridden.
 /// @param {Map} $theme The material theme for an application.
 /// @param {Map} $overrides The token values to override in the theme.
-@function extend-theme($theme, $component, $overrides: ()) {
+@function extend-theme($theme, $extend-namespaces, $overrides: ()) {
   $internals: _mat-theming-internals-do-not-access;
+  $systems: (color-tokens, typography-tokens, density-tokens, base-tokens);
+  $variants: (primary, secondary, tertiary, error, surface);
 
-  @each $system in (color, typography, density, base) {
-    $system-name: $system + '-tokens';
-    $namespaces: map.get($theme, $internals, $system-name);
-    @each $namespace, $tokens in $namespaces {
-      @if (list.nth($namespace, 2) == $component) {
-        $namespace-overrides: if(
-          list.length($namespace) == 3,
-          map.get($overrides, list.nth($namespace, 3)),
-          $overrides
-        );
-
-        @each $name, $value in $tokens {
-          $token: map.get($namespace-overrides, $name);
-          @if $token != null {
-            $theme: map.set($theme, $internals, $system-name, $namespace, $name, $token);
-          }
+  @if (inspection.get-theme-version($theme) < 1) {
+    @error #{'The `extend-theme` functions are only supported for M3 themes'};
+  }
+
+  // Determine which system and namespace each shorthand token belongs to.
+  $seen-tokens: ();
+  @each $namespace in $extend-namespaces {
+    @each $system in $systems {
+      $tokens: map.get($theme, $internals, $system, $namespace);
+      @if $tokens == null {
+        @error #{'Error extending theme: Theme does not have tokes for namespace `('}#{$namespace}#{
+          ')`'};
+      }
+      @each $name, $value in $tokens {
+        @if map.has-key($seen-tokens, $name) {
+          @error #{'Error extending theme: Ambiguous token name `'}#{$name}#{
+            '` exists in multiple namespaces: `('}#{list.nth(map.get($seen-tokens, $name), 1)}#{
+              ')` and `('}#{$namespace}#{')`'};
         }
+        $seen-tokens: map.set($seen-tokens, $name, ($namespace, $system));
       }
     }
   }
 
+  // Update internal tokens based on given overrides.
+  @each $token, $value in $overrides {
+    @if (meta.type-of($value) == 'map') {
+      $variant: $token;
+      $variant-overrides: $value;
+      @if (list.index($variants, $variant) == null) {
+        @error #{'Error extending theme: Unrecognized color variant `'}#{$variant}#{
+          '`. Allowed variants are: '}#{$variants};
+      }
+      @each $token, $value in $variant-overrides {
+        $theme: _update-token($theme, $seen-tokens, $token, $value, $variant);
+      }
+    } @else {
+      $theme: _update-token($theme, $seen-tokens, $token, $value);
+    }
+  }
+
   @return $theme;
 }
+
+// Update the given token in the given theme.
+@function _update-token($theme, $seen-tokens, $token, $value, $variant: null) {
+  $internals: _mat-theming-internals-do-not-access;
+  $token-info: map.get($seen-tokens, $token);
+  @if $token-info == null {
+    @error #{'Error extending theme: Unrecognized token `'}#{$token}#{'`. Allowed tokens are: '}#{
+      map.keys($seen-tokens)};
+  }
+  $namespace: list.nth($token-info, 1);
+  @if ($variant != null) {
+    $namespace: list.append($namespace, $variant);
+  }
+  $system: list.nth($token-info, 2);
+  @return map.set($theme, $internals, $system, $namespace, $token, $value);
+}

From a52abea3ddc5180ce891620709fe649207c188b4 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 18 Jun 2024 13:15:23 -0700
Subject: [PATCH 3/5] feat(material/theming): Add <component>-extend-theme
 functions

Adds the individual extend-theme functions for each component that
delegate to the shared logic.
---
 src/material/_index.scss                      | 124 +++----
 .../autocomplete/_autocomplete-theme.scss     |  62 ++--
 src/material/badge/_badge-theme.scss          |  63 ++--
 .../bottom-sheet/_bottom-sheet-theme.scss     |  53 ++-
 .../button-toggle/_button-toggle-theme.scss   |  94 +++--
 src/material/button/_button-theme.scss        | 332 ++++++++++++------
 src/material/button/_fab-theme.scss           | 143 +++++---
 src/material/button/_icon-button-theme.scss   |  64 ++--
 src/material/card/_card-theme.scss            |  15 +
 src/material/checkbox/_checkbox-theme.scss    |  10 +-
 src/material/chips/_chips-theme.scss          |  95 +++--
 src/material/core/_core-theme.scss            |  85 +++--
 src/material/core/option/_optgroup-theme.scss |  48 ++-
 src/material/core/option/_option-theme.scss   |  56 ++-
 src/material/core/ripple/_ripple-theme.scss   |  55 ++-
 .../_pseudo-checkbox-theme.scss               |  70 +++-
 src/material/core/style/_sass-utils.scss      |  19 +-
 .../datepicker/_datepicker-theme.scss         |  86 +++--
 src/material/dialog/_dialog-theme.scss        |  70 ++--
 src/material/divider/_divider-theme.scss      |  46 ++-
 src/material/expansion/_expansion-theme.scss  |  61 ++--
 .../form-field/_form-field-theme.scss         | 174 ++++++---
 src/material/grid-list/_grid-list-theme.scss  |  41 ++-
 src/material/icon/_icon-theme.scss            |  33 +-
 src/material/list/_list-theme.scss            | 137 +++++---
 src/material/menu/_menu-theme.scss            |  51 ++-
 src/material/paginator/_paginator-theme.scss  |  62 ++--
 .../progress-bar/_progress-bar-theme.scss     |  11 +
 .../_progress-spinner-theme.scss              |  65 ++--
 src/material/radio/_radio-theme.scss          |  11 +
 src/material/select/_select-theme.scss        |  64 ++--
 src/material/sidenav/_sidenav-theme.scss      |  46 ++-
 .../slide-toggle/_slide-toggle-theme.scss     |  11 +
 src/material/slider/_slider-theme.scss        | 101 ++++--
 src/material/snack-bar/_snack-bar-theme.scss  |  47 ++-
 src/material/sort/_sort-theme.scss            |  51 ++-
 src/material/stepper/_stepper-theme.scss      |  68 ++--
 src/material/table/_table-theme.scss          |  60 ++--
 src/material/tabs/_tabs-theme.scss            |  16 +
 src/material/toolbar/_toolbar-theme.scss      |  58 ++-
 src/material/tooltip/_tooltip-theme.scss      |  11 +
 src/material/tree/_tree-theme.scss            |  51 ++-
 42 files changed, 1925 insertions(+), 895 deletions(-)

diff --git a/src/material/_index.scss b/src/material/_index.scss
index 7a6e4c634274..a65afb4e20d5 100644
--- a/src/material/_index.scss
+++ b/src/material/_index.scss
@@ -6,9 +6,9 @@
   get-theme-typography, get-theme-density, theme-has, theme-remove;
 @forward './core/theming/definition' show define-theme, define-colors, define-typography,
   define-density;
-@forward './core/theming/palettes' show $red-palette, $green-palette, $blue-palette,
-  $yellow-palette, $cyan-palette, $magenta-palette, $orange-palette,
-  $chartreuse-palette, $spring-green-palette, $azure-palette, $violet-palette, $rose-palette;
+@forward './core/theming/palettes' show $red-palette, $green-palette, $blue-palette, $yellow-palette,
+  $cyan-palette, $magenta-palette, $orange-palette, $chartreuse-palette, $spring-green-palette,
+  $azure-palette, $violet-palette, $rose-palette;
 @forward './core/theming/color-api-backwards-compatibility' show
   color-variants-backwards-compatibility;
 
@@ -18,9 +18,8 @@
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
 @forward './core/tokens/m2' show m2-tokens-from-theme;
-@forward './core/tokens/m3-system' show system-level-colors,
-    system-level-typography, system-level-elevation, system-level-shape,
-    system-level-motion, system-level-state;
+@forward './core/tokens/m3-system' show system-level-colors, system-level-typography,
+  system-level-elevation, system-level-shape, system-level-motion, system-level-state;
 @forward './core/tokens/m3-system' as private-experimental-* show private-experimental-theme;
 
 // Private/Internal
@@ -49,99 +48,102 @@
 
 // Component themes
 @forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density,
-  core-base, core-overrides;
+  core-base, core-overrides, core-extend-theme;
 @forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base,
-  ripple-overrides;
-@forward './core/option/option-theme' as option-* show option-color, option-typography,
-  option-theme, option-density, option-base, option-overrides;
+  ripple-overrides, ripple-extend-theme;
+@forward './core/option/option-theme' as option-* show option-color, option-typography, option-theme,
+  option-density, option-base, option-overrides, option-extend-theme;
 @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography,
-  optgroup-theme, optgroup-density, optgroup-base, optgroup-overrides;
-@forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show
-  pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-density,
-  pseudo-checkbox-base, pseudo-checkbox-overrides;
-@forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
-  pseudo-checkbox-legacy-size;
+  optgroup-theme, optgroup-density, optgroup-base, optgroup-overrides, optgroup-extend-theme;
+@forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show pseudo-checkbox-color,
+  pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-density, pseudo-checkbox-base,
+  pseudo-checkbox-overrides, pseudo-checkbox-extend-theme;
+@forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show pseudo-checkbox-legacy-size;
 @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,
   autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base,
-  autocomplete-overrides;
+  autocomplete-overrides, autocomplete-extend-theme;
 @forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography,
-  badge-density, badge-base, badge-overrides;
+  badge-density, badge-base, badge-overrides, badge-extend-theme;
 @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme,
   bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base,
-  bottom-sheet-overrides;
+  bottom-sheet-overrides, bottom-sheet-extend-theme;
 @forward './button/button-theme' as button-* show button-theme, button-color, button-typography,
-  button-density, button-base, button-overrides;
-@forward './button/fab-theme' as fab-* show fab-color, fab-typography,
-  fab-density, fab-theme, fab-base, fab-overrides;
+  button-density, button-base, button-overrides, button-extend-theme;
+@forward './button/fab-theme' as fab-* show fab-color, fab-typography, fab-density, fab-theme,
+  fab-base, fab-overrides, fab-extend-theme;
 @forward './button/icon-button-theme' as icon-button-* show icon-button-color,
   icon-button-typography, icon-button-density, icon-button-theme, icon-button-base,
-  icon-button-overrides;
+  icon-button-overrides, icon-button-extend-theme;
 @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme,
   button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base,
-  button-toggle-overrides;
+  button-toggle-overrides, button-toggle-extend-theme;
 @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density,
-  card-base, card-overrides;
+  card-base, card-overrides, card-extend-theme;
 @forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color,
-  checkbox-typography, checkbox-density, checkbox-base, checkbox-overrides;
+  checkbox-typography, checkbox-density, checkbox-base, checkbox-overrides, checkbox-extend-theme;
 @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography,
-  chips-density, chips-base, chips-overrides;
+  chips-density, chips-base, chips-overrides, chips-extend-theme;
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
   datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base,
-  datepicker-overrides;
+  datepicker-overrides, datepicker-extend-theme;
 @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography,
-  dialog-density, dialog-base, dialog-overrides;
+  dialog-density, dialog-base, dialog-overrides, dialog-extend-theme;
 @forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
-  divider-typography, divider-density, divider-base, divider-overrides;
+  divider-typography, divider-density, divider-base, divider-overrides, divider-extend-theme;
 @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color,
-  expansion-typography, expansion-density, expansion-base, expansion-overrides;
-@forward './form-field/form-field-theme' as form-field-* show form-field-theme,
-  form-field-color, form-field-typography, form-field-density, form-field-base,
-  form-field-overrides;
+  expansion-typography, expansion-density, expansion-base, expansion-overrides,
+  expansion-extend-theme;
+@forward './form-field/form-field-theme' as form-field-* show form-field-theme, form-field-color,
+  form-field-typography, form-field-density, form-field-base, form-field-overrides,
+  form-field-extend-theme;
 @forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color,
-  grid-list-typography, grid-list-density, grid-list-base, grid-list-overrides;
+  grid-list-typography, grid-list-density, grid-list-base, grid-list-overrides,
+  grid-list-extend-theme;
 @forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density,
-  icon-base, icon-overrides;
+  icon-base, icon-overrides, icon-extend-theme;
 @forward './input/input-theme' as input-* show input-theme, input-color, input-typography,
   input-density, input-base, input-overrides;
-@forward './list/list-theme' as list-* show list-theme, list-color, list-typography,
-  list-density, list-base, list-overrides;
+@forward './list/list-theme' as list-* show list-theme, list-color, list-typography, list-density,
+  list-base, list-overrides, list-extend-theme;
 @forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density,
-  menu-base, menu-overrides;
+  menu-base, menu-overrides, menu-extend-theme;
 @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color,
-  paginator-typography, paginator-density, paginator-base, paginator-overrides;
-@forward './progress-bar/progress-bar-theme' as progress-bar-* show
-  progress-bar-theme, progress-bar-color, progress-bar-typography,
-  progress-bar-density, progress-bar-base, progress-bar-overrides;
-@forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show
-  progress-spinner-theme, progress-spinner-color, progress-spinner-typography,
-  progress-spinner-density, progress-spinner-base, progress-spinner-overrides;
+  paginator-typography, paginator-density, paginator-base, paginator-overrides,
+  paginator-extend-theme;
+@forward './progress-bar/progress-bar-theme' as progress-bar-* show progress-bar-theme,
+  progress-bar-color, progress-bar-typography, progress-bar-density, progress-bar-base,
+  progress-bar-overrides, progress-bar-extend-theme;
+@forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show progress-spinner-theme,
+  progress-spinner-color, progress-spinner-typography, progress-spinner-density,
+  progress-spinner-base, progress-spinner-overrides, progress-spinner-extend-theme;
 @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography,
-  radio-density, radio-base, radio-overrides;
+  radio-density, radio-base, radio-overrides, radio-extend-theme;
 @forward './select/select-theme' as select-* show select-theme, select-color, select-typography,
-  select-density, select-base, select-overrides;
+  select-density, select-base, select-overrides, select-extend-theme;
 @forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color,
-  sidenav-typography, sidenav-density, sidenav-base, sidenav-overrides;
-@forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show
-  slide-toggle-theme, slide-toggle-color, slide-toggle-typography, slide-toggle-density,
-  slide-toggle-base, slide-toggle-overrides;
+  sidenav-typography, sidenav-density, sidenav-base, sidenav-overrides, sidenav-extend-theme;
+@forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show slide-toggle-theme,
+  slide-toggle-color, slide-toggle-typography, slide-toggle-density, slide-toggle-base,
+  slide-toggle-overrides, slide-toggle-extend-theme;
 @forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography,
-  slider-density, slider-base, slider-overrides;
+  slider-density, slider-base, slider-overrides, slider-extend-theme;
 @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color,
-  snack-bar-typography, snack-bar-density, snack-bar-base, snack-bar-overrides;
+  snack-bar-typography, snack-bar-density, snack-bar-base, snack-bar-overrides,
+  snack-bar-extend-theme;
 @forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density,
-  sort-base, sort-overrides;
+  sort-base, sort-overrides, sort-extend-theme;
 @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color,
-  stepper-typography, stepper-density, stepper-base, stepper-overrides;
+  stepper-typography, stepper-density, stepper-base, stepper-overrides, stepper-extend-theme;
 @forward './table/table-theme' as table-* show table-theme, table-color, table-typography,
-  table-density, table-base, table-overrides;
+  table-density, table-base, table-overrides, table-extend-theme;
 @forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density,
-  tabs-base, tabs-overrides;
+  tabs-base, tabs-overrides, tabs-extend-theme;
 @forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color,
-  toolbar-typography, toolbar-density, toolbar-base, toolbar-overrides;
+  toolbar-typography, toolbar-density, toolbar-base, toolbar-overrides, toolbar-extend-theme;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color,
-  tooltip-typography, tooltip-density, tooltip-base, tooltip-overrides;
+  tooltip-typography, tooltip-density, tooltip-base, tooltip-overrides, tooltip-extend-theme;
 @forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density,
-  tree-base, tree-overrides;
+  tree-base, tree-overrides, tree-extend-theme;
 @forward './timepicker/timepicker-theme' as timepicker-* show timepicker-theme, timepicker-color,
   timepicker-typography, timepicker-density, timepicker-base, timepicker-overrides;
diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss
index 31273e0a8e91..fcc4a53ca8e8 100644
--- a/src/material/autocomplete/_autocomplete-theme.scss
+++ b/src/material/autocomplete/_autocomplete-theme.scss
@@ -10,11 +10,12 @@
 @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-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -22,11 +23,12 @@
 @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-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -34,11 +36,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-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -46,19 +49,34 @@
 @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-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-density-tokens($theme)
+      );
     }
   }
 }
 
+/// Returns the theme config with the given autocomplete tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-autocomplete.$prefix),
+    $overrides
+  );
+}
+
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()),
+    (
+      prefix: tokens-mat-autocomplete.$prefix,
+      tokens: tokens-mat-autocomplete.get-token-slots(),
+    )
   );
 }
 
@@ -66,8 +84,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
     @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);
@@ -84,9 +101,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-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
+      tokens-mat-autocomplete.$prefix,
+      map.get($tokens, tokens-mat-autocomplete.$prefix)
+    );
   }
 }
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
index 1cb96ffd9759..1d517e021bd3 100644
--- a/src/material/badge/_badge-theme.scss
+++ b/src/material/badge/_badge-theme.scss
@@ -13,11 +13,12 @@
 @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-mat-badge.$prefix,
-        tokens-mat-badge.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -30,21 +31,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-badge.$prefix,
-        tokens-mat-badge.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-color-tokens($theme)
+      );
     }
 
     .mat-badge-accent {
-      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-        tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
+      );
     }
 
     .mat-badge-warn {
-      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-        tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
+      );
     }
   }
 }
@@ -54,11 +60,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-badge.$prefix,
-        tokens-mat-badge.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -68,8 +75,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.
@@ -77,7 +84,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots()),
+    (
+      prefix: tokens-mat-badge.$prefix,
+      tokens: tokens-mat-badge.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given badge tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-badge.$prefix),
+    $overrides
   );
 }
 
@@ -90,8 +111,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
     @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);
@@ -108,7 +128,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-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
 }
diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss
index 38a7c6032b36..ec29cd693a8f 100644
--- a/src/material/bottom-sheet/_bottom-sheet-theme.scss
+++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss
@@ -10,11 +10,12 @@
 @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-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens());
+        tokens-mat-bottom-sheet.$prefix,
+        tokens-mat-bottom-sheet.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -22,11 +23,12 @@
 @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-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-bottom-sheet.$prefix,
+        tokens-mat-bottom-sheet.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -34,11 +36,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-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-bottom-sheet.$prefix,
+        tokens-mat-bottom-sheet.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -46,14 +49,28 @@
 @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-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots()),
+    (
+      prefix: tokens-mat-bottom-sheet.$prefix,
+      tokens: tokens-mat-bottom-sheet.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given bottom-sheet tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-bottom-sheet.$prefix),
+    $overrides
   );
 }
 
@@ -61,8 +78,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
     @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);
@@ -79,9 +95,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-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix));
+      tokens-mat-bottom-sheet.$prefix,
+      map.get($tokens, tokens-mat-bottom-sheet.$prefix)
+    );
   }
 }
diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss
index f28f084fded0..b9706e511908 100644
--- a/src/material/button-toggle/_button-toggle-theme.scss
+++ b/src/material/button-toggle/_button-toggle-theme.scss
@@ -13,16 +13,15 @@
 @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-mat-legacy-button-toggle.$prefix,
-          tokens-mat-legacy-button-toggle.get-unthemable-tokens()
+        tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-unthemable-tokens()
       );
       @include token-utils.create-token-values(
-          tokens-mat-standard-button-toggle.$prefix,
-          tokens-mat-standard-button-toggle.get-unthemable-tokens()
+        tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-unthemable-tokens()
       );
     }
   }
@@ -36,13 +35,16 @@
 @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-legacy-button-toggle.$prefix,
-        tokens-mat-legacy-button-toggle.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-        tokens-mat-standard-button-toggle.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -52,13 +54,16 @@
 @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-legacy-button-toggle.$prefix,
-        tokens-mat-legacy-button-toggle.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-        tokens-mat-standard-button-toggle.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -68,13 +73,16 @@
 @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-legacy-button-toggle.$prefix,
-        tokens-mat-legacy-button-toggle.get-density-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
-        tokens-mat-standard-button-toggle.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-legacy-button-toggle.$prefix,
+        tokens-mat-legacy-button-toggle.get-density-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -86,8 +94,25 @@
   $standard-tokens: tokens-mat-standard-button-toggle.get-token-slots();
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-legacy-button-toggle.$prefix, tokens: $legacy-tokens),
-    (prefix: tokens-mat-standard-button-toggle.$prefix, tokens: $standard-tokens),
+    (
+      prefix: tokens-mat-legacy-button-toggle.$prefix,
+      tokens: $legacy-tokens,
+    ),
+    (
+      prefix: tokens-mat-standard-button-toggle.$prefix,
+      tokens: $standard-tokens,
+    )
+  );
+}
+
+/// Returns the theme config with the given button-toggle tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-standard-button-toggle.$prefix),
+    $overrides
   );
 }
 
@@ -100,8 +125,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
     @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);
@@ -118,9 +142,15 @@
 
 @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-standard-button-toggle-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-standard-button-toggle.$prefix, $options...);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mat-standard-button-toggle-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-standard-button-toggle.$prefix,
+    $options...
+  );
   @include token-utils.create-token-values(
-      tokens-mat-standard-button-toggle.$prefix, $mat-standard-button-toggle-tokens);
+    tokens-mat-standard-button-toggle.$prefix,
+    $mat-standard-button-toggle-tokens
+  );
 }
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index ee85325714fb..7b82f8a37dd1 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/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,26 +322,41 @@
 @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)
+      );
     }
   }
 }
@@ -286,14 +375,58 @@
 
   @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),
+    (
+      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,
+    )
+  );
+}
+
+/// Returns the theme config with the given button tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(
+      tokens-mdc-filled-button.$prefix,
+      tokens-mdc-outlined-button.$prefix,
+      tokens-mdc-protected-button.$prefix,
+      tokens-mdc-text-button.$prefix,
+      tokens-mat-filled-button.$prefix,
+      tokens-mat-outlined-button.$prefix,
+      tokens-mat-protected-button.$prefix,
+      tokens-mat-text-button.$prefix
+    ),
+    $overrides
   );
 }
 
@@ -306,8 +439,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);
diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
index 49caf90fa4f1..1acd56128822 100644
--- a/src/material/button/_fab-theme.scss
+++ b/src/material/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,13 +144,16 @@
 @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)
+      );
     }
   }
 }
@@ -145,11 +163,43 @@
 @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()),
+    (
+      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(),
+    )
+  );
+}
+
+/// Returns the theme config with the given fab tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(
+      tokens-mdc-fab.$prefix,
+      tokens-mdc-fab-small.$prefix,
+      tokens-mdc-extended-fab.$prefix,
+      tokens-mat-fab.$prefix,
+      tokens-mat-fab-small.$prefix
+    ),
+    $overrides
   );
 }
 
@@ -162,8 +212,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 +229,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);
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index aef468241a6f..3970216b538b 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/src/material/button/_icon-button-theme.scss
@@ -8,27 +8,29 @@
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 
-
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix,
-        tokens-mdc-icon-button.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-icon-button.$prefix,
+        tokens-mdc-icon-button.get-unthemable-tokens()
+      );
     }
   }
 }
 
 @mixin _icon-button-variant($theme, $palette) {
-  $mdc-tokens: if($palette,
+  $mdc-tokens: if(
+    $palette,
     tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mdc-icon-button.get-color-tokens($theme)
   );
 
-  $mat-tokens: if($palette,
+  $mat-tokens: if(
+    $palette,
     tokens-mat-icon-button.private-get-color-palette-color-tokens($theme, $palette),
     tokens-mat-icon-button.get-color-tokens($theme)
   );
@@ -44,8 +46,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 _icon-button-variant($theme, null);
 
@@ -69,11 +70,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-icon-button.$prefix,
-        tokens-mat-icon-button.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-icon-button.$prefix,
+        tokens-mat-icon-button.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -81,8 +83,7 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     $icon-size: 24px;
     $density-scale: inspection.get-theme-density($theme);
     $size-map: (
@@ -96,8 +97,10 @@
     $calculated-size: map.get($size-map, $density-scale);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
-        tokens-mat-icon-button.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-icon-button.$prefix,
+        tokens-mat-icon-button.get-density-tokens($theme)
+      );
     }
 
     // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
@@ -121,8 +124,25 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mdc-icon-button.$prefix, tokens: tokens-mdc-icon-button.get-token-slots()),
-    (prefix: tokens-mat-icon-button.$prefix, tokens: tokens-mat-icon-button.get-token-slots()),
+    (
+      prefix: tokens-mdc-icon-button.$prefix,
+      tokens: tokens-mdc-icon-button.get-token-slots(),
+    ),
+    (
+      prefix: tokens-mat-icon-button.$prefix,
+      tokens: tokens-mat-icon-button.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given icon-button tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-icon-button.$prefix, tokens-mat-icon-button.$prefix),
+    $overrides
   );
 }
 
@@ -134,8 +154,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-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);
@@ -152,7 +171,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'
+  );
   @if ($tokens != ()) {
     $mdc-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-icon-button.$prefix, $options...);
     $mat-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon-button.$prefix, $options...);
diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss
index c6602e0388a6..6cab8352b26f 100644
--- a/src/material/card/_card-theme.scss
+++ b/src/material/card/_card-theme.scss
@@ -82,6 +82,21 @@
   );
 }
 
+/// Returns the theme config with the given card tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+      $theme,
+      sass-utils.list-of(
+          tokens-mdc-elevated-card.$prefix,
+          tokens-mdc-outlined-card.$prefix,
+          tokens-mat-card.$prefix
+      ),
+      $overrides
+  );
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
     @if inspection.get-theme-version($theme) == 1 {
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index efbe901724de..48480994284d 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -121,11 +121,15 @@
   );
 }
 
-/// Returns a theme config with the given tokens overridden.
-/// @param {Map} $theme The material theme for an application.
+/// Returns the theme config with the given checkbox tokens overridden.
+/// @param {Map} $theme An M3 material theme.
 /// @param {Map} $overrides The token values to override in the theme.
 @function extend-theme($theme, $overrides: ()) {
-  @return token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), $overrides);
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-checkbox.$prefix, tokens-mat-checkbox.$prefix),
+    $overrides
+  );
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index 2528a8685bdb..e748fd77185d 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/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,13 +109,16 @@
 @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)
+      );
     }
   }
 }
@@ -104,8 +128,25 @@
 @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()),
+    (
+      prefix: tokens-mdc-chip.$prefix,
+      tokens: tokens-mdc-chip.get-token-slots(),
+    ),
+    (
+      prefix: tokens-mat-chip.$prefix,
+      tokens: tokens-mat-chip.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given chips tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-chip.$prefix, tokens-mat-chip.$prefix),
+    $overrides
   );
 }
 
@@ -118,8 +159,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 +176,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);
diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss
index 8e6b3061d1d8..9c037fb72110 100644
--- a/src/material/core/_core-theme.scss
+++ b/src/material/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);
@@ -80,6 +80,7 @@
   $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();
 
@@ -87,8 +88,27 @@
     (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-optgroup.$prefix, tokens: $optgroup-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),
+    (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens)
+  );
+}
+
+/// Returns the theme config with the given core tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(
+      tokens-mat-app.$prefix,
+      tokens-mat-ripple.$prefix,
+      tokens-mat-option.$prefix,
+      tokens-mat-optgroup.$prefix,
+      tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens-mat-minimal-pseudo-checkbox.$prefix
+    ),
+    $overrides
   );
 }
 
@@ -104,8 +124,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 +141,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
+  );
 }
diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss
index 5c39fe2f32bb..3093200b226a 100644
--- a/src/material/core/option/_optgroup-theme.scss
+++ b/src/material/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,28 @@
 @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()),
+    (
+      prefix: tokens-mat-optgroup.$prefix,
+      tokens: tokens-mat-optgroup.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given optgroup tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-optgroup.$prefix),
+    $overrides
   );
 }
 
@@ -56,8 +72,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 +89,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)
+    );
   }
 }
diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss
index 4cc6f7839379..e8250a7efb42 100644
--- a/src/material/core/option/_option-theme.scss
+++ b/src/material/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,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots()),
+    (
+      prefix: tokens-mat-option.$prefix,
+      tokens: tokens-mat-option.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given option tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-option.$prefix),
+    $overrides
   );
 }
 
@@ -84,8 +104,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 +121,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);
 }
diff --git a/src/material/core/ripple/_ripple-theme.scss b/src/material/core/ripple/_ripple-theme.scss
index 750fcd08ea40..76bede509f34 100644
--- a/src/material/core/ripple/_ripple-theme.scss
+++ b/src/material/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,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots()),
+    (
+      prefix: tokens-mat-ripple.$prefix,
+      tokens: tokens-mat-ripple.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given ripple tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-ripple.$prefix),
+    $overrides
   );
 }
 
@@ -60,8 +77,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 +94,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)
+    );
   }
 }
diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index a745d9df688e..02e0563bb09a 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/material/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,28 @@
 
   @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),
+    (
+      prefix: tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens: $full-pseudo-checkbox-tokens,
+    ),
+    (
+      prefix: tokens-mat-minimal-pseudo-checkbox.$prefix,
+      tokens: $minimal-pseudo-checkbox-tokens,
+    )
+  );
+}
+
+/// Returns the theme config with the given pseudo-checkbox tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(
+      tokens-mat-full-pseudo-checkbox.$prefix,
+      tokens-mat-minimal-pseudo-checkbox.$prefix
+    ),
+    $overrides
   );
 }
 
@@ -54,8 +90,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 +131,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);
diff --git a/src/material/core/style/_sass-utils.scss b/src/material/core/style/_sass-utils.scss
index 0d51c92e0f32..9286d10a8c6c 100644
--- a/src/material/core/style/_sass-utils.scss
+++ b/src/material/core/style/_sass-utils.scss
@@ -20,8 +20,7 @@ $use-system-typography-variables: false;
 @mixin current-selector-or-root($root: html) {
   @if & {
     @content;
-  }
-  @else {
+  } @else {
     #{$root} {
       @content;
     }
@@ -66,12 +65,10 @@ $use-system-typography-variables: false;
 @function safe-color-change($color, $args...) {
   $args: meta.keywords($args);
   $use-color-mix: $use-system-color-variables or
-      (is-css-var-name($color) and string.index($color, '--mat') == 1);
+    (is-css-var-name($color) and string.index($color, '--mat') == 1);
   @if (meta.type-of($color) == 'color') {
     @return color.change($color, $args...);
-  }
-  @else if ($color != null and
-      map.get($args, alpha) != null and $use-color-mix) {
+  } @else if ($color != null and map.get($args, alpha) != null and $use-color-mix) {
     $opacity: map.get($args, alpha);
     @if meta.type-of($opacity) == number {
       $opacity: ($opacity * 100) + '%';
@@ -113,3 +110,13 @@ $use-system-typography-variables: false;
 @function is-css-var-name($value) {
   @return meta.type-of($value) == string and string.index($value, '--') == 1;
 }
+
+/// Creates a list of the given values. This helper can be used when creating lists to avoid the
+/// following common pitfall:
+/// $x: ((x, y))  // => incorrect, sass interprets as a list of strings  (equivalent to `(x, y)`)
+/// $x: ((x, y),) // => correct, sass interprets as a list of list of strings
+/// @param {ArgList} $items The items of the list.
+/// @return {List} A list containing the given items.
+@function list-of($items...) {
+  @return $items;
+}
diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss
index 669873845cd8..cd94735a7524 100644
--- a/src/material/datepicker/_datepicker-theme.scss
+++ b/src/material/datepicker/_datepicker-theme.scss
@@ -21,11 +21,15 @@ $calendar-weekday-table-font-size: 11px !default;
   $palette-color: inspection.get-theme-color($theme, $palette-name);
   $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color);
   $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color);
-  $calendar-tokens:
-    tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens($theme, $palette-name);
+  $calendar-tokens: tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens(
+    $theme,
+    $palette-name
+  );
 
-  @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-    map.merge($calendar-tokens, $range-tokens));
+  @include token-utils.create-token-values(
+    tokens-mat-datepicker.$prefix,
+    map.merge($calendar-tokens, $range-tokens)
+  );
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -34,11 +38,12 @@ $calendar-weekday-table-font-size: 11px !default;
 @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-mat-datepicker.$prefix,
-        tokens-mat-datepicker.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -51,11 +56,12 @@ $calendar-weekday-table-font-size: 11px !default;
 @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-datepicker.$prefix,
-        tokens-mat-datepicker.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-color-tokens($theme)
+      );
     }
 
     .mat-datepicker-content {
@@ -70,14 +76,18 @@ $calendar-weekday-table-font-size: 11px !default;
 
     .mat-datepicker-toggle-active {
       &.mat-accent {
-        $accent-tokens:
-          tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        $accent-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens(
+          $theme,
+          accent
+        );
         @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
       }
 
       &.mat-warn {
-        $warn-tokens:
-          tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        $warn-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens(
+          $theme,
+          warn
+        );
         @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
       }
     }
@@ -89,11 +99,12 @@ $calendar-weekday-table-font-size: 11px !default;
 @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-datepicker.$prefix,
-        tokens-mat-datepicker.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -103,7 +114,8 @@ $calendar-weekday-table-font-size: 11px !default;
   $comparison-color: tokens-mat-datepicker.$private-default-comparison-color,
   $overlap-color: tokens-mat-datepicker.$private-default-overlap-color,
   $overlap-selected-color:
-    tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color)) {
+    tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color)
+) {
   $tokens: tokens-mat-datepicker.get-range-color-tokens(
     $range-color: $range-color,
     $comparison-color: $comparison-color,
@@ -121,8 +133,7 @@ $calendar-weekday-table-font-size: 11px !default;
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     // TODO(crisbeto): move this into the structural styles
     // once the icon button density is switched to tokens.
 
@@ -139,7 +150,21 @@ $calendar-weekday-table-font-size: 11px !default;
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-datepicker.$prefix, tokens: tokens-mat-datepicker.get-token-slots()),
+    (
+      prefix: tokens-mat-datepicker.$prefix,
+      tokens: tokens-mat-datepicker.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given datepicker tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-datepicker.$prefix),
+    $overrides
   );
 }
 
@@ -152,8 +177,7 @@ $calendar-weekday-table-font-size: 11px !default;
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
     @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);
@@ -170,8 +194,12 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @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-datepicker-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-datepicker.$prefix, $options...);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mat-datepicker-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-datepicker.$prefix,
+    $options...
+  );
   @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens);
 }
diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss
index 3e02b5c4319d..ee51884640ec 100644
--- a/src/material/dialog/_dialog-theme.scss
+++ b/src/material/dialog/_dialog-theme.scss
@@ -11,14 +11,17 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-        tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-unthemable-tokens());
+        tokens-mdc-dialog.$prefix,
+        tokens-mdc-dialog.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens());
+        tokens-mat-dialog.$prefix,
+        tokens-mat-dialog.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -26,13 +29,16 @@
 @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-mdc-dialog.$prefix, tokens-mdc-dialog.get-color-tokens($theme));
+        tokens-mdc-dialog.$prefix,
+        tokens-mdc-dialog.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme));
+        tokens-mat-dialog.$prefix,
+        tokens-mat-dialog.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -40,13 +46,16 @@
 @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-dialog.$prefix, tokens-mdc-dialog.get-typography-tokens($theme));
+        tokens-mdc-dialog.$prefix,
+        tokens-mdc-dialog.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme));
+        tokens-mat-dialog.$prefix,
+        tokens-mat-dialog.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -54,15 +63,32 @@
 @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-mdc-dialog.$prefix, tokens: tokens-mdc-dialog.get-token-slots()),
-    (prefix: tokens-mat-dialog.$prefix, tokens: tokens-mat-dialog.get-token-slots()),
+    (
+      prefix: tokens-mdc-dialog.$prefix,
+      tokens: tokens-mdc-dialog.get-token-slots(),
+    ),
+    (
+      prefix: tokens-mat-dialog.$prefix,
+      tokens: tokens-mat-dialog.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given dialog tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-dialog.$prefix, tokens-mat-dialog.$prefix),
+    $overrides
   );
 }
 
@@ -70,8 +96,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {
     @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);
@@ -88,11 +113,16 @@
 
 @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-mdc-dialog.$prefix, map.get($tokens, tokens-mdc-dialog.$prefix));
+      tokens-mdc-dialog.$prefix,
+      map.get($tokens, tokens-mdc-dialog.$prefix)
+    );
     @include token-utils.create-token-values(
-      tokens-mat-dialog.$prefix, map.get($tokens, tokens-mat-dialog.$prefix));
+      tokens-mat-dialog.$prefix,
+      map.get($tokens, tokens-mat-dialog.$prefix)
+    );
   }
 }
diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss
index 0b2694c459ec..a2506279edf4 100644
--- a/src/material/divider/_divider-theme.scss
+++ b/src/material/divider/_divider-theme.scss
@@ -9,11 +9,12 @@
 @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-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens());
+        tokens-mat-divider.$prefix,
+        tokens-mat-divider.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -21,11 +22,12 @@
 @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-divider.$prefix,
-        tokens-mat-divider.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-divider.$prefix,
+        tokens-mat-divider.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -33,21 +35,35 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  } @else {
   }
-  @else {}
 }
 
 @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-divider.$prefix, tokens: tokens-mat-divider.get-token-slots()),
+    (
+      prefix: tokens-mat-divider.$prefix,
+      tokens: tokens-mat-divider.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given divider tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-divider.$prefix),
+    $overrides
   );
 }
 
@@ -55,8 +71,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') {
     @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);
@@ -73,9 +88,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-divider.$prefix, map.get($tokens, tokens-mat-divider.$prefix));
+      tokens-mat-divider.$prefix,
+      map.get($tokens, tokens-mat-divider.$prefix)
+    );
   }
 }
diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss
index 8b0acb394e06..8c26ee8eec8b 100644
--- a/src/material/expansion/_expansion-theme.scss
+++ b/src/material/expansion/_expansion-theme.scss
@@ -10,11 +10,12 @@
 @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-mat-expansion.$prefix, tokens-mat-expansion.get-unthemable-tokens());
+        tokens-mat-expansion.$prefix,
+        tokens-mat-expansion.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -22,11 +23,12 @@
 @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-expansion.$prefix,
-        tokens-mat-expansion.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-expansion.$prefix,
+        tokens-mat-expansion.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -34,14 +36,15 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
     $theme: inspection.private-get-typography-back-compat-theme($theme);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-expansion.$prefix,
-        tokens-mat-expansion.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-expansion.$prefix,
+        tokens-mat-expansion.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -49,11 +52,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-expansion.$prefix,
-        tokens-mat-expansion.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-expansion.$prefix,
+        tokens-mat-expansion.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -61,7 +65,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-expansion.$prefix, tokens: tokens-mat-expansion.get-token-slots()),
+    (
+      prefix: tokens-mat-expansion.$prefix,
+      tokens: tokens-mat-expansion.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given expansion tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-expansion.$prefix),
+    $overrides
   );
 }
 
@@ -69,8 +87,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {
     @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);
@@ -85,12 +102,14 @@
   }
 }
 
-
 @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-expansion.$prefix, map.get($tokens, tokens-mat-expansion.$prefix));
+      tokens-mat-expansion.$prefix,
+      map.get($tokens, tokens-mat-expansion.$prefix)
+    );
   }
 }
diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss
index 7ce5cb3acc9b..66a706f4a1a2 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -14,18 +14,20 @@
 @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-filled-text-field.$prefix,
-          tokens-mdc-filled-text-field.get-unthemable-tokens());
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-          tokens-mdc-outlined-text-field.$prefix,
-          tokens-mdc-outlined-text-field.get-unthemable-tokens());
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-          tokens-mat-form-field.$prefix,
-          tokens-mat-form-field.get-unthemable-tokens());
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -38,33 +40,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 {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-color-tokens($theme)
+      );
     }
 
     .mat-mdc-form-field.mat-accent {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent)
+      );
     }
 
     .mat-mdc-form-field.mat-warn {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn)
+      );
     }
   }
 }
@@ -74,15 +93,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-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -92,11 +116,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-form-field.$prefix,
-        tokens-mat-form-field.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -110,9 +135,33 @@
 
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mdc-filled-text-field.$prefix, tokens: $filled-text-field-tokens),
-    (prefix: tokens-mdc-outlined-text-field.$prefix, tokens: $outlined-text-field-tokens),
-    (prefix: tokens-mat-form-field.$prefix, tokens: $form-field-tokens),
+    (
+      prefix: tokens-mdc-filled-text-field.$prefix,
+      tokens: $filled-text-field-tokens,
+    ),
+    (
+      prefix: tokens-mdc-outlined-text-field.$prefix,
+      tokens: $outlined-text-field-tokens,
+    ),
+    (
+      prefix: tokens-mat-form-field.$prefix,
+      tokens: $form-field-tokens,
+    )
+  );
+}
+
+/// Returns the theme config with the given form-field tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(
+      tokens-mdc-filled-text-field.$prefix,
+      tokens-mdc-outlined-text-field.$prefix,
+      tokens-mat-form-field.$prefix
+    ),
+    $overrides
   );
 }
 
@@ -125,8 +174,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') {
     @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);
@@ -143,16 +191,30 @@
 
 @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-filled-text-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mdc-filled-text-field.$prefix, $options...);
-  $mdc-outlined-text-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mdc-outlined-text-field.$prefix, $options...);
-  $mat-form-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mat-form-field.$prefix, $options...);
-  @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-    $mdc-filled-text-field-tokens);
-  @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-    $mdc-outlined-text-field-tokens);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mdc-filled-text-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-filled-text-field.$prefix,
+    $options...
+  );
+  $mdc-outlined-text-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-outlined-text-field.$prefix,
+    $options...
+  );
+  $mat-form-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-form-field.$prefix,
+    $options...
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-filled-text-field.$prefix,
+    $mdc-filled-text-field-tokens
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-outlined-text-field.$prefix,
+    $mdc-outlined-text-field-tokens
+  );
   @include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens);
 }
diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss
index d7ac871c65f5..2296f5b54d0e 100644
--- a/src/material/grid-list/_grid-list-theme.scss
+++ b/src/material/grid-list/_grid-list-theme.scss
@@ -10,26 +10,27 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 // Include this empty mixin for consistency with the other components.
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  } @else {
   }
-  @else {}
 }
 
 @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-grid-list.$prefix,
-        tokens-mat-grid-list.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-grid-list.$prefix,
+        tokens-mat-grid-list.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -37,14 +38,28 @@
 @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-grid-list.$prefix, tokens: tokens-mat-grid-list.get-token-slots()),
+    (
+      prefix: tokens-mat-grid-list.$prefix,
+      tokens: tokens-mat-grid-list.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given grid-list tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-grid-list.$prefix),
+    $overrides
   );
 }
 
@@ -52,8 +67,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') {
     @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);
@@ -70,9 +84,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-grid-list.$prefix, map.get($tokens, tokens-mat-grid-list.$prefix));
+      tokens-mat-grid-list.$prefix,
+      map.get($tokens, tokens-mat-grid-list.$prefix)
+    );
   }
 }
diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss
index bee253f672eb..cc3ef2e85b8a 100644
--- a/src/material/icon/_icon-theme.scss
+++ b/src/material/icon/_icon-theme.scss
@@ -17,8 +17,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-icon.
@@ -29,11 +29,12 @@
 @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-icon.$prefix,
-        tokens-mat-icon.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-icon.$prefix,
+        tokens-mat-icon.get-color-tokens($theme)
+      );
     }
 
     .mat-icon {
@@ -57,8 +58,8 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs density theme styles for the mat-icon.
@@ -66,8 +67,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.
@@ -75,10 +76,20 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-icon.$prefix, tokens: tokens-mat-icon.get-token-slots()),
+    (
+      prefix: tokens-mat-icon.$prefix,
+      tokens: tokens-mat-icon.get-token-slots(),
+    )
   );
 }
 
+/// Returns the theme config with the given icon tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme($theme, sass-utils.list-of(tokens-mat-icon.$prefix), $overrides);
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
@@ -88,8 +99,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {
     @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);
@@ -106,7 +116,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-icon-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-icon.$prefix, $mat-icon-tokens);
 }
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index daa96261b4ab..5f784022da7e 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -15,13 +15,16 @@
   // Add default values for tokens not related to color, typography, or density.
   @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-list.$prefix, tokens-mdc-list.get-unthemable-tokens());
+        tokens-mdc-list.$prefix,
+        tokens-mdc-list.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mat-list.$prefix, tokens-mat-list.get-unthemable-tokens());
+        tokens-mat-list.$prefix,
+        tokens-mat-list.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -29,26 +32,33 @@
 @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-mdc-list.$prefix, tokens-mdc-list.get-color-tokens($theme));
+        tokens-mdc-list.$prefix,
+        tokens-mdc-list.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-list.$prefix, tokens-mat-list.get-color-tokens($theme));
+        tokens-mat-list.$prefix,
+        tokens-mat-list.get-color-tokens($theme)
+      );
     }
 
     .mdc-list-item__start,
     .mdc-list-item__end {
       @include token-utils.create-token-values(
-        tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, primary));
+        tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-color-tokens($theme, primary)
+      );
     }
 
     .mat-accent {
       .mdc-list-item__start,
       .mdc-list-item__end {
         @include token-utils.create-token-values(
-          tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, accent));
+          tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme, accent)
+        );
       }
     }
 
@@ -56,21 +66,29 @@
       .mdc-list-item__start,
       .mdc-list-item__end {
         @include token-utils.create-token-values(
-          tokens-mdc-radio.$prefix, tokens-mdc-radio.get-color-tokens($theme, warn));
+          tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme, warn)
+        );
       }
     }
 
     .mat-mdc-list-option {
       @include token-utils.create-token-values(
-        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, primary));
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme, primary)
+      );
     }
     .mat-mdc-list-option.mat-accent {
       @include token-utils.create-token-values(
-        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, accent));
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme, accent)
+      );
     }
     .mat-mdc-list-option.mat-warn {
       @include token-utils.create-token-values(
-        tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, warn));
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme, warn)
+      );
     }
 
     // There is no token for activated color on nav list.
@@ -101,21 +119,26 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     $density-scale: inspection.get-theme-density($theme);
 
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-        tokens-mdc-list.$prefix, tokens-mdc-list.get-density-tokens($theme));
+        tokens-mdc-list.$prefix,
+        tokens-mdc-list.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-list.$prefix, tokens-mat-list.get-density-tokens($theme));
+        tokens-mat-list.$prefix,
+        tokens-mat-list.get-density-tokens($theme)
+      );
     }
 
     .mdc-list-item__start,
     .mdc-list-item__end {
       @include token-utils.create-token-values(
-        tokens-mdc-radio.$prefix, tokens-mdc-radio.get-density-tokens($theme));
+        tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-density-tokens($theme)
+      );
     }
 
     // TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based
@@ -126,25 +149,31 @@
       &.mdc-list-item--with-leading-checkbox,
       &.mdc-list-item--with-leading-icon {
         &.mdc-list-item--with-one-line {
-          height: map.get((
-            0: 56px,
-            -1: 52px,
-            -2: 48px,
-            -3: 44px,
-            -4: 40px,
-            -5: 40px,
-          ), $density-scale);
+          height: map.get(
+            (
+              0: 56px,
+              -1: 52px,
+              -2: 48px,
+              -3: 44px,
+              -4: 40px,
+              -5: 40px,
+            ),
+            $density-scale
+          );
         }
 
         &.mdc-list-item--with-two-lines {
-          height: map.get((
-            0: 72px,
-            -1: 68px,
-            -2: 64px,
-            -3: 60px,
-            -4: 56px,
-            -5: 56px,
-          ), $density-scale);
+          height: map.get(
+            (
+              0: 72px,
+              -1: 68px,
+              -2: 64px,
+              -3: 60px,
+              -4: 56px,
+              -5: 56px,
+            ),
+            $density-scale
+          );
         }
       }
     }
@@ -154,13 +183,16 @@
 @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-list.$prefix, tokens-mdc-list.get-typography-tokens($theme));
+        tokens-mdc-list.$prefix,
+        tokens-mdc-list.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-list.$prefix, tokens-mat-list.get-typography-tokens($theme));
+        tokens-mat-list.$prefix,
+        tokens-mat-list.get-typography-tokens($theme)
+      );
     }
 
     // MDC does not have tokens for the subheader.
@@ -175,8 +207,25 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-list.$prefix, tokens: tokens-mat-list.get-token-slots()),
-    (prefix: tokens-mdc-list.$prefix, tokens: tokens-mdc-list.get-token-slots()),
+    (
+      prefix: tokens-mat-list.$prefix,
+      tokens: tokens-mat-list.get-token-slots(),
+    ),
+    (
+      prefix: tokens-mdc-list.$prefix,
+      tokens: tokens-mdc-list.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given list tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-list.$prefix, tokens-mat-list.$prefix),
+    $overrides
   );
 }
 
@@ -184,8 +233,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-list') {
     @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);
@@ -202,7 +250,8 @@
 
 @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'
+  );
   $mdc-list-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-list.$prefix);
   $mat-list-tokens: token-utils.get-tokens-for($tokens, tokens-mat-list.$prefix);
   @include token-utils.create-token-values(tokens-mdc-list.$prefix, $mdc-list-tokens);
diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss
index 2855984022aa..39f2554f2be7 100644
--- a/src/material/menu/_menu-theme.scss
+++ b/src/material/menu/_menu-theme.scss
@@ -10,11 +10,12 @@
 @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-mat-menu.$prefix,
-        tokens-mat-menu.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-menu.$prefix,
+        tokens-mat-menu.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -22,11 +23,12 @@
 @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-menu.$prefix,
-        tokens-mat-menu.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-menu.$prefix,
+        tokens-mat-menu.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -34,11 +36,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-menu.$prefix,
-        tokens-mat-menu.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-menu.$prefix,
+        tokens-mat-menu.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -46,23 +49,32 @@
 @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-menu.$prefix, tokens: tokens-mat-menu.get-token-slots()),
+    (
+      prefix: tokens-mat-menu.$prefix,
+      tokens: tokens-mat-menu.get-token-slots(),
+    )
   );
 }
 
+/// Returns the theme config with the given menu tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme($theme, sass-utils.list-of(tokens-mat-menu.$prefix), $overrides);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') {
     @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);
@@ -79,9 +91,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-menu.$prefix, map.get($tokens, tokens-mat-menu.$prefix));
+      tokens-mat-menu.$prefix,
+      map.get($tokens, tokens-mat-menu.$prefix)
+    );
   }
 }
diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss
index 2f7a1c5ed707..1bd96ee79dd7 100644
--- a/src/material/paginator/_paginator-theme.scss
+++ b/src/material/paginator/_paginator-theme.scss
@@ -11,18 +11,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-paginator.$prefix,
-        tokens-mat-paginator.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -30,27 +31,32 @@
 @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-paginator.$prefix,
-        tokens-mat-paginator.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-typography-tokens($theme)
+      );
     }
   }
 }
 
 @mixin density($theme) {
   $density-scale: inspection.get-theme-density($theme);
-  $form-field-density: if((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or
-    $density-scale == maximum, -4, $density-scale);
+  $form-field-density: if(
+    (meta.type-of($density-scale) == 'number' and $density-scale >= -4) or $density-scale == maximum,
+    -4,
+    $density-scale
+  );
 
   @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-paginator.$prefix,
-        tokens-mat-paginator.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -58,7 +64,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-paginator.$prefix, tokens: tokens-mat-paginator.get-token-slots()),
+    (
+      prefix: tokens-mat-paginator.$prefix,
+      tokens: tokens-mat-paginator.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given paginator tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-paginator.$prefix),
+    $overrides
   );
 }
 
@@ -66,8 +86,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') {
     @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);
@@ -84,9 +103,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-paginator.$prefix, map.get($tokens, tokens-mat-paginator.$prefix));
+      tokens-mat-paginator.$prefix,
+      map.get($tokens, tokens-mat-paginator.$prefix)
+    );
   }
 }
diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss
index 8003fb0d80d3..750e857d9b8c 100644
--- a/src/material/progress-bar/_progress-bar-theme.scss
+++ b/src/material/progress-bar/_progress-bar-theme.scss
@@ -74,6 +74,17 @@
   );
 }
 
+/// Returns the theme config with the given progress-bar tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+      $theme,
+      sass-utils.list-of(tokens-mdc-linear-progress.$prefix),
+      $overrides
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-progress-bar.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss
index e57c4780427b..42b016d7992f 100644
--- a/src/material/progress-spinner/_progress-spinner-theme.scss
+++ b/src/material/progress-spinner/_progress-spinner-theme.scss
@@ -11,11 +11,12 @@
 @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-circular-progress.$prefix,
-        tokens-mdc-circular-progress.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-circular-progress.$prefix,
+        tokens-mdc-circular-progress.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -28,20 +29,25 @@
 @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-mdc-circular-progress.$prefix,
-        tokens-mdc-circular-progress.get-color-tokens($theme, primary));
+      @include token-utils.create-token-values(
+        tokens-mdc-circular-progress.$prefix,
+        tokens-mdc-circular-progress.get-color-tokens($theme, primary)
+      );
 
       .mat-accent {
-        @include token-utils.create-token-values(tokens-mdc-circular-progress.$prefix,
-          tokens-mdc-circular-progress.get-color-tokens($theme, accent));
+        @include token-utils.create-token-values(
+          tokens-mdc-circular-progress.$prefix,
+          tokens-mdc-circular-progress.get-color-tokens($theme, accent)
+        );
       }
 
       .mat-warn {
-        @include token-utils.create-token-values(tokens-mdc-circular-progress.$prefix,
-          tokens-mdc-circular-progress.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values(
+          tokens-mdc-circular-progress.$prefix,
+          tokens-mdc-circular-progress.get-color-tokens($theme, warn)
+        );
       }
     }
   }
@@ -64,7 +70,21 @@
 
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mdc-circular-progress.$prefix, tokens: $circular-progress-tokens),
+    (
+      prefix: tokens-mdc-circular-progress.$prefix,
+      tokens: $circular-progress-tokens,
+    )
+  );
+}
+
+/// Returns the theme config with the given progress-spinner tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-circular-progress.$prefix),
+    $overrides
   );
 }
 
@@ -77,8 +97,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
     @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);
@@ -95,9 +114,15 @@
 
 @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-circular-progress-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mdc-circular-progress.$prefix, $options...);
-  @include token-utils.create-token-values(tokens-mdc-circular-progress.$prefix,
-    $mdc-circular-progress-tokens);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mdc-circular-progress-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-circular-progress.$prefix,
+    $options...
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-circular-progress.$prefix,
+    $mdc-circular-progress-tokens
+  );
 }
diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
index 7e79d83f5973..11cf20f01e80 100644
--- a/src/material/radio/_radio-theme.scss
+++ b/src/material/radio/_radio-theme.scss
@@ -105,6 +105,17 @@
   );
 }
 
+/// Returns the theme config with the given radio tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-radio.$prefix, tokens-mat-radio.$prefix),
+    $overrides
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-radio.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss
index dd3d4aac1a99..f3126a21eb00 100644
--- a/src/material/select/_select-theme.scss
+++ b/src/material/select/_select-theme.scss
@@ -13,8 +13,7 @@
 @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() {
       $mat-tokens: tokens-mat-select.get-unthemable-tokens();
       @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-tokens);
@@ -30,20 +29,25 @@
 @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-select.$prefix,
-        tokens-mat-select.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-select.$prefix,
+        tokens-mat-select.get-color-tokens($theme)
+      );
 
       .mat-mdc-form-field.mat-accent {
-        @include token-utils.create-token-values(tokens-mat-select.$prefix,
-          tokens-mat-select.get-color-tokens($theme, accent));
+        @include token-utils.create-token-values(
+          tokens-mat-select.$prefix,
+          tokens-mat-select.get-color-tokens($theme, accent)
+        );
       }
 
       .mat-mdc-form-field.mat-warn {
-        @include token-utils.create-token-values(tokens-mat-select.$prefix,
-          tokens-mat-select.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values(
+          tokens-mat-select.$prefix,
+          tokens-mat-select.get-color-tokens($theme, warn)
+        );
       }
     }
   }
@@ -54,11 +58,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-select.$prefix,
-        tokens-mat-select.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-select.$prefix,
+        tokens-mat-select.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -68,11 +73,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-select.$prefix,
-        tokens-mat-select.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-select.$prefix,
+        tokens-mat-select.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -82,7 +88,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-select.$prefix, tokens: tokens-mat-select.get-token-slots()),
+    (
+      prefix: tokens-mat-select.$prefix,
+      tokens: tokens-mat-select.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given select tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-select.$prefix),
+    $overrides
   );
 }
 
@@ -95,8 +115,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') {
     @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);
@@ -113,7 +132,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-select-tokens: token-utils.get-tokens-for($tokens, tokens-mat-select.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-select.$prefix, $mat-select-tokens);
 }
diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss
index bc1f5f5683dc..605eba7765dd 100644
--- a/src/material/sidenav/_sidenav-theme.scss
+++ b/src/material/sidenav/_sidenav-theme.scss
@@ -9,11 +9,12 @@
 @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-mat-sidenav.$prefix, tokens-mat-sidenav.get-unthemable-tokens());
+        tokens-mat-sidenav.$prefix,
+        tokens-mat-sidenav.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -21,11 +22,12 @@
 @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-sidenav.$prefix,
-        tokens-mat-sidenav.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-sidenav.$prefix,
+        tokens-mat-sidenav.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -33,21 +35,35 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  } @else {
   }
-  @else {}
 }
 
 @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-sidenav.$prefix, tokens: tokens-mat-sidenav.get-token-slots()),
+    (
+      prefix: tokens-mat-sidenav.$prefix,
+      tokens: tokens-mat-sidenav.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given sidenav tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-sidenav.$prefix),
+    $overrides
   );
 }
 
@@ -55,8 +71,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') {
     @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);
@@ -73,9 +88,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-sidenav.$prefix, map.get($tokens, tokens-mat-sidenav.$prefix));
+      tokens-mat-sidenav.$prefix,
+      map.get($tokens, tokens-mat-sidenav.$prefix)
+    );
   }
 }
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index 5b569b1a748c..3ad9d2d4c695 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -122,6 +122,17 @@
   );
 }
 
+/// Returns the theme config with the given slide-toggle tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-switch.$prefix, tokens-mat-switch.$prefix),
+    $overrides
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index 58929ed25473..40ca40d411e1 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-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 {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
-        tokens-mdc-slider.get-unthemable-tokens());
-      @include token-utils.create-token-values(tokens-mat-slider.$prefix,
-        tokens-mat-slider.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-unthemable-tokens()
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-slider.$prefix,
+        tokens-mat-slider.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -32,57 +35,68 @@
 @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-mdc-slider.$prefix,
-        tokens-mdc-slider.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-slider.$prefix,
-        tokens-mat-slider.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-slider.$prefix,
+        tokens-mat-slider.get-color-tokens($theme)
+      );
 
       .mat-accent {
-        @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
-          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
-        @include token-utils.create-token-values(tokens-mat-slider.$prefix,
-          tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent));
+        @include token-utils.create-token-values(
+          tokens-mdc-slider.$prefix,
+          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent)
+        );
+        @include token-utils.create-token-values(
+          tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent)
+        );
       }
 
       .mat-warn {
-        @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
-          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
-        @include token-utils.create-token-values(tokens-mat-slider.$prefix,
-          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(
+          tokens-mdc-slider.$prefix,
+          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn)
+        );
+        @include token-utils.create-token-values(
+          tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn)
+        );
       }
     }
   }
 }
 
-
 /// Outputs typography theme styles for the mat-slider.
 /// @param {Map} $theme The theme to generate typography styles for.
 @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-slider.$prefix,
-        tokens-mdc-slider.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-typography-tokens($theme)
+      );
     }
   }
 }
 
-
 /// Outputs density theme styles for the mat-slider.
 /// @param {Map} $theme The theme to generate density styles for.
 @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-slider.$prefix,
-        tokens-mdc-slider.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -92,8 +106,25 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-slider.$prefix, tokens: tokens-mat-slider.get-token-slots()),
-    (prefix: tokens-mdc-slider.$prefix, tokens: tokens-mdc-slider.get-token-slots()),
+    (
+      prefix: tokens-mat-slider.$prefix,
+      tokens: tokens-mat-slider.get-token-slots(),
+    ),
+    (
+      prefix: tokens-mdc-slider.$prefix,
+      tokens: tokens-mdc-slider.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given slider tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-slider.$prefix, tokens-mat-slider.$prefix),
+    $overrides
   );
 }
 
@@ -106,8 +137,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {
     @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);
@@ -124,7 +154,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-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...);
   $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mdc-slider.$prefix, $mdc-slider-tokens);
diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss
index 76ca26de5b18..f82b86a9af32 100644
--- a/src/material/snack-bar/_snack-bar-theme.scss
+++ b/src/material/snack-bar/_snack-bar-theme.scss
@@ -11,8 +11,7 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
@@ -26,8 +25,7 @@
 @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-mdc-snack-bar.$prefix,
@@ -44,8 +42,7 @@
 @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-snack-bar.$prefix,
@@ -55,15 +52,33 @@
   }
 }
 
-@mixin density($theme) {}
+@mixin density($theme) {
+}
 
 /// 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-snack-bar.$prefix, tokens: tokens-mdc-snack-bar.get-token-slots()),
-    (prefix: tokens-mat-snack-bar.$prefix, tokens: tokens-mat-snack-bar.get-token-slots()),
+    (
+      prefix: tokens-mdc-snack-bar.$prefix,
+      tokens: tokens-mdc-snack-bar.get-token-slots(),
+    ),
+    (
+      prefix: tokens-mat-snack-bar.$prefix,
+      tokens: tokens-mat-snack-bar.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given snackbar tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mdc-snack-bar.$prefix, tokens-mat-snack-bar.$prefix),
+    $overrides
   );
 }
 
@@ -71,8 +86,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
     @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);
@@ -89,11 +103,16 @@
 
 @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-mdc-snack-bar.$prefix, map.get($tokens, tokens-mdc-snack-bar.$prefix));
+      tokens-mdc-snack-bar.$prefix,
+      map.get($tokens, tokens-mdc-snack-bar.$prefix)
+    );
     @include token-utils.create-token-values(
-        tokens-mat-snack-bar.$prefix, map.get($tokens, tokens-mat-snack-bar.$prefix));
+      tokens-mat-snack-bar.$prefix,
+      map.get($tokens, tokens-mat-snack-bar.$prefix)
+    );
   }
 }
diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss
index b855a57e2b35..7821f14dc333 100644
--- a/src/material/sort/_sort-theme.scss
+++ b/src/material/sort/_sort-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-sort.$prefix,
-        tokens-mat-sort.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-sort.$prefix,
+        tokens-mat-sort.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-sort.$prefix,
-        tokens-mat-sort.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-sort.$prefix,
+        tokens-mat-sort.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -41,11 +43,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-sort.$prefix,
-        tokens-mat-sort.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-sort.$prefix,
+        tokens-mat-sort.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -53,16 +56,25 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-sort.$prefix, tokens: tokens-mat-sort.get-token-slots()),
+    (
+      prefix: tokens-mat-sort.$prefix,
+      tokens: tokens-mat-sort.get-token-slots(),
+    )
   );
 }
 
+/// Returns the theme config with the given sort tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme($theme, sass-utils.list-of(tokens-mat-sort.$prefix), $overrides);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {
     @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);
@@ -79,9 +91,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-sort.$prefix, map.get($tokens, tokens-mat-sort.$prefix));
+      tokens-mat-sort.$prefix,
+      map.get($tokens, tokens-mat-sort.$prefix)
+    );
   }
 }
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
index 590d32e1c747..9b28c01782aa 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-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 mat-stepper.
@@ -24,20 +24,25 @@
 @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-stepper.$prefix,
-        tokens-mat-stepper.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-stepper.$prefix,
+        tokens-mat-stepper.get-color-tokens($theme)
+      );
 
       .mat-step-header.mat-accent {
-        @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent));
+        @include token-utils.create-token-values(
+          tokens-mat-stepper.$prefix,
+          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent)
+        );
       }
 
       .mat-step-header.mat-warn {
-        @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(
+          tokens-mat-stepper.$prefix,
+          tokens-mat-stepper.private-get-color-palette-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-stepper.$prefix,
-        tokens-mat-stepper.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-stepper.$prefix,
+        tokens-mat-stepper.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -62,11 +68,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-stepper.$prefix,
-        tokens-mat-stepper.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-stepper.$prefix,
+        tokens-mat-stepper.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -76,7 +83,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-stepper.$prefix, tokens: tokens-mat-stepper.get-token-slots()),
+    (
+      prefix: tokens-mat-stepper.$prefix,
+      tokens: tokens-mat-stepper.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given stepper tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-stepper.$prefix),
+    $overrides
   );
 }
 
@@ -85,12 +106,11 @@
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
 ///   $color-variant: The color variant to use for the stepper: primary, secondary,
 ///   tertiary, or error (If not specified, primary color values will be used).
-@mixin theme($theme,  $options...) {
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
     @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);
@@ -107,14 +127,14 @@
 
 @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'
+  );
   @if ($tokens != ()) {
     $mat-stepper-tokens: token-utils.get-tokens-for(
       $tokens,
       tokens-mat-stepper.$prefix,
       $options...
     );
-    @include token-utils.create-token-values(
-        tokens-mat-stepper.$prefix, $mat-stepper-tokens);
+    @include token-utils.create-token-values(tokens-mat-stepper.$prefix, $mat-stepper-tokens);
   }
 }
diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss
index 06a5292a8515..6f5671301f12 100644
--- a/src/material/table/_table-theme.scss
+++ b/src/material/table/_table-theme.scss
@@ -10,11 +10,12 @@
 @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-mat-table.$prefix, tokens-mat-table.get-unthemable-tokens());
+        tokens-mat-table.$prefix,
+        tokens-mat-table.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -22,11 +23,12 @@
 @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-table.$prefix,
-        tokens-mat-table.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-table.$prefix,
+        tokens-mat-table.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -34,11 +36,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-table.$prefix,
-        tokens-mat-table.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-table.$prefix,
+        tokens-mat-table.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -46,11 +49,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-table.$prefix,
-        tokens-mat-table.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-table.$prefix,
+        tokens-mat-table.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -58,7 +62,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-table.$prefix, tokens: tokens-mat-table.get-token-slots()),
+    (
+      prefix: tokens-mat-table.$prefix,
+      tokens: tokens-mat-table.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given table tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-table.$prefix),
+    $overrides
   );
 }
 
@@ -66,8 +84,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') {
     @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);
@@ -84,9 +101,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-table.$prefix, map.get($tokens, tokens-mat-table.$prefix));
+      tokens-mat-table.$prefix,
+      map.get($tokens, tokens-mat-table.$prefix)
+    );
   }
 }
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index 348139743a32..1b87ddff628b 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -147,6 +147,22 @@
   );
 }
 
+/// Returns the theme config with the given tabs tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+      $theme,
+      sass-utils.list-of(
+          tokens-mdc-tab.$prefix,
+          tokens-mdc-tab-indicator.$prefix,
+          tokens-mat-tab-header.$prefix,
+          tokens-mat-tab-header-with-background.$prefix
+      ),
+      $overrides
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-tab.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss
index a920caa8fb3f..3f5439f0c767 100644
--- a/src/material/toolbar/_toolbar-theme.scss
+++ b/src/material/toolbar/_toolbar-theme.scss
@@ -17,16 +17,18 @@
   );
 }
 
-@mixin base($theme) {}
+@mixin base($theme) {
+}
 
 @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-toolbar.$prefix,
-        tokens-mat-toolbar.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-toolbar.$prefix,
+        tokens-mat-toolbar.get-color-tokens($theme)
+      );
     }
 
     .mat-toolbar {
@@ -48,14 +50,15 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
     $theme: inspection.private-get-typography-back-compat-theme($theme);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
-        tokens-mat-toolbar.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-toolbar.$prefix,
+        tokens-mat-toolbar.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -63,11 +66,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-toolbar.$prefix,
-        tokens-mat-toolbar.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-toolbar.$prefix,
+        tokens-mat-toolbar.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -77,7 +81,21 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-toolbar.$prefix, tokens: tokens-mat-toolbar.get-token-slots()),
+    (
+      prefix: tokens-mat-toolbar.$prefix,
+      tokens: tokens-mat-toolbar.get-token-slots(),
+    )
+  );
+}
+
+/// Returns the theme config with the given toolbar tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+    $theme,
+    sass-utils.list-of(tokens-mat-toolbar.$prefix),
+    $overrides
   );
 }
 
@@ -85,8 +103,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
     @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);
@@ -103,9 +120,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-toolbar.$prefix,
-      map.get($tokens, tokens-mat-toolbar.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-toolbar.$prefix,
+      map.get($tokens, tokens-mat-toolbar.$prefix)
+    );
   }
 }
diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss
index 5615194ada4b..0de804912dde 100644
--- a/src/material/tooltip/_tooltip-theme.scss
+++ b/src/material/tooltip/_tooltip-theme.scss
@@ -70,6 +70,17 @@
   );
 }
 
+/// Returns the theme config with the given tooltip tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme(
+      $theme,
+      sass-utils.list-of(tokens-mdc-plain-tooltip.$prefix),
+      $overrides
+  );
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') {
     @if inspection.get-theme-version($theme) == 1 {
diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss
index 3f941e1c8b46..e0316988cb71 100644
--- a/src/material/tree/_tree-theme.scss
+++ b/src/material/tree/_tree-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-tree.$prefix,
-        tokens-mat-tree.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-tree.$prefix,
+        tokens-mat-tree.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -29,14 +30,15 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
     $theme: inspection.private-get-typography-back-compat-theme($theme);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-tree.$prefix,
-        tokens-mat-tree.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-tree.$prefix,
+        tokens-mat-tree.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -44,13 +46,14 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     $density-scale: inspection.get-theme-density($theme);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-tree.$prefix,
-        tokens-mat-tree.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-tree.$prefix,
+        tokens-mat-tree.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -58,16 +61,25 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-tree.$prefix, tokens: tokens-mat-tree.get-token-slots()),
+    (
+      prefix: tokens-mat-tree.$prefix,
+      tokens: tokens-mat-tree.get-token-slots(),
+    )
   );
 }
 
+/// Returns the theme config with the given tree tokens overridden.
+/// @param {Map} $theme An M3 material theme.
+/// @param {Map} $overrides The token values to override in the theme.
+@function extend-theme($theme, $overrides: ()) {
+  @return token-utils.extend-theme($theme, sass-utils.list-of(tokens-mat-tree.$prefix), $overrides);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') {
     @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);
@@ -84,9 +96,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-tree.$prefix, map.get($tokens, tokens-mat-tree.$prefix));
+      tokens-mat-tree.$prefix,
+      map.get($tokens, tokens-mat-tree.$prefix)
+    );
   }
 }

From e0d46a45525da00c8e087dd78efee64ef61434f8 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 18 Jun 2024 13:54:51 -0700
Subject: [PATCH 4/5] fix(material/theming): add validation for
 <component>-extend-theme functions

Adds a test to validate that the individual extend-theme functions do
not have issues with unhandled overlapping short token names, and fixes
issues that were uncovered.
---
 .../core/theming/tests/m3-theme.spec.ts       | 208 +++++++++++-------
 src/material/core/tokens/_token-utils.scss    |  20 +-
 2 files changed, 142 insertions(+), 86 deletions(-)

diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts
index 61db15a1ef2e..a2818c6e2fea 100644
--- a/src/material/core/theming/tests/m3-theme.spec.ts
+++ b/src/material/core/theming/tests/m3-theme.spec.ts
@@ -169,95 +169,147 @@ describe('M3 theme', () => {
       expect(css).toContain('--mdc-checkbox-selected-checkmark-color: magenta');
       expect(css).toContain('--mdc-checkbox-selected-checkmark-color: cyan');
     });
-  });
-
-  it('should error if used on M2 theme', () => {
-    expect(() =>
-      transpile(`
-        @use '../../tokens/token-utils';
 
-        $theme: mat.m2-define-light-theme(mat.$m2-red-palette, mat.$m2-red-palette);
-
-        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
-          selected-checkmark-color: magenta
-        ));
+    it('should error if used on M2 theme', () => {
+      expect(() =>
+        transpile(`
+          @use '../../tokens/token-utils';
 
-        html {
-          @include mat.checkbox-theme($theme);
-        }
-      `),
-    ).toThrowError(/The `extend-theme` functions are only supported for M3 themes/);
-  });
-
-  it('should error on invalid namespace', () => {
-    expect(() =>
-      transpile(`
-        @use '../../tokens/token-utils';
+          $theme: mat.m2-define-light-theme(mat.$m2-red-palette, mat.$m2-red-palette);
 
-        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbocks)), (
-          selected-checkmark-color: magenta
-        ));
-
-        html {
-          @include mat.checkbox-theme($theme);
-        }
-      `),
-    ).toThrowError(
-      /Error extending theme: Theme does not have tokes for namespace `\(mat, checkbocks\)`/,
-    );
-  });
+          $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+            selected-checkmark-color: magenta
+          ));
 
-  it('should error on ambiguous shorthand token name', () => {
-    expect(() =>
-      transpile(`
-        @use '../../tokens/token-utils';
+          html {
+            @include mat.checkbox-theme($theme);
+          }
+        `),
+      ).toThrowError(/The `extend-theme` functions are only supported for M3 themes/);
+    });
 
-        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mdc, radio)), (
-          selected-checkmark-color: magenta
-        ));
+    it('should error on invalid namespace', () => {
+      expect(() =>
+        transpile(`
+          @use '../../tokens/token-utils';
 
-        html {
-          @include mat.checkbox-theme($theme);
-        }
-      `),
-    ).toThrowError(
-      /Error extending theme: Ambiguous token name `.*` exists in multiple namespaces: `\(mdc, checkbox\)` and `\(mdc, radio\)`/,
-    );
-  });
+          $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbocks)), (
+            selected-checkmark-color: magenta
+          ));
+
+          html {
+            @include mat.checkbox-theme($theme);
+          }
+        `),
+      ).toThrowError(
+        /Error extending theme: Theme does not have tokens for namespace `\(mat, checkbocks\)`/,
+      );
+    });
 
-  it('should error on unknown variant', () => {
-    expect(() =>
-      transpile(`
-        @use '../../tokens/token-utils';
+    it('should error on ambiguous shorthand token name', () => {
+      expect(() =>
+        transpile(`
+          @use '../../tokens/token-utils';
 
-        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
-          accent: (
+          $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mdc, radio)), (
             selected-checkmark-color: magenta
-          )
-        ));
-
-        html {
-          @include mat.checkbox-theme($theme);
-        }
-      `),
-    ).toThrowError(
-      /Error extending theme: Unrecognized color variant `accent`. Allowed variants are: primary, secondary, tertiary, error, surface/,
-    );
-  });
+          ));
+
+          html {
+            @include mat.checkbox-theme($theme);
+          }
+        `),
+      ).toThrowError(
+        /Error extending theme: Ambiguous token name `.*` exists in multiple namespaces: `\(mdc, checkbox\)` and `\(mdc, radio\)`/,
+      );
+    });
 
-  it('should error on unknown token', () => {
-    expect(() =>
-      transpile(`
-        @use '../../tokens/token-utils';
+    it('should error on unknown variant', () => {
+      expect(() =>
+        transpile(`
+          @use '../../tokens/token-utils';
+
+          $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+            accent: (
+              selected-checkmark-color: magenta
+            )
+          ));
+
+          html {
+            @include mat.checkbox-theme($theme);
+          }
+        `),
+      ).toThrowError(
+        /Error extending theme: Unrecognized color variant `accent`. Allowed variants are: primary, secondary, tertiary, error, surface/,
+      );
+    });
 
-        $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
-          fake-token: red
-        ));
+    it('should error on unknown token', () => {
+      expect(() =>
+        transpile(`
+          @use '../../tokens/token-utils';
+
+          $theme: token-utils.extend-theme($theme, ((mdc, checkbox), (mat, checkbox)), (
+            fake-token: red
+          ));
+
+          html {
+            @include mat.checkbox-theme($theme);
+          }
+        `),
+      ).toThrowError(
+        /Error extending theme: Unrecognized token `fake-token`. Allowed tokens are: /,
+      );
+    });
 
-        html {
-          @include mat.checkbox-theme($theme);
-        }
-      `),
-    ).toThrowError(/Error extending theme: Unrecognized token `fake-token`. Allowed tokens are: /);
+    it('should not error when calling component extend-theme functions', () => {
+      // Ensures that no components have issues with ambiguous token names.
+      expect(() =>
+        transpile(`
+          $theme: mat.core-extend-theme($theme, ());
+          $theme: mat.ripple-extend-theme($theme, ());
+          $theme: mat.option-extend-theme($theme, ());
+          $theme: mat.optgroup-extend-theme($theme, ());
+          $theme: mat.pseudo-checkbox-extend-theme($theme, ());
+          $theme: mat.autocomplete-extend-theme($theme, ());
+          $theme: mat.badge-extend-theme($theme, ());
+          $theme: mat.bottom-sheet-extend-theme($theme, ());
+          $theme: mat.button-extend-theme($theme, ());
+          $theme: mat.fab-extend-theme($theme, ());
+          $theme: mat.icon-button-extend-theme($theme, ());
+          $theme: mat.button-toggle-extend-theme($theme, ());
+          $theme: mat.card-extend-theme($theme, ());
+          $theme: mat.checkbox-extend-theme($theme, ());
+          $theme: mat.chips-extend-theme($theme, ());
+          $theme: mat.datepicker-extend-theme($theme, ());
+          $theme: mat.dialog-extend-theme($theme, ());
+          $theme: mat.divider-extend-theme($theme, ());
+          $theme: mat.expansion-extend-theme($theme, ());
+          $theme: mat.form-field-extend-theme($theme, ());
+          $theme: mat.grid-list-extend-theme($theme, ());
+          $theme: mat.icon-extend-theme($theme, ());
+          $theme: mat.list-extend-theme($theme, ());
+          $theme: mat.menu-extend-theme($theme, ());
+          $theme: mat.paginator-extend-theme($theme, ());
+          $theme: mat.progress-bar-extend-theme($theme, ());
+          $theme: mat.progress-spinner-extend-theme($theme, ());
+          $theme: mat.radio-extend-theme($theme, ());
+          $theme: mat.select-extend-theme($theme, ());
+          $theme: mat.sidenav-extend-theme($theme, ());
+          $theme: mat.slide-toggle-extend-theme($theme, ());
+          $theme: mat.slider-extend-theme($theme, ());
+          $theme: mat.snack-bar-extend-theme($theme, ());
+          $theme: mat.sort-extend-theme($theme, ());
+          $theme: mat.stepper-extend-theme($theme, ());
+          $theme: mat.table-extend-theme($theme, ());
+          $theme: mat.tabs-extend-theme($theme, ());
+          $theme: mat.toolbar-extend-theme($theme, ());
+          $theme: mat.tooltip-extend-theme($theme, ());
+          $theme: mat.tree-extend-theme($theme, ());
+
+          @include mat.all-component-themes($theme);
+        `),
+      ).not.toThrow();
+    });
   });
 });
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index 2837ef18c951..a05c9fdc6a04 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -268,21 +268,25 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
   // Determine which system and namespace each shorthand token belongs to.
   $seen-tokens: ();
   @each $namespace in $extend-namespaces {
+    $namespace-found: false;
     @each $system in $systems {
       $tokens: map.get($theme, $internals, $system, $namespace);
-      @if $tokens == null {
-        @error #{'Error extending theme: Theme does not have tokes for namespace `('}#{$namespace}#{
-          ')`'};
-      }
-      @each $name, $value in $tokens {
-        @if map.has-key($seen-tokens, $name) {
-          @error #{'Error extending theme: Ambiguous token name `'}#{$name}#{
+      @if ($tokens != null) {
+        $namespace-found: true;
+        @each $name, $value in $tokens {
+          @if map.has-key($seen-tokens, $name) {
+            @error #{'Error extending theme: Ambiguous token name `'}#{$name}#{
             '` exists in multiple namespaces: `('}#{list.nth(map.get($seen-tokens, $name), 1)}#{
               ')` and `('}#{$namespace}#{')`'};
+          }
+          $seen-tokens: map.set($seen-tokens, $name, ($namespace, $system));
         }
-        $seen-tokens: map.set($seen-tokens, $name, ($namespace, $system));
       }
     }
+    @if not $namespace-found {
+      @error #{'Error extending theme: Theme does not have tokens for namespace `('}#{
+        $namespace}#{')`'};
+    }
   }
 
   // Update internal tokens based on given overrides.

From d8ec11c3704c0ea9fdcba6d8ca98a3d4b825a131 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Thu, 27 Jun 2024 15:50:20 -0700
Subject: [PATCH 5/5] fix(material/theming): disambiguate token names in
 extend-theme functions

Avoids token name collisions between namespaces by assigning string
prefixes to token in namespaces that would otherwise have a collision
---
 src/material/button/_button-theme.scss        | 40 ++++++++--
 src/material/button/_fab-theme.scss           | 15 +++-
 src/material/card/_card-theme.scss            | 18 +++--
 src/material/chips/_chips-theme.scss          |  1 +
 src/material/core/_core-theme.scss            | 30 ++++++--
 .../_pseudo-checkbox-theme.scss               | 10 ++-
 .../core/theming/tests/m3-theme.spec.ts       | 75 ++++++++++++++++++-
 src/material/core/tokens/_token-utils.scss    | 25 +++++--
 .../form-field/_form-field-theme.scss         | 10 ++-
 src/material/paginator/_paginator-theme.scss  |  3 +-
 src/material/tabs/_tabs-theme.scss            | 21 ++----
 11 files changed, 200 insertions(+), 48 deletions(-)

diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 7b82f8a37dd1..d9c8058b3d68 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -417,14 +417,38 @@
   @return token-utils.extend-theme(
     $theme,
     sass-utils.list-of(
-      tokens-mdc-filled-button.$prefix,
-      tokens-mdc-outlined-button.$prefix,
-      tokens-mdc-protected-button.$prefix,
-      tokens-mdc-text-button.$prefix,
-      tokens-mat-filled-button.$prefix,
-      tokens-mat-outlined-button.$prefix,
-      tokens-mat-protected-button.$prefix,
-      tokens-mat-text-button.$prefix
+      (
+        namespace: tokens-mdc-filled-button.$prefix,
+        prefix: 'filled-',
+      ),
+      (
+        namespace: tokens-mdc-outlined-button.$prefix,
+        prefix: 'outlined-',
+      ),
+      (
+        namespace: tokens-mdc-protected-button.$prefix,
+        prefix: 'protected-',
+      ),
+      (
+        namespace: tokens-mdc-text-button.$prefix,
+        prefix: 'text-',
+      ),
+      (
+        namespace: tokens-mat-filled-button.$prefix,
+        prefix: 'filled-',
+      ),
+      (
+        namespace: tokens-mat-outlined-button.$prefix,
+        prefix: 'outlined-',
+      ),
+      (
+        namespace: tokens-mat-protected-button.$prefix,
+        prefix: 'protected-',
+      ),
+      (
+        namespace: tokens-mat-text-button.$prefix,
+        prefix: 'text-',
+      )
     ),
     $overrides
   );
diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
index 1acd56128822..c92ba73b680b 100644
--- a/src/material/button/_fab-theme.scss
+++ b/src/material/button/_fab-theme.scss
@@ -194,10 +194,19 @@
     $theme,
     sass-utils.list-of(
       tokens-mdc-fab.$prefix,
-      tokens-mdc-fab-small.$prefix,
-      tokens-mdc-extended-fab.$prefix,
+      (
+        namespace: tokens-mdc-fab-small.$prefix,
+        prefix: 'small-',
+      ),
+      (
+        namespace: tokens-mdc-extended-fab.$prefix,
+        prefix: 'extended-',
+      ),
       tokens-mat-fab.$prefix,
-      tokens-mat-fab-small.$prefix
+      (
+        namespace: tokens-mat-fab-small.$prefix,
+        prefix: 'small-',
+      )
     ),
     $overrides
   );
diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss
index 6cab8352b26f..f993a0d42fdd 100644
--- a/src/material/card/_card-theme.scss
+++ b/src/material/card/_card-theme.scss
@@ -87,13 +87,19 @@
 /// @param {Map} $overrides The token values to override in the theme.
 @function extend-theme($theme, $overrides: ()) {
   @return token-utils.extend-theme(
-      $theme,
-      sass-utils.list-of(
-          tokens-mdc-elevated-card.$prefix,
-          tokens-mdc-outlined-card.$prefix,
-          tokens-mat-card.$prefix
+    $theme,
+    sass-utils.list-of(
+      (
+        namespace: tokens-mdc-elevated-card.$prefix,
+        prefix: 'elevated-',
       ),
-      $overrides
+      (
+        namespace: tokens-mdc-outlined-card.$prefix,
+        prefix: 'outlined-',
+      ),
+      tokens-mat-card.$prefix
+    ),
+    $overrides
   );
 }
 
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index e748fd77185d..18165932b6d6 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
 @use '../core/tokens/m2/mat/chip' as tokens-mat-chip;
 @use '../core/tokens/token-utils';
diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss
index 9c037fb72110..6ac71eb4d38b 100644
--- a/src/material/core/_core-theme.scss
+++ b/src/material/core/_core-theme.scss
@@ -101,12 +101,30 @@
   @return token-utils.extend-theme(
     $theme,
     sass-utils.list-of(
-      tokens-mat-app.$prefix,
-      tokens-mat-ripple.$prefix,
-      tokens-mat-option.$prefix,
-      tokens-mat-optgroup.$prefix,
-      tokens-mat-full-pseudo-checkbox.$prefix,
-      tokens-mat-minimal-pseudo-checkbox.$prefix
+      (
+        namespace: tokens-mat-app.$prefix,
+        prefix: 'app-',
+      ),
+      (
+        namespace: tokens-mat-ripple.$prefix,
+        prefix: 'ripple-',
+      ),
+      (
+        namespace: tokens-mat-option.$prefix,
+        prefix: 'option-',
+      ),
+      (
+        namespace: tokens-mat-optgroup.$prefix,
+        prefix: 'optgroup-',
+      ),
+      (
+        namespace: tokens-mat-full-pseudo-checkbox.$prefix,
+        prefix: 'pseudo-checkbox-full-',
+      ),
+      (
+        namespace: tokens-mat-minimal-pseudo-checkbox.$prefix,
+        prefix: 'pseudo-checkbox-minimal-',
+      )
     ),
     $overrides
   );
diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index 02e0563bb09a..1704d7bdd7f8 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -75,8 +75,14 @@
   @return token-utils.extend-theme(
     $theme,
     sass-utils.list-of(
-      tokens-mat-full-pseudo-checkbox.$prefix,
-      tokens-mat-minimal-pseudo-checkbox.$prefix
+      (
+        namespace: tokens-mat-full-pseudo-checkbox.$prefix,
+        prefix: 'full-',
+      ),
+      (
+        namespace: tokens-mat-minimal-pseudo-checkbox.$prefix,
+        prefix: 'minimal-',
+      )
     ),
     $overrides
   );
diff --git a/src/material/core/theming/tests/m3-theme.spec.ts b/src/material/core/theming/tests/m3-theme.spec.ts
index a2818c6e2fea..d0ee960f79ce 100644
--- a/src/material/core/theming/tests/m3-theme.spec.ts
+++ b/src/material/core/theming/tests/m3-theme.spec.ts
@@ -262,6 +262,77 @@ describe('M3 theme', () => {
       );
     });
 
+    it('should allow accessing a namespace with a prefix', () => {
+      const css = transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme,
+          (
+            (namespace: (mat, minimal-pseudo-checkbox), prefix: 'minimal-'),
+            (mat, full-pseudo-checkbox)
+          ),
+          (
+            minimal-selected-checkmark-color: magenta,
+            selected-checkmark-color: cyan
+          )
+        );
+
+        html {
+          @include mat.pseudo-checkbox-theme($theme);
+        }
+      `);
+
+      expect(css).toContain('--mat-minimal-pseudo-checkbox-selected-checkmark-color: magenta');
+      expect(css).toContain('--mat-full-pseudo-checkbox-selected-checkmark-color: cyan');
+    });
+
+    it('should not allow accessing a prefixed namespace without its prefix', () => {
+      expect(() =>
+        transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme,
+          (
+            (namespace: (mat, minimal-pseudo-checkbox), prefix: 'minimal-'),
+          ),
+          (
+            selected-checkmark-color: magenta
+          )
+        );
+
+        html {
+          @include mat.pseudo-checkbox-theme($theme);
+        }
+        `),
+      ).toThrowError(
+        /Error extending theme: Unrecognized token `selected-checkmark-color`. Allowed tokens are:.* minimal-selected-checkmark-color/,
+      );
+    });
+
+    it('should detect name collisions that remain after prefixes are applied', () => {
+      expect(() =>
+        transpile(`
+        @use '../../tokens/token-utils';
+
+        $theme: token-utils.extend-theme($theme,
+          (
+            (namespace: (mat, minimal-pseudo-checkbox), prefix: 'both-'),
+            (namespace: (mat, full-pseudo-checkbox), prefix: 'both-')
+          ),
+          (
+            both-selected-checkmark-color: magenta
+          )
+        );
+
+        html {
+          @include mat.pseudo-checkbox-theme($theme);
+        }
+        `),
+      ).toThrowError(
+        /Error extending theme: Ambiguous token name `both-selected-checkmark-color` exists in multiple namespaces/,
+      );
+    });
+
     it('should not error when calling component extend-theme functions', () => {
       // Ensures that no components have issues with ambiguous token names.
       expect(() =>
@@ -307,7 +378,9 @@ describe('M3 theme', () => {
           $theme: mat.tooltip-extend-theme($theme, ());
           $theme: mat.tree-extend-theme($theme, ());
 
-          @include mat.all-component-themes($theme);
+          html {
+            @include mat.all-component-themes($theme);
+          }
         `),
       ).not.toThrow();
     });
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index a05c9fdc6a04..6f1fcd5a7817 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -255,6 +255,11 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 
 // Returns a theme config with the given tokens overridden.
 /// @param {Map} $theme The material theme for an application.
+/// @param {List} $extend-namespaces The namespaces to extend in the theme. Each item can be either:
+///  1. A list, representing a namespace to match token names against.
+///  2. A map, representing a namespace to match tokens agaisnt + a prefix string that the token
+///     name must start with to match this namespace. The prefix will be stripped before matching
+///     the token name.
 /// @param {Map} $overrides The token values to override in the theme.
 @function extend-theme($theme, $extend-namespaces, $overrides: ()) {
   $internals: _mat-theming-internals-do-not-access;
@@ -268,18 +273,25 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
   // Determine which system and namespace each shorthand token belongs to.
   $seen-tokens: ();
   @each $namespace in $extend-namespaces {
+    $prefix: '';
+    // Unpack namespaces that come with a prefix.
+    @if meta.type-of($namespace) == 'map' {
+      $prefix: map.get($namespace, prefix);
+      $namespace: map.get($namespace, namespace);
+    }
     $namespace-found: false;
     @each $system in $systems {
       $tokens: map.get($theme, $internals, $system, $namespace);
       @if ($tokens != null) {
         $namespace-found: true;
         @each $name, $value in $tokens {
-          @if map.has-key($seen-tokens, $name) {
-            @error #{'Error extending theme: Ambiguous token name `'}#{$name}#{
-            '` exists in multiple namespaces: `('}#{list.nth(map.get($seen-tokens, $name), 1)}#{
-              ')` and `('}#{$namespace}#{')`'};
+          $prefixed-name: $prefix + $name;
+          @if map.has-key($seen-tokens, $prefixed-name) {
+            @error #{'Error extending theme: Ambiguous token name `'}#{$prefixed-name}#{
+            '` exists in multiple namespaces: `('}#{
+              list.nth(map.get($seen-tokens, $prefixed-name), 1)}#{')` and `('}#{$namespace}#{')`'};
           }
-          $seen-tokens: map.set($seen-tokens, $name, ($namespace, $system));
+          $seen-tokens: map.set($seen-tokens, $prefixed-name, ($namespace, $system, $name));
         }
       }
     }
@@ -322,5 +334,6 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
     $namespace: list.append($namespace, $variant);
   }
   $system: list.nth($token-info, 2);
-  @return map.set($theme, $internals, $system, $namespace, $token, $value);
+  $token-name: list.nth($token-info, 3);
+  @return map.set($theme, $internals, $system, $namespace, $token-name, $value);
 }
diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss
index 66a706f4a1a2..14a2380ec7e6 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -157,8 +157,14 @@
   @return token-utils.extend-theme(
     $theme,
     sass-utils.list-of(
-      tokens-mdc-filled-text-field.$prefix,
-      tokens-mdc-outlined-text-field.$prefix,
+      (
+        namespace: tokens-mdc-filled-text-field.$prefix,
+        prefix: 'filled',
+      ),
+      (
+        namespace: tokens-mdc-outlined-text-field.$prefix,
+        prefix: 'outlined',
+      ),
       tokens-mat-form-field.$prefix
     ),
     $overrides
diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss
index 1bd96ee79dd7..01750571cc4f 100644
--- a/src/material/paginator/_paginator-theme.scss
+++ b/src/material/paginator/_paginator-theme.scss
@@ -44,7 +44,8 @@
 @mixin density($theme) {
   $density-scale: inspection.get-theme-density($theme);
   $form-field-density: if(
-    (meta.type-of($density-scale) == 'number' and $density-scale >= -4) or $density-scale == maximum,
+    (meta.type-of($density-scale) == 'number' and $density-scale >= -4) or
+      ($density-scale == maximum),
     -4,
     $density-scale
   );
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index 1b87ddff628b..b1d6125ae1e8 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -139,11 +139,7 @@
     $tokens,
     (prefix: tokens-mdc-secondary-navigation-tab.$prefix, tokens: $tab-tokens),
     (prefix: tokens-mdc-tab-indicator.$prefix, tokens: $tab-indicator-tokens),
-    (prefix: tokens-mat-tab-header.$prefix, tokens: $tab-header-tokens),
-    (
-      prefix: tokens-mat-tab-header-with-background.$prefix,
-      tokens: $tab-header-with-background-tokens,
-    ),
+    (prefix: tokens-mat-tab-header.$prefix, tokens: $tab-header-tokens)
   );
 }
 
@@ -152,14 +148,13 @@
 /// @param {Map} $overrides The token values to override in the theme.
 @function extend-theme($theme, $overrides: ()) {
   @return token-utils.extend-theme(
-      $theme,
-      sass-utils.list-of(
-          tokens-mdc-tab.$prefix,
-          tokens-mdc-tab-indicator.$prefix,
-          tokens-mat-tab-header.$prefix,
-          tokens-mat-tab-header-with-background.$prefix
-      ),
-      $overrides
+    $theme,
+    sass-utils.list-of(
+      tokens-mdc-secondary-navigation-tab.$prefix,
+      tokens-mdc-tab-indicator.$prefix,
+      tokens-mat-tab-header.$prefix
+    ),
+    $overrides
   );
 }