refactor(multiple): Add base mixin for components with no base tokens (…

…#27893)

This ensures API consistency and gives us a place to put base tokens,
should any be added in the future.

src/material/_index.scss

@@ -55,19 +55,19 @@
 @forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density;
 @forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme;
 @forward './core/option/option-theme' as option-* show option-color, option-typography,
-  option-theme, option-density;
+  option-theme, option-density, option-base;
 @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography,
-  optgroup-theme, optgroup-density;
+  optgroup-theme, optgroup-density, optgroup-base;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show
   pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
   pseudo-checkbox-legacy-size;
 @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
   strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,
-  autocomplete-color, autocomplete-typography, autocomplete-density;
+  autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base;
 @forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography,
-  badge-density;
+  badge-density, badge-base;
 @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme,
   bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density;
 @forward './button/button-theme' as button-* show button-theme, button-color, button-typography,
@@ -85,7 +85,7 @@
 @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography,
   chips-density;
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
-  datepicker-typography, datepicker-date-range-colors, datepicker-density;
+  datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base;
 @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography,
   dialog-density, dialog-base;
 @forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding;
@@ -96,15 +96,16 @@
 @forward './form-field/form-field-theme' as form-field-* show form-field-theme,
   form-field-color, form-field-typography, form-field-density;
 @forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color,
-  grid-list-typography, grid-list-density;
-@forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density;
+  grid-list-typography, grid-list-density, grid-list-base;
+@forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density,
+  icon-base;
 @forward './input/input-theme' as input-* show input-theme, input-color, input-typography,
-  input-density;
+  input-density, input-base;
 @forward './list/list-theme' as list-* show list-theme, list-color, list-typography,
 list-density, list-base;
 @forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density;
 @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color,
-  paginator-typography, paginator-density;
+  paginator-typography, paginator-density, paginator-base;
 @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;
@@ -114,7 +115,7 @@ list-density, list-base;
 @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography,
   radio-density, radio-base;
 @forward './select/select-theme' as select-* show select-theme, select-color, select-typography,
-  select-density;
+  select-density, select-base;
 @forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color,
   sidenav-typography, sidenav-density;
 @forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show
@@ -125,12 +126,12 @@ list-density, list-base;
   snack-bar-typography, snack-bar-density, snack-bar-base;
 @forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density;
 @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color,
-  stepper-typography, stepper-density;
+  stepper-typography, stepper-density, stepper-base;
 @forward './table/table-theme' as table-* show table-theme, table-color, table-typography,
   table-density;
 @forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density;
 @forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color,
-  toolbar-typography, toolbar-density;
+  toolbar-typography, toolbar-density, toolbar-base;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color,
   tooltip-typography, tooltip-density, tooltip-base;
 @forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density;

src/material/autocomplete/_autocomplete-theme.scss

@@ -5,6 +5,8 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
@@ -18,6 +20,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/badge/_badge-theme.scss

@@ -164,6 +164,8 @@ $_emit-fallback-vars: true;
   }
 }
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-badge.$prefix,
@@ -204,6 +206,7 @@ $_emit-fallback-vars: true;
       }
     }
 
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/core/option/_optgroup-theme.scss

@@ -6,6 +6,8 @@
 @use '../theming/inspection';
 @use '../typography/typography';
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
@@ -25,6 +27,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/core/option/_option-theme.scss

@@ -6,6 +6,8 @@
 @use '../theming/inspection';
 @use '../typography/typography';
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-option.$prefix,
@@ -35,6 +37,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/datepicker/_datepicker-theme.scss

@@ -27,6 +27,8 @@ $calendar-weekday-table-font-size: 11px !default;
     map.merge($calendar-tokens, $range-tokens));
 }
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
@@ -96,6 +98,7 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/grid-list/_grid-list-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 
+@mixin base($theme) {}
 
 // Include this empty mixin for consistency with the other components.
 @mixin color($theme) {}
@@ -20,6 +21,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/icon/_icon-theme.scss

@@ -10,6 +10,8 @@
   @include token-utils.create-token-values(tokens-mat-icon.$prefix, $tokens);
 }
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-icon.$prefix,
@@ -37,6 +39,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/input/_input-theme.scss

@@ -2,6 +2,8 @@
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 
+@mixin base($theme) {}
+
 @mixin color($theme) {}
 
 @mixin typography($theme) {}
@@ -10,6 +12,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/paginator/_paginator-theme.scss

@@ -7,6 +7,8 @@
 @use '../core/tokens/token-utils';
 @use '../form-field/form-field-density';
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
@@ -45,6 +47,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/select/_select-theme.scss

@@ -8,6 +8,8 @@
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-select.$prefix,
@@ -58,6 +60,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/stepper/_stepper-theme.scss

@@ -5,6 +5,8 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper;
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
@@ -38,6 +40,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/toolbar/_toolbar-theme.scss

@@ -16,6 +16,8 @@
   );
 }
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
@@ -75,6 +77,7 @@
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
     @else {
+      @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
       }