feat(material-experimental/theming): add M3 chips support (#28183)

Author: mmalerba

src/dev-app/theme-m3.scss

@@ -44,6 +44,7 @@ html {
   @include mat.button-toggle-theme($light-theme);
   @include mat.card-theme($light-theme);
   @include mat.checkbox-theme($light-theme);
+  @include mat.chips-theme($light-theme);
   @include mat.datepicker-theme($light-theme);
   @include mat.dialog-theme($light-theme);
   @include mat.divider-theme($light-theme);
@@ -89,6 +90,7 @@ html {
   @include mat.button-toggle-color($dark-theme);
   @include mat.card-color($dark-theme);
   @include mat.checkbox-color($dark-theme);
+  @include mat.chips-color($dark-theme);
   @include mat.datepicker-color($dark-theme);
   @include mat.dialog-color($dark-theme);
   @include mat.divider-color($dark-theme);
@@ -133,6 +135,7 @@ html {
     @include mat.button-toggle-density($scale-theme);
     @include mat.card-density($scale-theme);
     @include mat.checkbox-density($scale-theme);
+    @include mat.chips-density($scale-theme);
     @include mat.datepicker-density($scale-theme);
     @include mat.dialog-density($scale-theme);
     @include mat.divider-density($scale-theme);

src/material-experimental/theming/_custom-tokens.scss

@@ -113,6 +113,49 @@
   );
 }
 
+/// 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) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, label-large),
+    (
+      container-shape: _hardcode((
+        family: rounded,
+        radius: 8px,
+      ), $exclude-hardcoded),
+      with-avatar-avatar-size: _hardcode(24px, $exclude-hardcoded),
+      elevated-container-color: map.get($systems, md-sys-color, surface-container-low),
+      elevated-disabled-container-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.12,
+      ),
+      label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-label-text-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.38,
+      ),
+      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-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,
+      ),
+      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),
+    ),
+  );
+}
+
 /// Generates custom tokens for the mat-datepicker.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

src/material-experimental/theming/_m3-density.scss

@@ -19,6 +19,9 @@ $_density-tokens: (
   (mdc, checkbox): (
     state-layer-size: (40px, 36px, 32px, 28px),
   ),
+  (mdc, chip): (
+    container-height: (32px, 28px, 24px),
+  ),
   (mdc, circular-progress): (),
   (mdc, dialog): (),
   (mdc, elevated-card): (),

src/material-experimental/theming/_m3-tokens.scss

@@ -177,6 +177,11 @@
       _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, chip),
+      custom-tokens.chip($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, circular-progress),
       mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),

src/material/chips/_chips-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'sass:color';
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
@@ -6,63 +7,94 @@
 @use '../core/typography/typography';
 
 @mixin base($theme) {
-  .mat-mdc-standard-chip {
-    @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    .mat-mdc-standard-chip {
+      @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  .mat-mdc-standard-chip {
-    $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
-    @include mdc-chip-theme.theme($default-color-tokens);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    .mat-mdc-standard-chip {
+      $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
+      @include mdc-chip-theme.theme($default-color-tokens);
 
-    &.mat-mdc-chip-selected,
-    &.mat-mdc-chip-highlighted {
-      &.mat-primary {
-        $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
-        @include mdc-chip-theme.theme($primary-color-tokens);
-      }
+      &.mat-mdc-chip-selected,
+      &.mat-mdc-chip-highlighted {
+        &.mat-primary {
+          $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
+          @include mdc-chip-theme.theme($primary-color-tokens);
+        }
 
-      &.mat-accent {
-        $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
-        @include mdc-chip-theme.theme($accent-color-tokens);
-      }
+        &.mat-accent {
+          $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
+          @include mdc-chip-theme.theme($accent-color-tokens);
+        }
 
-      &.mat-warn {
-        $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
-        @include mdc-chip-theme.theme($warn-color-tokens);
+        &.mat-warn {
+          $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
+          @include mdc-chip-theme.theme($warn-color-tokens);
+        }
       }
     }
   }
 }
 
 @mixin typography($theme) {
-  $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    $typography-tokens: tokens-mdc-chip.get-typography-tokens($theme);
 
-  .mat-mdc-standard-chip {
-    @include mdc-chip-theme.theme($typography-tokens);
+    .mat-mdc-standard-chip {
+      @include mdc-chip-theme.theme($typography-tokens);
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-tokens: tokens-mdc-chip.get-density-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    $density-tokens: tokens-mdc-chip.get-density-tokens($theme);
 
-  .mat-mdc-chip.mat-mdc-standard-chip {
-    @include mdc-chip-theme.theme($density-tokens);
+    .mat-mdc-chip.mat-mdc-standard-chip {
+      @include mdc-chip-theme.theme($density-tokens);
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @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);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-chip-theme.theme(map.get($tokens, tokens-mdc-chip.$prefix));
+  }
+}

src/material/core/tokens/m2/_index.scss

@@ -33,6 +33,7 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
+@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;
@@ -127,6 +128,7 @@
       _get-tokens-for-module($theme, tokens-mat-toolbar),
       _get-tokens-for-module($theme, tokens-mat-tree),
       _get-tokens-for-module($theme, tokens-mdc-checkbox),
+      _get-tokens-for-module($theme, tokens-mdc-chip),
       _get-tokens-for-module($theme, tokens-mdc-circular-progress),
       _get-tokens-for-module($theme, tokens-mdc-dialog),
       _get-tokens-for-module($theme, tokens-mdc-elevated-card),