fix(chips): disabled state not matching specs

* Currently if chips are disabled with the spec 2018 alignment, it's not clear whether a chip is disabled or not. The chip still has a focus effect, hover effect and pointer cursor for the `mat-chip-remove`.
* Also moves the `@include mat-elevation` to the theme (probably introduced before: #11344 has been merged)

Author: devversion

src/demo-app/chips/chips-demo.html

@@ -36,7 +36,7 @@ <h4>With avatar and icons</h4>
 
 
       <mat-chip-list>
-        <mat-chip>
+        <mat-chip disabled>
           <mat-icon matChipAvatar>home</mat-icon>
           Home
           <mat-icon matChipRemove>cancel</mat-icon>

src/lib/chips/_chips-theme.scss

@@ -17,10 +17,6 @@ $mat-chip-remove-font-size: 18px;
     color: $foreground;
     opacity: 0.4;
   }
-
-  .mat-chip-remove:hover {
-    opacity: 0.54;
-  }
 }
 
 @mixin mat-chips-theme($theme) {
@@ -34,12 +30,21 @@ $mat-chip-remove-font-size: 18px;
   $unselected-background: mat-color($background, unselected-chip);
   $unselected-foreground: mat-color($foreground, text);
 
-
   .mat-chip.mat-standard-chip {
     @include mat-chips-color($unselected-foreground, $unselected-background);
 
-    &:focus {
-      @include _mat-theme-elevation(3, $theme);
+    &:not(.mat-chip-disabled) {
+      &:focus, &:active {
+        @include _mat-theme-elevation(3, $theme);
+      }
+
+      .mat-chip-remove:hover {
+        opacity: 0.54;
+      }
+    }
+
+    &.mat-chip-disabled {
+      opacity: 0.4;
     }
   }
 

src/lib/chips/chips.scss

@@ -68,10 +68,6 @@ $mat-chip-remove-size: 18px;
     }
   }
 
-  &:active {
-    @include mat-elevation(3);
-  }
-
   @include cdk-high-contrast {
     outline: solid 1px;
 
@@ -150,6 +146,17 @@ $mat-chip-remove-size: 18px;
   }
 }
 
+.mat-standard-chip.mat-chip-disabled {
+  &::after {
+    opacity: 0;
+  }
+
+  .mat-chip-remove,
+  .mat-chip-trailing-icon {
+    cursor: default;
+  }
+}
+
 .mat-chip-list-wrapper {
   display: flex;
   flex-direction: row;