fix(material/chips): Tokenize chip outline and disabled opacity (#28488)

This will give us the flexibility we need to implement M3 chips

Author: mmalerba

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

@@ -201,11 +201,6 @@
         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),
@@ -225,6 +220,13 @@
       ),
       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),
+      outline-color: map.get($systems, md-sys-color, outline),
+      disabled-outline-color: mat.private-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),
     ),
   ), (
     // Color variants:

src/material/chips/_chips-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
+@use '../core/tokens/m2/mat/chip' as tokens-mat-chip;
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,6 +17,8 @@
   @else {
     .mat-mdc-standard-chip {
       @include mdc-chip-theme.theme(tokens-mdc-chip.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+          tokens-mat-chip.$prefix, tokens-mat-chip.get-unthemable-tokens());
     }
   }
 }
@@ -33,6 +36,8 @@
     .mat-mdc-standard-chip {
       $default-color-tokens: tokens-mdc-chip.get-color-tokens($theme);
       @include mdc-chip-theme.theme($default-color-tokens);
+      @include token-utils.create-token-values(
+          tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme));
 
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
@@ -66,6 +71,8 @@
 
     .mat-mdc-standard-chip {
       @include mdc-chip-theme.theme($typography-tokens);
+      @include token-utils.create-token-values(
+          tokens-mat-chip.$prefix, tokens-mat-chip.get-typography-tokens($theme));
     }
   }
 }
@@ -81,6 +88,8 @@
 
     .mat-mdc-chip.mat-mdc-standard-chip {
       @include mdc-chip-theme.theme($density-tokens);
+      @include token-utils.create-token-values(
+          tokens-mat-chip.$prefix, tokens-mat-chip.get-density-tokens($theme));
     }
   }
 }
@@ -112,5 +121,7 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   $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);
   @include mdc-chip-theme.theme($mdc-chip-tokens);
+  @include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens);
 }

src/material/chips/chip.scss

@@ -4,35 +4,46 @@
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/layout-common';
 @use '../core/focus-indicators/private' as focus-indicators-private;
-@use '../core/tokens/m2/mdc/chip' as m2-mdc-chip;
+@use '../core/tokens/m2/mdc/chip' as tokens-mdc-chip;
+@use '../core/tokens/m2/mat/chip' as tokens-mat-chip;
 @use '../core/tokens/token-utils';
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 
 // The slots for tokens that will be configured in the theme can be emitted with no fallback.
 @include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  $token-slots: m2-mdc-chip.get-token-slots();
+  $mdc-chip-token-slots: tokens-mdc-chip.get-token-slots();
+  $mat-chip-token-slots: tokens-mat-chip.get-token-slots();
 
   // Add the MDC chip static styles.
   @include mdc-chip.static-styles();
 
   .mat-mdc-standard-chip {
     // Add the official slots for the MDC chip.
-    @include mdc-chip-theme.theme-styles($token-slots);
+    @include mdc-chip-theme.theme-styles($mdc-chip-token-slots);
   }
 
   // Add additional slots for the MDC chip tokens, needed in Angular Material.
-  @include token-utils.use-tokens(m2-mdc-chip.$prefix, $token-slots) {
+  @include token-utils.use-tokens(tokens-mdc-chip.$prefix, $mdc-chip-token-slots) {
     .mat-mdc-chip-focus-overlay {
       @include token-utils.create-token-slot(background, focus-state-layer-color);
       @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
     }
   }
+
+  @include token-utils.use-tokens(tokens-mat-chip.$prefix, $mat-chip-token-slots) {
+    // Historically, MDC did not support disabled chips, so we needed our own disabled styles.
+    // Now that MDC supports disabled styles, we should switch to using theirs.
+    .mat-mdc-standard-chip.mdc-evolution-chip--disabled {
+      @include token-utils.create-token-slot(opacity, disabled-container-opacity);
+    }
+  }
 }
 
 // We *should* be able to include these styles through MDC's
 // `theme-styles` mixin, but we can't at the time of writing.
 @mixin _missing-mdc-theme-styles() {
   .mat-mdc-standard-chip {
+    @include mdc-chip-theme.outline-style(solid);
     @include mdc-chip-theme.checkmark-size(mdc-chip-theme.$checkmark-size);
     @include mdc-chip-theme.trailing-action-size(mdc-chip-theme.$trailing-action-size);
     @include mdc-chip-theme.horizontal-padding(
@@ -98,12 +109,6 @@
     }
   }
 
-  // Angular Material supports disabled chips, which MDC does not.
-  // Dim the disabled chips and stop MDC from changing the icon color on click.
-  &.mdc-evolution-chip--disabled {
-    opacity: 0.4;
-  }
-
   // MDC sets `overflow: hidden` on these elements in order to truncate the text. This is
   // unnecessary since our chips don't truncate their text and it makes it difficult to style
   // the strong focus indicators so we need to override it.

src/material/core/tokens/m2/mat/_chip.scss

@@ -0,0 +1,39 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// 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 (
+    disabled-container-opacity: 0.4,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// 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(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/core/tokens/m2/mdc/_chip.scss

@@ -39,6 +39,14 @@ $prefix: (mdc, chip);
     with-avatar-avatar-size: 28px,
     // The width & height of the chip icon.
     with-icon-icon-size: 18px,
+    // The chip's border width.
+    outline-width: 0,
+    // The chip's border color.
+    outline-color: transparent,
+    // The chip's border color when disabled.
+    disabled-outline-color: transparent,
+    // The chip's border color when focused.
+    focus-outline-color: transparent,
     // Not used by MDC.
     disabled-label-text-opacity: null,
     // Not used by MDC.
@@ -55,8 +63,6 @@ $prefix: (mdc, chip);
     flat-selected-outline-width: null,
     // Our chips do not have a border.
     flat-unselected-outline-width: null,
-    // Our chips do not have a border.
-    outline-width: null,
     // Not used by MDC.
     with-avatar-disabled-avatar-opacity: null,
     // Not used by MDC.
@@ -73,8 +79,6 @@ $prefix: (mdc, chip);
     container-elevation: null,
     // Elevated chips not implemented.
     container-shadow-color: null,
-    // Our chips do not have a border.
-    disabled-outline-color: null,
     // Elevated chips not implemented.
     elevated-container-elevation: null,
     // Elevated chips not implemented.
@@ -136,16 +140,12 @@ $prefix: (mdc, chip);
     // Unused.
     focus-label-text-color: null,
     // Unused.
-    focus-outline-color: null,
-    // Unused.
     hover-label-text-color: null,
     // Unused.
     hover-state-layer-color: null,
     // Unused.
     hover-state-layer-opacity: null,
     // Unused.
-    outline-color: null,
-    // Unused.
     pressed-label-text-color: null,
     // Unused.
     pressed-state-layer-color: null,