From 9239bfbc7bbd549d987da03046399dd5fcbd5f7f Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 30 Nov 2012 15:05:23 -0800
Subject: [PATCH] more vars changed, remove @white var

---
 docs/assets/css/bootstrap.css           | 34 ++++++-------
 docs/customize.html                     | 38 +++++++-------
 docs/templates/pages/customize.mustache | 36 ++++++-------
 less/breadcrumbs.less                   |  2 +-
 less/button-groups.less                 | 18 +++----
 less/buttons.less                       | 18 +++----
 less/carousel.less                      |  4 +-
 less/forms.less                         | 50 +++++++++---------
 less/labels-badges.less                 |  4 +-
 less/mixins.less                        |  2 +-
 less/modals.less                        |  4 +-
 less/navbar.less                        |  4 +-
 less/navs.less                          |  8 +--
 less/progress-bars.less                 |  2 +-
 less/tables.less                        | 14 +++---
 less/type.less                          |  2 +-
 less/variables.less                     | 67 ++++++++++++-------------
 17 files changed, 152 insertions(+), 155 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f57c6ff747..12aa52a144 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -607,7 +607,7 @@ hr {
   margin: 20px 0;
   border: 0;
   border-top: 1px solid #eeeeee;
-  border-bottom: 1px solid #ffffff;
+  border-bottom: 1px solid #fff;
 }
 
 abbr[title],
@@ -1418,7 +1418,7 @@ select:focus:invalid:focus {
   font-weight: normal;
   line-height: 20px;
   text-align: center;
-  text-shadow: 0 1px 0 #ffffff;
+  text-shadow: 0 1px 0 #fff;
   background-color: #eeeeee;
   border: 1px solid #ccc;
 }
