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

package/core/tokens/m2/mdc/_circular-progress.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -52,14 +53,10 @@ $prefix: (mdc, circular-progress);
 // 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 map.merge(
-    get-unthemable-tokens(),
-    map.merge(
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
       get-color-tokens(token-utils.$placeholder-color-config),
-      map.merge(
-        get-typography-tokens(token-utils.$placeholder-typography-config),
-        get-density-tokens(token-utils.$placeholder-density-config)
-      )
-    )
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

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

@@ -2,6 +2,7 @@
 @use '../../../theming/theming';
 @use '../../../typography/typography-utils';
 @use '../../../mdc-helpers/mdc-helpers';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -21,7 +22,6 @@ $prefix: (mdc, dialog);
     container-shadow-color: #000,
     // Border radius of the container.
     container-shape: 4px,
-
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -87,7 +87,6 @@ $prefix: (mdc, dialog);
     subhead-size: typography-utils.font-size($config, headline-6),
     subhead-weight: typography-utils.font-weight($config, headline-6),
     subhead-tracking: typography-utils.letter-spacing($config, headline-6),
-
     // Typography of the dialog body text.
     supporting-text-font: typography-utils.font-family($config, body-1)
       or typography-utils.font-family($config),
@@ -106,10 +105,10 @@ $prefix: (mdc, dialog);
 // 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/_elevated-card.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../style/elevation';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -74,7 +75,7 @@ $prefix: (mdc, elevated-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(
+  @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/_icon-button.scss

@@ -1,4 +1,4 @@
-@use 'sass:map';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -18,18 +18,14 @@ $prefix: (mdc, icon-button);
     // Determines the size of the icon. Name is inaccurate - applies to the whole component,
     // not just the state layer.
     state-layer-size: 48px,
-
     // MDC's icon size applied to svg and img elements inside the component
     icon-size: 24px,
-
     // Only applies to :disabled icons, but Angular Components uses [disabled] since :disabled
     // wouldn't work on <a> tags.
     disabled-icon-color: black,
-
     // Angular version applies an opacity 1 with a color change, and this only applies with
     // :disabled anyways.
     disabled-icon-opacity: 0.38,
-
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -66,14 +62,10 @@ $prefix: (mdc, icon-button);
 // 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 map.merge(
+  @return sass-utils.deep-merge-all(
       get-unthemable-tokens(),
-      map.merge(
-          get-color-tokens(token-utils.$placeholder-color-config),
-          map.merge(
-              get-typography-tokens(token-utils.$placeholder-typography-config),
-              get-density-tokens(token-utils.$placeholder-density-config)
-          )
-      )
+      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/_linear-progress.scss

@@ -1,4 +1,5 @@
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 @use 'sass:color';
 @use 'sass:map';
@@ -21,6 +22,7 @@ $prefix: (mdc, linear-progress);
     // bar and `track-height` applies to the track.
     active-indicator-height: $height,
     track-height: $height,
+    track-shape: 0,
   );
 }
 
@@ -31,9 +33,9 @@ $prefix: (mdc, linear-progress);
     // The color of the progress bar's active section.
     active-indicator-color: $primary,
     track-color: if(
-      meta.type-of($primary) == color,
-      color.adjust($primary, $alpha: -0.75),
-      $primary
+        meta.type-of($primary) == color,
+        color.adjust($primary, $alpha: -0.75),
+        $primary
     )
   );
 }
@@ -51,14 +53,10 @@ $prefix: (mdc, linear-progress);
 // 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 map.merge(
