@angular/material 16.2.0-next.3 → 16.2.0-next.5

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

@@ -1,118 +1,41 @@
-@use 'sass:map';
-@use '../core/style/private';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-@use '../core/density/private/compatibility';
-@use './button-toggle-variables';
+@use '../core/tokens/m2/mat/legacy-button-toggle' as tokens-mat-legacy-button-toggle;
+@use '../core/tokens/m2/mat/standard-button-toggle' as tokens-mat-standard-button-toggle;
+@use '../core/tokens/token-utils';
+@use '../core/style/sass-utils';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $divider-color: theming.get-color-from-palette($foreground, divider);
-  $theme-divider-color: map.get($foreground, divider);
 
-  // By default the theme usually has an rgba color for the dividers, which can
-  // stack up with the background of a button toggle. This can cause the border
-  // of a selected toggle to look different from an deselected one. We use a solid
-  // color to ensure that the border always stays the same.
-  $divider-color: if(type-of($theme-divider-color) == color,
-    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),
-    $theme-divider-color
-  );
-
-  .mat-button-toggle-standalone,
-  .mat-button-toggle-group {
-    @include private.private-theme-overridable-elevation(2, $config);
-  }
-
-  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
-  .mat-button-toggle-group-appearance-standard {
-    &:not([class*='mat-elevation-z']) {
-      box-shadow: none;
-    }
-  }
-
-  .mat-button-toggle {
-    color: theming.get-color-from-palette($foreground, hint-text);
-
-    .mat-button-toggle-focus-overlay {
-      background-color: theming.get-color-from-palette($background, focused-button);
-    }
-  }
-
-  .mat-button-toggle-appearance-standard {
-    color: theming.get-color-from-palette($foreground, text);
-    background: theming.get-color-from-palette($background, card);
-
-    .mat-button-toggle-focus-overlay {
-      background-color: theming.get-color-from-palette($background, focused-button, 1);
-    }
-  }
-
-  .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
-    border-left: solid 1px $divider-color;
-  }
-
-  [dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
-    border-left: none;
-    border-right: solid 1px $divider-color;
-  }
-
-  .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical {
-    .mat-button-toggle + .mat-button-toggle {
-      border-left: none;
-      border-right: none;
-      border-top: solid 1px $divider-color;
-    }
-  }
-
-  .mat-button-toggle-checked {
-    background-color: theming.get-color-from-palette($background, selected-button);
-    color: theming.get-color-from-palette($foreground, secondary-text);
-
-    &.mat-button-toggle-appearance-standard {
-      color: theming.get-color-from-palette($foreground, text);
-    }
-  }
-
-  .mat-button-toggle-disabled {
-    color: theming.get-color-from-palette($foreground, disabled-button);
-    background-color: theming.get-color-from-palette($background, disabled-button-toggle);
-
-    &.mat-button-toggle-appearance-standard {
-      background: theming.get-color-from-palette($background, card);
-    }
-
-    &.mat-button-toggle-checked {
-      background-color: theming.get-color-from-palette($background, selected-disabled-button);
-    }
-  }
-
-  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
-  .mat-button-toggle-group-appearance-standard {
-    border: solid 1px $divider-color;
+  @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-color-tokens($config));
+    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+      tokens-mat-standard-button-toggle.get-color-tokens($config));
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2014-config(
       theming.get-typography-config($config-or-theme));
-  .mat-button-toggle {
-    font-family: typography-utils.font-family($config);
+
+  @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-typography-tokens($config));
+    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+      tokens-mat-standard-button-toggle.get-typography-tokens($config));
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  $standard-height: compatibility.private-density-prop-value(
-      button-toggle-variables.$standard-density-config, $density-scale, height);
 
-  @include compatibility.private-density-legacy-compatibility() {
-    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
-      line-height: $standard-height;
-    }
+  @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-density-tokens($density-scale));
+    @include token-utils.create-token-values(tokens-mat-standard-button-toggle.$prefix,
+      tokens-mat-standard-button-toggle.get-density-tokens($density-scale));
   }
 }
 

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

@@ -1,3 +1,5 @@
+// TODO(crisbeto): this file isn't used anymore and should be removed.
+
 $standard-height: 48px !default;
 // Minimum height for highest density can vary based on the content that developers
 // project into button-toggle's. We use a minimum of `24px` though because commonly

package/card/_card-theme.scss

