@angular/material 16.1.5 → 16.1.7

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

@@ -1,26 +1,25 @@
-@use 'sass:map';
-@use '../core/style/private';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
 @use '../core/theming/theming';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
 
-  .mat-bottom-sheet-container {
-    @include private.private-theme-elevation(16, $config);
-    background: theming.get-color-from-palette($background, dialog);
-    color: theming.get-color-from-palette($foreground, text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
+      tokens-mat-bottom-sheet.get-color-tokens($config));
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2014-config(
       theming.get-typography-config($config-or-theme));
-  .mat-bottom-sheet-container {
-    @include typography-utils.typography-level($config, body-1);
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
+      tokens-mat-bottom-sheet.get-typography-tokens($config));
   }
 }
 

package/button/index.d.ts

@@ -12,7 +12,6 @@ import * as i4 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { MatRipple } from '@angular/material/core';
 import { NgZone } from '@angular/core';
-import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
@@ -95,7 +94,7 @@ export declare class MatButton extends MatButtonBase {
 }
 
 /** Base class for all buttons.  */
-declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnChanges, OnDestroy {
+declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnDestroy {
     _platform: Platform;
     _ngZone: NgZone;
     _animationMode?: string | undefined;
@@ -114,25 +113,30 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
      */
     get ripple(): MatRipple;
     set ripple(v: MatRipple);
-    /** @docs-private Reference to the MatRipple instance of the button. */
-    protected _ripple?: MatRipple;
+    /** Whether the ripple effect is disabled or not. */
+    get disableRipple(): boolean;
+    set disableRipple(value: any);
+    private _disableRipple;
+    get disabled(): boolean;
+    set disabled(value: any);
+    private _disabled;
     constructor(elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
     ngAfterViewInit(): void;
-    ngOnChanges(): void;
     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, {}, {}, never, never, false, never>;
 }
 
 /**
- * Handles attaching the MatButton's ripple on demand.
+ * Handles attaching ripples on demand.
  *
- * This service allows us to avoid eagerly creating & attaching the MatButton's ripple.
- * It works by creating & attaching the ripple only when a MatButton is first interacted with.
+ * This service allows us to avoid eagerly creating & attaching MatRipples.
+ * It works by creating & attaching a ripple only when a component is first interacted with.
  */
 declare class MatButtonLazyLoader implements OnDestroy {
     private _document;
@@ -142,11 +146,26 @@ declare class MatButtonLazyLoader implements OnDestroy {
     private _ngZone;
     constructor();
     ngOnDestroy(): void;
-    /** Handles creating and attaching button internals when a button is initially interacted with. */
+    /**
+     * Configures the ripple that will be rendered by the ripple loader.
+     *
+     * Stores the given information about how the ripple should be configured on the host
+     * element so that it can later be retrived & used when the ripple is actually created.
+     */
+    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;
+    /** Sets the disabled state on the ripple instance corresponding to the given host element. */
+    setDisabled(host: HTMLElement, disabled: boolean): void;
+    /** Handles creating and attaching component internals when a component it is initially interacted with. */
     private _onInteraction;
-    /** Creates a MatButtonRipple and appends it to the given button element. */
-    private _appendRipple;
-    _createMatRipple(button: HTMLElement): MatRipple | undefined;
+    /** Creates a MatRipple and appends it to the given element. */
+    createRipple(host: HTMLElement): MatRipple | undefined;
+    attachRipple(host: Element, ripple: MatRipple): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonLazyLoader, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatButtonLazyLoader>;
 }
@@ -222,12 +241,6 @@ export declare class MatIconAnchor extends MatAnchorBase {
  * See https://material.io/develop/web/components/buttons/icon-buttons/
  */
 export declare class MatIconButton extends MatButtonBase {
-    /**
-     * Reference to the MatRipple instance of the button.
-     * @deprecated Considered an implementation detail. To be removed.
-     * @breaking-change 17.0.0
-     */
-    get ripple(): MatRipple;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconButton, [null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button]", ["matButton"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;

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/core/selection/pseudo-checkbox/_pseudo-checkbox-common.scss

@@ -42,7 +42,7 @@ $padding: checkbox-common.$border-width * 2;
 // `$box-size`: size of the checkbox.
 // `$border-size`: size of the checkbox's border.
 @mixin _checkbox-indeterminate-styles-with-size($box-size, $border-size) {
-  // Center the line in the the checkbox. `$checkbox-common.$border-width` is the width of the line.
+  // Center the line in the checkbox. `$checkbox-common.$border-width` is the width of the line.
   top: math.div($box-size - checkbox-common.$border-width, 2) - $border-size;
   width: $box-size - checkbox-common.$border-width - (2 * $border-size);
 }

package/core/tokens/_token-utils.scss

@@ -40,6 +40,7 @@ $placeholder-typography-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/_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/_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)
+  );
+}

package/core/tokens/m2/mat/_grid-list.scss

@@ -0,0 +1,46 @@
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, grid-list);
+
+// 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) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // TODO(crisbeto): other components have tokens for all typography dimensions.
+    // Here we only set the font size to maintain the same appearance as the pre-tokens
+    // theming API. Consider adding more tokens for letter spacing, font weight etc.
+    tile-header-primary-text-size: typography-utils.font-size($config, body-1),
+    tile-header-secondary-text-size: typography-utils.font-size($config, caption),
+    tile-footer-primary-text-size: typography-utils.font-size($config, body-1),
+    tile-footer-secondary-text-size: typography-utils.font-size($config, caption),
+  );
+}
+
+// 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/_legacy-button-toggle.scss

