feat(material/theming): Add 'base' theming dimension to all components (#27924)

Adds a `base` theming dimension to go along with `color`,`typography`,
and `density`. The base dimension includes styles such as
border-radiuses that do not vary with the chosen color, typography, or density,
but may vary depending on the theming system (e.g. Material 2 vs Material 3).

BREAKING CHANGE:
There are new styles emitted by `mat.<component>-theme` that are not emitted by
any of: `mat.<component>-color`, `mat.<component>-typography`, or
`mat.<component>-density`. If you rely on the partial mixins only and don't call
`mat.<component>-theme`, you can add `mat.<component>-base` to get the missing
styles. Alternatively you can call `mat.all-component-bases` to get just the
base styles for all components.

Author: mmalerba

src/material/_index.scss

@@ -52,14 +52,15 @@
 @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-base;
 @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography,
   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
@@ -71,11 +72,11 @@
 @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;
 @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-base;
 @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density,
@@ -90,21 +91,21 @@
   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, 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-base;
 @forward './list/list-theme' as list-* show list-theme, list-color, list-typography,
-list-density, list-base;
+  list-density, list-base;
 @forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density,
-menu-base;
+  menu-base;
 @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color,
   paginator-typography, paginator-density, paginator-base;
 @forward './progress-bar/progress-bar-theme' as progress-bar-* show
@@ -126,7 +127,8 @@ menu-base;
   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-base;
 @forward './table/table-theme' as table-* show table-theme, table-color, table-typography,
@@ -137,7 +139,8 @@ menu-base;
   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,

src/material/button/_button-theme.scss

@@ -32,6 +32,10 @@
   ));
 }
 
+@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;
@@ -254,6 +258,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);
     }

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

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

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

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

src/material/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);

src/material/divider/_divider-theme.scss

@@ -4,6 +4,10 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move divider base tokens here
+}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-divider.$prefix,
@@ -17,6 +21,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/expansion/_expansion-theme.scss

@@ -5,6 +5,10 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/expansion' as tokens-mat-expansion;
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move expansion panel base tokens here
+}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-expansion.$prefix,
@@ -31,6 +35,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

src/material/form-field/_form-field-theme.scss

@@ -11,6 +11,10 @@
 @use '../core/tokens/token-utils';
 @use './form-field-density';
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move form field base tokens here
+}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include mdc-filled-text-field-theme.theme(
@@ -57,6 +61,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }