From 0a8b6735d4d6c0bc58756516e556418d65b9d494 Mon Sep 17 00:00:00 2001
From: Fergardi <fergardi@gmail.com>
Date: Wed, 15 Feb 2017 21:14:24 +0100
Subject: [PATCH] add themed chips (#498)

* Added theming to mdChips

* Added more examples. Improved API.

* Removed classes from docs.
---
 docs/src/pages/components/Chips.vue  | 26 ++++++++++++++++++++++++++
 src/components/mdChips/mdChips.theme | 15 +++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/docs/src/pages/components/Chips.vue b/docs/src/pages/components/Chips.vue
index 92960d0..09da7f7 100644
--- a/docs/src/pages/components/Chips.vue
+++ b/docs/src/pages/components/Chips.vue
@@ -223,6 +223,32 @@
             </code-block>
           </div>
         </example-box>
+
+        <example-box card-title="Themed Chips">
+          <div slot="demo">
+            <md-chip >Default</md-chip>
+            <md-chip md-deletable>Default</md-chip>
+            <md-chip class="md-primary">Primary</md-chip>
+            <md-chip md-deletable class="md-primary">Primary</md-chip>
+            <md-chip class="md-accent">Accent</md-chip>
+            <md-chip md-deletable class="md-accent">Accent</md-chip>
+            <md-chip class="md-warn">Warn</md-chip>
+            <md-chip md-deletable class="md-warn">Warn</md-chip>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-chip&gt;Default&lt;/md-chip&gt;
+              &lt;md-chip md-deletable&gt;Default&lt;/md-chip&gt;
+              &lt;md-chip class=&quot;md-primary&quot;&gt;Primary&lt;/md-chip&gt;
+              &lt;md-chip md-deletable class=&quot;md-primary&quot;&gt;Primary&lt;/md-chip&gt;
+              &lt;md-chip class=&quot;md-accent&quot;&gt;Accent&lt;/md-chip&gt;
+              &lt;md-chip md-deletable class=&quot;md-accent&quot;&gt;Accent&lt;/md-chip&gt;
+              &lt;md-chip class=&quot;md-warn&quot;&gt;Warn&lt;/md-chip&gt;
+              &lt;md-chip md-deletable class=&quot;md-warn&quot;&gt;Warn&lt;/md-chip&gt;
+            </code-block>
+          </div>
+        </example-box>
       </div>
     </docs-component>
   </page-content>
diff --git a/src/components/mdChips/mdChips.theme b/src/components/mdChips/mdChips.theme
index 3b43912..ac34012 100644
--- a/src/components/mdChips/mdChips.theme
+++ b/src/components/mdChips/mdChips.theme
@@ -21,5 +21,20 @@
         color: #{'BACKGROUND-COLOR'};
       }
     }
+
+    &.md-primary {
+      color: #{'PRIMARY-CONTRAST'};
+      background-color: #{'PRIMARY-COLOR'};
+    }
+
+    &.md-accent {
+      color: #{'ACCENT-CONTRAST'};
+      background-color: #{'ACCENT-COLOR'};
+    }
+
+    &.md-warn {
+      color: #{'WARN-CONTRAST'};
+      background-color: #{'WARN-COLOR'};
+    }
   }
 }