@@ -0,0 +1,63 @@
+@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, legacy-button-toggle);
+
+// 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 (
+    height: 36px,
+    shape: 2px,
+    focus-state-layer-opacity: 1,
+  );
+}
+
+// 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 (
+    text-color: theming.get-color-from-palette($foreground, hint-text),
+    state-layer-color: theming.get-color-from-palette($background, focused-button),
+    selected-state-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    selected-state-background-color: theming.get-color-from-palette($background, selected-button),
+    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
+    disabled-state-background-color:
+      theming.get-color-from-palette($background, disabled-button-toggle),
+    disabled-selected-state-background-color:
+      theming.get-color-from-palette($background, selected-disabled-button)
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
+    // letter spacing etc). The button toggle only has the font to match what it had in the
+    // old theming API and to reduce internal breakages. We should introduce more typography
+    // tokens at some point.
+    text-font: typography-utils.font-family($config),
+  );
+}
+
+// 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/_sidenav.scss

@@ -0,0 +1,65 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@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, sidenav);
+
+// 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 (
+    // Currently zero, but it appears to be relevant for M3.
+    // See: https://m3.material.io/components/navigation-drawer/overview
+    container-shape: 0,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $scrim-opacity: 0.6;
+  $scrim-color: theming.get-color-from-palette($background, card, $scrim-opacity);
+  $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
+
+  @return (
+    container-divider-color: theming.get-color-from-palette($foreground, divider),
+    container-background-color: theming.get-color-from-palette($background, dialog),
+    container-text-color: theming.get-color-from-palette($foreground, text),
+    content-background-color: theming.get-color-from-palette($background, background),
+    content-text-color: theming.get-color-from-palette($foreground, text),
+
+    // We use invert() here to have the darken the background color expected to be used.
+    // If the background is light, we use a dark backdrop. If the background is dark, we
+    // use a light backdrop. If the value isn't a color, Sass will throw an error so we
+    // fall back to something generic.
+    scrim-color: if(meta.type-of($scrim-color) == color,
+      color.invert($scrim-color), $fallback-scrim-color),
+  );
+}
+
+// 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)
+  );
+}

package/core/tokens/m2/mat/_standard-button-toggle.scss

@@ -0,0 +1,87 @@
+@use 'sass:map';
+@use 'sass:meta';
+@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, standard-button-toggle);
+
+// 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 (
+    shape: 4px,
+    hover-state-layer-opacity: 0.04,
+    focus-state-layer-opacity: 0.12,
+  );
+}
+
+// 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);
+  $theme-divider-color: theming.get-color-from-palette($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(meta.type-of($theme-divider-color) == color,
+    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),
+    $theme-divider-color
+  );
+
+  @return (
+    text-color: theming.get-color-from-palette($foreground, text),
+    background-color: theming.get-color-from-palette($background, card),
+    state-layer-color: theming.get-color-from-palette($background, focused-button, 1),
+    selected-state-background-color: theming.get-color-from-palette($background, selected-button),
+    selected-state-text-color: theming.get-color-from-palette($foreground, text),
+    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
+    disabled-state-background-color: theming.get-color-from-palette($background, card),
+    disabled-selected-state-text-color: theming.get-color-from-palette($foreground, text),
+    disabled-selected-state-background-color:
+      theming.get-color-from-palette($background, selected-disabled-button),
+    divider-color: $divider-color,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
+    // letter spacing etc). The button toggle only has the font to match what it had in the
+    // old theming API and to reduce internal breakages. We should introduce more typography
+    // tokens at some point.
+    text-font: typography-utils.font-family($config),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $density-scale: theming.clamp-density($config, -4);
+  $size-scale: (
+    0: 48px,
+    -1: 44px,
+    -2: 40px,
+    -3: 36px,
+    -4: 24px,
+  );
+
+  @return (
+    height: map.get($size-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)
+  );
+}