Fixes #7617: lowercase and dash gray color vars

docs/assets/css/bootstrap.css

@@ -3471,8 +3471,8 @@ button.close {
 .nav-pills .open .dropdown-toggle,
 .nav > li.dropdown.open.active > a:hover {
   color: #fff;
-  background-color: @grayLight;
-  border-color: @grayLight;
+  background-color: @gray-light;
+  border-color: @gray-light;
 }
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
@@ -3484,7 +3484,7 @@ button.close {
 
 // Dropdowns in stacked tabs
 .tabs-stacked .open > a:hover {
-  border-color: @grayLight;
+  border-color: @gray-light;
 }
 
 */

less/badges.less

@@ -15,7 +15,7 @@
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
-  background-color: @grayLight;
+  background-color: @gray-light;
   border-radius: 10px;
 
   // Empty labels/badges collapse

less/breadcrumbs.less

@@ -23,6 +23,6 @@
     }
   }
   > .active {
-    color: @grayLight;
+    color: @gray-light;
   }
 }

less/buttons.less

@@ -168,7 +168,7 @@ fieldset[disabled] .btn-link {
   fieldset[disabled] & {
     &:hover,
     &:focus {
-      color: @grayDark;
+      color: @gray-dark;
       text-decoration: none;
     }
   }

less/code.less

@@ -9,7 +9,7 @@ pre {
   padding: 0 3px 2px;
   font-family: @font-family-monospace;
   font-size: (@font-size-base - 2);
-  color: @grayDark;
+  color: @gray-dark;
   border-radius: 4px;
 }
 

less/dropdowns.less

@@ -103,7 +103,7 @@
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
 .dropdown-menu > .disabled > a:focus {
-  color: @grayLight;
+  color: @gray-light;
 }
 // Nuke hover/focus effects
 .dropdown-menu > .disabled > a:hover,

less/forms.less

@@ -23,7 +23,7 @@ legend {
   margin-bottom: @line-height-base;
   font-size: (@font-size-base * 1.5);
   line-height: (@line-height-base * 2);
-  color: @grayDark;
+  color: @gray-dark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 }
@@ -426,7 +426,7 @@ select:focus:invalid {
   line-height: @line-height-base;
   text-align: center;
   text-shadow: 0 1px 0 #fff;
-  background-color: @grayLighter;
+  background-color: @gray-lighter;
   border: 1px solid #ccc;
 
 	&.input-small {

less/labels.less

@@ -13,7 +13,7 @@
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
-  background-color: @grayLight;
+  background-color: @gray-light;
   border-radius: .25em;
 }
 

less/navs.less

@@ -21,7 +21,7 @@
       &:hover,
       &:focus {
         text-decoration: none;
-        background-color: @grayLighter;        
+        background-color: @gray-lighter;
       }
     }
 
@@ -33,12 +33,12 @@
 
     // Gray out text
     &.disabled > a {
-      color: @grayLight;
+      color: @gray-light;
     }
     // Nuke hover effects
     &.disabled > a:hover,
     &.disabled > a:focus {
-      color: @grayLight;
+      color: @gray-light;
       text-decoration: none;
       background-color: transparent;
       cursor: default;
@@ -54,7 +54,7 @@
   > .pull-right {
     float: right;
   }
-  
+
   // Dividers (basically an hr) within the dropdown
   .divider {
     .nav-divider();
@@ -75,7 +75,7 @@
   > li {
     float: left;
     // Make the list-items overlay the bottom border
-    margin-bottom: -1px;    
+    margin-bottom: -1px;
 
     // Actual tabs (as links)
     > a {
@@ -84,7 +84,7 @@
       border: 1px solid transparent;
       border-radius: @border-radius-base @border-radius-base 0 0;
       &:hover {
-        border-color: @grayLighter @grayLighter #ddd;
+        border-color: @gray-lighter @gray-lighter #ddd;
       }
     }
 
@@ -96,7 +96,7 @@
       background-color: @body-bg;
       border: 1px solid #ddd;
       border-bottom-color: transparent;
-      cursor: default;      
+      cursor: default;
     }
   }
   // pulling this in mainly for less shorthand
@@ -128,7 +128,7 @@
     &.active > a:hover,
     &.active > a:focus {
       color: #fff;
-      background-color: @component-active-bg;      
+      background-color: @component-active-bg;
     }
   }
 }
@@ -141,7 +141,7 @@
     + li {
       > a {
         margin-top: 2px;
-        margin-left: 0; // no need for this gap between nav items        
+        margin-left: 0; // no need for this gap between nav items
       }
     }
   }
@@ -186,7 +186,7 @@
   font-size: 11px;
   font-weight: bold;
   line-height: @line-height-base;
-  color: @grayLight;
+  color: @gray-light;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   text-transform: uppercase;
 }
@@ -264,8 +264,8 @@
 .nav-pills .open .dropdown-toggle,
 .nav > li.dropdown.open.active > a:hover {
   color: #fff;
-  background-color: @grayLight;
-  border-color: @grayLight;
+  background-color: @gray-light;
+  border-color: @gray-light;
 }
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
@@ -277,7 +277,7 @@
 
 // Dropdowns in stacked tabs
 .tabs-stacked .open > a:hover {
-  border-color: @grayLight;
+  border-color: @gray-light;
 }
 
 */

less/pager.less

@@ -32,7 +32,7 @@
       float: right;
     }
   }
