@angular/material 18.0.0-next.6 → 18.0.0-rc.1

package/core/tokens/_token-utils.scss

@@ -1,9 +1,11 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
+@use '@material/tokens/v0_161' as mdc-tokens;
 @use '../style/sass-utils';
 @use '../m2/palette' as m2-palette;
 @use '../m2/theming' as m2-theming;
@@ -141,6 +143,17 @@ $_component-prefix: null;
   }
 }
 
+/// Gets all the MDC token values for a specific component. This function serves as single
+/// point at which we directly reference a specific version of the MDC tokens.
+/// @param {String} $component Name of the component for which to get the tokens
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {List} Map of token names to values
+@function get-mdc-tokens($component, $systems, $exclude-hardcoded) {
+  $fn: meta.get-function($name: 'md-comp-' + $component + '-values', $module: 'mdc-tokens');
+  @return meta.call($fn, $systems, $exclude-hardcoded);
+}
+
 // 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.
@@ -234,6 +247,116 @@ $_component-prefix: null;
   }
 }
 
+/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots.
+/// @param {List} $prefix The token prefix for the given tokens.
+/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix.
+///  This param may also be a tuple of maps, the first one representing the default M3 token values,
+//   and the second containing overrides for different color variants.
+//   Single map example:
+//     (token1: green, token2: 2px)
+//   Tuple example:
+//     (
+//       (token1: green, token2: 2px),
+//       (
+//         secondary: (token1: blue),
+//         error: (token1: red),
+//       )
+//     )
+/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
+/// @param {String|null} $variant The name of the variant the token values are for.
+/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
+@function namespace-tokens($prefix, $values, $slots, $variant: null) {
+  $result: ();
+  @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) {
+    $variants: list.nth($values, 2);
+    $values: list.nth($values, 1);
+    @each $variant, $overrides in $variants {
+      $result: map.merge($result, namespace-tokens($prefix, $overrides, $slots, $variant));
+    }
+  }
+  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
+  $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names);
+  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
+  @return map.merge($result, ($prefix: $used-m3-tokens));
+}
+
+/// Hardcode the given value, or null if hardcoded values are excluded.
+@function hardcode($value, $exclude-hardcoded) {
+  @return if($exclude-hardcoded, null, $value);
+}
+
+/// Sets all of the standard typography tokens for the given token base name to the given typography
+/// level.
+/// @param {Map} $systems The MDC system tokens
+/// @param {String} $base-name The token base name to get the typography tokens for
+/// @param {String} $typography-level The typography level to base the token values on
+/// @return {Map} A map containing the typography tokens for the given base token name
+@function generate-typography-tokens($systems, $base-name, $typography-level) {
+  $result: ();
+  @each $prop in (font, line-height, size, tracking, weight) {
+    $result: map.set($result, #{$base-name}-#{$prop},
+      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
+  }
+  @return $result;
+}
+
+/// Maps the values in a map to new values using the given mapping function
+/// @param {Map} $map The maps whose values will be mapped to new values.
+/// @param {Function} $fn The value mapping function.
+/// @param {Map} A new map with its values updated using the mapping function.
+@function map-values($map, $fn) {
+  $result: ();
+  @each $key, $value in $map {
+    $result: map.set($result, $key, meta.call($fn, $value));
+  }
+  @return $result;
+}
+
+/// Renames the keys in a map
+/// @param {Map} $map The map whose keys should be renamed
+/// @param {Map} $rename-keys A map of original key to renamed key to apply to $map
+/// @return {Map} The result of applying the given key renames to the given map.
+@function rename-map-keys($map, $rename-keys) {
+  $result: $map;
+  @each $old-key-name, $new-key-name in $rename-keys {
+    @if map.has-key($map, $old-key-name) {
+      $result: map.set($result, $new-key-name, map.get($map, $old-key-name));
+    }
+  }
+  @return $result;
+}
+
+/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color
+/// token and a separate opacity token. This function applies the opacity to the color and drops the
+/// opacity key from the map. Can be removed once b/213331407 is resolved.
+/// @param {Map} $tokens The map of tokens currently being generated
+/// @param {Map} $all-tokens A map of all tokens, including hardcoded values
+/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of
+/// `((color: 'color-key', opacity: 'opacity-key'))`.
+/// @return {Map} The initial tokens with the combined color values.
+@function combine-color-tokens($tokens, $opacity-lookup, $pairs) {
+  $result: $tokens;
+
+  @each $pair in $pairs {
+    $color-key: map.get($pair, color);
+    $opacity-key: map.get($pair, opacity);
+    $color: map.get($tokens, $color-key);
+    $opacity: map.get($opacity-lookup, $opacity-key);
+
+    @if(meta.type-of($color) == 'color') {
+      $result: map.remove($result, $opacity-key);
+      $result: map.set($result, $color-key, rgba($color, $opacity));
+    }
+    @else if($color != null) {
+      $result: map.remove($result, $opacity-key);
+      $combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
+      $result: map.set($result, $color-key, $combined-color);
+    }
+  }
+
+  @return $result;
+}
+
 /// Verifies that the token overrides exist and are used in one of the given token maps.
 @mixin _validate-token-overrides($overrides: (), $token-maps) {
   $valid-token-names: ();
@@ -255,3 +378,31 @@ $_component-prefix: null;
     }
   }
 }
