@angular/material-experimental 17.2.0-next.1 → 17.2.0

package/theming/_color-api-back-compat.scss

@@ -0,0 +1,98 @@
+@use '@angular/material' as mat;
+
+@mixin color-variant-styles($theme, $color-variant) {
+  // Some components use the secondary color rather than primary color for `.mat-primary`.
+  // Those components should use the $secondary-color-variant.
+  $secondary-color-variant: if($color-variant == primary, secondary, $color-variant);
+
+  @include mat.option-color($theme, $color-variant: $secondary-color-variant);
+  @include mat.progress-spinner-color($theme, $color-variant: $color-variant);
+  @include mat.pseudo-checkbox-color($theme, $color-variant: $color-variant);
+  @include mat.stepper-color($theme, $color-variant: $color-variant);
+
+  &.mat-icon {
+    @include mat.icon-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-checkbox {
+    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-slider {
+    @include mat.slider-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-tab-group,
+  &.mat-mdc-tab-nav-bar {
+    @include mat.tabs-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-slide-toggle {
+    @include mat.slide-toggle-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-form-field {
+    @include mat.select-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-radio-button {
+    @include mat.radio-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-progress-bar {
+    @include mat.progress-bar-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-form-field {
+    @include mat.form-field-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-datepicker-content {
+    @include mat.datepicker-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-button-base {
+    @include mat.button-color($theme, $color-variant: $color-variant);
+  }
+
+  &.mat-mdc-standard-chip {
+    @include mat.chips-color($theme, $color-variant: $secondary-color-variant);
+  }
+
+  .mdc-list-item__start,
+  .mdc-list-item__end {
+    @include mat.checkbox-color($theme, $color-variant: $color-variant);
+    @include mat.radio-color($theme, $color-variant: $color-variant);
+  }
+
+  // M3 dropped support for warn/error color FABs.
+  @if $color-variant != error {
+    &.mat-mdc-fab,
+    &.mat-mdc-mini-fab {
+      @include mat.fab-color($theme, $color-variant: $color-variant);
+    }
+  }
+}
+
+@mixin color-variants-back-compat($theme) {
+  .mat-primary {
+    @include color-variant-styles($theme, primary);
+  }
+  .mat-badge {
+    @include mat.badge-color($theme, $color-variant: primary);
+  }
+
+  .mat-accent {
+    @include color-variant-styles($theme, tertiary);
+  }
+  .mat-badge-accent {
+    @include mat.badge-color($theme, $color-variant: tertiary);
+  }
+
+  .mat-warn {
+    @include color-variant-styles($theme, error);
+  }
+  .mat-badge-warn {
+    @include mat.badge-color($theme, $color-variant: error);
+  }
+}

package/theming/_custom-tokens.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 /// Hardcode the given value, or null if hardcoded values are excluded.
 @function _hardcode($value, $exclude-hardcoded) {
@@ -28,6 +29,9 @@
 @function autocomplete($systems, $exclude-hardcoded) {
   @return (
     background-color: map.get($systems, md-sys-color, surface-container),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+    container-elevation-shadow:
+      _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
   );
 }
 
@@ -66,15 +70,15 @@
     small-size-container-size: _hardcode(6px, $exclude-hardcoded),
     container-padding: _hardcode(0 4px, $exclude-hardcoded),
     small-size-container-padding: _hardcode(0, $exclude-hardcoded),
-    container-offset: -12px 0,
-    small-size-container-offset: -6px 0,
-    container-overlap-offset: -12px,
-    small-size-container-overlap-offset: -6px,
+    container-offset: _hardcode(-12px 0, $exclude-hardcoded),
+    small-size-container-offset: _hardcode(-6px 0, $exclude-hardcoded),
+    container-overlap-offset: _hardcode(-12px, $exclude-hardcoded),
+    small-size-container-overlap-offset: _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: _hardcode(16px, $exclude-hardcoded),
-    large-size-container-offset: -12px 0,
-    large-size-container-overlap-offset: -12px,
+    large-size-container-offset: _hardcode(-12px 0, $exclude-hardcoded),
+    large-size-container-overlap-offset: _hardcode(-12px, $exclude-hardcoded),
     large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
     large-size-container-padding: _hardcode(0 4px, $exclude-hardcoded),
     legacy-large-size-container-size: _hardcode(unset, $exclude-hardcoded),
@@ -130,8 +134,10 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-button-toggle
 @function button-toggle($systems, $exclude-hardcoded) {
-  @return ((
-    shape: _hardcode(9999px, $exclude-hardcoded),
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, label-large),
+  (
+    shape: map.get($systems, md-sys-shape, corner-full),
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
     text-color: map.get($systems, md-sys-color, on-surface),
@@ -153,7 +159,6 @@
       $alpha: 0.12,
     ),
     divider-color: map.get($systems, md-sys-color, outline),
-    text-font: map.get($systems, md-sys-typescale, label-large-font),
   ), (
     // Color variants:
     primary: (
@@ -186,13 +191,51 @@
   );
 }
 
+/// Generates custom tokens for the mat-chip.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-chip
+@function chip($systems, $exclude-hardcoded) {
+  @return ((
+    disabled-container-opacity: _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: _hardcode(1, $exclude-hardcoded),
+    trailing-action-focus-opacity: _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),
+    ),
+  ));
+}
+
 /// Generates custom tokens for the mdc-chip. (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).
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mdc-chip
-@function chip($systems, $exclude-hardcoded) {
+@function mdc-chip($systems, $exclude-hardcoded) {
   @return (mat.private-merge-all(
     _generate-typography-tokens($systems, label-text, label-large),
     (
@@ -208,16 +251,10 @@
       ),
       with-icon-icon-size: _hardcode(18px, $exclude-hardcoded),
       with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-icon-disabled-icon-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
+      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: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
+      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: _hardcode(1px, $exclude-hardcoded),
@@ -227,18 +264,48 @@
         $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: _hardcode(0.38, $exclude-hardcoded),
+      elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container),
+      flat-selected-outline-width: _hardcode(0, $exclude-hardcoded),
+      selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      flat-disabled-selected-container-color: mat.private-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: _hardcode(0.38, $exclude-hardcoded),
+      with-trailing-icon-disabled-trailing-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
     ),
   ), (
     // Color variants:
     primary: (
       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: (
       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: (
       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),
     )
   ));
 }
@@ -275,9 +342,10 @@
     toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-body-label-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-period-button-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-header-divider-color: map.get($systems, md-sys-color, outline-variant),
+    calendar-header-divider-color: _hardcode(transparent, $exclude-hardcoded),
     calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
     calendar-date-today-disabled-state-outline-color: mat.private-safe-color-change(
@@ -302,6 +370,12 @@
     ),
     calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
     calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-container-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0),
+      $exclude-hardcoded),
+    calendar-container-touch-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0),
+      $exclude-hardcoded),
+    calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
+    calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),
     calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
     calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
@@ -357,7 +431,7 @@
   @return (
     container-max-width: _hardcode(560px, $exclude-hardcoded),
     container-small-max-width: _hardcode(calc(100vw - 32px), $exclude-hardcoded),
-    container-min-width: _harcode(280px, $exclude-hardcoded),
+    container-min-width: _hardcode(280px, $exclude-hardcoded),
     actions-alignment: _hardcode(flex-end, $exclude-hardcoded),
     content-padding: _hardcode(20px 24px, $exclude-hardcoded),
     with-actions-content-padding: _hardcode(20px 24px 0, $exclude-hardcoded),
@@ -583,6 +657,17 @@
   ));
 }
 
+/// Generates custom tokens for the mat-list.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-list
+@function list($systems, $exclude-hardcoded) {
+  @return (
+    active-indicator-color: map.get($systems, md-sys-color, secondary-container),
+    active-indicator-shape: map.get($systems, md-sys-shape, corner-full),
+  );
+}
+
 /// Generates custom tokens for the mat-button.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -790,9 +875,13 @@
   @return mat.private-merge-all(
     _generate-typography-tokens($systems, item-label-text, label-large),
     (
-      container-shape: _hardcode(4px, $exclude-hardcoded),
+      container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+      divider-color: map.get($systems, md-sys-color, surface-variant),
+      divider-bottom-spacing: _hardcode(8px, $exclude-hardcoded),
+      divider-top-spacing: _hardcode(8px, $exclude-hardcoded),
       item-label-text-color: map.get($systems, md-sys-color, on-surface),
       item-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      item-icon-size: _hardcode(24px, $exclude-hardcoded),
       item-hover-state-layer-color: mat.private-safe-color-change(
         map.get($systems, md-sys-color, on-surface),
         $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
@@ -801,6 +890,11 @@
         map.get($systems, md-sys-color, on-surface),
         $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
       ),
+      item-spacing: _hardcode(12px, $exclude-hardcoded),
+      item-leading-spacing: _hardcode(12px, $exclude-hardcoded),
+      item-trailing-spacing: _hardcode(12px, $exclude-hardcoded),
+      item-with-icon-leading-spacing: _hardcode(12px, $exclude-hardcoded),
+      item-with-icon-trailing-spacing: _hardcode(12px, $exclude-hardcoded),
       container-color: map.get($systems, md-sys-color, surface-container),
     )
   );
@@ -1005,6 +1099,8 @@
           map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
       focused-arrow-color: map.get($systems, md-sys-color, primary),
       invalid-arrow-color: map.get($systems, md-sys-color, error),
+      container-elevation-shadow:
+        _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
     )
   ), (
     // Color variants:
@@ -1027,12 +1123,14 @@
 /// @return {Map} A set of custom tokens for the mat-sidenav
 @function sidenav($systems, $exclude-hardcoded) {
   @return (
-    container-shape: 16px,
-    container-divider-color: map.get($systems, md-sys-color, outline),
+    container-elevation-shadow: _hardcode(none, $exclude-hardcoded),
+    container-divider-color: _hardcode(transparent, $exclude-hardcoded),
+    container-width: _hardcode(360px, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-large),
     container-background-color: map.get($systems, md-sys-color, surface),
     container-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    content-background-color: _hardcode(inherit, $exclude-hardcoded),
-    content-text-color: _hardcode(inherit, $exclude-hardcoded),
+    content-background-color: map.get($systems, md-sys-color, background),
+    content-text-color: map.get($systems, md-sys-color, on-background),
     scrim-color: mat.private-safe-color-change(
         map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
   );
@@ -1085,6 +1183,41 @@
   ));
 }
 
+/// Generates custom tokens for the mat-slide-toggle.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-slide-toggle
+@function switch($systems, $exclude-hardcoded) {
+  @return (
+    disabled-selected-handle-opacity: _hardcode(1, $exclude-hardcoded),
+    disabled-unselected-handle-opacity: _hardcode(0.38, $exclude-hardcoded),
+    unselected-handle-size: _hardcode(16px, $exclude-hardcoded),
+    selected-handle-size: _hardcode(24px, $exclude-hardcoded),
+    with-icon-handle-size: _hardcode(24px, $exclude-hardcoded),
+    pressed-handle-size: _hardcode(28px, $exclude-hardcoded),
+    selected-handle-horizontal-margin: _hardcode(0 24px, $exclude-hardcoded),
+    selected-with-icon-handle-horizontal-margin: _hardcode(0 24px, $exclude-hardcoded),
+    selected-pressed-handle-horizontal-margin: _hardcode(0 22px, $exclude-hardcoded),
+    unselected-handle-horizontal-margin: _hardcode(0 8px, $exclude-hardcoded),
+    unselected-with-icon-handle-horizontal-margin: _hardcode(0 4px, $exclude-hardcoded),
+    unselected-pressed-handle-horizontal-margin: _hardcode(0 2px, $exclude-hardcoded),
+    // The hidden and visible track represent whichever track is visible or
+    // hidden in the ui. This could be the .mdc-switch__track :before or
+    // :after depending on whether the switch is selected or unselected.
+    //
+    // The m2 slide-toggle uses transforms to hide & show the tracks while
+    // the m3 slide-toggle uses opacity.
+    visible-track-opacity: _hardcode(1, $exclude-hardcoded),
+    hidden-track-opacity: _hardcode(0, $exclude-hardcoded),
+    visible-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
+    hidden-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
+    track-outline-width: _hardcode(2px, $exclude-hardcoded),
+    track-outline-color:  map.get($systems, md-sys-color, outline),
+    disabled-unselected-track-outline-width: _hardcode(2px, $exclude-hardcoded),
+    disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface),
+  ), ();
+}
+
 /// Generates custom tokens for the mat-snack-bar.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -1183,7 +1316,7 @@
     _generate-typography-tokens($systems, label-text, title-small),
     (
       divider-color: map.get($systems, md-sys-color, surface-variant),
-      divider-height: 1px,
+      divider-height: _hardcode(1px, $exclude-hardcoded),
       disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value.
       pagination-icon-color: map.get($systems, md-sys-color, on-surface),
       inactive-label-text-color: map.get($systems, md-sys-color, on-surface),

package/theming/_m3-density.scss

@@ -95,6 +95,10 @@ $_density-tokens: (
   (mat, icon-button): (
     touch-target-display: (block, block, none, none),
   ),
+  (mat, list): (
+    list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
+    list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
+  ),
   (mat, text-button): (
     touch-target-display: (block, block, none, none),
   ),
@@ -114,12 +118,20 @@ $_density-tokens: (
   (mat, minimal-pseudo-checkbox): (),
   (mat, paginator): (
     container-size: (56px, 52px, 48px, 40px),
+    form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
+    form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
   ),
   (mat, radio): (
     touch-target-display: (block, block, none, none),
   ),
   (mat, ripple): (),
-  (mat, select): (),
+  (mat, select): (
+    arrow-transform: (
+      translateY(-8px),
+      translateY(-8px),
+      none,
+    ),
+  ),
   (mat, sidenav): (),
   (mat, slide-toggle): (),
   (mat, slider): (),

package/theming/_m3-tokens.scss

@@ -446,7 +446,7 @@
     headline-weight: subhead-weight,
   ));
 
-  @if (map.has-key($tokens, container-elevation)) {
+  @if map.get($tokens, container-elevation) != null {
     $tokens: map.merge($tokens, (
       // The spec has the dialog at an elevation of 3 which is consistent with the current
       // version of the tokens (0_161), however both the designs and MDC's implementation
@@ -464,6 +464,27 @@
   @return $tokens;
 }
 
+/// Fixes values in the list tokens that are inconsistent with its usage.
+/// @param {Map} $initial-tokens Map of list tokens currently being generated.
+/// @return {Map} The given tokens, with the inconsistent values replaced with valid ones.
+@function _fix-list-tokens($tokens) {
+  // This does not match the spec, which defines this to be `md.sys.color.surface`.
+  // However, this interferes with the use case of placing a list on other components. For example,
+  // the bottom sheet's container color is `md.sys.color.surface-container-low`. Instead, allow the
+  // list to just display the colors for its background.
+  @if map.get($tokens, list-item-container-color) != null {
+    $tokens: map.set($tokens, list-item-container-color, transparent);
+  }
+
+  // Match spec, which has list-item-leading-icon-size of 24px. Current version of tokens (0_161)
+  // has 18px.
+  @if map.get($tokens, list-item-leading-icon-size) != null {
+    $tokens: map.set($tokens, list-item-leading-icon-size, 24px);
+  }
+
+  @return $tokens;
+}
+
 /// Generates a set of namespaced tokens for all components.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -514,7 +535,7 @@
     ),
     _namespace-tokens(
       (mdc, chip),
-      custom-tokens.chip($systems, $exclude-hardcoded),
+      custom-tokens.mdc-chip($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
@@ -660,7 +681,9 @@
     ),
     _namespace-tokens(
       (mdc, list),
-      mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
+      _fix-list-tokens(
+        mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded)
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -753,6 +776,11 @@
       custom-tokens.card($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, chip),
+      custom-tokens.chip($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, datepicker),
       custom-tokens.datepicker($systems, $exclude-hardcoded),
@@ -808,6 +836,11 @@
       custom-tokens.filled-button($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, list),
+      custom-tokens.list($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       // Note: in M3 the "protected" button is called "elevated".
       (mat, protected-button),
@@ -904,6 +937,11 @@
       custom-tokens.stepper($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, switch),
+      custom-tokens.switch($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, tab-header),
       custom-tokens.tab-header($systems, $exclude-hardcoded),
@@ -953,7 +991,13 @@
     mdc-tokens.md-sys-color-values-light($ref));
   @return _generate-tokens(map.merge($ref, (
     md-sys-color: $sys-color,
+    // Because the elevation values are always combined with color values to create the box shadow,
+    // elevation needs to be part of the color dimension.
     md-sys-elevation: mdc-tokens.md-sys-elevation-values(),
+    // Because the state values are sometimes combined with color values to create rgba colors,
+    // state needs to be part of color dimension.
+    // TODO(mmalerba): If at some point we remove the need for these combined values, we can move
+    //  state to the base dimension.
     md-sys-state: mdc-tokens.md-sys-state-values(),
   )));
 }
@@ -989,6 +1033,5 @@
   @return _generate-tokens((
     md-sys-motion: mdc-tokens.md-sys-motion-values(),
     md-sys-shape: mdc-tokens.md-sys-shape-values(),
-    md-sys-state: mdc-tokens.md-sys-state-values(),
   ), $include-non-systemized: true);
 }