@angular/material 20.0.4 → 20.1.0-next.1

package/button/_m2-icon-button.scss

@@ -1,9 +1,8 @@
-@use 'sass:meta';
 @use 'sass:map';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -16,32 +15,32 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
-    icon-button-disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
-    icon-button-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    icon-button-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    icon-button-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+    icon-button-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    icon-button-disabled-state-layer-color: map.get($system, on-surface-variant),
+    icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     icon-button-icon-color: inherit,
-    icon-button-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
-    icon-button-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    icon-button-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+    icon-button-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    icon-button-state-layer-color: map.get($system, on-surface),
   );
 }
 
 // Generates the mapping for the properties that change based on the button palette color.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-  $ripple-opacity: 0.1;
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
-    icon-button-icon-color: inspection.get-theme-color($theme, $palette-name),
-    icon-button-state-layer-color: $color,
-    icon-button-ripple-color: if(
-      meta.type-of($color) == color,
-      rgba($color, $ripple-opacity),
-      inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
+    icon-button-icon-color: map.get($system, primary),
+    icon-button-state-layer-color: map.get($system, primary),
+    icon-button-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
   );
 }
 
@@ -72,14 +71,3 @@
 
   @return $tokens;
 }
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/button/testing/index.d.ts

@@ -18,7 +18,6 @@ interface ButtonHarnessFilters extends BaseHarnessFilters {
 
 /** Harness for interacting with a mat-button in tests. */
 declare class MatButtonHarness extends ContentContainerComponentHarness {
-    /** Selector for the harness. */
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes.

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

@@ -15,7 +15,8 @@
     @include token-utils.create-token-values(map.get(m3-button-toggle.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-button-toggle.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(
+          m2-button-toggle.get-unthemable-tokens($theme));
     }
   }
 }

package/button-toggle/_m2-button-toggle.scss

@@ -1,16 +1,16 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // 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() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    button-toggle-focus-state-layer-opacity: 0.12,
-    button-toggle-hover-state-layer-opacity: 0.04,
+    button-toggle-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    button-toggle-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     button-toggle-legacy-focus-state-layer-opacity: 1,
     button-toggle-legacy-height: 36px,
     button-toggle-legacy-shape: 2px,
@@ -20,48 +20,34 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $theme-divider-color: inspection.get-theme-color($theme, 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 unselected 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, inspection.get-theme-color($theme, background, card)),
-      $theme-divider-color);
+  $system: m2-utils.get-system($theme);
 
   @return (
-    button-toggle-background-color: inspection.get-theme-color($theme, background, card),
+    button-toggle-background-color: map.get($system, surface),
     button-toggle-disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
     button-toggle-disabled-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, text),
-    button-toggle-disabled-state-background-color:
-        inspection.get-theme-color($theme, background, card),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    button-toggle-disabled-state-background-color: map.get($system, surface),
     button-toggle-disabled-state-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button),
-    button-toggle-divider-color: $divider-color,
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    button-toggle-divider-color: map.get($system, outline),
     button-toggle-legacy-disabled-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-disabled-button),
-    button-toggle-legacy-disabled-state-background-color:
-        inspection.get-theme-color($theme, background, disabled-button-toggle),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-disabled-state-background-color: map.get($system, surface),
     button-toggle-legacy-disabled-state-text-color:
-        inspection.get-theme-color($theme, foreground, disabled-button),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
     button-toggle-legacy-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-legacy-selected-state-text-color:
-        inspection.get-theme-color($theme, foreground, secondary-text),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-selected-state-text-color: map.get($system, on-surface),
     button-toggle-legacy-state-layer-color:
-        inspection.get-theme-color($theme, background, focused-button),
-    button-toggle-legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-legacy-text-color: map.get($system, on-surface),
     button-toggle-selected-state-background-color:
-        inspection.get-theme-color($theme, background, selected-button),
-    button-toggle-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
-    button-toggle-state-layer-color: sass-utils.safe-color-change(
-        inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
-    button-toggle-text-color: inspection.get-theme-color($theme, foreground, text),
+        m3-utils.color-with-opacity(map.get($system, on-surface), 12%),
+    button-toggle-selected-state-text-color: map.get($system, on-surface),
+    button-toggle-state-layer-color: map.get($system, on-surface),
+    button-toggle-text-color: map.get($system, on-surface),
   );
 }
 
@@ -103,14 +89,3 @@
     button-toggle-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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/card/_m2-card.scss

@@ -1,7 +1,7 @@
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 @use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -16,14 +16,16 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    card-elevated-container-color: inspection.get-theme-color($theme, background, card),
+    card-elevated-container-color: map.get($system, surface),
     card-elevated-container-elevation: elevation.get-box-shadow(1),
