style(chips): clean up alignment and theming (#5760)

Author: willshowell

src/demo-app/chips/chips-demo.scss

@@ -24,12 +24,4 @@
   md-chip-list input {
     width: 150px;
   }
-
-  .mat-chip-remove.mat-icon {
-    font-size: 16px;
-    width: 1em;
-    height: 1em;
-    vertical-align: middle;
-    cursor: pointer;
-  }
 }

src/lib/chips/_chips-theme.scss

@@ -4,10 +4,11 @@
 
 // TODO(crisbeto): these values don't correspond to any of the typography breakpoints.
 $mat-chip-font-size: 13px;
-$mat-chip-line-height: 16px;
+$mat-chip-line-height: 18px;
+$mat-chip-remove-font-size: 18px;
 
 @mixin mat-chips-theme-color($color) {
-  @include mat-chips-color(mat-contrast($color, 500), mat-color($color, 500));
+  @include mat-chips-color(mat-color($color, default-contrast), mat-color($color));
 }
 
 @mixin mat-chips-color($foreground, $background) {
@@ -32,25 +33,15 @@ $mat-chip-line-height: 16px;
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  // Use spec-recommended color for regular foreground, and utilise contrast color for a grey very
-  // close to the selected spec since no guidance is provided and to ensure palette consistency.
-  $light-foreground: rgba(0, 0, 0, 0.87);
-  $light-selected-foreground: mat-contrast($mat-grey, 600);
+  $unselected-background: mat-color($background, unselected-chip);
+  $unselected-foreground: mat-color($foreground, text);
 
-  // The spec only provides guidance for light-themed chips. When inside of a dark theme, fall back
-  // to standard background and foreground colors.
-  $unselected-background: if($is-dark-theme, mat-color($background, card), #e0e0e0);
-  $unselected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-foreground);
-
-  $selected-background: if($is-dark-theme, mat-color($background, app-bar), #808080);
-  $selected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-selected-foreground);
 
   .mat-chip:not(.mat-basic-chip) {
     @include mat-chips-color($unselected-foreground, $unselected-background);
   }
 
   .mat-chip.mat-chip-selected {
-    @include mat-chips-color($selected-foreground, $selected-background);
 
     &.mat-primary {
       @include mat-chips-theme-color($primary);
@@ -70,5 +61,9 @@ $mat-chip-line-height: 16px;
   .mat-chip {
     font-size: $mat-chip-font-size;
     line-height: $mat-chip-line-height;
+
+    .mat-chip-remove.mat-icon {
+      font-size: $mat-chip-remove-font-size;
+    }
   }
 }

src/lib/chips/chips.scss

@@ -1,10 +1,12 @@
 @import '../core/a11y/a11y';
+@import '../core/style/elevation';
 
-$mat-chip-vertical-padding: 8px;
+$mat-chip-vertical-padding: 7px;
 $mat-chip-horizontal-padding: 12px;
-$mat-chip-remove-margin: -4px;
+$mat-chip-remove-margin-before: 6px;
+$mat-chip-remove-margin-after: -4px;
 
-$mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
+$mat-chips-chip-margin: 8px;
 
 .mat-chip-list-wrapper {
   display: flex;
@@ -14,9 +16,11 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 }
 
 .mat-chip:not(.mat-basic-chip) {
-  display: inline-block;
+  display: inline-flex;
   padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding $mat-chip-vertical-padding $mat-chip-horizontal-padding;
   border-radius: $mat-chip-horizontal-padding * 2;
+  align-items: center;
+  cursor: default;
 
   // Apply a margin to adjacent sibling chips.
   & + & {
@@ -25,18 +29,28 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
     [dir='rtl'] & {
       margin: 0 $mat-chips-chip-margin 0 0;
     }
+  }
 
-    .mat-input-prefix & {
-      &:last-child {
-        margin-right: $mat-chips-chip-margin;
-      }
+  .mat-input-prefix & {
+    &:last-child {
+      margin-right: $mat-chips-chip-margin;
+    }
 
-      [dir='rtl'] &:last-child {
-        margin-left: $mat-chips-chip-margin;
-      }
+    [dir='rtl'] &:last-child {
+      margin-left: $mat-chips-chip-margin;
     }
   }
 
+  .mat-chip-remove.mat-icon {
+    width: 1em;
+    height: 1em;
+  }
+
+  &:focus {
+    @include mat-elevation(3);
+    outline: none;
+  }
+
   @include cdk-high-contrast {
     outline: solid 1px;
   }
@@ -48,11 +62,11 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
   .mat-chip:not(.mat-basic-chip) {
     display: block;
     margin: 0;
-    margin-bottom: $mat-chip-vertical-padding;
+    margin-bottom: $mat-chips-chip-margin;
 
     [dir='rtl'] & {
       margin: 0;
-      margin-bottom: $mat-chip-vertical-padding;
+      margin-bottom: $mat-chips-chip-margin;
     }
 
     &:last-child, [dir='rtl'] &:last-child {
@@ -62,9 +76,15 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 }
 
 .mat-input-prefix .mat-chip-list-wrapper {
-  margin-bottom: $mat-chip-vertical-padding;
+  margin-bottom: $mat-chips-chip-margin;
 }
 
 .mat-chip-remove {
-  margin: 0 $mat-chip-remove-margin 0 0;
+  margin-right: $mat-chip-remove-margin-after;
+  margin-left: $mat-chip-remove-margin-before;
+
+  [dir='rtl'] & {
+    margin-right: $mat-chip-remove-margin-before;
+    margin-left: $mat-chip-remove-margin-after;
+  }
 }

src/lib/core/theming/_palette.scss

@@ -659,6 +659,7 @@ $mat-light-theme-background: (
   selected-button: map_get($mat-grey, 300),
   selected-disabled-button: map_get($mat-grey, 400),
   disabled-button-toggle: map_get($mat-grey, 200),
+  unselected-chip: map_get($mat-grey, 300),
 );
 
 // Background palette for dark themes.
@@ -675,6 +676,7 @@ $mat-dark-theme-background: (
   selected-button: map_get($mat-grey, 900),
   selected-disabled-button: map_get($mat-grey, 800),
   disabled-button-toggle: map_get($mat-grey, 1000),
+  unselected-chip: map_get($mat-grey, 700),
 );
 
 // Foreground palette for light themes.