@angular/material 16.1.0-next.0 → 16.1.0-next.2

package/_index.scss

@@ -9,10 +9,12 @@
   $amber-palette, $orange-palette, $deep-orange-palette, $brown-palette, $grey-palette,
   $gray-palette, $blue-grey-palette, $blue-gray-palette, $light-theme-background-palette,
   $dark-theme-background-palette, $light-theme-foreground-palette, $dark-theme-foreground-palette;
-@forward './core/typography/typography' show define-typography-level,
-  define-legacy-typography-config, legacy-typography-hierarchy, typography-hierarchy;
+@forward './core/typography/typography' show define-typography-level, define-rem-typography-config,
+  define-typography-config, typography-hierarchy, define-legacy-typography-config,
+  legacy-typography-hierarchy;
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
+@forward './core/tokens/m2' show m2-tokens-from-theme;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;
@@ -36,6 +38,8 @@
 @forward './core/style/button-common' as private-button-common-*;
 // The form field density mixin needs to be exposed, because the paginator depends on it.
 @forward './form-field/form-field-theme' as private-form-field-* show private-form-field-density;
+@forward './token-theming' as private-apply-*;
+@forward './core/style/sass-utils' as private-*;
 
 // Structural
 @forward './core/core' show core;
@@ -48,8 +52,7 @@
 // Theme bundles
 @forward './core/theming/all-theme' show all-component-themes;
 @forward './core/color/all-color' show all-component-colors;
-@forward './core/typography/all-typography' show all-component-typographies,
-  define-rem-typography-config, define-typography-config;
+@forward './core/typography/all-typography' show all-component-typographies;
 @forward './legacy-core/theming/all-theme' show all-legacy-component-themes;
 @forward './legacy-core/color/all-color' show all-legacy-component-colors;
 @forward './legacy-core/typography/all-typography' show all-legacy-component-typographies;

package/_token-theming.scss

@@ -0,0 +1,2 @@
+@forward './card/card-theme' as card-* show card-theme-from-tokens;
+@forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme-from-tokens;

package/button/_icon-button-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use 'sass:math';
 @use '@material/density/functions' as mdc-density-functions;
-@use '@material/icon-button/mixins' as mdc-icon-button;
 @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;

package/button/index.d.ts

@@ -12,6 +12,7 @@ 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';
@@ -94,7 +95,7 @@ export declare class MatButton extends MatButtonBase {
 }
 
 /** Base class for all buttons.  */
-declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnDestroy {
+declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnChanges, OnDestroy {
     _platform: Platform;
     _ngZone: NgZone;
     _animationMode?: string | undefined;
@@ -117,12 +118,12 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
     protected _ripple?: MatRipple;
     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;
-    _isRippleDisabled(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, {}, {}, never, never, false, never>;
 }

package/card/_card-theme.import.scss

@@ -1,3 +1,3 @@
-@forward 'card-theme' hide color, density, theme, typography;
+@forward 'card-theme' hide color, density, theme, typography, theme-from-tokens;
 @forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
 $mat-mdc-card-mdc-card-outline-color;

package/card/_card-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
@@ -76,3 +77,13 @@
     }
   }
 }
+
+@mixin theme-from-tokens($tokens) {
+  // Add values for card tokens.
+  .mat-mdc-card {
+    @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));
+  }
+}

package/checkbox/_checkbox-theme.import.scss

@@ -1,5 +1,5 @@
 @forward 'checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme,
-typography;
+typography, theme-from-tokens;
 @forward 'checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
 $mat-mdc-mdc-checkbox-disabled-color, mat-mdc-background-focus-density,
 mat-mdc-background-focus-indicator-checked-color, mat-mdc-background-focus-indicator-color,

package/checkbox/_checkbox-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
@@ -12,9 +13,11 @@
   $warn: map.get($config, warn);
   $foreground: map.get($config, foreground);
 
