fix(material-experimental/mdc-chips): set correct ripple opacity for …

…focus states
angular · Jan 22, 2021 · 8ffe0b3 · 8ffe0b3
1 parent 0911820
commit 8ffe0b3
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss
@@ -29,21 +29,36 @@
       @include mdc-chip-fill-color-accessible($unselected-background,
         $query: $mat-theme-styles-query);
 
+      // mdc-chip-fill-color-accessible includes mdc-chip-selected-ink-color which overrides the opacity
+      // so selected chips always show a ripple.
+      // 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-accessible($primary, $query: $mat-theme-styles-query);
+          @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);
         }
       }
 
       &.mat-accent {
         &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include mdc-chip-fill-color-accessible($accent, $query: $mat-theme-styles-query);
+          @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);
         }
       }
 
       &.mat-warn {
         &.mdc-chip--selected, &.mat-mdc-chip-highlighted {
-          @include mdc-chip-fill-color-accessible($warn, $query: $mat-theme-styles-query);
+          @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);
         }
       }
     }