From 3cc9c679be322cdd13b4ac7cf650e3f4b10cf0e8 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 19 Sep 2018 23:23:40 +0200
Subject: [PATCH] feat(chips): align with 2018 material design spec (#12838)

Aligns the chips with the latest Material Design spec. Includes adding a new hover state.
---
 src/lib/chips/_chips-theme.scss |  7 ++----
 src/lib/chips/chips.scss        | 42 +++++++++++++++++++++++++++------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
index 218b1ea1433..0b971144028 100644
--- a/src/lib/chips/_chips-theme.scss
+++ b/src/lib/chips/_chips-theme.scss
@@ -3,9 +3,6 @@
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
 
-// TODO(crisbeto): these values don't correspond to any of the typography breakpoints.
-$mat-chip-font-size: 13px;
-$mat-chip-line-height: 18px;
 $mat-chip-remove-font-size: 18px;
 
 @mixin mat-chips-theme-color($color) {
@@ -64,8 +61,8 @@ $mat-chip-remove-font-size: 18px;
 
 @mixin mat-chips-typography($config) {
   .mat-chip {
-    font-size: $mat-chip-font-size;
-    line-height: $mat-chip-line-height;
+    font-size: mat-font-size($config, body-2);
+    font-weight: mat-font-weight($config, body-2);
 
     .mat-chip-trailing-icon.mat-icon,
     .mat-chip-remove.mat-icon {
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
index f20dd9fa876..dcd75f186ea 100644
--- a/src/lib/chips/chips.scss
+++ b/src/lib/chips/chips.scss
@@ -1,23 +1,27 @@
+@import '../core/style/variables';
 @import '../core/style/elevation';
+@import '../core/style/layout-common';
 @import '../../cdk/a11y/a11y';
 
+$mat-chip-min-height: 32px;
 $mat-chip-vertical-padding: 7px;
 $mat-chip-horizontal-padding: 12px;
 
 $mat-chip-remove-vertical-padding: 7px;
-$mat-chip-remove-before-margin: 7px;
-$mat-chip-remove-after-padding: 7px;
+$mat-chip-remove-before-margin: 8px;
+$mat-chip-remove-after-padding: 8px;
 
 $mat-chip-avatar-vertical-padding: 0;
 $mat-chip-avatar-before-padding: 0;
+$mat-chip-avatar-before-margin: 4px;
 $mat-chip-avatar-after-margin: 8px;
 
 $mat-chips-chip-margin: 4px;
 
 $mat-chip-input-width: 150px;
-$mat-chip-input-margin: 3px;
+$mat-chip-input-margin: 4px;
 
-$mat-chip-avatar-size: 32px;
+$mat-chip-avatar-size: 24px;
 $mat-chip-remove-size: 18px;
 
 .mat-chip {
@@ -31,17 +35,41 @@ $mat-chip-remove-size: 18px;
   @include mat-elevation-transition;
   display: inline-flex;
   padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding;
-  border-radius: $mat-chip-horizontal-padding * 2;
+  border-radius: 16px;
   align-items: center;
   cursor: default;
+  min-height: $mat-chip-min-height;
 
   .mat-chip-remove.mat-icon {
     width: $mat-chip-remove-size;
     height: $mat-chip-remove-size;
   }
 
+  // Overlay used to darken the chip on hover and focus.
+  &::after {
+    @include mat-fill;
+    border-radius: inherit;
+    background-color: black;
+    opacity: 0;
+    content: '';
+    pointer-events: none;
+    transition: opacity 200ms $swift-ease-in-out-timing-function;
+  }
+
+  &:hover::after {
+    opacity: 0.12;
+  }
+
   &:focus {
     outline: none;
+
+    &::after {
+      opacity: 0.16;
+    }
+  }
+
+  &:active {
+    @include mat-elevation(3);
   }
 
   @include cdk-high-contrast {
@@ -95,11 +123,11 @@ $mat-chip-remove-size: 18px;
     width: $mat-chip-avatar-size;
     height: $mat-chip-avatar-size;
     margin-right: $mat-chip-avatar-after-margin;
-    margin-left: 0;
+    margin-left: $mat-chip-avatar-before-margin;
 
     [dir='rtl'] & {
       margin-left: $mat-chip-avatar-after-margin;
-      margin-right: 0;
+      margin-right: $mat-chip-avatar-before-margin;
     }
   }