-  .mat-mdc-checkbox {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
+  }
 
+  .mat-mdc-checkbox {
     &.mat-primary {
       $primary-config: map.merge($config, (accent: $primary));
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
@@ -40,9 +43,12 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
-  .mat-mdc-checkbox {
+
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
+  }
 
+  .mat-mdc-checkbox {
     @include mdc-helpers.using-mdc-typography($config) {
       // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
       @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
@@ -53,7 +59,7 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  .mat-mdc-checkbox {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
   }
 
@@ -82,3 +88,12 @@
     }
   }
 }
+
+@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.
+
+  .mat-mdc-checkbox {
+    @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
+  }
+}

package/chips/_chips-theme.scss

@@ -2,100 +2,84 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '@material/chips/chip-theme' as mdc-chip-theme;
-@use '@material/chips/chip-set' as mdc-chip-set;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/color-palette' as mdc-color-palette;
-@use '@material/typography' as mdc-typography;
-@use '../core/mdc-helpers/mdc-helpers';
+@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
+@use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
+@use '../core/mdc-helpers/mdc-helpers';
 
-@mixin _chip-variant($background, $foreground) {
-  @include mdc-chip-theme.theme((
-    elevated-container-color: $background,
-    elevated-disabled-container-color: $background,
-    label-text-color: $foreground,
-    disabled-label-text-color: $foreground,
-    with-icon-icon-color: $foreground,
-    with-icon-disabled-icon-color: $foreground,
-    with-trailing-icon-disabled-trailing-icon-color: $foreground,
-    with-trailing-icon-trailing-icon-color: $foreground,
-    with-icon-selected-icon-color: $foreground,
-  ));
-}
+@function _get-default-palette($config) {
+  $is-dark: map.get($config, is-dark);
+  $grey-50: map.get(palette.$grey-palette, 50);
+  $grey-900: map.get(palette.$grey-palette, 900);
+  $default-foreground: if($is-dark, $grey-50, $grey-900);
 
-@mixin _colored-chip($palette) {
-  $background: theming.get-color-from-palette($palette);
-  $foreground: theming.get-color-from-palette($palette, default-contrast);
+  $surface: map.get(map.get($config, background), card);
+  $on-surface: if(
+    mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark',
+    #000,
+    #fff
+  );
+  $default-background: if(
+    meta.type-of($on-surface) == color and meta.type-of($surface) == color,
+    color.mix($on-surface, $surface, 12%),
+    $on-surface
+  );
 
-  &.mat-mdc-chip-selected,
-  &.mat-mdc-chip-highlighted {
-    @include _chip-variant($background, $foreground);
-  }
+  @return (default: $default-background, default-contrast: $default-foreground);
 }
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: map.get($config, primary);
-  $accent: map.get($config, accent);
-  $warn: map.get($config, warn);
-  $foreground: map.get($config, foreground);
-  $is-dark: map.get($config, is-dark);
-
-  @include mdc-helpers.using-mdc-theme($config) {
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $surface: mdc-theme-color.prop-value(surface);
-
-    .mat-mdc-standard-chip {
-      $standard-background: if(
-        meta.type-of($on-surface) == color and meta.type-of($surface) == color,
-        color.mix($on-surface, $surface, 12%),
-        $on-surface
-      );
 
-      @include _chip-variant(
-        $standard-background,
-        if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900)
-      );
+  .mat-mdc-standard-chip {
+    $default-palette: _get-default-palette($config);
+    $default-config: map.merge($config, (primary: $default-palette));
+    $default-color-tokens: tokens-mdc-chip.get-color-tokens($default-config);
+    @include mdc-chip-theme.theme($default-color-tokens);
 
+    &.mat-mdc-chip-selected,
+    &.mat-mdc-chip-highlighted {
       &.mat-primary {
-        @include _colored-chip($primary);
+        $primary-color-tokens: tokens-mdc-chip.get-color-tokens($config);
+        @include mdc-chip-theme.theme($primary-color-tokens);
       }
 
       &.mat-accent {
-        @include _colored-chip($accent);
+        $accent-config: map.merge($config, (primary: map.get($config, accent)));
+        $accent-color-tokens: tokens-mdc-chip.get-color-tokens($accent-config);
+        @include mdc-chip-theme.theme($accent-color-tokens);
       }
 
       &.mat-warn {
-        @include _colored-chip($warn);
+        $warn-config: map.merge($config, (primary: map.get($config, warn)));
+        $warn-color-tokens: tokens-mdc-chip.get-color-tokens($warn-config);
+        @include mdc-chip-theme.theme($warn-color-tokens);
       }
     }
   }
 
   .mat-mdc-chip-focus-overlay {
-    background: map.get($foreground, base);
+    background: map.get(map.get($config, foreground), base);
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-  @include mdc-chip-set.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-  @include mdc-helpers.using-mdc-typography($config) {
-    // Note that we don't go through MDC's typography mixin, because it assigns the styles to
-    // an inner element which makes it difficult for clients to customize. Instead we apply the
-    // same styles ourselves to the root.
-    .mat-mdc-standard-chip {
-      @include mdc-typography.typography(body2, $query: mdc-helpers.$mdc-typography-styles-query);
-    }
+    theming.get-typography-config($config-or-theme)
+  );
+  $typography-tokens: tokens-mdc-chip.get-typography-tokens($config);
+
+  .mat-mdc-standard-chip {
+    @include mdc-chip-theme.theme($typography-tokens);
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  $density-scale: theming.clamp-density($density-scale, -2);
+  $density-tokens: tokens-mdc-chip.get-density-tokens($density-scale);
   .mat-mdc-chip.mat-mdc-standard-chip {
-    @include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);
+    @include mdc-chip-theme.theme($density-tokens);
   }
 }
 

package/core/mdc-helpers/_mdc-helpers.scss

@@ -83,24 +83,9 @@ $mat-typography-mdc-level-mappings: (
   @return $mdc-config;
 }
 
-// Converts an MDC typography level config to an Angular Material one.
-@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
-  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
-
-  // Explicitly default the font family to null since we'll apply it globally
-  // through the `define-typgraphy-config`/`define-legacy-typography-config`.
-  @return typography.define-typography-level(
-    $font-family: $font-family,
-    $font-size: map.get($mdc-level-config, font-size),
-    $line-height: map.get($mdc-level-config, line-height),
-    $font-weight: map.get($mdc-level-config, font-weight),
-    $letter-spacing: map.get($mdc-level-config, letter-spacing)
-  );
-}
-
 // MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
 // This function falls back to determining the tone based on whether the theme is light or dark.
-@function _variable-safe-contrast-tone($value, $is-dark) {
+@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);
   }
