@depup/angular__material 21.2.2-depup.19

package/card/_card-theme.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+@use '../core/theming/inspection';
+@use '../core/typography/typography';
+@use '../core/tokens/token-utils';
+@use './m2-card';
+@use './m3-card';
+
+@mixin base($theme) {
+  $tokens: map.get(m2-card.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-card.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m2-card.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-card.get-tokens($theme), color);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-card.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-card.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-card.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-card.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: card,
+      tokens: token-utils.get-overrides(m3-card.get-tokens(), card)
+    ),
+  );
+}
+
+@mixin overrides($tokens: ()) {
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+@mixin theme($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

package/card/_m2-card.scss

@@ -0,0 +1,39 @@
+@use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
+  @return (
+    base: (
+      card-elevated-container-shape: 4px,
+      card-outlined-container-shape: 4px,
+      card-filled-container-shape: 4px,
+      card-outlined-outline-width: 1px,
+    ),
+    color: (
+      card-elevated-container-color: map.get($system, surface),
+      card-elevated-container-elevation: elevation.get-box-shadow(1),
+      card-outlined-container-color: map.get($system, surface),
+      card-outlined-container-elevation: elevation.get-box-shadow(0),
+      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)
+    ),
+    typography: (
+      card-title-text-font: map.get($system, title-small-font),
+      card-title-text-line-height: map.get($system, title-small-line-height),
+      card-title-text-size: map.get($system, title-small-size),
+      card-title-text-tracking: map.get($system, title-small-tracking),
+      card-title-text-weight: map.get($system, title-small-weight),
+      card-subtitle-text-font: map.get($system, label-medium-font),
+      card-subtitle-text-line-height: map.get($system, label-medium-line-height),
+      card-subtitle-text-size: map.get($system, label-medium-size),
+      card-subtitle-text-tracking: map.get($system, label-medium-tracking),
+      card-subtitle-text-weight: map.get($system, label-medium-weight),
+    ),
+    density: (),
+  );
+}

package/card/_m3-card.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/style/elevation';
+@use '../core/tokens/m3';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, card);
+
+/// Generates custom tokens for the mat-card.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+  @return (
+    base: (
+      card-elevated-container-shape: map.get($system, corner-medium),
+      card-filled-container-shape: map.get($system, corner-medium),
+      card-outlined-container-shape: map.get($system, corner-medium),
+      card-outlined-outline-width: 1px,
+    ),
+    color: (
+      card-elevated-container-color: map.get($system, surface-container-low),
+      card-elevated-container-elevation: elevation.get-box-shadow(map.get($system, level1)),
+      card-filled-container-color: map.get($system, surface-container-highest),
+      card-filled-container-elevation: elevation.get-box-shadow(map.get($system, level0)),
+      card-outlined-container-color: map.get($system, surface),
+      card-outlined-container-elevation: elevation.get-box-shadow(map.get($system, level0)),
+      card-outlined-outline-color: map.get($system, outline-variant),
+      card-subtitle-text-color: map.get($system, on-surface),
+    ),
+    typography: (
+      card-subtitle-text-font: map.get($system, title-medium-font),
+      card-subtitle-text-line-height: map.get($system, title-medium-line-height),
+      card-subtitle-text-size: map.get($system, title-medium-size),
+      card-subtitle-text-tracking: map.get($system, title-medium-tracking),
+      card-subtitle-text-weight: map.get($system, title-medium-weight),
+      card-title-text-font: map.get($system, title-large-font),
+      card-title-text-line-height: map.get($system, title-large-line-height),
+      card-title-text-size: map.get($system, title-large-size),
+      card-title-text-tracking: map.get($system, title-large-tracking),
+      card-title-text-weight: map.get($system, title-large-weight),
+    ),
+    density: (),
+  );
+}
+

package/changes.json

@@ -0,0 +1,10 @@
+{
+  "bumped": {
+    "tslib": {
+      "from": "^2.3.0",
+      "to": "^2.8.1"
+    }
+  },
+  "timestamp": "2026-03-14T20:26:59.511Z",
+  "totalUpdated": 1
+}

package/checkbox/_checkbox-theme.scss

