@angular/material 17.0.0-next.7 → 17.0.0-rc.1

package/_index.scss

@@ -47,7 +47,7 @@
 @forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;
 
 // Theme bundles
-@forward './core/theming/all-theme' show all-component-themes;
+@forward './core/theming/all-theme' show all-component-themes, all-component-bases;
 @forward './core/color/all-color' show all-component-colors;
 @forward './core/typography/all-typography' show all-component-typographies;
 

package/button/_button-theme.scss

@@ -12,20 +12,15 @@
 @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,
@@ -40,42 +35,10 @@
   @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((
@@ -130,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);
@@ -154,18 +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-protected.get-color-tokens(
+    $primary-color-tokens: tokens-mdc-protected-button.get-color-tokens(
       $theme,
       $primary,
       $on-primary
     );
-    $accent-color-tokens: tokens-mdc-button-protected.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-button-protected.get-color-tokens($theme, $error, $on-error);
+    $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);
@@ -201,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);
@@ -234,19 +227,24 @@
 @mixin density($theme) {
   $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
+  .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-button-protected.get-density-tokens($theme);
+    $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-button-filled.get-density-tokens($theme);
+    $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-button,
   .mat-mdc-outlined-button {
     // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
     &.mat-mdc-button-base {

package/button/_icon-button-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use '@material/density/functions' as mdc-density-functions;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 
 @use './button-theme-private';
@@ -10,64 +9,46 @@
 
 $_icon-size: 24px;
 
+// TODO(crisbeto): move these into tokens
 @mixin _ripple-color($color) {
   --mat-mdc-button-persistent-ripple-color: #{$color};
   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
 }
 
-@function _variable-safe-contrast-tone($value, $is-dark) {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return mdc-theme-color.contrast-tone($value);
-  }
-
-  @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);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $on-surface: if(_variable-safe-contrast-tone($surface, $is-dark) == 'dark', #000, #fff);
 
   .mat-mdc-icon-button {
     @include button-theme-private.ripple-theme-styles($theme, false);
     @include mdc-icon-button-theme.theme($color-tokens);
-    @include _ripple-color($on-surface);
+    @include _ripple-color(if($is-dark, #fff, #000));
 
     &.mat-primary {
-      $color: inspection.get-theme-color($theme, primary);
-      @include mdc-icon-button-theme.theme((icon-color: $color));
-      @include _ripple-color($color);
+      @include _ripple-color(inspection.get-theme-color($theme, primary));
+      @include mdc-icon-button-theme.theme(
+        tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, primary));
     }
 
     &.mat-accent {
-      $color: inspection.get-theme-color($theme, accent);
-      @include mdc-icon-button-theme.theme((icon-color: $color));
-      @include _ripple-color($color);
+      @include _ripple-color(inspection.get-theme-color($theme, accent));
+      @include mdc-icon-button-theme.theme(
+        tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, accent));
     }
 
     &.mat-warn {
-      $color: inspection.get-theme-color($theme, warn);
-      @include mdc-icon-button-theme.theme((icon-color: $color));
-      @include _ripple-color($color);
-    }
-
-    @include button-theme-private.apply-disabled-style() {
-      $disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
-      @include mdc-icon-button-theme.theme((
-        icon-color: $disabled-color,
-        disabled-icon-color: $disabled-color,
-      ));
+      @include _ripple-color(inspection.get-theme-color($theme, warn));
+      @include mdc-icon-button-theme.theme(
+        tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, warn));
     }
   }
 }
 
-@mixin typography($theme) {
-}
+@mixin typography($theme) {}
 
 @mixin density($theme) {
   $density-scale: inspection.get-theme-density($theme);

package/button/index.d.ts

@@ -124,8 +124,6 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
     ngOnDestroy(): void;
     /** Focuses the button. */
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
-    /** Gets whether the button has one of the given attributes. */
-    private _hasHostAttributes;
     private _updateRippleDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;

package/chips/index.d.ts

@@ -20,7 +20,6 @@ import { FormGroupDirective } from '@angular/forms';
 import { HasTabIndex } from '@angular/material/core';
 import * as i0 from '@angular/core';
 import * as i11 from '@angular/material/core';
-import * as i12 from '@angular/common';
 import { InjectionToken } from '@angular/core';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
@@ -881,7 +880,7 @@ export declare class MatChipRow extends MatChip implements AfterViewInit {
      */
     private _getEditInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "*", "[matChipEditInput]", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
 }
 
 /** Default options, for the chips module, that can be overridden. */
@@ -1010,7 +1009,7 @@ declare const _MatChipSetMixinBase: _Constructor<HasTabIndex> & _AbstractConstru
 
 export declare class MatChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, [typeof i1.MatChipAction, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon], [typeof i11.MatCommonModule, typeof i12.CommonModule, typeof i11.MatRippleModule], [typeof i11.MatCommonModule, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, [typeof i1.MatChipAction, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon], [typeof i11.MatCommonModule, typeof i11.MatRippleModule], [typeof i11.MatCommonModule, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatChipsModule>;
 }
 

package/core/index.d.ts

@@ -9,7 +9,6 @@ import { FormGroupDirective } from '@angular/forms';
 import { HighContrastModeDetector } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/bidi';
-import * as i4 from '@angular/common';
 import { InjectionToken } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
@@ -432,7 +431,7 @@ declare namespace i3 {
     }
 }
 
-declare namespace i6 {
+declare namespace i5 {
     export {
         MatPseudoCheckboxModule
     }
@@ -629,7 +628,7 @@ export declare class MatOption<T = any> implements FocusableOption, AfterViewChe
 
 export declare class MatOptionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatOptionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatOptionModule, [typeof i1_3.MatOption, typeof i2.MatOptgroup], [typeof i3.MatRippleModule, typeof i4.CommonModule, typeof i1_2.MatCommonModule, typeof i6.MatPseudoCheckboxModule], [typeof i1_3.MatOption, typeof i2.MatOptgroup]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatOptionModule, [typeof i1_3.MatOption, typeof i2.MatOptgroup], [typeof i3.MatRippleModule, typeof i1_2.MatCommonModule, typeof i5.MatPseudoCheckboxModule], [typeof i1_3.MatOption, typeof i2.MatOptgroup]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatOptionModule>;
 }
 

package/core/tokens/m2/mat/_sort.scss

@@ -0,0 +1,60 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, sort);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $table-background: inspection.get-theme-color($theme, background, card);
+  $text-color: inspection.get-theme-color($theme, foreground, secondary-text);
+  $arrow-color: null;
+
+  // Because the arrow is made up of multiple elements that are stacked on top of each other,
+  // we can't use the semi-transparent color from the theme directly. If the value is a color
+  // *type*, we convert it into a solid color by taking the opacity from the rgba value and
+  // using the value to determine the percentage of the background to put into foreground
+  // when mixing the colors together. Otherwise, if it resolves to something different
+  // (e.g. it resolves to a CSS variable), we use the color directly.
+  @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
+    $text-opacity: opacity($text-color);
+    $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
+  }
+  @else {
+    $arrow-color: $text-color;
+  }
+
+  @return (
+    arrow-color: $arrow-color,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_tree.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tree);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $foreground-base: inspection.get-theme-color($theme, foreground, base);
+
+  @return (
+    container-background-color: inspection.get-theme-color($theme, background, card),
+    node-text-color: inspection.get-theme-color($theme, foreground, text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    node-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    node-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    node-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+
+    // TODO(crisbeto): provide tokens for line height and letter spacing to match other components.
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
+  $min-height-scale: (
+    0: 48px,
+    -1: 44px,
+    -2: 40px,
+    -3: 36px,
+    -4: 28px,
+  );
+
+  @return (
+    node-min-height: map.get($min-height-scale, $density-scale)
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/{_button-filled.scss → _filled-button.scss}

@@ -6,7 +6,7 @@
 @use '../../../theming/theming';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, button-filled);
+$prefix: (mdc, filled-button);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.

package/core/tokens/m2/mdc/_icon-button.scss

@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use '../../../style/sass-utils';
+@use '../../../theming/inspection';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -20,12 +22,7 @@ $prefix: (mdc, icon-button);
     state-layer-size: 48px,
     // MDC's icon size applied to svg and img elements inside the component
     icon-size: 24px,
-    // Only applies to :disabled icons, but Angular Components uses [disabled] since :disabled
-    // wouldn't work on <a> tags.
-    disabled-icon-color: black,
-    // Angular version applies an opacity 1 with a color change, and this only applies with
-    // :disabled anyways.
-    disabled-icon-opacity: 0.38,
+
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -41,13 +38,29 @@ $prefix: (mdc, icon-button);
     pressed-state-layer-opacity: null,
     focus-ring-color: null,
     focus-ring-offset: null,
+
+    // We use a color with an opacity to show the disabled state,
+    // instead of applying it to the entire button.
+    disabled-icon-opacity: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+
   @return (
     icon-color: inherit,
+    disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $palette: map.get($theme, $palette-name);
+
+  @return (
+    icon-color: inspection.get-theme-color($theme, $palette-name)
   );
 }
 

package/core/tokens/m2/mdc/{_button-protected.scss → _protected-button.scss}

@@ -6,7 +6,7 @@
 @use '../../../theming/theming';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, button-protected);
+$prefix: (mdc, protected-button);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.

package/core/tokens/m2/mdc/_text-button.scss

@@ -0,0 +1,103 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+@use '../../../theming/inspection';
+@use '../../../theming/theming';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, text-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+@function get-unthemable-tokens() {
+  @return (
+    container-shape: 4px,
+
+    // TODO: `container-height` is also included so it has a default value to
+    // prevent the buttons from collapsing if a density mixin isn't included.
+    container-height: 36px,
+
+    // TODO: handle these through the typography styles eventually.
+    label-text-font: null,
+    label-text-size: null,
+    label-text-tracking: null,
+    label-text-transform: null,
+    label-text-weight: null,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    hover-label-text-color: null,
+    focus-label-text-color: null,
+    pressed-label-text-color: null,
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null,
+    with-icon-disabled-icon-color: null,
+    with-icon-focus-icon-color: null,
+    with-icon-hover-icon-color: null,
+    with-icon-icon-color: null,
+    with-icon-icon-size: null,
+    with-icon-pressed-icon-color: null,
+    focus-ring-color: null,
+    focus-ring-offset: null,
+    keep-touch-target: false,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+
+  @return (
+    label-text-color: $on-surface,
+    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $palette: map.get($theme, $palette-name);
+
+  @return (
+    label-text-color: inspection.get-theme-color($theme, $palette-name)
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    container-height: map.get((
+      0: 36px,
+      -1: 32px,
+      -2: 28px,
+      -3: 24px,
+    ), $scale),
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+    get-unthemable-tokens(),
+    get-color-tokens(token-utils.$placeholder-color-config),
+    get-typography-tokens(token-utils.$placeholder-typography-config),
+    get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/divider/_divider-theme.scss

@@ -5,7 +5,10 @@
 @use '../core/tokens/m2/mat/divider' as tokens-mat-divider;
 
 @mixin base($theme) {
-  // TODO(mmalerba): Move divider base tokens here
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(
+        tokens-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens());
+  }
 }
 
 @mixin color($theme) {