Implement extend-theme functions for each component & overhaul override mixins to match behavior

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;

src/material/autocomplete/_autocomplete-theme.scss

@@ -10,64 +10,81 @@
 @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()
+      );
     }
   }
 }
 
 @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)
+      );
     }
   }
 }
 
 @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)
+      );
     }
   }
 }
 
 @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(),
+    )
   );
 }
 
 @mixin theme($theme) {
   @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)
+    );
   }
 }