massive update to customize page to include all the new variables (and ensure they're being used in the .less files)

4 files changed, 144 insertions, 14 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index feabc49413..28dd0b9ff2 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 02ab012c45..3410818d2c 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -124,7 +124,7 @@ a {
   text-decoration: none;
 }
 a:hover {
-  color: #006699;
+  color: #005580;
   text-decoration: underline;
 }
 .row {
@@ -2601,8 +2601,8 @@ input[type="submit"].btn.btn-small {
 }
 .nav-tabs .dropdown-toggle:hover .caret,
 .nav-pills .dropdown-toggle:hover .caret {
-  border-top-color: #006699;
-  border-bottom-color: #006699;
+  border-top-color: #005580;
+  border-bottom-color: #005580;
 }
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
@@ -3901,7 +3901,7 @@ a.thumbnail:hover {
 .hero-unit {
   padding: 60px;
   margin-bottom: 30px;
-  background-color: #f5f5f5;
+  background-color: #eeeeee;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
@@ -3910,12 +3910,14 @@ a.thumbnail:hover {
   margin-bottom: 0;
   font-size: 60px;
   line-height: 1;
+  color: inherit;
   letter-spacing: -1px;
 }
 .hero-unit p {
   font-size: 18px;
   font-weight: 200;
   line-height: 27px;
+  color: inherit;
 }
 .pull-right {
   float: right;
diff --git a/docs/download.html b/docs/download.html
index 44b3b8c03d..858becd719 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -227,6 +227,12 @@
   </div>
   <div class="row download-builder">
     <div class="span3">
+      <h3>Scaffolding</h3>
+      <label>@bodyBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@textColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+
       <h3>Links</h3>
       <label>@linkColor</label>
       <input type="text" class="span3" placeholder="#08c">
@@ -247,6 +253,13 @@
       <input type="text" class="span3" placeholder="#c3325f">
       <label>@purple</label>
       <input type="text" class="span3" placeholder="#7a43b6">
+
+      <h3>Sprites</h3>
+      <label>@iconSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
+      <label>@iconWhiteSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
+
     </div><!-- /span -->
     <div class="span3">
       <h3>Grid system</h3>
@@ -261,6 +274,7 @@
       <input type="text" class="span3" placeholder="6.382978723%">
       <label>@fluidGridGutterWidth</label>
       <input type="text" class="span3" placeholder="2.127659574%">
+
       <h3>Typography</h3>
       <label>@baseFontSize</label>
       <input type="text" class="span3" placeholder="13px">
@@ -268,13 +282,32 @@
       <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
       <label>@baseLineHeight</label>
       <input type="text" class="span3" placeholder="18px">
+      <label>@altFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <label>@headingsFontFamily</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@headingsFontWeight</label>
+      <input type="text" class="span3" placeholder="bold">
+      <label>@headingsColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@heroUnitHeadingColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitLeadColor</label>
+      <input type="text" class="span3" placeholder="inherit">
     </div><!-- /span -->
     <div class="span3">
-      <h3>Forms</h3>
-      <label>@primaryButtonColor</label>
-      <input type="text" class="span3" placeholder="@blue">
-      <label>@placeholderText</label>
-      <input type="text" class="span3" placeholder="@grayLight">
+      <h3>Tables</h3>
+      <label>@tableBackground</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@tableBackgroundAccent</label>
+      <input type="text" class="span3" placeholder="#f9f9f9">
+      <label>@tableBackgroundHover</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+      <label>@tableBorder</label>
+      <input type="text" class="span3" placeholder="#ddd">
+
       <h3>Navbar</h3>
       <label>@navbarHeight</label>
       <input type="text" class="span3" placeholder="40px">
@@ -288,8 +321,39 @@
       <input type="text" class="span3" placeholder="@grayLight">
       <label>@navbarLinkColorHover</label>
       <input type="text" class="span3" placeholder="@white">
+      <label>@navbarLinkColorActive</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColorHover">
+      <label>@navbarLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@navbarLinkBackgroundActive</label>
+      <input type="text" class="span3" placeholder="@navbarBackground">
+
+      <h3>Dropdowns</h3>
+      <label>@dropdownBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@dropdownLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="@linkColor">
     </div><!-- /span -->
     <div class="span3">
+      <h3>Forms</h3>
+      <label>@placeholderText</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@inputBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@inputBorder</label>
+      <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputDisabledBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+
+      <label>@btnPrimaryBackground</label>
+      <input type="text" class="span3" placeholder="@linkColor">
+      <label>@btnPrimaryBackgroundHighlight</label>
+      <input type="text" class="span3" placeholder="darken(@white, 10%);">
+
       <h3>Form states &amp; alerts</h3>
       <label>@warningText</label>
       <input type="text" class="span3" placeholder="#c09853">
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 618bb3e1ee..7b549619da 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -151,6 +151,12 @@
   </div>
   <div class="row download-builder">
     <div class="span3">
+      <h3>{{_i}}Scaffolding{{/i}}</h3>
+      <label>@bodyBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@textColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+
       <h3>{{_i}}Links{{/i}}</h3>
       <label>@linkColor</label>
       <input type="text" class="span3" placeholder="#08c">
@@ -171,6 +177,13 @@
       <input type="text" class="span3" placeholder="#c3325f">
       <label>@purple</label>
       <input type="text" class="span3" placeholder="#7a43b6">
+
+      <h3>{{_i}}Sprites{{/i}}</h3>
+      <label>@iconSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
+      <label>@iconWhiteSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
+
     </div><!-- /span -->
     <div class="span3">
       <h3>{{_i}}Grid system{{/i}}</h3>
@@ -185,6 +198,7 @@
       <input type="text" class="span3" placeholder="6.382978723%">
       <label>@fluidGridGutterWidth</label>
       <input type="text" class="span3" placeholder="2.127659574%">
+
       <h3>{{_i}}Typography{{/i}}</h3>
       <label>@baseFontSize</label>
       <input type="text" class="span3" placeholder="13px">
@@ -192,13 +206,32 @@
       <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
       <label>@baseLineHeight</label>
       <input type="text" class="span3" placeholder="18px">
+      <label>@altFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <label>@headingsFontFamily</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@headingsFontWeight</label>
+      <input type="text" class="span3" placeholder="bold">
+      <label>@headingsColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@heroUnitHeadingColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitLeadColor</label>
+      <input type="text" class="span3" placeholder="inherit">
     </div><!-- /span -->
     <div class="span3">
-      <h3>{{_i}}Forms{{/i}}</h3>
-      <label>@primaryButtonColor</label>
-      <input type="text" class="span3" placeholder="@blue">
-      <label>@placeholderText</label>
-      <input type="text" class="span3" placeholder="@grayLight">
+      <h3>{{_i}}Tables{{/i}}</h3>
+      <label>@tableBackground</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@tableBackgroundAccent</label>
+      <input type="text" class="span3" placeholder="#f9f9f9">
+      <label>@tableBackgroundHover</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+      <label>@tableBorder</label>
+      <input type="text" class="span3" placeholder="#ddd">
+
       <h3>{{_i}}Navbar{{/i}}</h3>
       <label>@navbarHeight</label>
       <input type="text" class="span3" placeholder="40px">
@@ -212,8 +245,39 @@
       <input type="text" class="span3" placeholder="@grayLight">
       <label>@navbarLinkColorHover</label>
       <input type="text" class="span3" placeholder="@white">
+      <label>@navbarLinkColorActive</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColorHover">
+      <label>@navbarLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@navbarLinkBackgroundActive</label>
+      <input type="text" class="span3" placeholder="@navbarBackground">
+
+      <h3>{{_i}}Dropdowns{{/i}}</h3>
+      <label>@dropdownBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@dropdownLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="@linkColor">
     </div><!-- /span -->
     <div class="span3">
+      <h3>{{_i}}Forms{{/i}}</h3>
+      <label>@placeholderText</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@inputBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@inputBorder</label>
+      <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputDisabledBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+
+      <label>@btnPrimaryBackground</label>
+      <input type="text" class="span3" placeholder="@linkColor">
+      <label>@btnPrimaryBackgroundHighlight</label>
+      <input type="text" class="span3" placeholder="darken(@white, 10%);">
+
       <h3>{{_i}}Form states &amp; alerts{{/i}}</h3>
       <label>@warningText</label>
       <input type="text" class="span3" placeholder="#c09853">