@angular/material 17.0.0-next.6 → 17.0.0-rc.0

package/_index.scss

@@ -52,59 +52,62 @@
 @forward './core/typography/all-typography' show all-component-typographies;
 
 // Component themes
-@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/core-theme' as core-* show core-color, core-theme, core-typography, core-density,
+  core-base;
+@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base;
 @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;
+  pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-base;
 @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;
+  bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base;
 @forward './button/button-theme' as button-* show button-theme, button-color, button-typography,
-  button-density;
+  button-density, button-base;
 @forward './button/fab-theme' as fab-* show fab-color, fab-typography,
   fab-density, fab-theme, fab-base;
 @forward './button/icon-button-theme' as icon-button-* show icon-button-color,
-  icon-button-typography, icon-button-density, icon-button-theme;
+  icon-button-typography, icon-button-density, icon-button-theme, icon-button-base;
 @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme,
-  button-toggle-color, button-toggle-typography, button-toggle-density;
+  button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base;
 @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density,
   card-base;
 @forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color,
   checkbox-typography, checkbox-density, checkbox-base;
 @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography,
-  chips-density;
+  chips-density, chips-base;
 @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;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
-  divider-typography, divider-density;
+  divider-typography, divider-density, divider-base;
 @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color,
-  expansion-typography, expansion-density;
+  expansion-typography, expansion-density, expansion-base;
 @forward './form-field/form-field-theme' as form-field-* show form-field-theme,
-  form-field-color, form-field-typography, form-field-density;
+  form-field-color, form-field-typography, form-field-density, form-field-base;
 @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;
+  list-density, list-base;
+@forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density,
+  menu-base;
 @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,26 +117,30 @@ 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;
+  sidenav-typography, sidenav-density, sidenav-base;
 @forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show
-  slide-toggle-theme, slide-toggle-color, slide-toggle-typography, slide-toggle-density;
+  slide-toggle-theme, slide-toggle-color, slide-toggle-typography, slide-toggle-density,
+  slide-toggle-base;
 @forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography,
   slider-density, slider-base;
 @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;
-@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density;
+@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density,
+  sort-base;
 @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;
+  table-density, table-base;
+@forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density,
+  tabs-base;
 @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;
+@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density,
+  tree-base;
 
 // MDC Helpers
 @forward './core/mdc-helpers/mdc-helpers' as private-* show private-using-mdc-theme,

package/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);
     }

package/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);
     }

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -5,6 +5,13 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
 
+@mixin base($theme) {
+  @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());
+  }
+}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
@@ -23,6 +30,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/button/_button-theme.scss

@@ -12,66 +12,33 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/tokens/m2/mdc/button-filled' as tokens-mdc-button-filled;
-@use '../core/tokens/m2/mdc/button-protected' as tokens-mdc-button-protected;
+@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
+@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
+@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 
 @function _on-color($theme, $palette) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
 }
 