@@ -0,0 +1,105 @@
+@use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
+@use '../core/typography/typography';
+@use './m2-checkbox';
+@use './m3-checkbox';
+@use 'sass:map';
+
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-checkbox.
+/// @param {Map} $theme The theme to generate base styles for.
+@mixin base($theme) {
+  $tokens: map.get(m2-checkbox.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-checkbox.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs color theme styles for the mat-checkbox.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {String} $color-variant The color variant to use for the component
+@mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-checkbox.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-checkbox.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    .mat-mdc-checkbox {
+      &.mat-primary {
+        @include token-utils.values(m2-checkbox.private-get-color-palette-color-tokens(
+            $theme, primary,
+            $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
+        );
+      }
+
+      &.mat-warn {
+        @include token-utils.values(m2-checkbox.private-get-color-palette-color-tokens(
+            $theme, error,
+            $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
+        );
+      }
+    }
+  }
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-checkbox.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-checkbox.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-checkbox.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-checkbox.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: checkbox,
+      tokens: token-utils.get-overrides(m3-checkbox.get-tokens(), checkbox),
+    ),
+  );
+}
+
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+/// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

package/checkbox/_m2-checkbox.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
+
+  @return (
+    base: (
+      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),
+      checkbox-touch-target-size: 48px,
+    ),
+    color: private-get-color-palette-color-tokens($theme, secondary),
+    typography: (
+      checkbox-label-text-font: map.get($system, body-medium-font),
+      checkbox-label-text-line-height: map.get($system, body-medium-line-height),
+      checkbox-label-text-size: map.get($system, body-medium-size),
+      checkbox-label-text-tracking: map.get($system, body-medium-tracking),
+      checkbox-label-text-weight: map.get($system, body-medium-weight)
+    ),
+    density: (
+      checkbox-touch-target-display: $touch-target-display,
+      checkbox-state-layer-size: map.get((
+        0: 40px,
+        -1: 36px,
+        -2: 32px,
+        -3: 28px,
+      ), $density-scale)
+    ),
+  );
+}
+
+@function private-get-color-palette-color-tokens($theme, $color-variant, $exclude: ()) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+
+  $tokens: (
+    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 {
+    $tokens: map.remove($tokens, $token);
+  }
+
+  @return $tokens;
+}

package/checkbox/_m3-checkbox.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for mat-checkbox.
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
+
+  @return (
+    base: (
+      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),
+      checkbox-touch-target-size: 48px,
+    ),
+    color: (
+      checkbox-disabled-label-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      checkbox-disabled-selected-checkmark-color: map.get($system, surface),
+      checkbox-disabled-selected-icon-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      checkbox-disabled-unselected-icon-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      checkbox-label-text-color: map.get($system, on-surface),
+      checkbox-selected-checkmark-color: map.get($system, on-primary),
+      checkbox-selected-focus-icon-color: map.get($system, primary),
+      checkbox-selected-focus-state-layer-color: map.get($system, primary),
+      checkbox-selected-hover-icon-color: map.get($system, primary),
+      checkbox-selected-hover-state-layer-color: map.get($system, primary),
+      checkbox-selected-icon-color: map.get($system, primary),
+      checkbox-selected-pressed-icon-color: map.get($system, primary),
+      checkbox-selected-pressed-state-layer-color: map.get($system, on-surface),
+      checkbox-unselected-focus-icon-color: map.get($system, on-surface),
+      checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
+      checkbox-unselected-hover-icon-color: map.get($system, on-surface),
+      checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
+      checkbox-unselected-icon-color: map.get($system, on-surface-variant),
+      checkbox-unselected-pressed-state-layer-color: map.get($system, primary),
+    ),
+    typography: (
+      checkbox-label-text-font: map.get($system, body-medium-font),
+      checkbox-label-text-line-height: map.get($system, body-medium-line-height),
+      checkbox-label-text-size: map.get($system, body-medium-size),
+      checkbox-label-text-tracking: map.get($system, body-medium-tracking),
+      checkbox-label-text-weight: map.get($system, body-medium-weight),
+    ),
+    density: get-density-tokens(map.get($system, density-scale)),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -3);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    checkbox-touch-target-display: list.nth((block, block, none, none), $index),
+    checkbox-state-layer-size: list.nth((40px, 36px, 32px, 28px), $index)
+  );
+}

package/chips/_chips-theme.scss