-  
+
   .previous {
     > a,
     > span {
@@ -45,7 +45,7 @@
     > a:hover,
     > a:focus,
     > span {
-      color: @grayLight;
+      color: @gray-light;
       background-color: @pagination-bg;
       cursor: default;
     }

less/pagination.less

@@ -27,14 +27,14 @@
 }
 .pagination > .active > a,
 .pagination > .active > span {
-  color: @grayLight;
+  color: @gray-light;
   cursor: default;
 }
 .pagination > .disabled > span,
 .pagination > .disabled > a,
 .pagination > .disabled > a:hover,
 .pagination > .disabled > a:focus {
-  color: @grayLight;
+  color: @gray-light;
   background-color: @pagination-bg;
   cursor: default;
 }

less/type.less

@@ -28,9 +28,9 @@ em      { font-style: italic; }
 cite    { font-style: normal; }
 
 // Utility classes
-.text-muted          { color: @grayLight; }
+.text-muted          { color: @gray-light; }
 a.text-muted:hover,
-a.text-muted:focus   { color: darken(@grayLight, 10%); }
+a.text-muted:focus   { color: darken(@gray-light, 10%); }
 
 .text-warning        { color: @state-warning-text; }
 a.text-warning:hover,
@@ -60,7 +60,7 @@ h1, h2, h3, h4, h5, h6,
   small {
     font-weight: normal;
     line-height: 1;
-    color: @grayLight;
+    color: @gray-light;
   }
 }
 
@@ -100,7 +100,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
 .page-header {
   padding-bottom: ((@line-height-base / 2) - 1);
   margin: (@line-height-base * 2) 0 @line-height-base;
-  border-bottom: 1px solid @grayLighter;
+  border-bottom: 1px solid @gray-lighter;
 }
 
 
@@ -187,7 +187,7 @@ abbr[title],
 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted @grayLight;
+  border-bottom: 1px dotted @gray-light;
 }
 abbr.initialism {
   font-size: 90%;
@@ -198,7 +198,7 @@ abbr.initialism {
 blockquote {
   padding: (@line-height-base/2) @line-height-base;
   margin: 0 0 @line-height-base;
-  border-left: 5px solid @grayLighter;
+  border-left: 5px solid @gray-lighter;
   p {
     font-size: (@font-size-base * 1.25);
     font-weight: 300;
@@ -210,7 +210,7 @@ blockquote {
   small {
     display: block;
     line-height: @line-height-base;
-    color: @grayLight;
+    color: @gray-light;
     &:before {
       content: '\2014 \00A0';
     }
@@ -221,7 +221,7 @@ blockquote {
     float: right;
     padding-right: 15px;
     padding-left: 0;
-    border-right: 5px solid @grayLighter;
+    border-right: 5px solid @gray-lighter;
     border-left: 0;
     p,
     small {

less/variables.less

@@ -10,11 +10,11 @@
 // Grays
 // -------------------------
 
-@grayDarker:            #222;
-@grayDark:              #333;
-@gray:                  #555;
-@grayLight:             #999;
-@grayLighter:           #eee;
+@gray-darker:            lighten(#000, 13.5%); // #222
+@gray-dark:              lighten(#000, 20%);   // #333
+@gray:                   lighten(#000, 33.5%); // #555
+@gray-light:             lighten(#000, 60%);   // #999
+@gray-lighter:           lighten(#000, 93.5%); // #eee
 
 // Brand colors
 // -------------------------
@@ -29,7 +29,7 @@
 // -------------------------
 
 @body-bg:               #fff;
-@text-color:            @grayDark;
+@text-color:            @gray-dark;
 
 // Links
 // -------------------------
@@ -109,12 +109,12 @@
 // -------------------------
 
 @input-bg:                       #fff;
-@input-bg-disabled:              @grayLighter;
+@input-bg-disabled:              @gray-lighter;
 
 @input-border:                   #ccc;
 @input-border-radius:            @border-radius-base;
 
-@input-color-placeholder:        @grayLight;
+@input-color-placeholder:        @gray-light;
 
 @input-height-base:              (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
 @input-height-large:             (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
@@ -134,7 +134,7 @@
 @dropdown-link-active-color:     #fff;
 @dropdown-link-active-bg:        @component-active-bg;
 
-@dropdown-link-color:            @grayDark;
+@dropdown-link-color:            @gray-dark;
 @dropdown-link-hover-color:      #fff;
 @dropdown-link-hover-bg:         @dropdown-link-active-bg;
 
@@ -184,11 +184,11 @@
 @navbar-brand-hover-bg:            transparent;
 
 // Inverted navbar
-@navbar-inverse-text:                       @grayLight;
+@navbar-inverse-text:                       @gray-light;
 @navbar-inverse-bg:                         #222;
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 @grayLight;
+@navbar-inverse-link-color:                 @gray-light;
 @navbar-inverse-link-hover-color:           #fff;
 @navbar-inverse-link-hover-bg:              transparent;
 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
@@ -220,7 +220,7 @@
 // Jumbotron
 // -------------------------
 
-@jumbotron-bg:                   @grayLighter;
+@jumbotron-bg:                   @gray-lighter;
 @jumbotron-heading-color:        inherit;
 @jumbotron-lead-color:           inherit;
 
@@ -363,7 +363,7 @@
 // -------------------------
 
 // Hr border color
-@hr-border:                   @grayLighter;
+@hr-border:                   @gray-lighter;
 
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;