@@ -79,8 +79,24 @@
 }
 
 @mixin theme-from-tokens($tokens) {
-  @include mdc-elevated-card-theme.theme(map.get($tokens, tokens-mdc-elevated-card.$prefix));
-  @include mdc-outlined-card-theme.theme(map.get($tokens, tokens-mdc-outlined-card.$prefix));
-  @include token-utils.create-token-values(
-      tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
+  @if ($tokens != ()) {
+    $elevated-card-tokens: map.get($tokens, tokens-mdc-elevated-card.$prefix);
+    // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.
+    $elevated-card-tokens: token-utils.resolve-elevation(
+        $elevated-card-tokens,
+        container-elevation,
+        container-shadow-color
+    );
+    $outlined-card-tokens: map.get($tokens, tokens-mdc-outlined-card.$prefix);
+    // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.
+    $outlined-card-tokens: token-utils.resolve-elevation(
+        $outlined-card-tokens,
+        container-elevation,
+        container-shadow-color
+    );
+    @include mdc-elevated-card-theme.theme($elevated-card-tokens);
+    @include mdc-outlined-card-theme.theme($outlined-card-tokens);
+    @include token-utils.create-token-values(
+        tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
+  }
 }

package/checkbox/_checkbox-theme.scss

@@ -90,7 +90,9 @@
 }
 
 @mixin theme-from-tokens($tokens) {
-  // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
-  //   so this mixin is currently incomplete.
-  @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
+  @if ($tokens != ()) {
+    // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
+    //   so this mixin is currently incomplete.
+    @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
+  }
 }

package/chips/index.d.ts

@@ -25,6 +25,7 @@ import { InjectionToken } from '@angular/core';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatRipple } from '@angular/material/core';
+import { MatRippleLoader } from '@angular/material/core';
 import { NgControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { NgZone } from '@angular/core';
@@ -146,14 +147,12 @@ export declare const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken<MatChipsDefaultOp
  *
  * Extended by MatChipOption and MatChipRow for different interaction patterns.
  */
-export declare class MatChip extends _MatChipMixinBase implements OnInit, AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy {
+export declare class MatChip extends _MatChipMixinBase implements OnInit, AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, DoCheck, HasTabIndex, OnDestroy {
     _changeDetectorRef: ChangeDetectorRef;
     protected _ngZone: NgZone;
     private _focusMonitor;
     private _globalRippleOptions?;
     protected _document: Document;
-    /** Whether the ripple is centered on the chip. */
-    readonly _isRippleCentered = false;
     /** Emits when the chip is focused. */
     readonly _onFocus: Subject<MatChipEvent>;
     /** Emits when the chip is blurred. */
@@ -222,13 +221,20 @@ export declare class MatChip extends _MatChipMixinBase implements OnInit, AfterV
      * @deprecated Considered an implementation detail. To be removed.
      * @breaking-change 17.0.0
      */
-    ripple: MatRipple;
+    get ripple(): MatRipple;
+    set ripple(v: MatRipple);
     /** Action receiving the primary set of user interactions. */
     primaryAction: MatChipAction;
+    /**
+     * Handles the lazy creation of the MatChip ripple.
+     * Used to improve initial load time of large applications.
+     */
+    _rippleLoader: MatRippleLoader;
     constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
+    ngDoCheck(): void;
     ngOnDestroy(): void;
     /**
      * Allows for programmatic removal of the chip.
@@ -868,6 +874,7 @@ export declare class MatChipRow extends MatChip implements AfterViewInit {
     _handleDoubleclick(event: MouseEvent): void;
     private _startEditing;
     private _onEditFinish;
+    _isRippleDisabled(): boolean;
     /**
      * Gets the projected chip edit input, or the default input if none is projected in. One of these
      * two values is guaranteed to be defined.

package/core/index.d.ts

@@ -606,9 +606,9 @@ export declare class _MatOptionBase<T = any> implements FocusableOption, AfterVi
      */
     get viewValue(): string;
     /** Selects the option. */
-    select(): void;
+    select(emitEvent?: boolean): void;
     /** Deselects the option. */
-    deselect(): void;
+    deselect(emitEvent?: boolean): void;
     /** Sets focus onto this option. */
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
     /**
@@ -820,6 +820,7 @@ export declare class MatRippleLoader implements OnDestroy {
     configureRipple(host: HTMLElement, config: {
         className?: string;
         centered?: boolean;
+        disabled?: boolean;
     }): void;
     /** Returns the ripple instance for the given host element. */
     getRipple(host: HTMLElement): MatRipple | undefined;

package/core/tokens/_token-utils.scss

@@ -39,6 +39,8 @@ $placeholder-typography-config: (
   caption: $_placeholder-typography-level-config,
   button: $_placeholder-typography-level-config,
   overline: $_placeholder-typography-level-config,
+  subheading-1: $_placeholder-typography-level-config,
+  title: $_placeholder-typography-level-config,
 );
 
 // Placeholder density config that can be passed to token getter functions when generating token

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

@@ -0,0 +1,78 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:color';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, badge);
+
+// 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($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary-color-tokens: private-get-color-palette-color-tokens(map.get($config, primary));
+  $app-background: theming.get-color-from-palette($background, 'background');
+  $disabled-background: theming.get-color-from-palette($foreground, disabled-button);
+
+  // The disabled color usually has some kind of opacity, but because the badge is overlayed
+  // on top of something else, it won't look good if it's opaque. If it 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.
+  @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) {
+    $badge-opacity: opacity($disabled-background);
+    $disabled-background: color.mix($app-background,
+      rgba($disabled-background, 1), (1 - $badge-opacity) * 100%);
+  }
+
+  @return map.merge($primary-color-tokens, (
+    disabled-state-background-color: $disabled-background,
+    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-text),
+  ));
+}
+
+// Generates the tokens used to theme the badge based on a palette.
+@function private-get-color-palette-color-tokens($palette) {
+  @return (
+    background-color: theming.get-color-from-palette($palette),
+    text-color: theming.get-color-from-palette($palette, default-contrast),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $base-size: 12px;
+
+  @return (
+    text-font: typography-utils.font-family($config),
+    text-size: $base-size,
+    text-weight: 600,
+    small-size-text-size: $base-size * 0.75,
+    large-size-text-size: $base-size * 2,
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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/_bottom-sheet.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, bottom-sheet);
+
+// 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 (
+    // TODO: will be necessary for M3.
+    container-shape: 4px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @return (
+    container-text-color: theming.get-color-from-palette($foreground, text),
+    container-background-color: theming.get-color-from-palette($background, dialog),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    container-text-font: typography-utils.font-family($config, body-1) or
+      typography-utils.font-family($config),
+    container-text-line-height: typography-utils.line-height($config, body-1),
+    container-text-size: typography-utils.font-size($config, body-1),
+    container-text-tracking: typography-utils.letter-spacing($config, body-1),
+    container-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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/_datepicker.scss

@@ -0,0 +1,184 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:math';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, datepicker);
+
+$_selected-fade-amount: 0.6;
+$_today-fade-amount: 0.2;
+
+// Utility that produces a range background color from a specific color.
+@function private-get-range-background-color($color) {
+  @return rgba($color, 0.2);
+}
+
+// Utility that produces the overlap selected color from an overlap color.
+@function private-get-default-overlap-selected-color($overlap-color) {
+  @return color.adjust($overlap-color, $lightness: -30%);
+}
+
+// Default range comparison color.
+$private-default-comparison-color: private-get-range-background-color(#f9ab00);
+
+// Default range overlap color.
+$private-default-overlap-color: #a8dab5;
+
+// 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($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary: map.get($config, primary);
+  $inactive-icon-color: theming.get-color-from-palette($foreground, icon);
+  $text-color: theming.get-color-from-palette($foreground, text);
+  $secondary-text-color: theming.get-color-from-palette($foreground, secondary-text);
+  $disabled-text-color: theming.get-color-from-palette($foreground, disabled-text);
+  $divider-color: theming.get-color-from-palette($foreground, divider);
+  $hint-text-color: theming.get-color-from-palette($foreground, hint-text);
+  $preview-outline-color: $divider-color;
+  $today-disabled-outline-color: null;
+
+  $primary-color: theming.get-color-from-palette(map.get($config, primary));
+  $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
+  $calendar-tokens: private-get-calendar-color-palette-color-tokens($config, primary);
+  $toggle-tokens: private-get-toggle-color-palette-color-tokens($config, primary);
+
+  // The divider color is set under the assumption that it'll be used
+  // for a solid border, but because we're using a dashed border for the
+  // preview range, we need to bump its opacity to ensure that it's visible.
+  @if meta.type-of($preview-outline-color) == color {
+    $preview-outline-opacity: math.min(opacity($preview-outline-color) * 2, 1);
+    $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
+  }
+
+  @if (meta.type-of($hint-text-color) == color) {
+    $today-disabled-outline-color: color.adjust($hint-text-color, $alpha: -$_today-fade-amount);
+  }
+  @else {
+    $today-disabled-outline-color: $disabled-text-color;
+  }
+
+  @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
+    toggle-icon-color: $inactive-icon-color,
+    calendar-body-label-text-color: $secondary-text-color,
+    calendar-period-button-icon-color: $inactive-icon-color,
+    calendar-navigation-button-icon-color: $inactive-icon-color,
+    calendar-header-divider-color: $divider-color,
+    calendar-header-text-color: $secondary-text-color,
+
+    // Note: though it's not text, the border is a hint about the fact
+    // that this is today's date, so we use the hint color.
+    calendar-date-today-outline-color: $hint-text-color,
+    calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
+    calendar-date-text-color: $text-color,
+    calendar-date-outline-color: transparent,
+    calendar-date-disabled-state-text-color: $disabled-text-color,
+    calendar-date-preview-state-outline-color: $preview-outline-color,
+
+    range-input-separator-color: $text-color,
+    range-input-disabled-state-separator-color: $disabled-text-color,
+    range-input-disabled-state-text-color: $disabled-text-color,
+
+    calendar-container-background-color: theming.get-color-from-palette($background, card),
+    calendar-container-text-color: $text-color,
+  ));
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font: typography-utils.font-family($config);
+
+  @return (
+    // TODO(crisbeto): the typography tokens for other components set every typography dimension of
+    // an element (e.g. size, weight, line height, letter spacing). These tokens only set the values
+    // that were set in the previous theming API to reduce the amount of subtle screenshot
+    // differences. We should look into introducing the other tokens in a follow-up.
+    calendar-text-font: $fallback-font,
+    calendar-text-size: 13px, // TODO(crisbeto): this doesn't appear to affect anything
+
+    calendar-body-label-text-size: typography-utils.font-size($config, button),
+    calendar-body-label-text-weight: typography-utils.font-weight($config, button),
+
+    calendar-period-button-text-size: typography-utils.font-size($config, button),
+    calendar-period-button-text-weight: typography-utils.font-weight($config, button),
+
+    calendar-header-text-size: 11px,
+    calendar-header-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Gets the tokens map that can be used to override the range colors.
+@function get-range-color-tokens(
+  $range-color,
+  $comparison-color: $private-default-comparison-color,
+  $overlap-color: $private-default-overlap-color,
+  $overlap-selected-color: private-get-default-overlap-selected-color($overlap-color)) {
+
+  @return (
+    calendar-date-in-range-state-background-color: $range-color,
+    calendar-date-in-comparison-range-state-background-color: $comparison-color,
+    calendar-date-in-overlap-range-state-background-color: $overlap-color,
+    calendar-date-in-overlap-range-selected-state-background-color: $overlap-selected-color,
+  );
+}
+
+@function private-get-calendar-color-palette-color-tokens($config, $palette-name) {
+  $foreground: map.get($config, foreground);
+  $palette: map.get($config, $palette-name);
+  $palette-color: theming.get-color-from-palette($palette);
+  $default-contrast: theming.get-color-from-palette($palette, default-contrast);
+  $active-background-color: theming.get-color-from-palette($palette, 0.3);
+  $active-disabled-color: null;
+
+  @if (meta.type-of($palette-color) == color) {
+    $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
+  }
+  @else {
+    $active-disabled-color: theming.get-color-from-palette($foreground, disabled-button);
+  }
+
+  @return (
+    calendar-date-selected-state-text-color: $default-contrast,
+    calendar-date-selected-state-background-color: $palette-color,
+    calendar-date-selected-disabled-state-background-color: $active-disabled-color,
+    calendar-date-today-selected-state-outline-color: $default-contrast,
+    calendar-date-focus-state-background-color: $active-background-color,
+    calendar-date-hover-state-background-color: $active-background-color,
+  );
+}
+
+@function private-get-toggle-color-palette-color-tokens($config, $palette-name) {
+  $palette: map.get($config, $palette-name);
+
+  @return (
+    toggle-active-state-icon-color: theming.get-color-from-palette($palette, text),
+  );
+}
+
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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/_divider.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, divider);
+
+// 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 (
+    width: 1px
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+
+  @return (
+    color: theming.get-color-from-palette($foreground, divider)
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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)
+  );
+}