@@ -3301,8 +3301,8 @@ input[type="button"].btn-block {
 .btn-info .caret,
 .btn-success .caret,
 .btn-inverse .caret {
-  border-top-color: #ffffff;
-  border-bottom-color: #ffffff;
+  border-top-color: #fff;
+  border-bottom-color: #fff;
 }
 
 .btn-group-vertical {
@@ -3495,7 +3495,7 @@ input[type="button"].btn-block {
 
 .nav-pills > .active > a,
 .nav-pills > .active > a:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #0088cc;
 }
 
@@ -3597,7 +3597,7 @@ input[type="button"].btn-block {
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
 .nav > li.dropdown.open.active > a:hover {
-  color: #ffffff;
+  color: #fff;
   background-color: #999999;
   border-color: #999999;
 }
@@ -3605,8 +3605,8 @@ input[type="button"].btn-block {
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
 .nav li.dropdown.open a:hover .caret {
-  border-top-color: #ffffff;
-  border-bottom-color: #ffffff;
+  border-top-color: #fff;
+  border-bottom-color: #fff;
   opacity: 1;
   filter: alpha(opacity=100);
 }
@@ -4111,7 +4111,7 @@ input[type="button"].btn-block {
 }
 
 .navbar-inverse .navbar-search .search-query {
-  color: #ffffff;
+  color: #fff;
   background-color: #515151;
   border-color: #111111;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
@@ -4138,7 +4138,7 @@ input[type="button"].btn-block {
 .navbar-inverse .navbar-search .search-query.focused {
   padding: 5px 15px;
   color: #333333;
-  text-shadow: 0 1px 0 #ffffff;
+  text-shadow: 0 1px 0 #fff;
   background-color: #ffffff;
   border: 0;
   outline: 0;
@@ -4186,7 +4186,7 @@ input[type="button"].btn-block {
 
 .breadcrumb li {
   display: inline-block;
-  text-shadow: 0 1px 0 #ffffff;
+  text-shadow: 0 1px 0 #fff;
 }
 
 .breadcrumb li:after {
@@ -4419,7 +4419,7 @@ input[type="button"].btn-block {
   z-index: 1050;
   width: 560px;
   margin-left: -280px;
-  background-color: #ffffff;
+  background-color: #fff;
   border: 1px solid #999;
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 6px;
@@ -4859,7 +4859,7 @@ a.thumbnail:hover {
   font-size: 11.844px;
   font-weight: bold;
   line-height: 14px;
-  color: #ffffff;
+  color: #fff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   white-space: nowrap;
   vertical-align: baseline;
@@ -4883,7 +4883,7 @@ a.thumbnail:hover {
 
 a.label:hover,
 a.badge:hover {
-  color: #ffffff;
+  color: #fff;
   text-decoration: none;
   cursor: pointer;
 }
@@ -5016,7 +5016,7 @@ a.badge:hover {
   width: 0;
   height: 100%;
   font-size: 12px;
-  color: #ffffff;
+  color: #fff;
   text-align: center;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #0e90d2;
@@ -5281,7 +5281,7 @@ a.badge:hover {
 }
 
 .carousel-control:hover {
-  color: #ffffff;
+  color: #fff;
   text-decoration: none;
   opacity: 0.9;
   filter: alpha(opacity=90);
@@ -5318,7 +5318,7 @@ a.badge:hover {
 .carousel-caption h3,
 .carousel-caption p {
   line-height: 20px;
-  color: #ffffff;
+  color: #fff;
 }
 
 .carousel-caption h3 {
diff --git a/docs/customize.html b/docs/customize.html
index ffa219d835..7e1ab8caf6 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -238,7 +238,7 @@
               <div class="span3">
                 <h3>Scaffolding</h3>
                 <label>@body-background</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@text-color</label>
                 <input type="text" class="span3" placeholder="@grayDark">
 
@@ -303,8 +303,6 @@
                 <label>@line-height-base</label>
                 <input type="text" class="span3" placeholder="20px">
 
-                <label>@altFontFamily</label>
-                <input type="text" class="span3" placeholder="@font-family-serif">
                 <label>@headings-font-family</label>
                 <input type="text" class="span3" placeholder="inherit">
                 <label>@headings-font-weight</label>
@@ -341,32 +339,32 @@
                 <input type="text" class="span3" placeholder="inherit">
 
                 <h3>Tables</h3>
-                <label>@tableBackground</label>
+                <label>@table-background</label>
                 <input type="text" class="span3" placeholder="transparent">
-                <label>@tableBackgroundAccent</label>
+                <label>@table-background-accent</label>
                 <input type="text" class="span3" placeholder="#f9f9f9">
-                <label>@tableBackgroundHover</label>
+                <label>@table-background-hover</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
-                <label>@tableBorder</label>
+                <label>@table-border</label>
                 <input type="text" class="span3" placeholder="#ddd">
 
                 <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>
+                <label>@input-background</label>
+                <input type="text" class="span3" placeholder="#fff">
+                <label>@input-border</label>
                 <input type="text" class="span3" placeholder="#ccc">
-                <label>@inputBorderRadius</label>
+                <label>@input-border-radius</label>
                 <input type="text" class="span3" placeholder="3px">
-                <label>@inputDisabledBackground</label>
+                <label>@input-background-disabled</label>
                 <input type="text" class="span3" placeholder="@grayLighter">
-                <label>@formActionsBackground</label>
+                <label>@form-actions-background</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
-                <label>@btnPrimaryBackground</label>
+                <label>@btn-backround-primary</label>
                 <input type="text" class="span3" placeholder="@link-color">
-                <label>@btnPrimaryBackgroundHighlight</label>
-                <input type="text" class="span3" placeholder="darken(@white, 10%)">
+                <label>@btn-backround-primary-highlight</label>
+                <input type="text" class="span3" placeholder="darken(#fff, 10%)">
 
               </div><!-- /span -->
               <div class="span3">
@@ -403,7 +401,7 @@
                 <label>@navbarLinkColor</label>
                 <input type="text" class="span3" placeholder="@grayLight">
                 <label>@navbarLinkColorHover</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@navbarLinkColorActive</label>
                 <input type="text" class="span3" placeholder="@navbarLinkColorHover">
                 <label>@navbarLinkBackgroundHover</label>
@@ -413,7 +411,7 @@
                 <label>@navbarSearchBackground</label>
                 <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
                 <label>@navbarSearchBackgroundFocus</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@navbarSearchBorder</label>
                 <input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
                 <label>@navbarSearchPlaceholderColor</label>
@@ -426,13 +424,13 @@
 
                 <h3>Dropdowns</h3>
                 <label>@dropdownBackground</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@dropdownBorder</label>
                 <input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
                 <label>@dropdownLinkColor</label>
                 <input type="text" class="span3" placeholder="@grayDark">
                 <label>@dropdownLinkColorHover</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@dropdownLinkBackgroundHover</label>
                 <input type="text" class="span3" placeholder="@link-color">
               </div><!-- /span -->
diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache
index a927ab97b1..f9928f5b9c 100644
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -170,7 +170,7 @@
               <div class="span3">
                 <h3>{{_i}}Scaffolding{{/i}}</h3>
                 <label>@body-background</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@text-color</label>
                 <input type="text" class="span3" placeholder="@grayDark">
 
@@ -271,32 +271,32 @@
                 <input type="text" class="span3" placeholder="inherit">
 
                 <h3>{{_i}}Tables{{/i}}</h3>
-                <label>@tableBackground</label>
+                <label>@table-background</label>
                 <input type="text" class="span3" placeholder="transparent">
-                <label>@tableBackgroundAccent</label>
+                <label>@table-background-accent</label>
                 <input type="text" class="span3" placeholder="#f9f9f9">
-                <label>@tableBackgroundHover</label>
+                <label>@table-background-hover</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
-                <label>@tableBorder</label>
+                <label>@table-border</label>
                 <input type="text" class="span3" placeholder="#ddd">
 
                 <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>
+                <label>@input-background</label>
+                <input type="text" class="span3" placeholder="#fff">
+                <label>@input-border</label>
                 <input type="text" class="span3" placeholder="#ccc">
-                <label>@inputBorderRadius</label>
+                <label>@input-border-radius</label>
                 <input type="text" class="span3" placeholder="3px">
-                <label>@inputDisabledBackground</label>
+                <label>@input-background-disabled</label>
                 <input type="text" class="span3" placeholder="@grayLighter">
-                <label>@formActionsBackground</label>
+                <label>@form-actions-background</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
-                <label>@btnPrimaryBackground</label>
+                <label>@btn-backround-primary</label>
                 <input type="text" class="span3" placeholder="@link-color">
-                <label>@btnPrimaryBackgroundHighlight</label>
-                <input type="text" class="span3" placeholder="darken(@white, 10%)">
+                <label>@btn-backround-primary-highlight</label>
+                <input type="text" class="span3" placeholder="darken(#fff, 10%)">
 
               </div><!-- /span -->
               <div class="span3">
@@ -333,7 +333,7 @@
                 <label>@navbarLinkColor</label>
                 <input type="text" class="span3" placeholder="@grayLight">
                 <label>@navbarLinkColorHover</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@navbarLinkColorActive</label>
                 <input type="text" class="span3" placeholder="@navbarLinkColorHover">
                 <label>@navbarLinkBackgroundHover</label>
@@ -343,7 +343,7 @@
                 <label>@navbarSearchBackground</label>
                 <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
                 <label>@navbarSearchBackgroundFocus</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@navbarSearchBorder</label>
                 <input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
                 <label>@navbarSearchPlaceholderColor</label>
@@ -356,13 +356,13 @@
 
                 <h3>{{_i}}Dropdowns{{/i}}</h3>
                 <label>@dropdownBackground</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@dropdownBorder</label>
                 <input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
                 <label>@dropdownLinkColor</label>
                 <input type="text" class="span3" placeholder="@grayDark">
                 <label>@dropdownLinkColorHover</label>
-                <input type="text" class="span3" placeholder="@white">
+                <input type="text" class="span3" placeholder="#fff">
                 <label>@dropdownLinkBackgroundHover</label>
                 <input type="text" class="span3" placeholder="@link-color">
               </div><!-- /span -->
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 8553147ccf..9d2dd5a5fb 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -11,7 +11,7 @@
   border-radius: @border-radius-base;
   li {
     display: inline-block;
-    text-shadow: 0 1px 0 @white;
+    text-shadow: 0 1px 0 #fff;
     &:after {
       display: inline-block;
       content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space
diff --git a/less/button-groups.less b/less/button-groups.less
index 6ad5226701..eb843bcd88 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -123,25 +123,25 @@
 
   // Keep the hover's background when dropdown is open
   .btn.dropdown-toggle {
-    background-color: @btnBackgroundHighlight;
+    background-color: @btn-background-highlight;
   }
   .btn-primary.dropdown-toggle {
-    background-color: @btnPrimaryBackgroundHighlight;
+    background-color: @btn-backround-primary-highlight;
   }
   .btn-warning.dropdown-toggle {
-    background-color: @btnWarningBackgroundHighlight;
+    background-color: @btn-backround-warning-highlight;
   }
   .btn-danger.dropdown-toggle {
-    background-color: @btnDangerBackgroundHighlight;
+    background-color: @btn-backround-danger-highlight;
   }
   .btn-success.dropdown-toggle {
-    background-color: @btnSuccessBackgroundHighlight;
+    background-color: @btn-backround-success-highlight;
   }
   .btn-info.dropdown-toggle {
-    background-color: @btnInfoBackgroundHighlight;
+    background-color: @btn-backround-info-highlight;
   }
   .btn-inverse.dropdown-toggle {
-    background-color: @btnInverseBackgroundHighlight;
+    background-color: @btn-backround-inverse-highlight;
   }
 }
 
@@ -177,8 +177,8 @@
 .btn-success,
 .btn-inverse {
   .caret {
-    border-top-color: @white;
-    border-bottom-color: @white;
+    border-top-color: #fff;
+    border-bottom-color: #fff;
   }
 }
 
diff --git a/less/buttons.less b/less/buttons.less
index 4da9112c05..a50b77cdfe 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -16,9 +16,9 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
-  border: 1px solid @btnBorder;
-  border-bottom-color: darken(@btnBorder, 10%);
+  .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
+  border: 1px solid @btn-border;
+  border-bottom-color: darken(@btn-border, 10%);
   border-radius: @border-radius-base;
   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
 
@@ -139,27 +139,27 @@ input[type="button"] {
   border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
 }
 .btn-primary {
-  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
+  .buttonBackground(@btn-backround-primary, @btn-backround-primary-highlight);
 }
 // Warning appears are orange
 .btn-warning {
-  .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
+  .buttonBackground(@btn-backround-warning, @btn-backround-warning-highlight);
 }
 // Danger and error appear as red
 .btn-danger {
-  .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
+  .buttonBackground(@btn-backround-danger, @btn-backround-danger-highlight);
 }
 // Success appears as green
 .btn-success {
-  .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
+  .buttonBackground(@btn-backround-success, @btn-backround-success-highlight);
 }
 // Info appears as a neutral blue
 .btn-info {
-  .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
+  .buttonBackground(@btn-backround-info, @btn-backround-info-highlight);
 }
 // Inverse appears as dark gray
 .btn-inverse {
-  .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
+  .buttonBackground(@btn-backround-inverse, @btn-backround-inverse-highlight);
 }
 
 
diff --git a/less/carousel.less b/less/carousel.less
index 89965e54ce..264631fad2 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -96,7 +96,7 @@
 
   // Hover state
   &:hover {
-    color: @white;
+    color: #fff;
     text-decoration: none;
     .opacity(90);
   }
@@ -136,7 +136,7 @@
 }
 .carousel-caption h3,
 .carousel-caption p {
-  color: @white;
+  color: #fff;
   line-height: @line-height-base;
 }
 .carousel-caption h3 {
diff --git a/less/forms.less b/less/forms.less
index 98955a567f..155306f7d3 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -57,16 +57,16 @@ input[type="color"],
 .uneditable-input {
   display: inline-block;
   .box-sizing(border-box); // Makes inputs behave like true block-level elements
-  min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
   margin-bottom: @line-height-base / 2;
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @gray;
   vertical-align: middle;
-  background-color: @inputBackground;
-  border: 1px solid @inputBorder;
-  border-radius: @inputBorderRadius;
+  background-color: @input-background;
+  border: 1px solid @input-border;
+  border-radius: @input-border-radius;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   .transition(~"border linear .2s, box-shadow linear .2s");
 }
@@ -133,14 +133,14 @@ input[type="checkbox"] {
 // Set the height of select and file controls to match text inputs
 select,
 input[type="file"] {
-  height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
-  line-height: @inputHeight;
+  height: @input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
+  line-height: @input-height;
 }
 
 // Make select elements obey height by applying a border
 // TODO: See if this can be part of the above selector stack
 select {
-  border: 1px solid @inputBorder;
+  border: 1px solid @input-border;
 }
 
 // Make multiple select elements height not fixed
@@ -165,8 +165,8 @@ input[type="checkbox"]:focus {
 .uneditable-input,
 .uneditable-textarea {
   color: @grayLight;
-  background-color: darken(@inputBackground, 1%);
-  border-color: @inputBorder;
+  background-color: darken(@input-background, 1%);
+  border-color: @input-border;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
   cursor: not-allowed;
 }
@@ -337,7 +337,7 @@ input[readonly],
 select[readonly],
 textarea[readonly] {
   cursor: not-allowed;
-  background-color: @inputDisabledBackground;
+  background-color: @input-background-disabled;
 }
 // Explicitly reset the colors here
 input[type="radio"][disabled],
@@ -393,7 +393,7 @@ select:focus:invalid {
   padding: (@line-height-base - 1) 20px @line-height-base;
   margin-top: @line-height-base;
   margin-bottom: @line-height-base;
-  background-color: @formActionsBackground;
+  background-color: @form-actions-background;
   border-top: 1px solid #e5e5e5;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
 }
@@ -447,7 +447,7 @@ select:focus:invalid {
     margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
     font-size: @font-size-base;
     vertical-align: top;
-    border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+    border-radius: 0 @input-border-radius @input-border-radius 0;
     // Make input on top when focused so blue border and shadow always show
     &:focus {
       z-index: 2;
@@ -468,7 +468,7 @@ select:focus:invalid {
     font-weight: normal;
     line-height: @line-height-base;
     text-align: center;
-    text-shadow: 0 1px 0 @white;
+    text-shadow: 0 1px 0 #fff;
     background-color: @grayLighter;
     border: 1px solid #ccc;
   }
@@ -492,7 +492,7 @@ select:focus:invalid {
   .add-on:first-child,
   .btn:first-child {
     // FYI, `.btn:first-child` accounts for a button group that's prepended
-    border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
+    border-radius: @input-border-radius 0 0 @input-border-radius;
   }
 }
 
@@ -500,10 +500,10 @@ select:focus:invalid {
   input,
   select,
   .uneditable-input {
-    border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
+    border-radius: @input-border-radius 0 0 @input-border-radius;
     + .btn-group .btn,
     + .btn-group .btn:last-child {
-      border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+      border-radius: 0 @input-border-radius @input-border-radius 0;
     }
   }
   .add-on,
@@ -514,7 +514,7 @@ select:focus:invalid {
   .add-on:last-child,
   .btn:last-child,
   .btn-group:last-child > .dropdown-toggle {
-    border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+    border-radius: 0 @input-border-radius @input-border-radius 0;
   }
 }
 
@@ -525,18 +525,18 @@ select:focus:invalid {
   .uneditable-input {
     border-radius: 0;
     + .btn-group .btn {
-      border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+      border-radius: 0 @input-border-radius @input-border-radius 0;
     }
   }
   .add-on:first-child,
   .btn:first-child {
     margin-right: -1px;
-    border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
+    border-radius: @input-border-radius 0 0 @input-border-radius;
   }
   .add-on:last-child,
   .btn:last-child {
     margin-left: -1px;
-    border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+    border-radius: 0 @input-border-radius @input-border-radius 0;
   }
   .btn-group:first-child {
     margin-left: 0;
@@ -555,7 +555,7 @@ input.search-query {
   padding-left: 14px;
   padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
   margin-bottom: 0; // Remove the default margin on all inputs
-  border-radius: @inputSearchBorderRadius;
+  border-radius: @input-border-radius-search;
 }
 
 /* Allow for input prepend/append in search forms */
@@ -564,16 +564,16 @@ input.search-query {
   border-radius: 0; // Override due to specificity
 }
 .form-search .input-append .search-query {
-  border-radius: @inputSearchBorderRadius 0 0 @inputSearchBorderRadius;
+  border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
 }
 .form-search .input-append .btn {
-  border-radius: 0 @inputSearchBorderRadius @inputSearchBorderRadius 0;
+  border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
 }
 .form-search .input-prepend .search-query {
-  border-radius: 0 @inputSearchBorderRadius @inputSearchBorderRadius 0;
+  border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
 }
 .form-search .input-prepend .btn {
-  border-radius: @inputSearchBorderRadius 0 0 @inputSearchBorderRadius;
+  border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
 }
 
 
diff --git a/less/labels-badges.less b/less/labels-badges.less
index 7e5999351b..fafad404e4 100644
--- a/less/labels-badges.less
+++ b/less/labels-badges.less
@@ -11,7 +11,7 @@
   font-size: @font-size-base * .846;
   font-weight: bold;
   line-height: 14px; // ensure proper line-height if floated
-  color: @white;
+  color: #fff;
   vertical-align: baseline;
   white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@@ -39,7 +39,7 @@
 a {
   &.label:hover,
   &.badge:hover {
-    color: @white;
+    color: #fff;
     text-decoration: none;
     cursor: pointer;
   }
diff --git a/less/mixins.less b/less/mixins.less
index f6c40b20e8..1fd0660f31 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -419,7 +419,7 @@
 // Horizontal dividers
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
-.nav-divider(@top: #e5e5e5, @bottom: @white) {
+.nav-divider(@top: #e5e5e5, @bottom: #fff) {
   height: 1px;
   margin: ((@line-height-base / 2) - 1) 1px; // 8px 1px
   overflow: hidden;
diff --git a/less/modals.less b/less/modals.less
index 99fe2d45f6..86be20de69 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -28,7 +28,7 @@
   z-index: @zindexModal;
   width: 560px;
   margin-left: -280px;
-  background-color: @white;
+  background-color: #fff;
   border: 1px solid #999;
   border: 1px solid rgba(0,0,0,.3);
   border-radius: 6px;
@@ -74,7 +74,7 @@
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
   border-radius: 0 0 6px 6px;
-  .box-shadow(inset 0 1px 0 @white);
+  .box-shadow(inset 0 1px 0 #fff);
   .clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
diff --git a/less/navbar.less b/less/navbar.less
index 43b0005b57..359b644a3c 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -435,7 +435,7 @@
   // Navbar search
   .navbar-search {
     .search-query {
-      color: @white;
+      color: #fff;
       background-color: @navbarInverseSearchBackground;
       border-color: @navbarInverseSearchBorder;
       .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
@@ -447,7 +447,7 @@
       &.focused {
         padding: 5px 15px;
         color: @grayDark;
-        text-shadow: 0 1px 0 @white;
+        text-shadow: 0 1px 0 #fff;
         background-color: @navbarInverseSearchBackgroundFocus;
         border: 0;
         .box-shadow(0 0 3px rgba(0,0,0,.15));
diff --git a/less/navs.less b/less/navs.less
index 9f2491b55e..b4068f3361 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -105,7 +105,7 @@
 // Active state
 .nav-pills > .active > a,
 .nav-pills > .active > a:hover {
-  color: @white;
+  color: #fff;
   background-color: @link-color;
 }
 
@@ -217,15 +217,15 @@
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
 .nav > li.dropdown.open.active > a:hover {
-  color: @white;
+  color: #fff;
   background-color: @grayLight;
   border-color: @grayLight;
 }
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
 .nav li.dropdown.open a:hover .caret {
-  border-top-color: @white;
-  border-bottom-color: @white;
+  border-top-color: #fff;
+  border-bottom-color: #fff;
   .opacity(100);
 }
 
diff --git a/less/progress-bars.less b/less/progress-bars.less
index c5ea2a529e..66180026d9 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -55,7 +55,7 @@
 .progress .bar {
   width: 0%;
   height: 100%;
-  color: @white;
+  color: #fff;
   float: left;
   font-size: 12px;
   text-align: center;
diff --git a/less/tables.less b/less/tables.less
index c42aca6a15..58aadf7bbf 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -5,7 +5,7 @@
 
 table {
   max-width: 100%;
-  background-color: @tableBackground;
+  background-color: @table-background;
   border-collapse: collapse;
   border-spacing: 0;
 }
@@ -25,7 +25,7 @@ table {
     line-height: @line-height-base;
     text-align: left;
     vertical-align: top;
-    border-top: 1px solid @tableBorder;
+    border-top: 1px solid @table-border;
   }
   th {
     font-weight: bold;
@@ -45,7 +45,7 @@ table {
   }
   // Account for multiple tbody instances
   tbody + tbody {
-    border-top: 2px solid @tableBorder;
+    border-top: 2px solid @table-border;
   }
 }
 
@@ -67,13 +67,13 @@ table {
 // ----------------
 
 .table-bordered {
-  border: 1px solid @tableBorder;
+  border: 1px solid @table-border;
   border-collapse: separate; // Done so we can round those corners!
   border-left: 0;
   border-radius: @border-radius-base;
   th,
   td {
-    border-left: 1px solid @tableBorder;
+    border-left: 1px solid @table-border;
   }
   // Prevent a double border
   caption + thead tr:first-child th,
@@ -143,7 +143,7 @@ table {
   tbody {
     tr:nth-child(odd) td,
     tr:nth-child(odd) th {
-      background-color: @tableBackgroundAccent;
+      background-color: @table-background-accent;
     }
   }
 }
@@ -157,7 +157,7 @@ table {
   tbody {
     tr:hover td,
     tr:hover th {
-      background-color: @tableBackgroundHover;
+      background-color: @table-background-hover;
     }
   }
 }
diff --git a/less/type.less b/less/type.less
index 28b68bb37b..3fa68751d9 100644
--- a/less/type.less
+++ b/less/type.less
@@ -158,7 +158,7 @@ hr {
   margin: @line-height-base 0;
   border: 0;
   border-top: 1px solid @hrBorder;
-  border-bottom: 1px solid @white;
+  border-bottom: 1px solid #fff;
 }
 
 // Abbreviations and acronyms
diff --git a/less/variables.less b/less/variables.less
index 6623b288b4..786fe657ef 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -15,7 +15,6 @@
 @gray:                  #555;
 @grayLight:             #999;
 @grayLighter:           #eee;
-@white:                 #fff;
 
 
 // Accent colors
@@ -31,7 +30,7 @@
 
 // Scaffolding
 // -------------------------
-@body-background:         @white;
+@body-background:         #fff;
 @text-color:              @grayDark;
 
 
@@ -74,58 +73,58 @@
 
 // Tables
 // -------------------------
-@tableBackground:                   transparent; // overall background-color
-@tableBackgroundAccent:             #f9f9f9; // for striping
-@tableBackgroundHover:              #f5f5f5; // for hover
-@tableBorder:                       #ddd; // table and cell border
+@table-background:                   transparent; // overall background-color
+@table-background-accent:            #f9f9f9; // for striping
+@table-background-hover:             #f5f5f5; // for hover
+@table-border:                       #ddd; // table and cell border
 
 
 // Buttons
 // -------------------------
-@btnBackground:                     @white;
-@btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         #bbb;
+@btn-background:                     #fff;
+@btn-background-highlight:           darken(#fff, 10%);
+@btn-border:                         #bbb;
 
-@btnPrimaryBackground:              @link-color;
-@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
+@btn-backround-primary:              @link-color;
+@btn-backround-primary-highlight:    spin(@btn-backround-primary, 20%);
 
-@btnInfoBackground:                 #5bc0de;
-@btnInfoBackgroundHighlight:        #2f96b4;
+@btn-backround-info:                 #5bc0de;
+@btn-backround-info-highlight:       #2f96b4;
 
-@btnSuccessBackground:              #62c462;
-@btnSuccessBackgroundHighlight:     #51a351;
+@btn-backround-success:              #62c462;
+@btn-backround-success-highlight:    #51a351;
 
-@btnWarningBackground:              lighten(@orange, 15%);
-@btnWarningBackgroundHighlight:     @orange;
+@btn-backround-warning:              lighten(#f89406, 15%);
+@btn-backround-warning-highlight:    #f89406;
 
-@btnDangerBackground:               #ee5f5b;
-@btnDangerBackgroundHighlight:      #bd362f;
+@btn-backround-danger:               #ee5f5b;
+@btn-backround-danger-highlight:     #bd362f;
 
-@btnInverseBackground:              #444;
-@btnInverseBackgroundHighlight:     @grayDarker;
+@btn-backround-inverse:              #444;
+@btn-backround-inverse-highlight:    @grayDarker;
 
 
 // Forms
 // -------------------------
-@inputBackground:               @white;
-@inputBorder:                   #ccc;
-@inputBorderRadius:             @border-radius-base;
-@inputSearchBorderRadius:       20px;
-@inputDisabledBackground:       @grayLighter;
-@formActionsBackground:         #f5f5f5;
-@inputHeight:                   @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
+@input-background:               #fff;
+@input-border:                   #ccc;
+@input-border-radius:            @border-radius-base;
+@input-border-radius-search:     20px;
+@input-background-disabled:      @grayLighter;
+@form-actions-background:        #f5f5f5;
+@input-height:                   @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
 
 
 // Dropdowns
 // -------------------------
-@dropdownBackground:            @white;
+@dropdownBackground:            #fff;
 @dropdownBorder:                rgba(0,0,0,.2);
 @dropdownDividerTop:            #e5e5e5;
-@dropdownDividerBottom:         @white;
+@dropdownDividerBottom:         #fff;
 
 @dropdownLinkColor:             @grayDark;
-@dropdownLinkColorHover:        @white;
-@dropdownLinkColorActive:       @white;
+@dropdownLinkColorHover:        #fff;
+@dropdownLinkColorActive:       #fff;
 
 @dropdownLinkBackgroundActive:  @link-color;
 @dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
@@ -200,13 +199,13 @@
 
 @navbarInverseText:                      @grayLight;
 @navbarInverseLinkColor:                 @grayLight;
-@navbarInverseLinkColorHover:            @white;
+@navbarInverseLinkColorHover:            #fff;
 @navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
 @navbarInverseLinkBackgroundHover:       transparent;
 @navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
 
 @navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
-@navbarInverseSearchBackgroundFocus:     @white;
+@navbarInverseSearchBackgroundFocus:     #fff;
 @navbarInverseSearchBorder:              @navbarInverseBackground;
 @navbarInverseSearchPlaceholderColor:    #ccc;
 
-- 
GitLab