@angular/material 20.0.0-next.4 → 20.0.0-next.6

package/{core/tokens/m2/mdc/_checkbox.scss → checkbox/_m2-checkbox.scss}

@@ -1,50 +1,30 @@
 @use 'sass:map';
-@use '../../../m2/palette' as m2-palette;
-@use '../../../m2/theming' as m2-theming;
-@use '../../../theming/theming';
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@use '../core/tokens/m2-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;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, checkbox);
+$prefix: (mat, checkbox);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
 @function get-unthemable-tokens() {
   @return (
-    // The color of the checkmark when the checkbox is selected and disabled.
     disabled-selected-checkmark-color: #fff,
-    // The opacity of the ripple when the checkbox is selected and focused.
     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,
-    // The opacity of the ripple when the checkbox is selected and pressed.
     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,
-    // The opacity of the ripple when the checkbox is unselected and hovered.
     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,
-    // =============================================================================================
-    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
-    // =============================================================================================
-    selected-pressed-icon-color: null,
-    unselected-pressed-icon-color: null,
-
-    // MDC currently doesn't output a slot for these tokens.
-    disabled-selected-icon-opacity: null,
-    disabled-unselected-icon-opacity: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: accent) {
+@function get-color-tokens($theme, $palette-name: accent, $exclude: ()) {
   $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);
@@ -59,8 +39,8 @@ $prefix: (mdc, checkbox);
 
   // 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 (token-definition.$private-is-internal-build) {
-    $contrast-tone: token-definition.contrast-tone($palette-selected, $is-dark);
+  @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 {
@@ -68,45 +48,43 @@ $prefix: (mdc, checkbox);
       inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
   }
 
-  @return (
-    // The color of the checkbox fill when the checkbox is selected and disabled.
+  $tokens: (
+    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    label-text-color: inspection.get-theme-color($theme, foreground, text),
     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,
-    // The color of the checkmark when the checkbox is selected.
     selected-checkmark-color: $selected-checkmark-color,
-    // The color of the checkbox fill when the checkbox is selected and focused.
     selected-focus-icon-color: $palette-selected,
-    // The color of the checkbox fill when the checkbox is selected and hovered.
     selected-hover-icon-color: $palette-selected,
-    // The color of the checkbox fill when the checkbox is selected.
     selected-icon-color: $palette-selected,
-    // The color of the checkbox fill when the checkbox is selected and pressed.
     selected-pressed-icon-color: $palette-selected,
-    // The color of the checkbox border when the checkbox is unselected and focused.
     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,
-    // The color of the checkbox border when the checkbox is unselected.
     unselected-icon-color: $border-color,
-    // The color of the ripple when the checkbox is selected and focused.
     selected-focus-state-layer-color: $palette-default,
-    // The color of the ripple when the checkbox is selected and hovered.
     selected-hover-state-layer-color: $palette-default,
-    // The color of the ripple when the checkbox is selected and pressed.
     selected-pressed-state-layer-color: $palette-default,
-    // The color of the ripple when the checkbox is unselected and focused.
     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,
-    // The color of the ripple when the checkbox is unselected and pressed.
     unselected-pressed-state-layer-color: $foreground-base,
   );
+
+  @each $token in $exclude {
+    $tokens: map.remove($tokens, $token);
+  }
+
+  @return $tokens;
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  @return ();
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
@@ -114,7 +92,7 @@ $prefix: (mdc, checkbox);
   $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
   @return (
-    // The diameter of the checkbox's ripple.
+    touch-target-display: if($scale < -1, none, block),
     state-layer-size: map.get((
       0: 40px,
       -1: 36px,
@@ -128,9 +106,9 @@ $prefix: (mdc, checkbox);
 // This is used to create token slots.
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
+    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/_m3-checkbox.scss

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, checkbox);
+
+/// Generates custom tokens for mat-checkbox.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for mat-checkbox
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    disabled-label-color:
+        sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface),
+    disabled-selected-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    disabled-unselected-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    label-text-color: map.get($systems, md-sys-color, on-surface),
+    label-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+    label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height),
+    label-text-size: map.get($systems, md-sys-typescale, body-medium-size),
+    label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking),
+    label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight),
+    selected-checkmark-color: map.get($systems, md-sys-color, on-primary),
+    selected-focus-icon-color: map.get($systems, md-sys-color, primary),
+    selected-focus-state-layer-color: map.get($systems, md-sys-color, primary),
+    selected-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    selected-hover-icon-color: map.get($systems, md-sys-color, primary),
+    selected-hover-state-layer-color: map.get($systems, md-sys-color, primary),
+    selected-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    selected-icon-color: map.get($systems, md-sys-color, primary),
+    selected-pressed-icon-color: map.get($systems, md-sys-color, primary),
+    selected-pressed-state-layer-color: map.get($systems, md-sys-color, on-surface),
+    selected-pressed-state-layer-opacity:
+        map.get($systems, md-sys-state, pressed-state-layer-opacity),
+    state-layer-size: if($exclude-hardcoded, null, 40px),
+    unselected-focus-icon-color: map.get($systems, md-sys-color, on-surface),
+    unselected-focus-state-layer-color: map.get($systems, md-sys-color, on-surface),
+    unselected-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+    unselected-hover-icon-color: map.get($systems, md-sys-color, on-surface),
+    unselected-hover-state-layer-color: map.get($systems, md-sys-color, on-surface),
+    unselected-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+    unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    unselected-pressed-state-layer-color: map.get($systems, md-sys-color, primary),
+    unselected-pressed-state-layer-opacity:
+        map.get($systems, md-sys-state, pressed-state-layer-opacity),
+  );
+
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, error),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-checkmark-color: map.get($systems, md-sys-color, on-error),
+    )
+  );
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}

