From e737e2f5a1e5fabeb1510a69d072389009723a62 Mon Sep 17 00:00:00 2001
From: Sam Higginbotham <higgisp@gmail.com>
Date: Fri, 27 Jan 2017 15:58:26 -0600
Subject: [PATCH] First pass at theming

---
 css/.global-stats.md                      |  2 +-
 css/.mx-stats.md                          |  2 +-
 docs/contents/components/00-index.md      |  2 +-
 docs/contents/mx/00-index.md              |  4 ++--
 docs/contents/mx/01-theming.md            | 11 +++++++++++
 docs/contents/theming/00-index.md         |  5 +++++
 docs/contents/theming/01-ops.md           | 13 +++++++++++++
 docs/contents/theming/02-accounting.md    | 13 +++++++++++++
 docs/contents/theming/03-engage.md        | 13 +++++++++++++
 docs/contents/theming/04-mobile-portal.md | 13 +++++++++++++
 docs/templates/layout.hbs                 |  1 +
 11 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 docs/contents/theming/00-index.md
 create mode 100644 docs/contents/theming/01-ops.md
 create mode 100644 docs/contents/theming/02-accounting.md
 create mode 100644 docs/contents/theming/03-engage.md
 create mode 100644 docs/contents/theming/04-mobile-portal.md

diff --git a/css/.global-stats.md b/css/.global-stats.md
index 09fcb30..a018943 100644
--- a/css/.global-stats.md
+++ b/css/.global-stats.md
@@ -1,5 +1,5 @@
 ## Design
-`v0.2.16` - *generated on Jan 20 2017*
+`v0.2.16` - *generated on Jan 27 2017*
 ### Stats
 #### css/global.min.css
 |Stat|Metric|
diff --git a/css/.mx-stats.md b/css/.mx-stats.md
index 422d9c7..a79aa0b 100644
--- a/css/.mx-stats.md
+++ b/css/.mx-stats.md
@@ -1,5 +1,5 @@
 ## Design
-`v0.2.16` - *generated on Jan 20 2017*
+`v0.2.16` - *generated on Jan 27 2017*
 ### Stats
 #### css/mx.min.css
 |Stat|Metric|
diff --git a/docs/contents/components/00-index.md b/docs/contents/components/00-index.md
index 1b685ea..6a48298 100644
--- a/docs/contents/components/00-index.md
+++ b/docs/contents/components/00-index.md
@@ -1,6 +1,6 @@
 ---
 title: "Component Library"
-theme: "key-lime"
+theme: "red-velvet"
 template: toc.hbs
 ---
 
diff --git a/docs/contents/mx/00-index.md b/docs/contents/mx/00-index.md
index 0dea237..3d6d793 100644
--- a/docs/contents/mx/00-index.md
+++ b/docs/contents/mx/00-index.md
@@ -1,13 +1,13 @@
 ---
 title: "Member Experience (MX)"
-theme: "cotton-candy"
+theme: "key-lime"
 template: toc.hbs
 stylesheet: "/css/mx-styleguide.css"
 ---
 
 MX is built on top of Daxko's common components, but adds specialized components and colors made specifically to serve members and to match the client's branding.
 
-<link id="theme" rel="stylesheet" href="/css/themes/theme-ymca-green-blue.css">
+<link id="theme" rel="stylesheet" href="/css/themes/theme-ymca-red-orange.css">
 
 <div class="dropdown toggle-theme tooltip tooltip-w" id="toggle-theme" aria-label="Change Theme">
   <button type="button" class="btn" data-toggle="dropdown" aria-expanded="false">
diff --git a/docs/contents/mx/01-theming.md b/docs/contents/mx/01-theming.md
index 3fadb41..c71b609 100644
--- a/docs/contents/mx/01-theming.md
+++ b/docs/contents/mx/01-theming.md
@@ -15,6 +15,17 @@ For simple text components, you can use a <code>.theme--_**level**_-_**shade**_<
 <h5 class="theme--secondary-dark">Theme Secondary Color (Dark)</h5>
 <h5 class="theme--secondary-med">Theme Secondary Color (Medium)</h5>
 <h5 class="theme--secondary-light">Theme Secondary Color (Light)</h5>