-    get-unthemable-tokens(),
-    map.merge(
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
       get-color-tokens(token-utils.$placeholder-color-config),
-      map.merge(
-        get-typography-tokens(token-utils.$placeholder-typography-config),
-        get-density-tokens(token-utils.$placeholder-density-config)
-      )
-    )
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
   );
 }

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../theming/theming';
 @use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,69 +16,69 @@ $prefix: (mdc, list);
 @function get-unthemable-tokens() {
   @return (
     // Border radius of list items.
-      list-item-container-shape: 0,
+    list-item-container-shape: 0,
     // Border radius of the list item's leading avatar.
-      list-item-leading-avatar-shape: 50%,
+    list-item-leading-avatar-shape: 50%,
     // Background color of list items.
-      list-item-container-color: transparent,
+    list-item-container-color: transparent,
     // Background color of list items when selected.
-      list-item-selected-container-color: transparent,
+    list-item-selected-container-color: transparent,
     // Background color of the list item's leading avatar.
-      list-item-leading-avatar-color: transparent,
+    list-item-leading-avatar-color: transparent,
     // Height & width of the list item's leading icon.
-      list-item-leading-icon-size: 24px,
+    list-item-leading-icon-size: 24px,
     // Height & width of the list item's leading avatar.
-      list-item-leading-avatar-size: 40px,
+    list-item-leading-avatar-size: 40px,
     // Height & width of the list item's trailing icon.
-      list-item-trailing-icon-size: 24px,
+    list-item-trailing-icon-size: 24px,
     // Color of the list item's overlay when the item is disabled.
-      list-item-disabled-state-layer-color: transparent,
+    list-item-disabled-state-layer-color: transparent,
     // Opacity of the list item's overlay when the item is disabled.
-      list-item-disabled-state-layer-opacity: 0,
+    list-item-disabled-state-layer-opacity: 0,
     // Opacity of the list item's primary & supporting text when the item is disabled.
-      list-item-disabled-label-text-opacity: 0.38,
+    list-item-disabled-label-text-opacity: 0.38,
     // Opacity of the list item's leading icon when the item is disabled.
-      list-item-disabled-leading-icon-opacity: 0.38,
+    list-item-disabled-leading-icon-opacity: 0.38,
     // Opacity of the list item's trailing icon when the item is disabled.
-      list-item-disabled-trailing-icon-opacity: 0.38,
+    list-item-disabled-trailing-icon-opacity: 0.38,
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     // Overline not implemented in Angular Material.
     // TODO(mmalerba): Consider implementing in the future.
-      list-item-overline-color: null,
-      list-item-overline-font: null,
-      list-item-overline-line-height: null,
-      list-item-overline-size: null,
-      list-item-overline-tracking: null,
-      list-item-overline-weight: null,
+    list-item-overline-color: null,
+    list-item-overline-font: null,
+    list-item-overline-line-height: null,
+    list-item-overline-size: null,
+    list-item-overline-tracking: null,
+    list-item-overline-weight: null,
     // Leading video not implemented in Angular Material.
     // TODO(mmalerba): Consider implementing in the future.
-      list-item-leading-video-shape: null,
-      list-item-leading-video-width: null,
-      list-item-leading-video-height: null,
+    list-item-leading-video-shape: null,
+    list-item-leading-video-width: null,
+    list-item-leading-video-height: null,
     // Leading image not implemented in Angular Material.
     // TODO(mmalerba): Consider implementing in the future.
-      list-item-leading-image-width: null,
-      list-item-leading-image-height: null,
-      list-item-leading-image-shape: null,
+    list-item-leading-image-width: null,
+    list-item-leading-image-height: null,
+    list-item-leading-image-shape: null,
     // List divider is not implemented in Angular Material.
     // TODO(mmalerba): Maybe mat-divider should be based on these tokens?
-      divider-color: null,
-      divider-height: null,
+    divider-color: null,
+    divider-height: null,
     // Redundant since it is always overridden by one- two- or three- line tokens, omitted to save
     // bytes.
-      list-item-container-height: null,
+    list-item-container-height: null,
     // MDC does not seem to emit any CSS variables for these tokens, may be use in the future.
     // TODO(mmalerba): Discuss with MDC if these should be added.
-      list-item-container-elevation: null,
-      list-item-leading-avatar-label-color: null,
-      list-item-leading-avatar-label-font: null,
-      list-item-leading-avatar-label-line-height: null,
-      list-item-leading-avatar-label-size: null,
-      list-item-leading-avatar-label-tracking: null,
-      list-item-leading-avatar-label-weight: null,
-      list-item-unselected-trailing-icon-color: null,
+    list-item-container-elevation: null,
+    list-item-leading-avatar-label-color: null,
+    list-item-leading-avatar-label-font: null,
+    list-item-leading-avatar-label-line-height: null,
+    list-item-leading-avatar-label-size: null,
+    list-item-leading-avatar-label-tracking: null,
+    list-item-leading-avatar-label-weight: null,
+    list-item-unselected-trailing-icon-color: null,
   );
 }
 