+
+/// Picks a submap containing only the given keys out the given map.
+/// @param {Map} $map The map to pick from.
+/// @param {List} $keys The map keys to pick.
+/// @return {Map} A submap containing only the given keys.
+@function _pick($map, $keys) {
+  $result: ();
+  @each $key in $keys {
+    @if map.has-key($map, $key) {
+      $result: map.set($result, $key, map.get($map, $key));
+    }
+  }
+  @return $result;
+}
+
+
+/// Filters keys with a null value out of the map.
+/// @param {Map} $map The map to filter.
+/// @return {Map} The given map with all of the null keys filtered out.
+@function _filter-nulls($map) {
+  $result: ();
+  @each $key, $val in $map {
+    @if $val != null {
+      $result: map.set($result, $key, $val);
+    }
+  }
+  @return $result;
+}

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

@@ -38,6 +38,7 @@ $prefix: (mat, switch);
     track-outline-width: 1px,
     track-outline-color: transparent,
     selected-track-outline-width: 1px,
+    selected-track-outline-color: transparent,
     disabled-unselected-track-outline-width: 1px,
     disabled-unselected-track-outline-color: transparent,
   );

package/core/tokens/m3/_index.scss

@@ -0,0 +1,161 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use './mat/app' as tokens-mat-app;
+@use './mat/autocomplete' as tokens-mat-autocomplete;
+@use './mat/badge' as tokens-mat-badge;
+@use './mat/text-button' as tokens-mat-text-button;
+@use './mat/protected-button' as tokens-mat-protected-button;
+@use './mat/filled-button' as tokens-mat-filled-button;
+@use './mat/outlined-button' as tokens-mat-outlined-button;
+@use './mat/dialog' as tokens-mat-dialog;
+@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
+@use './mat/card' as tokens-mat-card;
+@use './mat/chip' as tokens-mat-chip;
+@use './mat/datepicker' as tokens-mat-datepicker;
+@use './mat/divider' as tokens-mat-divider;
+@use './mat/expansion' as tokens-mat-expansion;
+@use './mat/fab' as tokens-mat-fab;
+@use './mat/fab-small' as tokens-mat-fab-small;
+@use './mat/form-field' as tokens-mat-form-field;
+@use './mat/grid-list' as tokens-mat-grid-list;
+@use './mat/icon' as tokens-mat-icon;
+@use './mat/icon-button' as tokens-mat-icon-button;
+@use './mat/list' as tokens-mat-list;
+@use './mat/menu' as tokens-mat-menu;
+@use './mat/option' as tokens-mat-option;
+@use './mat/optgroup' as tokens-mat-optgroup;
+@use './mat/paginator' as tokens-mat-paginator;
+@use './mat/checkbox' as tokens-mat-checkbox;
+@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
+@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
+@use './mat/radio' as tokens-mat-radio;
+@use './mat/ripple' as tokens-mat-ripple;
+@use './mat/select' as tokens-mat-select;
+@use './mat/sidenav' as tokens-mat-sidenav;
+@use './mat/slider' as tokens-mat-slider;
+@use './mat/switch' as tokens-mat-switch;
+@use './mat/snack-bar' as tokens-mat-snack-bar;
+@use './mat/sort' as tokens-mat-sort;
+@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
+@use './mat/stepper' as tokens-mat-stepper;
+@use './mat/tab-header' as tokens-mat-tab-header;
+@use './mat/table' as tokens-mat-table;
+@use './mat/toolbar' as tokens-mat-toolbar;
+@use './mat/tree' as tokens-mat-tree;
+@use './mdc/checkbox' as tokens-mdc-checkbox;
+@use './mdc/text-button' as tokens-mdc-text-button;
+@use './mdc/protected-button' as tokens-mdc-protected-button;
+@use './mdc/filled-button' as tokens-mdc-filled-button;
+@use './mdc/outlined-button' as tokens-mdc-outlined-button;
+@use './mdc/chip' as tokens-mdc-chip;
+@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/extended-fab' as tokens-mdc-extended-fab;
+@use './mdc/fab' as tokens-mdc-fab;
+@use './mdc/fab-small' as tokens-mdc-fab-small;
+@use './mdc/form-field' as tokens-mdc-form-field;
+@use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
+@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/outlined-text-field' as tokens-mdc-outlined-text-field;
+@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
+@use './mdc/radio' as tokens-mdc-radio;
+@use './mdc/slider' as tokens-mdc-slider;
+@use './mdc/snack-bar' as tokens-mdc-snack-bar;
+@use './mdc/switch' as tokens-mdc-switch;
+@use './mdc/tab' as tokens-mdc-tab;
+@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
+
+$_module-names: (
+  // Custom tokens
+  tokens-mat-app,
+  tokens-mat-autocomplete,
+  tokens-mat-badge,
+  tokens-mat-bottom-sheet,
+  tokens-mat-button-toggle,
+  tokens-mat-card,
+  tokens-mat-chip,
+  tokens-mat-datepicker,
+  tokens-mat-dialog,
+  tokens-mat-divider,
+  tokens-mat-expansion,
+  tokens-mat-fab,
+  tokens-mat-fab-small,
+  tokens-mat-filled-button,
+  tokens-mat-form-field,
+  tokens-mat-grid-list,
+  tokens-mat-icon-button,
+  tokens-mat-icon,
+  tokens-mat-menu,
+  tokens-mat-optgroup,
+  tokens-mat-option,
+  tokens-mat-outlined-button,
+  tokens-mat-paginator,
+  tokens-mat-checkbox,
+  tokens-mat-full-pseudo-checkbox,
+  tokens-mat-list,
+  tokens-mat-minimal-pseudo-checkbox,
+  tokens-mat-protected-button,
+  tokens-mat-radio,
+  tokens-mat-ripple,
+  tokens-mat-select,
+  tokens-mat-sidenav,
+  tokens-mat-slider,
+  tokens-mat-switch,
+  tokens-mat-snack-bar,
+  tokens-mat-sort,
+  tokens-mat-stepper,
+  tokens-mat-tab-header,
+  tokens-mat-table,
+  tokens-mat-text-button,
+  tokens-mat-toolbar,
+  tokens-mat-tree,
+
+  // MDC tokens
+  tokens-mdc-checkbox,
+  tokens-mdc-chip,
+  tokens-mdc-text-button,
+  tokens-mdc-protected-button,
+  tokens-mdc-filled-button,
+  tokens-mdc-outlined-button,
+  tokens-mdc-chip,
+  tokens-mdc-circular-progress,
+  tokens-mdc-dialog,
+  tokens-mdc-elevated-card,
+  tokens-mdc-extended-fab,
+  tokens-mdc-fab,
+  tokens-mdc-fab-small,
+  tokens-mdc-form-field,
+  tokens-mdc-filled-text-field,
+  tokens-mdc-icon-button,
+  tokens-mdc-linear-progress,
+  tokens-mdc-list,
+  tokens-mdc-outlined-card,
+  tokens-mdc-outlined-text-field,
+  tokens-mdc-plain-tooltip,
+  tokens-mdc-radio,
+  tokens-mdc-slider,
+  tokens-mdc-snack-bar,
+  tokens-mdc-switch,
+  tokens-mdc-tab,
+  tokens-mdc-tab-indicator,
+);
+
+/// Gets the full set of M3 tokens for the given theme object.
+/// @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} Full set of M3 tokens
+@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ();
+
+  @each $module-name in $_module-names {
+    $fn: meta.get-function($name: 'get-tokens', $module: $module-name);
+    $tokens: map.merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
+  }
+
+  @return $tokens;
+}

