@angular/material 17.0.0-rc.0 → 17.0.0-rc.2

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/theming/_theming.scss

@@ -3,7 +3,6 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'palette';
-@use '../density/private/compatibility';
 
 // Whether to enable compatibility with legacy methods for accessing theme information.
 $theme-legacy-inspection-api-compatibility: true !default;
@@ -481,20 +480,7 @@ $_internals: _mat-theming-internals-do-not-access;
   $_emitted-density: map.merge($_emitted-density, ($id: $previous-density)) !global;
   $_emitted-typography: map.merge($_emitted-typography, ($id: $previous-typography)) !global;
 
-  // If duplicate default density styles would be generated for a legacy constructed theme,
-  // we adjust the density generation so that no density styles are generated by default.
-  // If no default density styles have been generated yet, we ensure that the styles
-  // are generated at root. For legacy themes our goal is to generate default density
-  // styles **once** and at root. This matches the old behavior where density styles were
-  // part of the base component styles (that did not use view encapsulation).
-  // TODO: Remove this compatibility logic when the legacy theming API is removed.
-  compatibility.$private-density-generate-at-root: private-is-legacy-constructed-theme($theme);
-  compatibility.$private-density-generate-styles: not $duplicate-legacy-density;
-
   @content;
-
-  compatibility.$private-density-generate-at-root: false;
-  compatibility.$private-density-generate-styles: true;
 }
 
 // Checks whether the given value resolves to a theme object. Theme objects are always

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

@@ -0,0 +1,87 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, fab);
+
+// 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) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of icons and text projected into a FAB.
+    foreground-color: inspection.get-theme-color($theme, foreground, base),
+
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+
+    // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
+    // Background color of the container when the FAB is disabled.
+    disabled-state-container-color: rgba($on-surface, 0.12),
+
+    // Color of the icons and projected text when the FAB is disabled.
+    disabled-state-foreground-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+  );
+}
+
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    foreground-color: $color,
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// 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/_filled-button.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, 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.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// 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);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// 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/_icon-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@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, icon-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.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// 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);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $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/_outlined-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@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, outlined-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.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// 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);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $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/_protected-button.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, 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.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// 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);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// 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/_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/_text-button.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@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, 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.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// 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);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $color: inspection.get-theme-color($theme, $palette-name);
+
+  @return (
+    state-layer-color: $color,
+    ripple-color: if(meta.type-of($color) == color, rgba($color, 0.1), $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)
+  );
+}