@@ -87,44 +88,44 @@ $prefix: (mdc, list);
   $is-dark: map.get($config, is-dark);
   $foreground-base: theming.get-color-from-palette($foreground, base);
   $text-icon-on-background:
-      theming.get-color-from-palette($foreground, base, if($is-dark, 0.5, 0.38));
+    theming.get-color-from-palette($foreground, base, if($is-dark, 0.5, 0.38));
 
   @return (
     // Text color of the list item primary text.
-      list-item-label-text-color: theming.get-color-from-palette($foreground, text),
+    list-item-label-text-color: theming.get-color-from-palette($foreground, text),
     // Text color of the list item supporting text.
-      list-item-supporting-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    list-item-supporting-text-color: theming.get-color-from-palette($foreground, secondary-text),
     // Color of the list item's leading icon.
-      list-item-leading-icon-color: $text-icon-on-background,
+    list-item-leading-icon-color: $text-icon-on-background,
     // Text color of the list item's trailing text.
-      list-item-trailing-supporting-text-color: theming.get-color-from-palette(
-              $foreground, hint-text),
+    list-item-trailing-supporting-text-color: theming.get-color-from-palette(
+        $foreground, hint-text),
     // Color of the list item's trailing icon.
-      list-item-trailing-icon-color: $text-icon-on-background,
+    list-item-trailing-icon-color: $text-icon-on-background,
     // Color of the list item's trailing icon when the item is selected.
-      list-item-selected-trailing-icon-color: $text-icon-on-background,
+    list-item-selected-trailing-icon-color: $text-icon-on-background,
     // Text color of the list item's primary text when the  item is disabled.
-      list-item-disabled-label-text-color: theming.get-color-from-palette($foreground, base),
+    list-item-disabled-label-text-color: theming.get-color-from-palette($foreground, base),
     // Color of the list item's leading icon when the item is disabled.
-      list-item-disabled-leading-icon-color: theming.get-color-from-palette($foreground, base),
+    list-item-disabled-leading-icon-color: theming.get-color-from-palette($foreground, base),
     // Color of the list item's trailing icon when the item is disabled.
-      list-item-disabled-trailing-icon-color: theming.get-color-from-palette($foreground, base),
+    list-item-disabled-trailing-icon-color: theming.get-color-from-palette($foreground, base),
     // Color of the list item's primary text when the item is being hovered.
-      list-item-hover-label-text-color: theming.get-color-from-palette($foreground, text),
+    list-item-hover-label-text-color: theming.get-color-from-palette($foreground, text),
     // Color of the list item's leading icon when the item is being hovered.
-      list-item-hover-leading-icon-color: $text-icon-on-background,
+    list-item-hover-leading-icon-color: $text-icon-on-background,
     // Color of the list item's trailing icon when the item is being hovered.
-      list-item-hover-trailing-icon-color: $text-icon-on-background,
+    list-item-hover-trailing-icon-color: $text-icon-on-background,
     // Color of the list item's primary text when the item is focused.
-      list-item-focus-label-text-color: theming.get-color-from-palette($foreground, text),
+    list-item-focus-label-text-color: theming.get-color-from-palette($foreground, text),
     // Color of the list item's overlay when the item is hovered.
-      list-item-hover-state-layer-color: theming.get-color-from-palette($foreground, base),
+    list-item-hover-state-layer-color: theming.get-color-from-palette($foreground, base),
     // Opacity of the list item's overlay when the item is hovered.
-      list-item-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    list-item-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
     // Color of the list item's overlay when the item is focused.
-      list-item-focus-state-layer-color: theming.get-color-from-palette($foreground, base),
+    list-item-focus-state-layer-color: theming.get-color-from-palette($foreground, base),
     // Opacity of the list item's overlay when the item is focused.
-      list-item-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    list-item-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
   );
 }
 
