add swatches to the color variables in less docs page

3 files changed, 204 insertions, 224 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 7876f300a..9b8244d49 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -470,6 +470,30 @@ hr.soften {
 
 
 
+/* Color swatches on LESS docs page
+-------------------------------------------------- */
+/* Sets the width of the td */
+.swatch-col {
+  width: 30px;
+}
+/* Le swatch */
+.swatch {
+  display: inline-block;
+  width: 30px;
+  height: 20px;
+  margin: -6px 0;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+/* For white swatches, give a border */
+.swatch-bordered {
+  width: 28px;
+  height: 18px;
+  border: 1px solid #eee;
+}
+
+
 /* Misc
 -------------------------------------------------- */
 
diff --git a/docs/less.html b/docs/less.html
index 497a9dfe3..5935c9125 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -134,168 +134,146 @@
 ================================================== -->
 <section id="variables">
   <div class="page-header">
-    <h1>Bootstrap variables <small></small></h1>
+    <h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1>
   </div>
 
-  <h3>Hyperlinks</h3>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th class="span2">Variable</th>
-        <th>Value</th>
-        <th>Usage</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>@linkColor</code></td>
-        <td>#08c</td>
-        <td>Default link text color</td>
-      </tr>
-      <tr>
-        <td><code>@linkColorHover</code></td>
-        <td><code>darken(@linkColor, 15%)</code></td>
-        <td>Default link text hover color</td>
-      </tr>
-    </tbody>
-  </table>
-
   <div class="row">
     <div class="span6">
-      <h3>Grayscale colors</h3>
+      <h3>Hyperlinks</h3>
       <table class="table table-bordered table-striped">
-        <thead>
+        <tbody>
           <tr>
-            <th class="span2">Variable</th>
-            <th>Value</th>
+            <td class="span2"><code>@linkColor</code></td>
+            <td>#08c</td>
+            <td>Default link text color</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
-        </thead>
+          <tr>
+            <td><code>@linkColorHover</code></td>
+            <td><code>darken(@linkColor, 15%)</code></td>
+            <td>Default link text hover color</td>
+            <td><span class="swatch" style="background-color: #005580;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Grid system</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@gridColumns</code></td>
+            <td>12</td>
+          </tr>
+          <tr>
+            <td><code>@gridColumnWidth</code></td>
+            <td>60px</td>
+          </tr>
+          <tr>
+            <td><code>@gridGutterWidth</code></td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td><code>@siteWidth</code></td>
+            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Typography</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <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></td>
+          </tr>
+          <tr>
+            <td><code>@baseLineHeight</code></td>
+            <td>18px</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="span6">
+      <h3>Grayscale colors</h3>
+      <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td><code>@black</code></td>
+            <td class="span2"><code>@black</code></td>
             <td>#000</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDarker</code></td>
             <td>#222</td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDark</code></td>
             <td>#333</td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
           <tr>
             <td><code>@gray</code></td>
             <td>#555</td>
+            <td><span class="swatch" style="background-color: #555;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLight</code></td>
             <td>#999</td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLighter</code></td>
             <td>#eee</td>
+            <td><span class="swatch" style="background-color: #eee;"></span></td>
           </tr>
           <tr>
             <td><code>@white</code></td>
             <td>#fff</td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
       <h3>Accent colors</h3>
       <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">Variable</th>
-            <th>Value</th>
-          </tr>
-        </thead>
         <tbody>
           <tr>
-            <td><code>@blue</code></td>
+            <td class="span2"><code>@blue</code></td>
             <td>#049cdb</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
           </tr>
           <tr>
             <td><code>@green</code></td>
             <td>#46a546</td>
+            <td><span class="swatch" style="background-color: #46a546;"></span></td>
           </tr>
           <tr>
             <td><code>@red</code></td>
             <td>#9d261d</td>
+            <td><span class="swatch" style="background-color: #9d261d;"></span></td>
           </tr>
           <tr>
             <td><code>@yellow</code></td>
             <td>#ffc40d</td>
+            <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
           </tr>
           <tr>
             <td><code>@orange</code></td>
             <td>#f89406</td>
+            <td><span class="swatch" style="background-color: #f89406;"></span></td>
           </tr>
           <tr>
             <td><code>@pink</code></td>
             <td>#c3325f</td>
+            <td><span class="swatch" style="background-color: #c3325f;"></span></td>
           </tr>
           <tr>
             <td><code>@purple</code></td>
             <td>#7a43b6</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span6">
-      <h3>Grid system</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">Variable</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@gridColumns</code></td>
-            <td>12</td>
-          </tr>
-          <tr>
-            <td><code>@gridColumnWidth</code></td>
-            <td>60px</td>
-          </tr>
-          <tr>
-            <td><code>@gridGutterWidth</code></td>
-            <td>20px</td>
-          </tr>
-          <tr>
-            <td><code>@siteWidth</code></td>
-            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="span6">
-      <h3>Typography</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">Variable</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><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></td>
-          </tr>
-          <tr>
-            <td><code>@baseLineHeight</code></td>
-            <td>18px</td>
+            <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -311,6 +289,7 @@
           <tr>
             <td class="span3"><code>@primaryButtonBackground</code></td>
             <td><code>@linkColor</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -320,6 +299,7 @@
           <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>
         </tbody>
       </table>
@@ -329,26 +309,32 @@
           <tr>
             <td class="span3"><code>@navbarHeight</code></td>
             <td>40px</td>
+            <td class="swatch-col"></td>
           </tr>
           <tr>
             <td><code>@navbarBackground</code></td>
             <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarBackgroundHighlight</code></td>
             <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>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColor</code></td>
             <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColorHover</code></td>
             <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -360,50 +346,42 @@
           <tr>
             <td class="span3"><code>@warningText</code></td>
             <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
           </tr>
           <tr>
             <td><code>@warningBackground</code></td>
             <td>#c09853</td>
-          </tr>
-          <tr>
-            <td><code>@warningBorder</code></td>
-            <td>#f3edd2</td>
+            <td><span class="swatch" style="background-color: #c09853;"></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>
-          </tr>
-          <tr>
-            <td><code>@errorBorder</code></td>
-            <td>#e9c7c7</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>
-          </tr>
-          <tr>
-            <td><code>@successBorder</code></td>
-            <td>#cfe8c4</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>
-          </tr>
-          <tr>
-            <td><code>@infoBorder</code></td>
-            <td>#bfe1f2</td>
+            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
           </tr>
         </tbody>
       </table>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index ad6688e1e..82b921d24 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -62,168 +62,146 @@
 ================================================== -->
 <section id="variables">
   <div class="page-header">
-    <h1>{{_i}}Bootstrap variables <small></small>{{/i}}</h1>
+    <h1>{{_i}}Bootstrap variables <small>LESS variables, their values, and usage guidelines</small>{{/i}}</h1>
   </div>
 
-  <h3>{{_i}}Hyperlinks{{/i}}</h3>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th class="span2">{{_i}}Variable{{/i}}</th>
-        <th>{{_i}}Value{{/i}}</th>
-        <th>{{_i}}Usage{{/i}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>@linkColor</code></td>
-        <td>#08c</td>
-        <td>{{_i}}Default link text color{{/i}}</td>
-      </tr>
-      <tr>
-        <td><code>@linkColorHover</code></td>
-        <td><code>darken(@linkColor, 15%)</code></td>
-        <td>{{_i}}Default link text hover color{{/i}}</td>
-      </tr>
-    </tbody>
-  </table>
-
   <div class="row">
     <div class="span6">
-      <h3>{{_i}}Grayscale colors{{/i}}</h3>
+      <h3>{{_i}}Hyperlinks{{/i}}</h3>
       <table class="table table-bordered table-striped">
-        <thead>
+        <tbody>
           <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
+            <td class="span2"><code>@linkColor</code></td>
+            <td>#08c</td>
+            <td>{{_i}}Default link text color{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
-        </thead>
+          <tr>
+            <td><code>@linkColorHover</code></td>
+            <td><code>darken(@linkColor, 15%)</code></td>
+            <td>{{_i}}Default link text hover color{{/i}}</td>
+            <td><span class="swatch" style="background-color: #005580;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Grid system{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@gridColumns</code></td>
+            <td>12</td>
+          </tr>
+          <tr>
+            <td><code>@gridColumnWidth</code></td>
+            <td>60px</td>
+          </tr>
+          <tr>
+            <td><code>@gridGutterWidth</code></td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td><code>@siteWidth</code></td>
+            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Typography{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <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></td>
+          </tr>
+          <tr>
+            <td><code>@baseLineHeight</code></td>
+            <td>18px</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="span6">
+      <h3>{{_i}}Grayscale colors{{/i}}</h3>
+      <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td><code>@black</code></td>
+            <td class="span2"><code>@black</code></td>
             <td>#000</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDarker</code></td>
             <td>#222</td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDark</code></td>
             <td>#333</td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
           <tr>
             <td><code>@gray</code></td>
             <td>#555</td>
+            <td><span class="swatch" style="background-color: #555;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLight</code></td>
             <td>#999</td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLighter</code></td>
             <td>#eee</td>
+            <td><span class="swatch" style="background-color: #eee;"></span></td>
           </tr>
           <tr>
             <td><code>@white</code></td>
             <td>#fff</td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
       <h3>{{_i}}Accent colors{{/i}}</h3>
       <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
         <tbody>
           <tr>
-            <td><code>@blue</code></td>
+            <td class="span2"><code>@blue</code></td>
             <td>#049cdb</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
           </tr>
           <tr>
             <td><code>@green</code></td>
             <td>#46a546</td>
+            <td><span class="swatch" style="background-color: #46a546;"></span></td>
           </tr>
           <tr>
             <td><code>@red</code></td>
             <td>#9d261d</td>
+            <td><span class="swatch" style="background-color: #9d261d;"></span></td>
           </tr>
           <tr>
             <td><code>@yellow</code></td>
             <td>#ffc40d</td>
+            <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
           </tr>
           <tr>
             <td><code>@orange</code></td>
             <td>#f89406</td>
+            <td><span class="swatch" style="background-color: #f89406;"></span></td>
           </tr>
           <tr>
             <td><code>@pink</code></td>
             <td>#c3325f</td>
+            <td><span class="swatch" style="background-color: #c3325f;"></span></td>
           </tr>
           <tr>
             <td><code>@purple</code></td>
             <td>#7a43b6</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span6">
-      <h3>{{_i}}Grid system{{/i}}</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@gridColumns</code></td>
-            <td>12</td>
-          </tr>
-          <tr>
-            <td><code>@gridColumnWidth</code></td>
-            <td>60px</td>
-          </tr>
-          <tr>
-            <td><code>@gridGutterWidth</code></td>
-            <td>20px</td>
-          </tr>
-          <tr>
-            <td><code>@siteWidth</code></td>
-            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="span6">
-      <h3>{{_i}}Typography{{/i}}</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><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></td>
-          </tr>
-          <tr>
-            <td><code>@baseLineHeight</code></td>
-            <td>18px</td>
+            <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -239,6 +217,7 @@
           <tr>
             <td class="span3"><code>@primaryButtonBackground</code></td>
             <td><code>@linkColor</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -248,6 +227,7 @@
           <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>
         </tbody>
       </table>
@@ -257,26 +237,32 @@
           <tr>
             <td class="span3"><code>@navbarHeight</code></td>
             <td>40px</td>
+            <td class="swatch-col"></td>
           </tr>
           <tr>
             <td><code>@navbarBackground</code></td>
             <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarBackgroundHighlight</code></td>
             <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>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColor</code></td>
             <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColorHover</code></td>
             <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -288,50 +274,42 @@
           <tr>
             <td class="span3"><code>@warningText</code></td>
             <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
           </tr>
           <tr>
             <td><code>@warningBackground</code></td>
             <td>#c09853</td>
-          </tr>
-          <tr>
-            <td><code>@warningBorder</code></td>
-            <td>#f3edd2</td>
+            <td><span class="swatch" style="background-color: #c09853;"></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>
-          </tr>
-          <tr>
-            <td><code>@errorBorder</code></td>
-            <td>#e9c7c7</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>
-          </tr>
-          <tr>
-            <td><code>@successBorder</code></td>
-            <td>#cfe8c4</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>
-          </tr>
-          <tr>
-            <td><code>@infoBorder</code></td>
-            <td>#bfe1f2</td>
+            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
           </tr>
         </tbody>
       </table>