@angular/material 16.1.0-next.1 → 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/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

@@ -88,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/core/mdc-helpers/_mdc-helpers.scss

@@ -83,21 +83,6 @@ $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) {
@@ -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

@@ -1,7 +1,37 @@
-// Include content under the current selector (&) or the document root if there is no current
-// selector.
+@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)
   );
 }

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

@@ -1,6 +1,7 @@
 @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, radio);
@@ -37,10 +38,10 @@ $prefix: (mat, radio);
 // 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)
   );
 }

package/core/tokens/m2/mat/_snack-bar.scss

@@ -1,6 +1,7 @@
 @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, snack-bar);
@@ -34,10 +35,10 @@ $prefix: (mat, snack-bar);
 // 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)
   );
 }

package/core/tokens/m2/mat/_tab-header-with-background.scss

@@ -1,6 +1,7 @@
 @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, tab-header-with-background);
@@ -34,10 +35,10 @@ $prefix: (mat, tab-header-with-background);
 // 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)
   );
 }

package/core/tokens/m2/mat/_tab-header.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, tab-header);
@@ -62,7 +63,7 @@ $prefix: (mat, tab-header);
 // 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(
+  @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),

package/core/tokens/m2/mdc/_checkbox.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../theming/palette';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 @use '@material/theme/theme-color' as mdc-theme-color;
 
@@ -26,25 +27,25 @@ $prefix: (mdc, checkbox);
 @function get-unthemable-tokens() {
   @return (
     // The color of the checkmark when the checkbox is selected and disabled.
-      disabled-selected-checkmark-color: #fff,
+    disabled-selected-checkmark-color: #fff,
     // The opacity of the ripple when the checkbox is selected and focused.
-      selected-focus-state-layer-opacity: 0.16,
+    selected-focus-state-layer-opacity: 0.16,
     // The opacity of the ripple when the checkbox is selected and hovered.
-      selected-hover-state-layer-opacity: 0.04,
+    selected-hover-state-layer-opacity: 0.04,
     // The opacity of the ripple when the checkbox is selected and pressed.
-      selected-pressed-state-layer-opacity: 0.16,
+    selected-pressed-state-layer-opacity: 0.16,
     // The opacity of the ripple when the checkbox is unselected and focused.
-      unselected-focus-state-layer-opacity: 0.16,
+    unselected-focus-state-layer-opacity: 0.16,
     // The opacity of the ripple when the checkbox is unselected and hovered.
-      unselected-hover-state-layer-opacity: 0.04,
+    unselected-hover-state-layer-opacity: 0.04,
     // The opacity of the ripple when the checkbox is unselected and pressed.
-      unselected-pressed-state-layer-opacity: 0.16,
+    unselected-pressed-state-layer-opacity: 0.16,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     // MDC currently doesn't output a slot for these tokens.
-      disabled-selected-icon-opacity: null,
-      disabled-unselected-icon-opacity: null,
+    disabled-selected-icon-opacity: null,
+    disabled-unselected-icon-opacity: null,
   );
 }
 
@@ -59,43 +60,43 @@ $prefix: (mdc, checkbox);
   $selected-color: theming.get-color-from-palette($accent);
   $border-color: theming.get-color-from-palette($foreground, base, 0.54);
   $active-border-color:
-      theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+    theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
 
   @return (
     // The color of the checkbox fill when the checkbox is selected and disabled.
-      disabled-selected-icon-color: $disabled-color,
+    disabled-selected-icon-color: $disabled-color,
     // The color of the checkbox border when the checkbox is unselected and disabled.
-      disabled-unselected-icon-color: $disabled-color,
+    disabled-unselected-icon-color: $disabled-color,
     // The color of the checkmark when the checkbox is selected.
-      selected-checkmark-color: _contrast-tone($selected-color, $is-dark),
+    selected-checkmark-color: _contrast-tone($selected-color, $is-dark),
     // The color of the checkbox fill when the checkbox is selected and focused.
-      selected-focus-icon-color: $selected-color,
+    selected-focus-icon-color: $selected-color,
     // The color of the checkbox fill when the checkbox is selected and hovered.
-      selected-hover-icon-color: $selected-color,
+    selected-hover-icon-color: $selected-color,
     // The color of the checkbox fill when the checkbox is selected.
-      selected-icon-color: $selected-color,
+    selected-icon-color: $selected-color,
     // The color of the checkbox fill when the checkbox is selected an pressed.
-      selected-pressed-icon-color: $selected-color,
+    selected-pressed-icon-color: $selected-color,
     // The color of the checkbox border when the checkbox is unselected and focused.
-      unselected-focus-icon-color: $active-border-color,
+    unselected-focus-icon-color: $active-border-color,
     // The color of the checkbox border when the checkbox is unselected and hovered.
-      unselected-hover-icon-color: $active-border-color,
+    unselected-hover-icon-color: $active-border-color,
     // The color of the checkbox border when the checkbox is unselected.
-      unselected-icon-color: $border-color,
+    unselected-icon-color: $border-color,
     // The color of the checkbox border when the checkbox is unselected and pressed.
-      unselected-pressed-icon-color: $border-color,
+    unselected-pressed-icon-color: $border-color,
     // The color of the ripple when the checkbox is selected and focused.
-      selected-focus-state-layer-color: $accent-default,
+    selected-focus-state-layer-color: $accent-default,
     // The color of the ripple when the checkbox is selected and hovered.
-      selected-hover-state-layer-color: $accent-default,
+    selected-hover-state-layer-color: $accent-default,
     // The color of the ripple when the checkbox is selected and pressed.
-      selected-pressed-state-layer-color: $accent-default,
+    selected-pressed-state-layer-color: $accent-default,
     // The color of the ripple when the checkbox is unselected and focused.
-      unselected-focus-state-layer-color: $foreground-base,
+    unselected-focus-state-layer-color: $foreground-base,
     // The color of the ripple when the checkbox is unselected and hovered.
-      unselected-hover-state-layer-color: $foreground-base,
+    unselected-hover-state-layer-color: $foreground-base,
     // The color of the ripple when the checkbox is unselected and pressed.
-      unselected-pressed-state-layer-color: $foreground-base,
+    unselected-pressed-state-layer-color: $foreground-base,
   );
 }
 
@@ -110,22 +111,22 @@ $prefix: (mdc, checkbox);
 
   @return (
     // The diameter of the checkbox's ripple.
-      state-layer-size: map.get((
-          0: 40px,
-          -1: 36px,
-          -2: 32px,
-          -3: 28px,
-      ), $scale)
+    state-layer-size: map.get((
+      0: 40px,
+      -1: 36px,
+      -2: 32px,
+      -3: 28px,
+    ), $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 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)
   );
 }

package/core/tokens/m2/mdc/_chip.scss

@@ -1,7 +1,7 @@
-@use 'sass:color';
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../mdc-helpers/mdc-helpers';
+@use '../../../style/sass-utils';
 @use '../../../theming/theming';
 @use '../../../typography/typography-utils';
 
@@ -304,7 +304,7 @@ $prefix: (mdc, chip);
 // 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(
+  @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),