+
+<div class="dropdown">
+  <button type="button" class="btn" data-toggle="dropdown" aria-expanded="false">
+    Dropdown <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <li><a href="#" class="dropdown-menu-item">Bacon</a></li>
+    <li><a href="#" class="dropdown-menu-item">Ham</a></li>
+    <li><a href="#" class="dropdown-menu-item">Sausage</a></li>
+  </ul>
+</div>
 {{/example}}
 
 ### Advanced Theming
diff --git a/docs/contents/theming/00-index.md b/docs/contents/theming/00-index.md
new file mode 100644
index 0000000..6bd6242
--- /dev/null
+++ b/docs/contents/theming/00-index.md
@@ -0,0 +1,5 @@
+---
+title: "Theming"
+theme: "cotton-candy"
+template: toc.hbs
+---
\ No newline at end of file
diff --git a/docs/contents/theming/01-ops.md b/docs/contents/theming/01-ops.md
new file mode 100644
index 0000000..c22339c
--- /dev/null
+++ b/docs/contents/theming/01-ops.md
@@ -0,0 +1,13 @@
+## OPS
+
+<div class="details cotton-candy">
+  <h3>Cotton Candy</h3>
+  <dl class="hex">
+    <dt>Hex</dt>
+    <dd>#a5dbd8</dd>
+  </dl>
+  <dl class="rgb">
+    <dt>RGB</dt>
+    <dd>rgb(156, 220, 217)</dd>
+  </dl>
+</div>
\ No newline at end of file
diff --git a/docs/contents/theming/02-accounting.md b/docs/contents/theming/02-accounting.md
new file mode 100644
index 0000000..4686869
--- /dev/null
+++ b/docs/contents/theming/02-accounting.md
@@ -0,0 +1,13 @@
+## Accounting
+
+<div class="details key-lime">
+  <h3>Key Lime</h3>
+  <dl class="hex">
+    <dt>Hex</dt>
+    <dd>#b3ba5a</dd>
+  </dl>
+  <dl class="rgb">
+    <dt>RGB</dt>
+    <dd>rgb(162, 173, 0)</dd>
+  </dl>
+</div>
\ No newline at end of file
diff --git a/docs/contents/theming/03-engage.md b/docs/contents/theming/03-engage.md
new file mode 100644
index 0000000..afbb4fa
--- /dev/null
+++ b/docs/contents/theming/03-engage.md
@@ -0,0 +1,13 @@
+## Engage
+
+<div class="details key-lime">
+  <h3>Key Lime</h3>
+  <dl class="hex">
+    <dt>Hex</dt>
+    <dd>#b3ba5a</dd>
+  </dl>
+  <dl class="rgb">
+    <dt>RGB</dt>
+    <dd>rgb(162, 173, 0)</dd>
+  </dl>
+</div>
\ No newline at end of file
diff --git a/docs/contents/theming/04-mobile-portal.md b/docs/contents/theming/04-mobile-portal.md
new file mode 100644
index 0000000..1e403de
--- /dev/null
+++ b/docs/contents/theming/04-mobile-portal.md
@@ -0,0 +1,13 @@
+## Mobile Portal
+
+<div class="details cotton-candy">
+  <h3>Cotton Candy</h3>
+  <dl class="hex">
+    <dt>Hex</dt>
+    <dd>#a5dbd8</dd>
+  </dl>
+  <dl class="rgb">
+    <dt>RGB</dt>
+    <dd>rgb(156, 220, 217)</dd>
+  </dl>
+</div>
\ No newline at end of file
diff --git a/docs/templates/layout.hbs b/docs/templates/layout.hbs
index 66cde8a..a6a2d33 100644
--- a/docs/templates/layout.hbs
+++ b/docs/templates/layout.hbs
@@ -19,6 +19,7 @@
           <li><a href="/color/">color</a></li>
           <li><a href="/style/">style</a></li>
           <li><a href="/components/">components</a></li>
+          <li><a href="/theming/">theming</a></li>
           <li><a href="/mx/">mx</a></li>
         </ul>
       </div>