@@ -132,40 +133,40 @@ $prefix: (mdc, list);
 @function get-typography-tokens($config) {
   @return (
     // Font family of the list item primary text.
-      list-item-label-text-font: typography-utils.font-family($config, body-1)
+    list-item-label-text-font: typography-utils.font-family($config, body-1)
           or typography-utils.font-family($config),
     // Line height of the list item primary text.
-      list-item-label-text-line-height: typography-utils.line-height($config, body-1),
+    list-item-label-text-line-height: typography-utils.line-height($config, body-1),
     // Font size of the list item primary text.
-      list-item-label-text-size: typography-utils.font-size($config, body-1),
+    list-item-label-text-size: typography-utils.font-size($config, body-1),
     // Letter spacing of the list item primary text.
-      list-item-label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    list-item-label-text-tracking: typography-utils.letter-spacing($config, body-1),
     // Font weight of the list item primary text.
-      list-item-label-text-weight: typography-utils.font-weight($config, body-1),
+    list-item-label-text-weight: typography-utils.font-weight($config, body-1),
     // Font family of the list item supporting text.
-      list-item-supporting-text-font: typography-utils.font-family($config, body-2)
+    list-item-supporting-text-font: typography-utils.font-family($config, body-2)
           or typography-utils.font-family($config),
     // Line height of the list item supporting text.
-      list-item-supporting-text-line-height: typography-utils.line-height($config, body-2),
+    list-item-supporting-text-line-height: typography-utils.line-height($config, body-2),
     // Font size of the list item supporting text.
-      list-item-supporting-text-size: typography-utils.font-size($config, body-2),
+    list-item-supporting-text-size: typography-utils.font-size($config, body-2),
     // Letter spacing of the list item supporting text.
-      list-item-supporting-text-tracking: typography-utils.letter-spacing($config, body-2),
+    list-item-supporting-text-tracking: typography-utils.letter-spacing($config, body-2),
     // Font weight of the list item supporting text.
-      list-item-supporting-text-weight: typography-utils.font-weight($config, body-2),
+    list-item-supporting-text-weight: typography-utils.font-weight($config, body-2),
     // Font family of the list item's trailing text.
-      list-item-trailing-supporting-text-font: typography-utils.font-family($config, caption)
+    list-item-trailing-supporting-text-font: typography-utils.font-family($config, caption)
           or typography-utils.font-family($config),
     // Line height of the list item's trailing text.
-      list-item-trailing-supporting-text-line-height: typography-utils.line-height(
-              $config, caption),
+    list-item-trailing-supporting-text-line-height: typography-utils.line-height(
+        $config, caption),
     // Font size of the list item's trailing text.
-      list-item-trailing-supporting-text-size: typography-utils.font-size($config, caption),
+    list-item-trailing-supporting-text-size: typography-utils.font-size($config, caption),
     // Letter spacing color of the list item's trailing text.
-      list-item-trailing-supporting-text-tracking: typography-utils.letter-spacing(
-              $config, caption),
+    list-item-trailing-supporting-text-tracking: typography-utils.letter-spacing(
+        $config, caption),
     // Font weight of the list item's trailing text.
-      list-item-trailing-supporting-text-weight: typography-utils.font-weight($config, caption),
+    list-item-trailing-supporting-text-weight: typography-utils.font-weight($config, caption),
   );
 }
 
