fix(material-experimental/mdc-chips): make it easier to customize chi…

…p typography

Moves the typography styles of the chip to the root of the component so that it's easier to customize, similar to the non-MDC version.

src/material-experimental/mdc-chips/_chips-theme.scss

@@ -1,8 +1,8 @@
-@use '@material/chips/chip' as mdc-chip;
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '@material/chips/chip-set' as mdc-chip-set;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/color-palette' as mdc-color-palette;
+@use '@material/typography' as mdc-typography;
 @use 'sass:color';
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
@@ -80,7 +80,12 @@
       theming.get-typography-config($config-or-theme));
   @include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query);
+    // Note that we don't go through MDC's typography mixin, because it assigns the styles to
+    // an inner element which makes it difficult for clients to customize. Instead we apply the
+    // same styles ourselves to the root.
+    .mat-mdc-standard-chip {
+      @include mdc-typography.typography(body2, $query: mdc-helpers.$mat-typography-styles-query);
+    }
   }
 }
 

src/material-experimental/mdc-chips/chip.scss

@@ -73,6 +73,14 @@
     width: 100%;
   }
 
+  // This element can be placed on a `button` node which usually has some user agent styles.
+  // Reset the font so that the typography from the root element can propagate down.
+  .mdc-evolution-chip__action--primary {
+    font: inherit;
+    letter-spacing: inherit;
+    white-space: inherit;
+  }
+
   // MDC sizes and positions this element using `width`, `height` and `padding`.
   // This usually works, but it's common for apps to add `box-sizing: border-box`
   // to all elements on the page which can cause the graphic to be clipped.