-    card-outlined-container-color: inspection.get-theme-color($theme, background, card),
+    card-outlined-container-color: map.get($system, surface),
     card-outlined-container-elevation: elevation.get-box-shadow(0),
-    card-outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
-    card-subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
-    card-filled-container-color: inspection.get-theme-color($theme, background, card),
+    card-outlined-outline-color: map.get($system, outline),
+    card-subtitle-text-color: map.get($system, on-surface-variant),
+    card-filled-container-color: map.get($system, surface),
     card-filled-container-elevation: elevation.get-box-shadow(0)
   );
 }
@@ -50,14 +52,3 @@
 @function get-density-tokens($theme) {
   @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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/checkbox/_checkbox-theme.scss

@@ -15,7 +15,7 @@
     @include token-utils.create-token-values(map.get(m3-checkbox.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-checkbox.get-unthemable-tokens($theme));
     }
   }
 }
@@ -29,7 +29,8 @@
         map.get(m3-checkbox.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, secondary));
     }
 
     .mat-mdc-checkbox {
@@ -42,7 +43,7 @@
 
       &.mat-warn {
         @include token-utils.create-token-values-mixed(
-          m2-checkbox.get-color-tokens($theme, warn,
+          m2-checkbox.get-color-tokens($theme, error,
               $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
         );
       }

package/checkbox/_m2-checkbox.scss

@@ -1,69 +1,51 @@
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/m2/theming' as m2-theming;
-@use '../core/m2/palette' as m2-palette;
 
 // 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() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    checkbox-disabled-selected-checkmark-color: #fff,
-    checkbox-selected-focus-state-layer-opacity: 0.16,
-    checkbox-selected-hover-state-layer-opacity: 0.04,
-    checkbox-selected-pressed-state-layer-opacity: 0.16,
-    checkbox-unselected-focus-state-layer-opacity: 0.16,
-    checkbox-unselected-hover-state-layer-opacity: 0.04,
-    checkbox-unselected-pressed-state-layer-opacity: 0.16,
+    checkbox-disabled-selected-checkmark-color: map.get($system, surface),
+    checkbox-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    checkbox-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    checkbox-selected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+    checkbox-unselected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    checkbox-unselected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    checkbox-unselected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent, $exclude: ()) {
+@function get-color-tokens($theme, $color-variant, $exclude: ()) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $foreground-base: inspection.get-theme-color($theme, foreground, base);
-  $palette-default: inspection.get-theme-color($theme, $palette-name, default);
-  $disabled-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, foreground, base), $alpha: 0.38);
-  $palette-selected: inspection.get-theme-color($theme, $palette-name);
-  $border-color: sass-utils.safe-color-change(
-      inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
-  $active-border-color:
-    m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
-  $selected-checkmark-color: null;
-
-  // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
-  // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  @if (m2-utils.$private-is-internal-build) {
-    $contrast-tone: m2-utils.contrast-tone($palette-selected, $is-dark);
-    $selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff);
-  }
-  @else {
-    $selected-checkmark-color:
-      inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
-  }
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   $tokens: (
-    checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
-    checkbox-label-text-color: inspection.get-theme-color($theme, foreground, text),
-    checkbox-disabled-selected-icon-color: $disabled-color,
-    checkbox-disabled-unselected-icon-color: $disabled-color,
-    checkbox-selected-checkmark-color: $selected-checkmark-color,
-    checkbox-selected-focus-icon-color: $palette-selected,
-    checkbox-selected-hover-icon-color: $palette-selected,
-    checkbox-selected-icon-color: $palette-selected,
-    checkbox-selected-pressed-icon-color: $palette-selected,
-    checkbox-unselected-focus-icon-color: $active-border-color,
-    checkbox-unselected-hover-icon-color: $active-border-color,
-    checkbox-unselected-icon-color: $border-color,
-    checkbox-selected-focus-state-layer-color: $palette-default,
-    checkbox-selected-hover-state-layer-color: $palette-default,
-    checkbox-selected-pressed-state-layer-color: $palette-default,
-    checkbox-unselected-focus-state-layer-color: $foreground-base,
-    checkbox-unselected-hover-state-layer-color: $foreground-base,
-    checkbox-unselected-pressed-state-layer-color: $foreground-base,
+    checkbox-disabled-label-color: $disabled,
+    checkbox-label-text-color: map.get($system, on-surface),
+    checkbox-disabled-selected-icon-color: $disabled,
+    checkbox-disabled-unselected-icon-color: $disabled,
+    checkbox-selected-checkmark-color: map.get($system, on-secondary),
+    checkbox-selected-focus-icon-color: map.get($system, secondary),
+    checkbox-selected-hover-icon-color: map.get($system, secondary),
+    checkbox-selected-icon-color: map.get($system, secondary),
+    checkbox-selected-pressed-icon-color: map.get($system, secondary),
+    checkbox-unselected-focus-icon-color: map.get($system, on-surface),
+    checkbox-unselected-hover-icon-color: map.get($system, on-surface),
+    checkbox-unselected-icon-color: map.get($system, on-surface-variant),
+    checkbox-selected-focus-state-layer-color: map.get($system, secondary),
+    checkbox-selected-hover-state-layer-color: map.get($system, secondary),
+    checkbox-selected-pressed-state-layer-color: map.get($system, secondary),
+    checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
+    checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
+    checkbox-unselected-pressed-state-layer-color: map.get($system, on-surface),
   );
 
   @each $token in $exclude {
@@ -98,14 +80,3 @@
     ), $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(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/chips/_chips-theme.scss

@@ -15,7 +15,7 @@
     @include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), base));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens($theme));
     }
   }
 }