package/checkbox/index.d.ts

@@ -2,8 +2,8 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { AfterViewInit, OnChanges, ElementRef, EventEmitter, SimpleChanges, InjectionToken } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
-import { T as ThemePalette } from '../palette.d-ec4a617c.js';
-import { M as MatCommonModule } from '../common-module.d-0e6515ae.js';
+import { T as ThemePalette } from '../palette.d-1d8ebc0d.js';
+import { M as MatCommonModule } from '../common-module.d-421e3498.js';
 import '@angular/cdk/bidi';
 
 /**
@@ -219,4 +219,5 @@ declare class MatCheckboxModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
 }
 
-export { MAT_CHECKBOX_DEFAULT_OPTIONS, MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY, MatCheckbox, MatCheckboxChange, type MatCheckboxClickAction, type MatCheckboxDefaultOptions, MatCheckboxModule, TransitionCheckState };
+export { MAT_CHECKBOX_DEFAULT_OPTIONS, MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY, MatCheckbox, MatCheckboxChange, MatCheckboxModule, TransitionCheckState };
+export type { MatCheckboxClickAction, MatCheckboxDefaultOptions };

package/checkbox/testing/index.d.ts

@@ -82,4 +82,5 @@ declare class MatCheckboxHarness extends ComponentHarness {
     uncheck(): Promise<void>;
 }
 
-export { type CheckboxHarnessFilters, MatCheckboxHarness };
+export { MatCheckboxHarness };
+export type { CheckboxHarnessFilters };

package/chips/_chips-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
-@use '../core/tokens/m2/mat/chip' as tokens-mat-chip;
+@use './m2-chip';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,13 +15,7 @@
   } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values-mixed(
-        tokens-mdc-chip.$prefix,
-        tokens-mdc-chip.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-chip.$prefix,
-        tokens-mat-chip.get-unthemable-tokens()
-      );
+        m2-chip.$prefix, m2-chip.get-unthemable-tokens());
     }
   }
 }
@@ -38,47 +31,23 @@
   } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values-mixed(
-        tokens-mdc-chip.$prefix,
-        tokens-mdc-chip.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-chip.$prefix,
-        tokens-mat-chip.get-color-tokens($theme)
-      );
+        m2-chip.$prefix, m2-chip.get-color-tokens($theme));
 
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
           @include token-utils.create-token-values-mixed(
-            tokens-mdc-chip.$prefix,
-            tokens-mdc-chip.get-color-tokens($theme, primary)
-          );
-          @include token-utils.create-token-values-mixed(
-            tokens-mat-chip.$prefix,
-            tokens-mat-chip.get-color-tokens($theme, primary)
-          );
+            m2-chip.$prefix, m2-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
           @include token-utils.create-token-values-mixed(
-            tokens-mdc-chip.$prefix,
-            tokens-mdc-chip.get-color-tokens($theme, accent)
-          );
-          @include token-utils.create-token-values-mixed(
-            tokens-mat-chip.$prefix,
-            tokens-mat-chip.get-color-tokens($theme, accent)
-          );
+            m2-chip.$prefix, m2-chip.get-color-tokens($theme, accent));
         }
 
         &.mat-warn {
           @include token-utils.create-token-values-mixed(
-            tokens-mdc-chip.$prefix,
-            tokens-mdc-chip.get-color-tokens($theme, warn)
-          );
-          @include token-utils.create-token-values-mixed(
-            tokens-mat-chip.$prefix,
-            tokens-mat-chip.get-color-tokens($theme, warn)
-          );
+            m2-chip.$prefix, m2-chip.get-color-tokens($theme, warn));
         }
       }
     }
@@ -93,12 +62,7 @@
   } @else {
     .mat-mdc-standard-chip {
       @include token-utils.create-token-values-mixed(
-        tokens-mdc-chip.$prefix,
-        tokens-mdc-chip.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-chip.$prefix,
-        tokens-mat-chip.get-typography-tokens($theme)
+        m2-chip.$prefix, m2-chip.get-typography-tokens($theme)
       );
     }
   }
@@ -112,12 +76,7 @@
   } @else {
     .mat-mdc-chip.mat-mdc-standard-chip {
       @include token-utils.create-token-values-mixed(
-        tokens-mdc-chip.$prefix,
-        tokens-mdc-chip.get-density-tokens($theme)
-      );
-      @include token-utils.create-token-values-mixed(
-        tokens-mat-chip.$prefix,
-        tokens-mat-chip.get-density-tokens($theme)
+        m2-chip.$prefix, m2-chip.get-density-tokens($theme)
       );
     }
   }
@@ -127,12 +86,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mdc-chip.$prefix,
-      tokens: tokens-mdc-chip.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mat-chip.$prefix,
-      tokens: tokens-mat-chip.get-token-slots(),
+      namespace: m2-chip.$prefix,
+      tokens: m2-chip.get-token-slots(),
     ),
   );
 }
@@ -171,8 +126,6 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...);
-  $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...);
-  @include token-utils.create-token-values(tokens-mdc-chip.$prefix, $mdc-chip-tokens);
-  @include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens);
+  $mat-chip-tokens: token-utils.get-tokens-for($tokens, m2-chip.$prefix, $options...);
+  @include token-utils.create-token-values(m2-chip.$prefix, $mat-chip-tokens);
 }

package/chips/_m2-chip.scss

@@ -0,0 +1,127 @@
+@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';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, chip);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    container-shape-radius: 16px,
+    disabled-container-opacity: 0.4,
+    disabled-outline-color: transparent,
+    flat-selected-outline-width: 0,
+    focus-outline-color: transparent,
+    hover-state-layer-opacity: 0.04,
+    outline-color: transparent,
+    outline-width: 0,
+    selected-hover-state-layer-opacity: 0.04,
+    selected-trailing-action-state-layer-color: transparent,
+    trailing-action-focus-opacity: 1,
+    trailing-action-focus-state-layer-opacity: 0,
+    trailing-action-hover-state-layer-opacity: 0,
+    trailing-action-opacity: 0.54,
+    trailing-action-state-layer-color: transparent,
+    with-avatar-avatar-shape-radius: 14px,
+    with-avatar-avatar-size: 28px,
+    with-avatar-disabled-avatar-opacity: 1,
+    with-icon-disabled-icon-opacity: 1,
+    with-icon-icon-size: 18px,
+    with-trailing-icon-disabled-trailing-icon-opacity: 1,
+  );
+}
+
+// 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);
+
+  @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);
+  }
+  @return (
+    disabled-label-text-color: $foreground,
+    elevated-container-color: $background,
+    elevated-disabled-container-color: $background,
+    elevated-selected-container-color: $background,
+    flat-disabled-selected-container-color: $background,
+    focus-state-layer-color: $state-layer-color,
+    focus-state-layer-opacity: $state-layer-opacity,
+    hover-state-layer-color: $state-layer-color,
+    label-text-color: $foreground,
+    selected-disabled-trailing-icon-color: $foreground,
+    selected-focus-state-layer-color: $state-layer-color,
+    selected-focus-state-layer-opacity: $state-layer-opacity,
+    selected-hover-state-layer-color: $state-layer-color,
+    selected-label-text-color: $foreground,
+    selected-trailing-icon-color: $foreground,
+    with-icon-disabled-icon-color: $foreground,
+    with-icon-icon-color: $foreground,
+    with-icon-selected-icon-color: $foreground,
+    with-trailing-icon-disabled-trailing-icon-color: $foreground,
+    with-trailing-icon-trailing-icon-color: $foreground,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -2);
+  @return (
+    // The height of the chip.
+    container-height:
+    map.get(
+        (
+          0: 32px,
+          -1: 28px,
+          -2: 24px,
+        ),
+        $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/_m3-chip.scss

@@ -0,0 +1,116 @@
+@use 'sass:map';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, chip);
+
+/// Generates custom tokens for the mat-chip.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-chip
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  // MDC has a chip component, but they seem to have made up the tokens rather than using ones
+  // generated from the token database, therefore we need a custom token function for it.
+  $tokens: sass-utils.merge-all(
+      m3-utils.generate-typography-tokens($systems, label-text, label-large),
+      (
+        disabled-container-opacity: m3-utils.hardcode(1, $exclude-hardcoded),
+        selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+        selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
+        trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+        selected-trailing-action-state-layer-color:
+        map.get($systems, md-sys-color, on-secondary-container),
+        trailing-action-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+        trailing-action-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+        trailing-action-opacity: m3-utils.hardcode(1, $exclude-hardcoded),
+        trailing-action-focus-opacity: m3-utils.hardcode(1, $exclude-hardcoded),
+        container-shape-radius: m3-utils.hardcode(8px, $exclude-hardcoded),
+        with-avatar-avatar-size: m3-utils.hardcode(24px, $exclude-hardcoded),
+        with-avatar-avatar-shape-radius: m3-utils.hardcode(24px, $exclude-hardcoded),
+        label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+        disabled-label-text-color: sass-utils.safe-color-change(
+            map.get($systems, md-sys-color, on-surface),
+          $alpha: 0.38,
+        ),
+        with-icon-icon-size: m3-utils.hardcode(18px, $exclude-hardcoded),
+        with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+        with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface),
+        with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+        with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+        with-trailing-icon-disabled-trailing-icon-color:
+            map.get($systems, md-sys-color, on-surface),
+        focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+        focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+        outline-width: m3-utils.hardcode(1px, $exclude-hardcoded),
+        outline-color: map.get($systems, md-sys-color, outline),
+        disabled-outline-color: sass-utils.safe-color-change(
+            map.get($systems, md-sys-color, on-surface),
+          $alpha: 0.12,
+        ),
+        focus-outline-color: map.get($systems, md-sys-color, on-surface-variant),
+        hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+        hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+        with-avatar-disabled-avatar-opacity: m3-utils.hardcode(0.38, $exclude-hardcoded),
+        elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container),
+        // In the M3 tokens this is a `surface` color, but in the MDC implementation its
+        // never being emitted. We emit `transparent` so consumers override the color.
+        elevated-container-color: m3-utils.hardcode(transparent, $exclude-hardcoded),
+        flat-selected-outline-width: m3-utils.hardcode(0, $exclude-hardcoded),
+        selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+        flat-disabled-selected-container-color: sass-utils.safe-color-change(
+            map.get($systems, md-sys-color, on-surface),
+          $alpha: 0.12,
+        ),
+        selected-hover-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+        selected-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+        selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+        selected-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+        with-icon-disabled-icon-opacity: m3-utils.hardcode(0.38, $exclude-hardcoded),
+        with-trailing-icon-disabled-trailing-icon-opacity:
+        m3-utils.hardcode(0.38, $exclude-hardcoded),
+      ),
+  );
+
+  $variant-tokens: (
+    // Color variants:
+    primary: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-trailing-action-state-layer-color:
+      map.get($systems, md-sys-color, on-primary-container),
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, primary-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+    ),
+    secondary: (), // Default, no overrides needed.
+    tertiary: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-trailing-action-state-layer-color:
+      map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-trailing-action-state-layer-color:
+      map.get($systems, md-sys-color, on-error-container),
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, error-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+    )
+  );
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}