From 4c51aa2647e38651f4c30ca67cfaf6235df3172f Mon Sep 17 00:00:00 2001
From: djibe <djibe89@hotmail.com>
Date: Sat, 11 Jan 2020 23:31:47 +0100
Subject: [PATCH] + chip docs for density

---
 assets/scss/variables/_variable-material.scss |  5 ++---
 docs/4.4/material/chips.md                    | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/assets/scss/variables/_variable-material.scss b/assets/scss/variables/_variable-material.scss
index d23484833..76368414e 100644
--- a/assets/scss/variables/_variable-material.scss
+++ b/assets/scss/variables/_variable-material.scss
@@ -79,12 +79,11 @@ $card-padding-y:              $card-padding-x !default;
 // Based on https://material.io/components/chips/
 
 $chip-bg:                     $material-color-grey-300 !default;
-$chip-bg-hover:               rgba($black, $overlay-focus-colored-opacity) !default; // cfcfcf
-$chip-bg-active:              rgba($black, $overlay-pressed-colored-opacity) !default; // b3b3b3
+$chip-bg-hover:               rgba($black, $overlay-focus-colored-opacity) !default;
+$chip-bg-active:              rgba($black, $overlay-pressed-colored-opacity) !default;
 $chip-outline-bg-hover:       rgba($black, $overlay-hover-white-opacity) !default;
 $chip-outline-bg-active:      rgba($black, $overlay-pressed-white-opacity) !default;
 $chip-color:                  $black-primary !default;
-//$chip-elevation-shadow-hover: map-get($elevation-shadows, 2) !default;
 $chip-font-size:              0.875rem !default;
 $chip-font-weight:            $font-weight-regular !default;
 $chip-height:                 2rem !default;
diff --git a/docs/4.4/material/chips.md b/docs/4.4/material/chips.md
index 91f3e89c1..8ff69126c 100644
--- a/docs/4.4/material/chips.md
+++ b/docs/4.4/material/chips.md
@@ -12,6 +12,7 @@ Chips can be used for various types of entities, including brief information, fr
 
 <div class="list-group my-lg-5">
     <a href="https://material.io/components/chips/" target="_blank" class="list-group-item list-group-item-action lgi-icon-md">Material Design guidelines: Chips</a>
+    <a href="https://material.io/design/layout/applying-density.html" target="_blank" class="list-group-item list-group-item-action lgi-icon-md">Material Design guidelines: Applying density</a>
     <a href="https://material-components.github.io/material-components-web-catalog/#/component/chips" target="_blank" class="list-group-item list-group-item-action lgi-icon-mdc">Material Components for the web: Chips</a>
 </div>
 
@@ -176,3 +177,19 @@ And in their outline variant.
 <a class="chip chip-action chip-outline disabled" href="#"><i class="material-icons">sync_disabled</i> Disabled</a>
 {% endcapture %}
 {% include example.html content=example %}
+
+## Sizing and density
+
+More dense chips are avilable to reflect the Comfortable and Compact ones from Material design guidelines.
+Use `.chip-sm` for Comfortable chips and `.chip-xs` for Compact ones.
+
+{% capture example %}
+<button class="chip chip-action chip-sm" type="button"><i class='material-icons'>wb_sunny</i> Turn on lights</button>
+
+<button class="chip chip-action chip-outline chip-sm" type="button"><i class="material-icons">alarm</i>Set alarm</button>
+
+<a class="chip chip-action chip-xs" href="#"><i class="material-icons">music_note</i>Play music</a>
+
+<a class="chip chip-action chip-outline chip-xs" href="#"><i class="material-icons">directions</i>Get directions</a>
+{% endcapture %}
+{% include example.html content=example %}