fix(material-experimental/mdc-chips): align theming setup with… (#19000)

Fixes the MDC-based chips not wrapping its styles in `mat-using-mdc-theme` and not overriding the MDC theme variables with our context.

Author: crisbeto

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

@@ -3,37 +3,55 @@
 @import '@material/theme/functions.import';
 
 @mixin mat-mdc-chips-theme($theme) {
-  @include mdc-chip-set-core-styles($query: $mat-theme-styles-query);
-  @include mdc-chip-without-ripple($query: $mat-theme-styles-query);
-
   $primary: mat-color(map-get($theme, primary));
   $accent: mat-color(map-get($theme, accent));
   $warn: mat-color(map-get($theme, warn));
   $background: map-get($theme, background);
   $unselected-background: mat-color($background, unselected-chip);
 
-  .mat-mdc-chip {
-    @include mdc-chip-fill-color-accessible($unselected-background,
-      $query: $mat-theme-styles-query);
+  // Save original values of MDC global variables. We need to save these so we can restore the
+  // variables to their original values and prevent unintended side effects from using this mixin.
+  $orig-mdc-chips-fill-color-default: $mdc-chips-fill-color-default;
+  $orig-mdc-chips-ink-color-default: $mdc-chips-ink-color-default;
+  $orig-mdc-chips-icon-color: $mdc-chips-icon-color;
+
+  @include mat-using-mdc-theme($theme) {
+    $mdc-chips-fill-color-default:
+        mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global;
+    $mdc-chips-ink-color-default: rgba(mdc-theme-prop-value(on-surface), 0.87) !global;
+    $mdc-chips-icon-color: mdc-theme-prop-value(on-surface) !global;
+
+    @include mdc-chip-set-core-styles($query: $mat-theme-styles-query);
+    @include mdc-chip-without-ripple($query: $mat-theme-styles-query);
+
+    .mat-mdc-chip {
+      @include mdc-chip-fill-color-accessible($unselected-background,
+        $query: $mat-theme-styles-query);
 
-    &.mat-primary {
-      &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-        @include mdc-chip-fill-color-accessible($primary, $query: $mat-theme-styles-query);
+      &.mat-primary {
+        &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
+          @include mdc-chip-fill-color-accessible($primary, $query: $mat-theme-styles-query);
+        }
       }
-    }
 
-    &.mat-accent {
-      &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-        @include mdc-chip-fill-color-accessible($accent, $query: $mat-theme-styles-query);
+      &.mat-accent {
+        &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
+          @include mdc-chip-fill-color-accessible($accent, $query: $mat-theme-styles-query);
+        }
       }
-    }
 
-    &.mat-warn {
-      &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-        @include mdc-chip-fill-color-accessible($warn, $query: $mat-theme-styles-query);
+      &.mat-warn {
+        &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
+          @include mdc-chip-fill-color-accessible($warn, $query: $mat-theme-styles-query);
+        }
       }
     }
   }
+
+  // Restore original values of MDC global variables.
+  $mdc-chips-fill-color-default: $orig-mdc-chips-fill-color-default !global;
+  $mdc-chips-ink-color-default: $orig-mdc-chips-ink-color-default !global;
+  $mdc-chips-icon-color: $orig-mdc-chips-icon-color !global;
 }
 
 @mixin mat-mdc-chips-typography($config) {