@@ -0,0 +1,115 @@
+@use 'sass:color';
+@use './m2-chip';
+@use './m3-chip';
+@use '../core/tokens/token-utils';
+@use '../core/theming/inspection';
+@use '../core/typography/typography';
+@use 'sass:map';
+
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-chips.
+/// @param {Map} $theme The theme to generate base styles for.
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include token-utils.values(map.get(m3-chip.get-tokens($theme), base));
+  } @else {
+    .mat-mdc-standard-chip {
+      @include token-utils.values(map.get(m2-chip.get-tokens($theme), base));
+    }
+  }
+}
+
+/// Outputs color theme styles for the mat-chips.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin color($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include token-utils.values(
+        map.get(m3-chip.get-tokens($theme, $color-variant), color));
+  } @else {
+    .mat-mdc-standard-chip {
+      @include token-utils.values(map.get(m2-chip.get-tokens($theme), color));
+
+      &.mat-mdc-chip-selected,
+      &.mat-mdc-chip-highlighted {
+        &.mat-primary {
+          @include token-utils.values(
+              m2-chip.private-get-color-palette-color-tokens($theme, primary));
+        }
+
+        &.mat-accent {
+          @include token-utils.values(
+              m2-chip.private-get-color-palette-color-tokens($theme, secondary));
+        }
+
+        &.mat-warn {
+          @include token-utils.values(
+              m2-chip.private-get-color-palette-color-tokens($theme, error));
+        }
+      }
+    }
+  }
+}
+
+/// Outputs typography theme styles for the mat-chips.
+/// @param {Map} $theme The theme to generate typography styles for.
+@mixin typography($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include token-utils.values(map.get(m3-chip.get-tokens($theme), typography));
+  } @else {
+    .mat-mdc-standard-chip {
+      @include token-utils.values(map.get(m2-chip.get-tokens($theme), typography));
+    }
+  }
+}
+
+/// Outputs density theme styles for the mat-chips.
+/// @param {Map} $theme The theme to generate density styles for.
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include token-utils.values(map.get(m3-chip.get-tokens($theme), density));
+  } @else {
+    .mat-mdc-chip.mat-mdc-standard-chip {
+      @include token-utils.values(map.get(m2-chip.get-tokens($theme), density));
+    }
+  }
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: chip,
+      tokens: token-utils.get-overrides(m3-chip.get-tokens(), chip)
+    ),
+  );
+}
+
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+/// Outputs all (base, color, typography, and density) theme styles for the mat-chips.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

package/chips/_m2-chip.scss

@@ -0,0 +1,85 @@
+@use 'sass:map';
+@use '../core/theming/theming';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -2);
+
+  @return (
+    base: (
+      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: map.get($system, hover-state-layer-opacity),
+      chip-outline-color: transparent,
+      chip-outline-width: 0,
+      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,
+      chip-trailing-action-hover-state-layer-opacity: 0,
+      chip-trailing-action-opacity: 0.54,
+      chip-trailing-action-state-layer-color: transparent,
+      chip-with-avatar-avatar-shape-radius: 14px,
+      chip-with-avatar-avatar-size: 28px,
+      chip-with-avatar-disabled-avatar-opacity: 1,
+      chip-with-icon-disabled-icon-opacity: 1,
+      chip-with-icon-icon-size: 18px,
+      chip-with-trailing-icon-disabled-trailing-icon-opacity: 1,
+    ),
+    color: private-get-color-palette-color-tokens($theme, null),
+    typography: (
+      chip-label-text-font: map.get($system, body-medium-font),
+      chip-label-text-line-height: map.get($system, body-medium-line-height),
+      chip-label-text-size: map.get($system, body-medium-size),
+      chip-label-text-tracking: map.get($system, body-medium-tracking),
+      chip-label-text-weight: map.get($system, body-medium-weight)
+    ),
+    density: (
+      chip-container-height: map.get((
+        0: 32px,
+        -1: 28px,
+        -2: 24px), $density-scale)
+    ),
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function private-get-color-palette-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 $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: 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: 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,
+    chip-with-icon-icon-color: $foreground,
+    chip-with-icon-selected-icon-color: $foreground,
+    chip-with-trailing-icon-disabled-trailing-icon-color: $foreground,
+    chip-with-trailing-icon-trailing-icon-color: $foreground,
+  );
+}