finish adding remaining component variables to less docs page

3 files changed, 386 insertions, 64 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 4dc9b4f2f..7246485c9 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/less.html b/docs/less.html
index de11c79ba..19b2b2235 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -139,12 +139,24 @@
 
   <div class="row">
     <div class="span6">
-      <h3>Hyperlinks</h3>
+      <h3>Scaffolding and links</h3>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td class="span2"><code>@linkColor</code></td>
-            <td>#08c</td>
+            <td class="span2"><code>@bodyBackground</code></td>
+            <td><code>@white</code></td>
+            <td>Page background color</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@textColor</code></td>
+            <td><code>@grayDark</code></td>
+            <td>Default text color for entire body, headings, and more</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@linkColor</code></td>
+            <td><code>#08c</code></td>
             <td>Default link text color</td>
             <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
@@ -185,17 +197,68 @@
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
+            <td class="span2"><code>@sansFontFamily</code></td>
+            <td>"Helvetica Neue", Helvetica, Arial, sans-serif</td>
+          </tr>
+          <tr>
+            <td><code>@serifFontFamily</code></td>
+            <td><code>Georgia, "Times New Roman", Times, serif</code></td>
+          </tr>
+          <tr>
+            <td><code>@monoFontFamily</code></td>
+            <td>Menlo, Monaco, "Courier New", monospace</td>
+          </tr>
+
+          <tr>
             <td class="span2"><code>@baseFontSize</code></td>
             <td>13px</td>
           </tr>
           <tr>
             <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td><code>@sansFontFamily</code></td>
           </tr>
           <tr>
             <td><code>@baseLineHeight</code></td>
             <td>18px</td>
           </tr>
+          <tr>
+            <td><code>@altFontFamily</code></td>
+            <td><code>@serifFontFamily</code></td>
+          </tr>
+
+          <tr>
+            <td class="span2"><code>@headingsFontFamily</code></td>
+            <td><code>inherit</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsFontWeight</code></td>
+            <td><code>bold</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsColor</code></td>
+            <td><code>inherit</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Tables</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@tableBackground</code></td>
+            <td><code>transparent</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundAccent</code></td>
+            <td><code>#f9f9f9</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundHover</code></td>
+            <td><code>#f5f5f5</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBorder</code></td>
+            <td><code>ddd</code></td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -378,10 +441,68 @@
           <tr>
             <td class="span3"><code>@placeholderText</code></td>
             <td><code>@grayLight</code></td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@inputBackground</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputBorder</code></td>
+            <td><code>#ccc</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputDisabledBackground</code></td>
+            <td><code>@grayLighter</code></td>
           </tr>
         </tbody>
       </table>
+      <h4>Form states and alerts</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@warningText</code></td>
+            <td>#c09853</td>
+            <td><span class="swatch" style="background-color: #c09853;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@warningBackground</code></td>
+            <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@errorText</code></td>
+            <td>#b94a48</td>
+            <td><span class="swatch" style="background-color: #b94a48;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@errorBackground</code></td>
+            <td>#f2dede</td>
+            <td><span class="swatch" style="background-color: #f2dede;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@successText</code></td>
+            <td>#468847</td>
+            <td><span class="swatch" style="background-color: #468847;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@successBackground</code></td>
+            <td>#dff0d8</td>
+            <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@infoText</code></td>
+            <td>#3a87ad</td>
+            <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@infoBackground</code></td>
+            <td>#d9edf7</td>
+            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="span6">
       <h4>Navbar</h4>
       <table class="table table-bordered table-striped">
         <tbody>
@@ -400,6 +521,7 @@
             <td><code>@grayDark</code></td>
             <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
+
           <tr>
             <td><code>@navbarText</code></td>
             <td><code>@grayLight</code></td>
@@ -415,52 +537,91 @@
             <td><code>@white</code></td>
             <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
+          <tr>
+            <td><code>@navbarLinkColorActive</code></td>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundHover</code></td>
+            <td><code>transparent</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundActive</code></td>
+            <td><code>@navbarBackground</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarSearchBackground</code></td>
+            <td><code>lighten(@navbarBackground, 25%)</code></td>
+            <td><span class="swatch" style="background-color: #666;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBackgroundFocus</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBorder</code></td>
+            <td><code>darken(@navbarSearchBackground, 30%)</code></td>
+            <td><span class="swatch" style="background-color: #111;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchPlaceholderColor</code></td>
+            <td><code>#ccc</code></td>
+            <td><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBrandColor</code></td>
+            <td><code>@navbarLinkColor</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
-      <h4>Form states and alerts</h4>
+      <h4>Dropdowns</h4>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td class="span3"><code>@warningText</code></td>
-            <td>#c09853</td>
-            <td><span class="swatch" style="background-color: #c09853;"></span></td>
+            <td class="span2"><code>@dropdownBackground</code></td>
+            <td><code>@white</code></td>
           </tr>
           <tr>
