fix(chips): update to latest Material Design spec (2017) updates

- use the `md-cancel` button instead of the `md-close` button
- `$chip-font-size` reduced to `13px` from `16px`
- `$chip-remove-padding-right` increased to `28px` from `22px`
- in light mode, remove chip icon should be black w/ 87% opacity
- update custom remove chip template demo
  - show remove icon on hover/focus only
  - remove unnecessary CSS
  - update to new size guidelines and remove color on hover/focus
  - fix remove chip icon color when chip is focused

Fixes #9883

Author: Splaktar

src/components/chips/chips-theme.scss

@@ -37,11 +37,13 @@ md-chips.md-THEME_NAME-theme {
       color: '{{background-800}}';
     }
   }
-  md-chip-remove {
-    .md-button {
-      md-icon {
-        path {
-          fill: '{{background-500}}';
+  .md-chip-remove-container {
+    button {
+      &md-chip-remove,
+      &.md-chip-remove {
+        md-icon {
+          color: '{{foreground-2}}';
+          fill: '{{foreground-2}}';
         }
       }
     }

src/components/chips/chips.scss

@@ -1,8 +1,8 @@
-$chip-font-size: rem(1.6) !default;
+$chip-font-size: rem(1.3) !default;
 $chip-height: rem(3.2) !default;
 $chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
 $chip-input-padding: 0 !default;
-$chip-remove-padding-right: rem(2.2) !default;
+$chip-remove-padding-right: rem(2.8) !default;
 $chip-remove-line-height: rem(2.2) !default;
 $chip-margin: rem(0.8) rem(0.8) 0 0 !default;
 $chip-wrap-padding: 0 0 rem(0.8) rem(0.3) !default;

src/components/chips/demoBasicUsage/index.html

@@ -69,7 +69,7 @@ <h2 class="md-title">Display an ordered set of objects as chips (with custom tem
           <em>({{$chip.type}})</em>
         </span>
       </md-chip-template>
-      <button md-chip-remove class="md-primary vegetablechip" aria-label="Remove {{$chip.name}}">
+      <button md-chip-remove class="demo-remove-vegetable-chip" aria-label="Remove {{$chip.name}}">
         <md-icon md-svg-icon="md-close"></md-icon>
       </button>
     </md-chips>

src/components/chips/demoBasicUsage/style.scss

@@ -3,50 +3,43 @@
   color: rgb(221,44,0);
   margin-top: 10px;
 }
-
 .custom-chips {
   md-chip {
     position: relative;
+    padding-right: 24px;
+
     .md-chip-remove-container {
       position: absolute;
       right: 4px;
       top: 4px;
       margin-right: 0;
-      height: 24px;
-      button.vegetablechip {
+      height: 26px;
+      display: none;
+
+      button.demo-remove-vegetable-chip {
         position: relative;
         height: 24px;
         width: 24px;
         line-height: 30px;
-        text-align: center;
-        background: rgba(black, 0.3);
-        border-radius: 50%;
+        background: transparent;
         border: none;
-        box-shadow: none;
         padding: 0;
-        margin: 0;
-        transition: background 0.15s linear;
-        display: block;
+
         md-icon {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate3d(-50%, -50%, 0) scale(0.7);
-          color: white;
-          fill: white;
-        }
-        &:hover, &:focus {
-          background: rgba(red, 0.8);
+          transform: translate(0, -3px) scale(0.75);
+          fill: rgba(0, 0, 0, 0.33);
         }
       }
     }
-  }
+    &:hover:not(.md-readonly) .md-chip-remove-container {
+      display: block;
+    }
+    &.md-focused:not(.md-readonly) .md-chip-remove-container {
+      display: block;
 
-  // Show custom padding for the custom delete button, which needs more space.
-  md-chips-wrap.md-removable {
-    md-chip md-chip-template {
-      padding-right: 5px;
+      button.demo-remove-vegetable-chip md-icon {
+        fill: rgba(255, 255, 255, 0.87);
+      }
     }
   }
-
 }

src/components/chips/js/chipRemoveDirective.js

@@ -24,17 +24,17 @@ angular
  * ### With Standard Chips
  * <hljs lang="html">
  *   <md-chips ...>
- *     <button md-chip-remove class="md-primary" type="button" aria-label="Remove {{$chip}}">
- *       <md-icon md-svg-icon="md-close"></md-icon>
+ *     <button md-chip-remove type="button" aria-label="Remove {{$chip}}">
+ *       <md-icon md-svg-icon="md-cancel"></md-icon>
  *     </button>
  *   </md-chips>
  * </hljs>
  *
  * ### With Object Chips
  * <hljs lang="html">
  *   <md-chips ...>
- *     <button md-chip-remove class="md-primary" type="button" aria-label="Remove {{$chip.name}}">
- *       <md-icon md-svg-icon="md-close"></md-icon>
+ *     <button md-chip-remove type="button" aria-label="Remove {{$chip.name}}">
+ *       <md-icon md-svg-icon="md-cancel"></md-icon>
  *     </button>
  *   </md-chips>
  * </hljs>
@@ -57,7 +57,7 @@ function MdChipRemove ($timeout) {
   };
 
   function postLink(scope, element, attr, ctrl) {
-    element.on('click', function(event) {
+    element.on('click', function() {
       scope.$apply(function() {
         ctrl.removeChip(scope.$$replacedScope.$index);
       });

src/components/chips/js/chipsDirective.js

@@ -400,7 +400,7 @@
         mdChipsCtrl.chipRemoveTemplate   = chipRemoveTemplate;
         mdChipsCtrl.chipInputTemplate    = chipInputTemplate;
 
-        mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdClose;
+        mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdCancel;
 
         element
             .attr({ tabindex: -1 })