-@mixin _button-variant($color) {
-  @include mdc-button-text-theme.theme((
-    label-text-color: $color,
-  ));
-}
-
 @mixin _outlined-button-variant($color) {
   @include mdc-button-outlined-theme.theme((
     label-text-color: $color,
   ));
 }
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move button base tokens here
+}
+
 @mixin color($theme) {
   @include mdc-helpers.using-mdc-theme($theme) {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $on-surface: mdc-theme-color.prop-value(on-surface);
-    $surface: mdc-theme-color.prop-value(surface);
     $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
-    $disabled-container-color: rgba($on-surface, 0.12);
     $primary: mdc-theme-color.prop-value(primary);
-    $on-primary: mdc-theme-color.prop-value(on-primary);
     $secondary: mdc-theme-color.prop-value(secondary);
-    $on-secondary: mdc-theme-color.prop-value(on-secondary);
     $error: mdc-theme-color.prop-value(error);
-    $on-error: mdc-theme-color.prop-value(on-error);
-
-    .mat-mdc-button {
-      &.mat-unthemed {
-        @include _button-variant($on-surface);
-      }
-
-      &.mat-primary {
-        @include _button-variant($primary);
-      }
-
-      &.mat-accent {
-        @include _button-variant($secondary);
-      }
-
-      &.mat-warn {
-        @include _button-variant($error);
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-button-text-theme.theme((
-          // We need to pass both the disabled and enabled values, because the enabled
-          // ones apply to anchors while the disabled ones are for buttons.
-          disabled-label-text-color: $disabled-ink-color,
-          label-text-color: $disabled-ink-color
-        ));
-      }
-    }
 
     .mat-mdc-outlined-button {
       @include mdc-button-outlined-theme.theme((
@@ -126,11 +93,30 @@
   $on-accent: _on-color($theme, $accent);
   $on-error: _on-color($theme, $error);
 
+  .mat-mdc-button {
+    @include mdc-button-text-theme.theme(tokens-mdc-text-button.get-color-tokens($theme));
+
+    &.mat-primary {
+      @include mdc-button-text-theme.theme(
+        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, primary));
+    }
+
+    &.mat-accent {
+      @include mdc-button-text-theme.theme(
+        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, accent));
+    }
+
+    &.mat-warn {
+      @include mdc-button-text-theme.theme(
+        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, warn));
+    }
+  }
+
   .mat-mdc-unelevated-button {
-    $default-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $surface, $on-surface);
-    $primary-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $primary, $on-primary);
-    $accent-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $error, $on-error);
+    $default-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $surface, $on-surface);
+    $primary-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $primary, $on-primary);
+    $accent-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $accent, $on-accent);
+    $warn-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $error, $on-error);
 
     &.mat-unthemed {
       @include mdc-button-filled-theme.theme($default-color-tokens);
@@ -150,14 +136,18 @@
   }
 
   .mat-mdc-raised-button {
-    $default-color-tokens: tokens-mdc-button-protected.get-color-tokens(
+    $default-color-tokens: tokens-mdc-protected-button.get-color-tokens(
       $theme,
       $surface,
       $on-surface
     );
-    $primary-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $primary, $on-primary);
-    $accent-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $error, $on-error);
+    $primary-color-tokens: tokens-mdc-protected-button.get-color-tokens(
+      $theme,
+      $primary,
+      $on-primary
+    );
+    $accent-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $accent, $on-accent);
+    $warn-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $error, $on-error);
 
     &.mat-unthemed {
       @include mdc-button-protected-theme.theme($default-color-tokens);
@@ -193,6 +183,17 @@
   $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
   $disabled-container-color: rgba($on-surface, 0.12);
 
+  // TODO: these disabled styles are a bit too specific currently.
+  // Once the buttons are fully tokenized, we should rework how they're applied.
+  .mat-mdc-button {
+    @include button-theme-private.apply-disabled-style() {
+      @include mdc-button-text-theme.theme((
+        disabled-label-text-color: $disabled-ink-color,
+        label-text-color: $disabled-ink-color,
+      ));
+    }
+  }
+
   .mat-mdc-raised-button {
     @include button-theme-private.apply-disabled-style() {
       @include mdc-elevation-theme.elevation(0);
@@ -226,9 +227,24 @@
 @mixin density($theme) {
   $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
-  .mat-mdc-button,
-  .mat-mdc-raised-button,
-  .mat-mdc-unelevated-button,
+  .mat-mdc-button {
+    $density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
+    @include mdc-button-text-theme.theme($density-tokens);
+    @include button-theme-private.touch-target-density($density-scale);
+  }
+
+  .mat-mdc-raised-button {
+    $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
+    @include mdc-button-protected-theme.theme($density-tokens);
+    @include button-theme-private.touch-target-density($density-scale);
+  }
+
+  .mat-mdc-unelevated-button {
+    $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
+    @include mdc-button-filled-theme.theme($density-tokens);
+    @include button-theme-private.touch-target-density($density-scale);
+  }
+
   .mat-mdc-outlined-button {
     // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
     &.mat-mdc-button-base {
@@ -240,6 +256,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/button/_fab-theme.scss

@@ -51,32 +51,36 @@
   $disabled: rgba($on-surface, 0.12);
   $on-disabled: rgba($on-surface, if($is-dark, 0.5, 0.38));
 
-  .mat-mdc-fab,
-  .mat-mdc-mini-fab {
+  @include sass-utils.current-selector-or-root() {
     // TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
     // being wrapped by using-mdc-theme. This workaround needs to be
     // revisited w/ a more holistic solution.
-    @include mdc-helpers.using-mdc-theme($theme) {
-      @include button-theme-private.ripple-theme-styles($theme, true);
+    .mat-mdc-fab,
+    .mat-mdc-mini-fab {
+      @include mdc-helpers.using-mdc-theme($theme) {
+        @include button-theme-private.ripple-theme-styles($theme, true);
+      }
     }
 
-    @include button-theme-private.apply-disabled-style() {
-      @include _fab-variant($on-disabled, $disabled);
+    :disabled, a[disabled='true'] {
+      @include button-theme-private.apply-disabled-style() {
+        @include _fab-variant($on-disabled, $disabled);
+      }
     }
 
-    &.mat-unthemed {
+    .mat-unthemed {
       @include _fab-variant($on-surface, $surface);
     }
 
-    &.mat-primary {
+    .mat-primary {
       @include _fab-variant($on-primary, $primary);
     }
 
-    &.mat-accent {
+    .mat-accent {
       @include _fab-variant($on-accent, $accent);
     }
 
-    &.mat-warn {
+    .mat-warn {
       @include _fab-variant($on-warn, $warn);
     }
   }
@@ -88,7 +92,7 @@
   }
 
   $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
-  .mat-mdc-extended-fab {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-extended-fab-theme.theme($typography-tokens);
   }
 }

package/button/_icon-button-theme.scss

@@ -23,6 +23,10 @@ $_icon-size: 24px;
   @return if($is-dark, 'light', 'dark');
 }
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move icon button base tokens here
+}
+
 @mixin color($theme) {
   $color-tokens: tokens-mdc-icon-button.get-color-tokens($theme);
   $surface: inspection.get-theme-color($theme, background, card);
@@ -104,6 +108,7 @@ $_icon-size: 24px;
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/button-toggle/_button-toggle-theme.scss

@@ -6,6 +6,19 @@
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
+@mixin base($theme) {
+  @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()
+    );
+    @include token-utils.create-token-values(
+        tokens-mat-standard-button-toggle.$prefix,
+        tokens-mat-standard-button-toggle.get-unthemable-tokens()
+    );
+  }
+}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-legacy-button-toggle.$prefix,
@@ -35,6 +48,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/chips/_chips-theme.scss

@@ -5,6 +5,12 @@
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 
+@mixin base($theme) {
+  .mat-mdc-standard-chip {
+    @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
+  }
+}
+
 @mixin color($theme) {
   .mat-mdc-standard-chip {
     $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
@@ -48,6 +54,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/core/_core-theme.scss

@@ -8,6 +8,14 @@
 @use './style/elevation';
 @use './typography/typography';
 
+@mixin base($theme) {
+  @include ripple-theme.base($theme);
+  @include option-theme.base($theme);
+  @include optgroup-theme.base($theme);
+  @include pseudo-checkbox-theme.base($theme);
+  // TODO(mmalerba): Move additional core base tokens here
+}
+
 @mixin color($theme) {
   @include ripple-theme.color($theme);
   @include option-theme.color($theme);
@@ -64,6 +72,7 @@
   // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/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);
     }

package/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);
     }

package/core/ripple/_ripple-theme.scss

@@ -2,6 +2,10 @@
 @use '../theming/theming';
 @use '../theming/inspection';
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move ripple base tokens here
+}
+
 // Colors for the ripple elements.
 @mixin color($theme) {
   $foreground-base: inspection.get-theme-color($theme, foreground, base);
@@ -22,6 +26,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -19,6 +19,10 @@
   }
 }
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move pseudo checkbox base tokens here
+}
+
 @mixin color($theme) {
   $is-dark-theme: inspection.get-theme-type($theme) == dark;
   $primary: inspection.get-theme-color($theme, primary);
@@ -78,6 +82,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/core/style/_sass-utils.scss

@@ -10,9 +10,14 @@
 /// @content Content to output under the current selector, or root selector if there is no current
 ///     selector.
 @mixin current-selector-or-root($root: html) {
-  @at-root #{& or $root} {
+  @if & {
     @content;
   }
+  @else {
+    #{$root} {
+      @content;
+    }
+  }
 }
 
 /// A version of the standard `map.merge` function that takes a variable number of arguments.

package/core/theming/_all-theme.scss

@@ -82,6 +82,46 @@
   }
 }
 
+@mixin all-component-bases($theme) {
+  @include core-theme.base($theme);
+  @include card-theme.base($theme);
+  @include progress-bar-theme.base($theme);
+  @include tooltip-theme.base($theme);
+  @include form-field-theme.base($theme);
+  @include input-theme.base($theme);
+  @include select-theme.base($theme);
+  @include autocomplete-theme.base($theme);
+  @include dialog-theme.base($theme);
+  @include chips-theme.base($theme);
+  @include slide-toggle-theme.base($theme);
+  @include radio-theme.base($theme);
+  @include slider-theme.base($theme);
+  @include menu-theme.base($theme);
+  @include list-theme.base($theme);
+  @include paginator-theme.base($theme);
+  @include tabs-theme.base($theme);
+  @include checkbox-theme.base($theme);
+  @include button-theme.base($theme);
+  @include icon-button-theme.base($theme);
+  @include fab-theme.base($theme);
+  @include snack-bar-theme.base($theme);
+  @include table-theme.base($theme);
+  @include progress-spinner-theme.base($theme);
+  @include badge-theme.base($theme);
+  @include bottom-sheet-theme.base($theme);
+  @include button-toggle-theme.base($theme);
+  @include datepicker-theme.base($theme);
+  @include divider-theme.base($theme);
+  @include expansion-theme.base($theme);
+  @include grid-list-theme.base($theme);
+  @include icon-theme.base($theme);
+  @include sidenav-theme.base($theme);
+  @include stepper-theme.base($theme);
+  @include sort-theme.base($theme);
+  @include toolbar-theme.base($theme);
+  @include tree-theme.base($theme);
+}
+
 // @deprecated Use `all-component-themes`.
 @mixin angular-material-theme($theme) {
   @include all-component-themes($theme);