-            <td><code>@warningBackground</code></td>
-            <td>#f3edd2</td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
+            <td><code>@dropdownBorder</code></td>
+            <td><code>rgba(0,0,0,.2)</code></td>
           </tr>
           <tr>
-            <td><code>@errorText</code></td>
-            <td>#b94a48</td>
-            <td><span class="swatch" style="background-color: #b94a48;"></span></td>
+            <td><code>@dropdownLinkColor</code></td>
+            <td><code>@grayDark</code></td>
           </tr>
           <tr>
-            <td><code>@errorBackground</code></td>
-            <td>#f2dede</td>
-            <td><span class="swatch" style="background-color: #f2dede;"></span></td>
+            <td><code>@dropdownLinkColorHover</code></td>
+            <td><code>@white</code></td>
           </tr>
           <tr>
-            <td><code>@successText</code></td>
-            <td>#468847</td>
-            <td><span class="swatch" style="background-color: #468847;"></span></td>
+            <td><code>@dropdownLinkBackgroundHover</code></td>
+            <td><code>@linkColor</code></td>
           </tr>
+        </tbody>
+      </table>
+      <h4>Hero unit</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
           <tr>
-            <td><code>@successBackground</code></td>
-            <td>#dff0d8</td>
-            <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
+            <td class="span3"><code>@heroUnitBackground</code></td>
+            <td><code>@grayLighter</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
           </tr>
           <tr>
-            <td><code>@infoText</code></td>
-            <td>#3a87ad</td>
-            <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
+            <td class="span2"><code>@heroUnitHeadingColor</code></td>
+            <td><code>inherit</code></td>
+            <td></td>
           </tr>
           <tr>
-            <td><code>@infoBackground</code></td>
-            <td>#d9edf7</td>
-            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
+            <td><code>@heroUnitLeadColor</code></td>
+            <td><code>inhereit</code></td>
+            <td></td>
           </tr>
         </tbody>
       </table>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 00130550a..129c76e9c 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -63,12 +63,24 @@
 
   <div class="row">
     <div class="span6">