package/core/tokens/m3/mat/_app.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, app);
+
+/// Generates custom tokens for the app.
+/// @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 app
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    background-color: map.get($systems, md-sys-color, background),
+    text-color: map.get($systems, md-sys-color, on-background),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_autocomplete.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, autocomplete);
+
+/// Generates custom tokens for the mat-autocomplete.
+/// @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-autocomplete
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    background-color: map.get($systems, md-sys-color, surface-container),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+    container-elevation-shadow:
+      token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_badge.scss

@@ -0,0 +1,77 @@
+@use 'sass:map';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, badge);
+
+/// Generates custom tokens for the mat-badge.
+/// @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-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    background-color: map.get($systems, md-sys-color, error),
+    text-color: map.get($systems, md-sys-color, on-error),
+    disabled-state-background-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, error),
+      $alpha: 0.38,
+    ),
+    disabled-state-text-color: map.get($systems, md-sys-color, on-error),
+    text-font: map.get($systems, md-sys-typescale, label-small-font),
+    text-size: map.get($systems, md-sys-typescale, label-small-size),
+    text-weight: map.get($systems, md-sys-typescale, label-small-weight),
+    small-size-text-size: token-utils.hardcode(0, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-full),
+    container-size: token-utils.hardcode(16px, $exclude-hardcoded),
+    legacy-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+    legacy-small-size-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+    small-size-container-size: token-utils.hardcode(6px, $exclude-hardcoded),
+    container-padding: token-utils.hardcode(0 4px, $exclude-hardcoded),
+    small-size-container-padding: token-utils.hardcode(0, $exclude-hardcoded),
+    container-offset: token-utils.hardcode(-12px 0, $exclude-hardcoded),
+    small-size-container-offset: token-utils.hardcode(-6px 0, $exclude-hardcoded),
+    container-overlap-offset: token-utils.hardcode(-12px, $exclude-hardcoded),
+    small-size-container-overlap-offset: token-utils.hardcode(-6px, $exclude-hardcoded),
+
+    // This size isn't in the M3 spec so we emit the same values as for `medium`.
+    large-size-container-size: token-utils.hardcode(16px, $exclude-hardcoded),
+    large-size-container-offset: token-utils.hardcode(-12px 0, $exclude-hardcoded),
+    large-size-container-overlap-offset: token-utils.hardcode(-12px, $exclude-hardcoded),
+    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
+    large-size-container-padding: token-utils.hardcode(0 4px, $exclude-hardcoded),
+    legacy-large-size-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+  ), (
+    primary: (
+      background-color: map.get($systems, md-sys-color, primary),
+      text-color: map.get($systems, md-sys-color, on-primary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-primary),
+    ),
+    secondary: (
+      background-color: map.get($systems, md-sys-color, secondary),
+      text-color: map.get($systems, md-sys-color, on-secondary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, secondary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      background-color: map.get($systems, md-sys-color, tertiary),
+      text-color: map.get($systems, md-sys-color, on-tertiary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, tertiary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: () // Default, no overrides needed
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_bottom-sheet.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, bottom-sheet);
+
+/// Generates custom tokens for the mat-bottom-sheet.
+/// @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-bottom-sheet
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, container-text, body-large),
+    (
+      container-shape: token-utils.hardcode(28px, $exclude-hardcoded),
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      container-background-color: map.get($systems, md-sys-color, surface-container-low),
+    ),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, card);
+
+/// Generates custom tokens for the mat-card.
+/// @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-card
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, title-text, title-large),
+    token-utils.generate-typography-tokens($systems, subtitle-text, title-medium),
+    (
+      subtitle-text-color: map.get($systems, md-sys-color, on-surface)
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}
+

package/core/tokens/m3/mat/_checkbox.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../../../style/sass-utils';
+@use '../../token-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),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}
+

package/core/tokens/m3/mat/_chip.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../../token-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) {
+  $tokens: ((
+    disabled-container-opacity: token-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: token-utils.hardcode(1, $exclude-hardcoded),
+    trailing-action-focus-opacity: token-utils.hardcode(1, $exclude-hardcoded),
+  ), (
+    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),
+    ),
+    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),
+    ),
+    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),
+    ),
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}