Update carousel vars

* Remove `@carousel-control-hover-color` since that's just the same as
the default control color and all we change is `opacity` (it's required
for specificity).
* Add vars to customizer
* Update customizer nav to include new section
* Remove the `li` from the var names
* Consolidate and simplify `text-shadow` vars

4 files changed, 23 insertions, 9 deletions

diff --git a/_includes/nav-customize.html b/_includes/nav-customize.html
index e4b2e1447..c299badc5 100644
--- a/_includes/nav-customize.html
+++ b/_includes/nav-customize.html
@@ -21,6 +21,7 @@
     <li><a href="#variables-breadcrumbs">Breadcrumbs</a></li>
     <li><a href="#variables-jumbotron">Jumbotron</a></li>
     <li><a href="#variables-modals">Modals</a></li>
+    <li><a href="#variables-carousel">Carousel</a></li>
     <li><a href="#variables-list-group">List group</a></li>
     <li><a href="#variables-thumbnails">Thumbnails</a></li>
     <li><a href="#variables-progress">Progress bars</a></li>
diff --git a/customize.html b/customize.html
index 8d70d0445..2ba72ba78 100644
--- a/customize.html
+++ b/customize.html
@@ -976,6 +976,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <p class="help-block">Jumbotron lead paragraph color</p>
         </div>
       </div>
+
       <h2 id="variables-modals">Modals</h2>
       <div class="row">
         <div class="col-lg-4">
@@ -994,6 +995,19 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <p class="help-block">Modal title line-height</p>
         </div>
       </div>
+
+      <h2 id="variables-carousel">Carousel</h2>
+      <label>@carousel-text-shadow</label>
+      <input type="text" placeholder="0 1px 2px rgba(0,0,0,.6)">
+      <label>@carousel-control-color</label>
+      <input type="text" placeholder="#fff">
+      <label>@carousel-indicator-border-color</label>
+      <input type="text" placeholder="#fff">
+      <label>@carousel-indicator-active-bg</label>
+      <input type="text" placeholder="#fff">
+      <label>@carousel-caption-color</label>
+      <input type="text" placeholder="#fff">
+
       <h2 id="variables-list-group">List group</h2>
       <h3>Background</h3>
       <div class="row">
diff --git a/less/carousel.less b/less/carousel.less
index d7dfdf9f6..ff540dff7 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -93,7 +93,7 @@
   // Hover/focus state
   &:hover,
   &:focus {
-    color: @carousel-control-hover-color;
+    color: @carousel-control-color;
     text-decoration: none;
     .opacity(.9);
   }
@@ -144,7 +144,7 @@
     height: 10px;
     margin: 1px;
     text-indent: -999px;
-    border: 1px solid @carousel-indicators-li-border-color;
+    border: 1px solid @carousel-indicator-border-color;
     border-radius: 10px;
     cursor: pointer;
   }
@@ -152,7 +152,7 @@
     margin: 0;
     width:  12px;
     height: 12px;
-    background-color: @carousel-indicators-active-bg;
+    background-color: @carousel-indicator-active-bg;
   }
 }
 
@@ -169,7 +169,7 @@
   padding-bottom: 20px;
   color: @carousel-caption-color;
   text-align: center;
-  text-shadow: @carousel-caption-text-shadow;
+  text-shadow: @carousel-text-shadow;
   & .btn {
     text-shadow: none; // No shadow for button elements in carousel-caption
   }
diff --git a/less/variables.less b/less/variables.less
index 6d16346b9..885ea1d40 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -409,15 +409,14 @@
 
 // Carousel
 // ------------------------
+@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
 @carousel-control-color:                      #fff;
-@carousel-control-hover-color:                #fff;
-@carousel-control-text-shadow:                0 1px 2px rgba(0,0,0,.6);
 
-@carousel-indicators-active-bg:               #fff;
-@carousel-indicators-li-border-color:         #fff;
+@carousel-indicator-border-color:             #fff;
+@carousel-indicator-active-bg:                #fff;
 
 @carousel-caption-color:                      #fff;
-@carousel-caption-text-shadow:                0 1px 2px rgba(0,0,0,.6);
 
 
 // Close