-      <h3>{{_i}}Hyperlinks{{/i}}</h3>
+      <h3>{{_i}}Scaffolding and links{{/i}}</h3>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td class="span2"><code>@linkColor</code></td>
-            <td>#08c</td>
+            <td class="span2"><code>@bodyBackground</code></td>
+            <td><code>@white</code></td>
+            <td>{{_i}}Page background color{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@textColor</code></td>
+            <td><code>@grayDark</code></td>
+            <td>{{_i}}Default text color for entire body, headings, and more{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@linkColor</code></td>
+            <td><code>#08c</code></td>
             <td>{{_i}}Default link text color{{/i}}</td>
             <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
@@ -109,17 +121,68 @@
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
+            <td class="span2"><code>@sansFontFamily</code></td>
+            <td>"Helvetica Neue", Helvetica, Arial, sans-serif</td>
+          </tr>
+          <tr>
+            <td><code>@serifFontFamily</code></td>
+            <td><code>Georgia, "Times New Roman", Times, serif</code></td>
+          </tr>
+          <tr>
+            <td><code>@monoFontFamily</code></td>
+            <td>Menlo, Monaco, "Courier New", monospace</td>
+          </tr>
+
+          <tr>
             <td class="span2"><code>@baseFontSize</code></td>
             <td>13px</td>
           </tr>
           <tr>
             <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td><code>@sansFontFamily</code></td>
           </tr>
           <tr>
             <td><code>@baseLineHeight</code></td>
             <td>18px</td>
           </tr>
+          <tr>
+            <td><code>@altFontFamily</code></td>
+            <td><code>@serifFontFamily</code></td>
+          </tr>
+
+          <tr>
+            <td class="span2"><code>@headingsFontFamily</code></td>
+            <td><code>inherit</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsFontWeight</code></td>
+            <td><code>bold</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsColor</code></td>
+            <td><code>inherit</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Tables{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@tableBackground</code></td>
+            <td><code>transparent</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundAccent</code></td>
+            <td><code>#f9f9f9</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundHover</code></td>
+            <td><code>#f5f5f5</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBorder</code></td>
+            <td><code>ddd</code></td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -302,10 +365,68 @@
           <tr>
             <td class="span3"><code>@placeholderText</code></td>
             <td><code>@grayLight</code></td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@inputBackground</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputBorder</code></td>
+            <td><code>#ccc</code></td>
+          </tr>
+          <tr>
+            <td><code>@inputDisabledBackground</code></td>
+            <td><code>@grayLighter</code></td>
           </tr>
         </tbody>
       </table>
+      <h4>{{_i}}Form states and alerts{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@warningText</code></td>
+            <td>#c09853</td>
+            <td><span class="swatch" style="background-color: #c09853;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@warningBackground</code></td>
+            <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@errorText</code></td>
+            <td>#b94a48</td>
+            <td><span class="swatch" style="background-color: #b94a48;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@errorBackground</code></td>
+            <td>#f2dede</td>
+            <td><span class="swatch" style="background-color: #f2dede;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@successText</code></td>
+            <td>#468847</td>
+            <td><span class="swatch" style="background-color: #468847;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@successBackground</code></td>
+            <td>#dff0d8</td>
+            <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@infoText</code></td>
+            <td>#3a87ad</td>
+            <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@infoBackground</code></td>
+            <td>#d9edf7</td>
+            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="span6">
       <h4>{{_i}}Navbar{{/i}}</h4>
       <table class="table table-bordered table-striped">
         <tbody>
@@ -324,6 +445,7 @@
             <td><code>@grayDark</code></td>
             <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
+
           <tr>
             <td><code>@navbarText</code></td>
             <td><code>@grayLight</code></td>
@@ -339,52 +461,91 @@
             <td><code>@white</code></td>
             <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
+          <tr>
+            <td><code>@navbarLinkColorActive</code></td>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundHover</code></td>
+            <td><code>transparent</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundActive</code></td>
+            <td><code>@navbarBackground</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarSearchBackground</code></td>
+            <td><code>lighten(@navbarBackground, 25%)</code></td>
+            <td><span class="swatch" style="background-color: #666;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBackgroundFocus</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBorder</code></td>
+            <td><code>darken(@navbarSearchBackground, 30%)</code></td>
+            <td><span class="swatch" style="background-color: #111;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchPlaceholderColor</code></td>
+            <td><code>#ccc</code></td>
+            <td><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBrandColor</code></td>
+            <td><code>@navbarLinkColor</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
-      <h4>{{_i}}Form states and alerts{{/i}}</h4>
+      <h4>{{_i}}Dropdowns{{/i}}</h4>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td class="span3"><code>@warningText</code></td>
-            <td>#c09853</td>
-            <td><span class="swatch" style="background-color: #c09853;"></span></td>
+            <td class="span2"><code>@dropdownBackground</code></td>
+            <td><code>@white</code></td>
           </tr>
           <tr>
-            <td><code>@warningBackground</code></td>
-            <td>#f3edd2</td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
+            <td><code>@dropdownBorder</code></td>
+            <td><code>rgba(0,0,0,.2)</code></td>
           </tr>
           <tr>
-            <td><code>@errorText</code></td>
-            <td>#b94a48</td>
-            <td><span class="swatch" style="background-color: #b94a48;"></span></td>
+            <td><code>@dropdownLinkColor</code></td>
+            <td><code>@grayDark</code></td>
           </tr>
           <tr>
-            <td><code>@errorBackground</code></td>
-            <td>#f2dede</td>
-            <td><span class="swatch" style="background-color: #f2dede;"></span></td>
+            <td><code>@dropdownLinkColorHover</code></td>
+            <td><code>@white</code></td>
           </tr>
           <tr>
-            <td><code>@successText</code></td>
-            <td>#468847</td>
-            <td><span class="swatch" style="background-color: #468847;"></span></td>
+            <td><code>@dropdownLinkBackgroundHover</code></td>
+            <td><code>@linkColor</code></td>
           </tr>
+        </tbody>
+      </table>
+      <h4>{{_i}}Hero unit{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
           <tr>
-            <td><code>@successBackground</code></td>
-            <td>#dff0d8</td>
-            <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
+            <td class="span3"><code>@heroUnitBackground</code></td>
+            <td><code>@grayLighter</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
           </tr>
           <tr>
-            <td><code>@infoText</code></td>
-            <td>#3a87ad</td>
-            <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
+            <td class="span2"><code>@heroUnitHeadingColor</code></td>
+            <td><code>inherit</code></td>
+            <td></td>
           </tr>
           <tr>
-            <td><code>@infoBackground</code></td>
-            <td>#d9edf7</td>
-            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
+            <td><code>@heroUnitLeadColor</code></td>
+            <td><code>inhereit</code></td>
+            <td></td>
           </tr>
         </tbody>
       </table>