@@ -175,42 +176,42 @@ $prefix: (mdc, list);
 
   @return (
     // Height of one line list items.
-      list-item-one-line-container-height: map.get((
-          0: 48px,
-          -1: 44px,
-          -2: 40px,
-          -3: 36px,
-          -4: 32px,
-          -5: 24px,
-      ), $scale),
+    list-item-one-line-container-height: map.get((
+      0: 48px,
+      -1: 44px,
+      -2: 40px,
+      -3: 36px,
+      -4: 32px,
+      -5: 24px,
+    ), $scale),
     // Height of two line list items.
-      list-item-two-line-container-height: map.get((
-          0: 64px,
-          -1: 60px,
-          -2: 56px,
-          -3: 52px,
-          -4: 48px,
-          -5: 48px,
-      ), $scale),
+    list-item-two-line-container-height: map.get((
+      0: 64px,
+      -1: 60px,
+      -2: 56px,
+      -3: 52px,
+      -4: 48px,
+      -5: 48px,
+    ), $scale),
     // Height of three line list items.
-      list-item-three-line-container-height: map.get((
-          0: 88px,
-          -1: 84px,
-          -2: 80px,
-          -3: 76px,
-          -4: 72px,
-          -5: 56px,
-      ), $scale),
+    list-item-three-line-container-height: map.get((
+      0: 88px,
+      -1: 84px,
+      -2: 80px,
+      -3: 76px,
+      -4: 72px,
+      -5: 56px,
+    ), $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/_outlined-card.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../style/elevation';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -82,7 +83,7 @@ $prefix: (mdc, outlined-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(
+  @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/_plain-tooltip.scss

@@ -2,6 +2,7 @@
 @use '../../../theming/theming';
 @use '../../../typography/typography-utils';
 @use '../../../mdc-helpers/mdc-helpers';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -67,14 +68,10 @@ $prefix: (mdc, plain-tooltip);
 // 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 map.merge(
-          get-unthemable-tokens(),
-          map.merge(
-                  get-color-tokens(token-utils.$placeholder-color-config),
-                  map.merge(
-                          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/_radio.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../theming/palette';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -16,12 +17,10 @@ $prefix: (mdc, radio);
   @return (
     disabled-selected-icon-opacity: 0.38,
     disabled-unselected-icon-opacity: 0.38,
-
     // This is specified both here and in the density tokens, because it
     // determines the size of the radio button itself and there are internal
     // tests who don't configure the theme correctly.
     state-layer-size: 40px,
-
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -85,10 +84,10 @@ $prefix: (mdc, 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/mdc/_snack-bar.scss

@@ -5,6 +5,7 @@
 @use '../../token-utils';
 @use '../../../typography/typography-utils';
 @use '../../../mdc-helpers/mdc-helpers';
+@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, snackbar);
@@ -19,18 +20,15 @@ $prefix: (mdc, snackbar);
   @return (
     // Sets the snack bar border radius.
     container-shape: 4px,
-
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     // Removed to match the previous appearance.
     supporting-text-tracking: null,
-
     // Excluded because they target the wrong DOM node. See the
     // comments on the elevation of `.mat-mdc-snack-bar-container`.
     container-elevation: null,
     container-shadow-color: null,
-
     action-focus-label-text-color: null,
     action-focus-state-layer-color: null,
     action-focus-state-layer-opacity: null,
@@ -99,10 +97,10 @@ $prefix: (mdc, snackbar);
 // 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/_tab-indicator.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../../theming/theming';
+@use '../../../style/sass-utils';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -14,7 +15,6 @@ $prefix: (mdc, tab-indicator);
 @function get-unthemable-tokens() {
   @return (
     active-indicator-height: 2px,
-
     // Currently set to zero, but used by the gmat styles to make the indicator rounded.
     active-indicator-shape: 0,
   );
@@ -42,10 +42,10 @@ $prefix: (mdc, tab-indicator);
 // 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)
   );
 }