@@ -34,15 +34,18 @@
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, primary));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, accent));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, secondary));
         }
 
         &.mat-warn {
-          @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, warn));
+          @include token-utils.create-token-values-mixed(
+              m2-chip.get-color-tokens($theme, error));
         }
       }
     }

package/chips/_m2-chip.scss

@@ -1,25 +1,24 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use 'sass:color';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
-@use '../core/m2/palette' as m2-palette;
 @use '../core/theming/theming';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // 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() {
+@function get-unthemable-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
     chip-container-shape-radius: 16px,
     chip-disabled-container-opacity: 0.4,
     chip-disabled-outline-color: transparent,
     chip-flat-selected-outline-width: 0,
     chip-focus-outline-color: transparent,
-    chip-hover-state-layer-opacity: 0.04,
+    chip-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     chip-outline-color: transparent,
     chip-outline-width: 0,
-    chip-selected-hover-state-layer-opacity: 0.04,
+    chip-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     chip-selected-trailing-action-state-layer-color: transparent,
     chip-trailing-action-focus-opacity: 1,
     chip-trailing-action-focus-state-layer-opacity: 0,
@@ -36,44 +35,31 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: null) {
-  $foreground: null;
-  $background: null;
-  $state-layer-color: inspection.get-theme-color($theme, foreground, base);
-  $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity.
-  $surface: inspection.get-theme-color($theme, background, card);
+@function get-color-tokens($theme, $color-variant: null) {
+  $system: m2-utils.get-system($theme);
+  $background: m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
+  $foreground: map.get($system, on-surface);
 
-  @if $palette-name == null {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $grey-50: map.get(m2-palette.$grey-palette, 50);
-    $grey-900: map.get(m2-palette.$grey-palette, 900);
-    $foreground: if($is-dark, $grey-50, $grey-900);
-
-    $surface: inspection.get-theme-color($theme, background, card);
-    $background: if(
-        meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
-        color.mix($state-layer-color, $surface, 12%),
-        $state-layer-color
-    );
-  }
-  @else {
-    $background: inspection.get-theme-color($theme, $palette-name);
-    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+    $background: map.get($system, primary);
+    $foreground: map.get($system, on-primary);
   }
+
   @return (
     chip-disabled-label-text-color: $foreground,
     chip-elevated-container-color: $background,
     chip-elevated-disabled-container-color: $background,
     chip-elevated-selected-container-color: $background,
     chip-flat-disabled-selected-container-color: $background,
-    chip-focus-state-layer-color: $state-layer-color,
-    chip-focus-state-layer-opacity: $state-layer-opacity,
-    chip-hover-state-layer-color: $state-layer-color,
+    chip-focus-state-layer-color: map.get($system, on-surface),
+    chip-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    chip-hover-state-layer-color: map.get($system, on-surface),
     chip-label-text-color: $foreground,
     chip-selected-disabled-trailing-icon-color: $foreground,
-    chip-selected-focus-state-layer-color: $state-layer-color,
-    chip-selected-focus-state-layer-opacity: $state-layer-opacity,
-    chip-selected-hover-state-layer-color: $state-layer-color,
+    chip-selected-focus-state-layer-color: map.get($system, focus-state-layer-opacity),
+    chip-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+    chip-selected-hover-state-layer-color: map.get($system, hover-state-layer-opacity),
     chip-selected-label-text-color: $foreground,
     chip-selected-trailing-icon-color: $foreground,
     chip-with-icon-disabled-icon-color: $foreground,
@@ -110,14 +96,3 @@
     )
   );
 }
-
-// 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(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}