@@ -109,7 +94,7 @@ $mat-typography-mdc-level-mappings: (
 }
 
 @function _variable-safe-ink-color-for-fill($text-style, $fill-color, $is-dark) {
-  $contrast-tone: _variable-safe-contrast-tone($fill-color, $is-dark);
+  $contrast-tone: variable-safe-contrast-tone($fill-color, $is-dark);
   @return map.get(map.get(mdc-theme-color.$text-colors, $contrast-tone), $text-style);
 }
 
@@ -137,17 +122,17 @@ $mat-typography-mdc-level-mappings: (
   // Set new values based on the given Angular Material theme.
   mdc-theme-color.$primary: $primary;
   mdc-theme-color.$on-primary:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$primary, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$secondary: $accent;
   mdc-theme-color.$on-secondary:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
   mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
   mdc-theme-color.$on-surface:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$error: $warn;
   mdc-theme-color.$on-error:
-      if(_variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
+      if(variable-safe-contrast-tone(mdc-theme-color.$error, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$property-values: (
       // Primary
       primary: mdc-theme-color.$primary,
@@ -238,19 +223,19 @@ $mat-typography-mdc-level-mappings: (
   $font-family: mdc-typography.$font-family;
   @return (
     font-family: $font-family,
-    headline-1: typography-config-level-from-mdc(headline1, $font-family),
-    headline-2: typography-config-level-from-mdc(headline2, $font-family),
-    headline-3: typography-config-level-from-mdc(headline3, $font-family),
-    headline-4: typography-config-level-from-mdc(headline4, $font-family),
-    headline-5: typography-config-level-from-mdc(headline5, $font-family),
-    headline-6: typography-config-level-from-mdc(headline6, $font-family),
-    subtitle-1: typography-config-level-from-mdc(subtitle1, $font-family),
-    subtitle-2: typography-config-level-from-mdc(subtitle2, $font-family),
-    body-1: typography-config-level-from-mdc(body1, $font-family),
-    body-2: typography-config-level-from-mdc(body2, $font-family),
-    caption: typography-config-level-from-mdc(caption, $font-family),
-    button: typography-config-level-from-mdc(button, $font-family),
-    overline: typography-config-level-from-mdc(overline, $font-family),
+    headline-1: typography.typography-config-level-from-mdc(headline1, $font-family),
+    headline-2: typography.typography-config-level-from-mdc(headline2, $font-family),
+    headline-3: typography.typography-config-level-from-mdc(headline3, $font-family),
+    headline-4: typography.typography-config-level-from-mdc(headline4, $font-family),
+    headline-5: typography.typography-config-level-from-mdc(headline5, $font-family),
+    headline-6: typography.typography-config-level-from-mdc(headline6, $font-family),
+    subtitle-1: typography.typography-config-level-from-mdc(subtitle1, $font-family),
+    subtitle-2: typography.typography-config-level-from-mdc(subtitle2, $font-family),
+    body-1: typography.typography-config-level-from-mdc(body1, $font-family),
+    body-2: typography.typography-config-level-from-mdc(body2, $font-family),
+    caption: typography.typography-config-level-from-mdc(caption, $font-family),
+    button: typography.typography-config-level-from-mdc(button, $font-family),
+    overline: typography.typography-config-level-from-mdc(overline, $font-family),
   );
 }
 

package/core/style/_sass-utils.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+/// Include content under the current selector (&) or the document root if there is no current
+/// selector.
+/// @param {String} $root [html] The default root selector to use when there is no current selector.
+/// @output The given content under the current selector, or root selector if there is no current
+///     selector.
+/// @content Content to output under the current selector, or root selector if there is no current
+///     selector.
+@mixin current-selector-or-root($root: html) {
+  @at-root #{& or $root} {
+    @content;
+  }
+}
+
+/// A version of the standard `map.deep-merge` function that takes a variable number of arguments.
+/// Each argument is deep-merged into the final result from left to right.
+/// @param {List} $maps The maps to combine with map.deep-merge
+/// @return {Map} The combined result of successively calling map.deep-merge with each parameter.
+@function deep-merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.deep-merge($result, $map);
+  }
+  @return $result;
+}
+
+/// Coerces the given value to a list, by converting any non-list value into a single-item list.
+/// This should be used when dealing with user-passed lists of args to avoid confusing errors,
+/// since Sass treats `($x)` as equivalent to `$x`.
+/// @param {Any} $value The value to coerce to a list.
+/// @return {List} The original $value if it was a list, otherwise a single-item list containing
+///     $value.
+@function coerce-to-list($value) {
+  @return if(meta.type-of($value) != 'list', ($value,), $value);
+}

package/core/tokens/_token-utils.scss

@@ -3,9 +3,9 @@
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
-@use '../mdc-helpers/mdc-helpers';
 @use '../theming/palette';
 @use '../theming/theming';
+@use '../typography/typography';
 
 $_placeholder-color-palette: theming.define-palette(palette.$red-palette);
 
@@ -20,7 +20,7 @@ $placeholder-color-config: (
   background: palette.$light-theme-background-palette,
 );
 
-$_placeholder-typography-level-config: mdc-helpers.typography-config-level-from-mdc(body1);
+$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
 
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
@@ -52,7 +52,7 @@ $_component-prefix: null;
   $_component-prefix: '' !global;
   @each $item in $rest {
     $_component-prefix:
-        if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
+      if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
   }
   @include mdc-custom-properties.configure($varname-prefix: $first) {
     @content;
@@ -87,15 +87,6 @@ $_component-prefix: null;
   }
 }
 
-// Merges together a list of maps into a single map.
-@function merge-all($maps...) {
-  $result: ();
-  @each $map in $maps {
-    $result: map.merge($result, $map);
-  }
-  @return $result;
-}
-
 // MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
 // the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
 // elevation token.

package/core/tokens/m2/_index.scss

@@ -0,0 +1,84 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../style/sass-utils';
+
+@use './mat/card' as tokens-mat-card;
+@use './mat/radio' as tokens-mat-radio;
+@use './mat/snack-bar' as tokens-mat-snack-bar;
+@use './mat/tab-header' as tokens-mat-tab-header;
+@use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
+@use './mdc/checkbox' as tokens-mdc-checkbox;
+@use './mdc/circular-progress' as tokens-mdc-circular-progress;
+@use './mdc/dialog' as tokens-mdc-dialog;
+@use './mdc/elevated-card' as tokens-mdc-elevated-card;
+@use './mdc/icon-button' as tokens-mdc-icon-button;
+@use './mdc/linear-progress' as tokens-mdc-linear-progress;
+@use './mdc/list' as tokens-mdc-list;
+@use './mdc/outlined-card' as tokens-mdc-outlined-card;
+@use './mdc/radio' as tokens-mdc-radio;
+@use './mdc/snack-bar' as tokens-mdc-snack-bar;
+@use './mdc/tab' as tokens-mdc-tab;
+@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
+
+/// Gets the tokens for the given theme, m2 tokens module, and theming system.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @param {String} $module The Sass module containing the token getter functions.
+/// @param {String} $system The theming system to get tokens for. Valid values are: unthemable,
+///     color, typography, density.
+/// @return {Map} The token map by calling the token getter for the given system in the given module
+///    with the given Angular Material theme. Token names are not fully-qualified.
+@function _get-tokens-for-module-and-system($theme, $module, $system) {
+  @if $system == unthemable {
+    @return meta.call(
+        meta.get-function(get-#{$system}-tokens, $module: $module));
+  }
+  @if not map.get($theme, $system) {
+    @return ();
+  }
+  @return meta.call(
+      meta.get-function(get-#{$system}-tokens, $module: $module), map.get($theme, $system));
+}
+
+/// Gets the fully qualified tokens map for the given theme and m2 tokens module.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @param {String} $module The Sass module containing the token getter functions.
+/// @return {Map} The token map by calling the token getters in the given module with the given
+///     Angular Material theme. Token names are fully-qualified.
+@function _get-tokens-for-module($theme, $module) {
+  $tokens: sass-utils.deep-merge-all(
+      _get-tokens-for-module-and-system($theme, $module, unthemable),
+      _get-tokens-for-module-and-system($theme, $module, color),
+      _get-tokens-for-module-and-system($theme, $module, typography),
+      _get-tokens-for-module-and-system($theme, $module, density));
+  @return map.set((), map.get(meta.module-variables($module), prefix), $tokens);
+}
+
+/// Gets the full set of M2 tokens for the given theme object.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @return {Map} The token map for the given Angular Material theme. Returned format:
+///     (
+///       (fully, qualified, namespace): (
+///         token: value
+///       )
+///     )
+@function m2-tokens-from-theme($theme) {
+  @return sass-utils.deep-merge-all(
+      _get-tokens-for-module($theme, tokens-mat-card),
+      _get-tokens-for-module($theme, tokens-mat-radio),
+      _get-tokens-for-module($theme, tokens-mat-snack-bar),
+      _get-tokens-for-module($theme, tokens-mat-tab-header),
+      _get-tokens-for-module($theme, tokens-mat-tab-header-with-background),
+      _get-tokens-for-module($theme, tokens-mdc-checkbox),
+      _get-tokens-for-module($theme, tokens-mdc-circular-progress),
+      _get-tokens-for-module($theme, tokens-mdc-dialog),
+      _get-tokens-for-module($theme, tokens-mdc-elevated-card),
+      _get-tokens-for-module($theme, tokens-mdc-icon-button),
+      _get-tokens-for-module($theme, tokens-mdc-linear-progress),
+      _get-tokens-for-module($theme, tokens-mdc-list),
+      _get-tokens-for-module($theme, tokens-mdc-outlined-card),
+      _get-tokens-for-module($theme, tokens-mdc-radio),
+      _get-tokens-for-module($theme, tokens-mdc-snack-bar),
+      _get-tokens-for-module($theme, tokens-mdc-tab),
+      _get-tokens-for-module($theme, tokens-mdc-tab-indicator),
+  );
+}

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

@@ -2,6 +2,7 @@
 @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, card);
@@ -18,7 +19,7 @@ $prefix: (mat, card);
 
   @return (
     // Text color of the card's subtitle.
-      subtitle-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    subtitle-text-color: theming.get-color-from-palette($foreground, secondary-text),
   );
 }
 
@@ -26,27 +27,27 @@ $prefix: (mat, card);
 @function get-typography-tokens($config) {
   @return (
     // Font family of the card's title.
-      title-text-font: typography-utils.font-family($config, headline-6)
+    title-text-font: typography-utils.font-family($config, headline-6)
           or typography-utils.font-family($config),
     // Line height of the card's title.
-      title-text-line-height: typography-utils.line-height($config, headline-6),
+    title-text-line-height: typography-utils.line-height($config, headline-6),
     // Font size of the card's title.
-      title-text-size: typography-utils.font-size($config, headline-6),
+    title-text-size: typography-utils.font-size($config, headline-6),
     // Letter spacing of the card's title.
-      title-text-tracking: typography-utils.letter-spacing($config, headline-6),
+    title-text-tracking: typography-utils.letter-spacing($config, headline-6),
     // Font weight of the card's title.
-      title-text-weight: typography-utils.font-weight($config, headline-6),
+    title-text-weight: typography-utils.font-weight($config, headline-6),
     // Font family of the card's subtitle.
-      subtitle-text-font: typography-utils.font-family($config, subtitle-2)
+    subtitle-text-font: typography-utils.font-family($config, subtitle-2)
           or typography-utils.font-family($config),
     // Line height of the card's subtitle.
-      subtitle-text-line-height: typography-utils.line-height($config, subtitle-2),
+    subtitle-text-line-height: typography-utils.line-height($config, subtitle-2),
     // Font size of the card's subtitle.
-      subtitle-text-size: typography-utils.font-size($config, subtitle-2),
+    subtitle-text-size: typography-utils.font-size($config, subtitle-2),
     // Letter spacing of the card's subtitle.
-      subtitle-text-tracking: typography-utils.letter-spacing($config, subtitle-2),
+    subtitle-text-tracking: typography-utils.letter-spacing($config, subtitle-2),
     // Font weight of the card's subtitle.
-      subtitle-text-weight: typography-utils.font-weight($config, subtitle-2),
+    subtitle-text-weight: typography-utils.font-weight($config, subtitle-2),
   );
 }
 
@@ -58,10 +59,10 @@ $prefix: (mat, card);
 // 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 token-utils.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)
+  @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)
   );
 }