fix(material-experimental/mdc-chips): extract styles into mixin

angular · Jan 22, 2021 · 6ec4a81 · 6ec4a81
1 parent 262dc2a
commit 6ec4a81
Showing 1 changed file with 11 additions and 15 deletions.
diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss
@@ -2,6 +2,14 @@
 @import '../mdc-helpers/mdc-helpers';
 @import '@material/theme/functions.import';
 
+@mixin _selected-color($color) {
+  @include mdc-chip-fill-color($color, $query: $mat-theme-styles-query);
+  @include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query);
+  @include mdc-chip-selected-ink-color-without-ripple_(text-primary-on-dark, $query: $mat-theme-styles-query);
+  @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
+  @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
+}
+
 @mixin mat-mdc-chips-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   $primary: mat-color(map-get($config, primary));
@@ -34,31 +42,19 @@
       // Include the same mixins but use mdc-chip-selected-ink-color-without-ripple
       &.mat-primary {
         &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include mdc-chip-fill-color($primary, $query: $mat-theme-styles-query);
-          @include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-selected-ink-color-without-ripple_(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
+          @include _selected-color($primary);
         }
       }
 
       &.mat-accent {
         &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include mdc-chip-fill-color($accent, $query: $mat-theme-styles-query);
-          @include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-selected-ink-color-without-ripple_(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
+          @include _selected-color($accent);
         }
       }
 
       &.mat-warn {
         &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include mdc-chip-fill-color($warn, $query: $mat-theme-styles-query);
-          @include mdc-chip-ink-color(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-selected-ink-color-without-ripple_(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
-          @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: $mat-theme-styles-query);
+          @include _selected-color($warn);
         }
       }
     }