revamp alert message and error state color/text/bg to be variables

bootstrap.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Tue Jan 24 16:18:56 PST 2012
+ * Date: Tue Jan 24 16:50:16 PST 2012
  */
 article,
 aside,
@@ -701,58 +701,58 @@ textarea[readonly] {
   border-color: #ddd;
   cursor: not-allowed;
 }
-.control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline {
-  color: #b94a48;
-}
-.control-group.error input, .control-group.error textarea {
-  color: #b94a48;
-  border-color: #ee5f5b;
-}
-.control-group.error input:focus, .control-group.error textarea:focus {
-  border-color: #e9322d;
-  -webkit-box-shadow: 0 0 6px #f8b9b7;
-  -moz-box-shadow: 0 0 6px #f8b9b7;
-  box-shadow: 0 0 6px #f8b9b7;
-}
-.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on {
-  color: #b94a48;
-  background-color: #fce6e6;
-  border-color: #b94a48;
-}
 .control-group.warning > label, .control-group.warning .help-block, .control-group.warning .help-inline {
   color: #c09853;
 }
 .control-group.warning input, .control-group.warning textarea {
   color: #c09853;
-  border-color: #ccae64;
+  border-color: #f3edd2;
 }
 .control-group.warning input:focus, .control-group.warning textarea:focus {
-  border-color: #be9a3f;
+  border-color: #e8ddaa;
-  -webkit-box-shadow: 0 0 6px #e5d6b1;
+  -webkit-box-shadow: 0 0 6px #ffffff;
-  -moz-box-shadow: 0 0 6px #e5d6b1;
+  -moz-box-shadow: 0 0 6px #ffffff;
-  box-shadow: 0 0 6px #e5d6b1;
+  box-shadow: 0 0 6px #ffffff;
 }
 .control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on {
   color: #c09853;
-  background-color: #d2b877;
+  background-color: #fcf8e3;
   border-color: #c09853;
 }
+.control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline {
+  color: #b94a48;
+}
+.control-group.error input, .control-group.error textarea {
+  color: #b94a48;
+  border-color: #e9c7c7;
+}
+.control-group.error input:focus, .control-group.error textarea:focus {
+  border-color: #dba2a2;
+  -webkit-box-shadow: 0 0 6px #ffffff;
+  -moz-box-shadow: 0 0 6px #ffffff;
+  box-shadow: 0 0 6px #ffffff;
+}
+.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #b94a48;
+}
 .control-group.success > label, .control-group.success .help-block, .control-group.success .help-inline {
   color: #468847;
 }
 .control-group.success input, .control-group.success textarea {
   color: #468847;
-  border-color: #57a957;
+  border-color: #cfe8c4;
 }
 .control-group.success input:focus, .control-group.success textarea:focus {
-  border-color: #458845;
+  border-color: #b1da9f;
-  -webkit-box-shadow: 0 0 6px #9acc9a;
+  -webkit-box-shadow: 0 0 6px #ffffff;
-  -moz-box-shadow: 0 0 6px #9acc9a;
+  -moz-box-shadow: 0 0 6px #ffffff;
-  box-shadow: 0 0 6px #9acc9a;
+  box-shadow: 0 0 6px #ffffff;
 }
 .control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on {
   color: #468847;
-  background-color: #bcddbc;
+  background-color: #dff0d8;
   border-color: #468847;
 }
 input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
@@ -2648,7 +2648,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .alert-error,
 .alert-danger .alert-heading,
 .alert-error .alert-heading {
-  color: #B94A48;
+  color: #b94a48;
 }
 .alert-info {
   background-color: #d9edf7;

bootstrap.min.css

@@ -142,15 +142,15 @@ select.span10{width:790px;}
 select.span11{width:870px;}
 select.span12{width:950px;}
 input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
-.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
-.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
-.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;}
 .control-group.warning>label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853;}
-.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#ccae64;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;}
+.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#f3edd2;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#e8ddaa;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
-.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;}
+.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853;}
+.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
+.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#e9c7c7;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#dba2a2;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
+.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#f2dede;border-color:#b94a48;}
 .control-group.success>label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847;}
-.control-group.success input,.control-group.success textarea{color:#468847;border-color:#57a957;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;}
+.control-group.success input,.control-group.success textarea{color:#468847;border-color:#cfe8c4;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#b1da9f;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;}
-.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;}
+.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#dff0d8;border-color:#468847;}
 input:focus:required:invalid,textarea:focus:required:invalid,select:focus:required:invalid{color:#b94a48;border-color:#ee5f5b;}input:focus:required:invalid:focus,textarea:focus:required:invalid:focus,select:focus:required:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
 .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
 .uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
@@ -486,7 +486,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .alert-success{background-color:#dff0d8;border-color:#cfe8c4;}
 .alert-success,.alert-success .alert-heading{color:#468847;}
 .alert-danger,.alert-error{background-color:#f2dede;border-color:#e9c7c7;}
-.alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading{color:#B94A48;}
+.alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading{color:#b94a48;}
 .alert-info{background-color:#d9edf7;border-color:#bfe1f2;}
 .alert-info,.alert-info .alert-heading{color:#3a87ad;}
 .alert-block{padding-top:14px;padding-bottom:14px;}

docs/less.html

@@ -159,23 +159,23 @@
                 </tr>
                 <tr>
                   <td><code>@grayDarker</code></td>
-                  <td><code>#222</code></td>
+                  <td>#222</td>
                 </tr>
                 <tr>
                   <td><code>@grayDark</code></td>
-                  <td><code>#333</code></td>
+                  <td>#333</td>
                 </tr>
                 <tr>
                   <td><code>@gray</code></td>
-                  <td><code>#555</code></td>
+                  <td>#555</td>
                 </tr>
                 <tr>
                   <td><code>@grayLight</code></td>
-                  <td><code>#999</code></td>
+                  <td>#999</td>
                 </tr>
                 <tr>
                   <td><code>@grayLighter</code></td>
-                  <td><code>#eee</code></td>
+                  <td>#eee</td>
                 </tr>
                 <tr>
                   <td><code>@white</code></td>
@@ -283,22 +283,54 @@
             </table>
           </div>
         </div> <!-- /row -->
-        <div class="row">
+
-          <div class="span3">
+        <h3>Components</h3>
-            <h3>Visuals</h3>
-          </div>
-          <div class="span9">
         <table class="table table-bordered table-striped">
+          <thead>
+            <tr>
+              <th colspan="2" class="span3">Buttons</th>
+            </tr>
+          </thead>
           <tbody>
             <tr>
               <td><code>@primaryButtonColor</code></td>
               <td><code>@blue</code></td>
-                  <td></td>
+            </tr>
+          </tbody>
+          
+          <thead>
+            <tr>
+              <th colspan="2" class="span3">Buttons</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>@placeholderText</code></td>
+              <td><code>@grayLight</code></td>
+            </tr>
+          </tbody>
+
+          <thead>
+            <tr>
+              <th colspan="2" class="span3">Navbars</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>@navbarHeight</code></td>
+              <td>40px</td>
+            </tr>
+            <tr>
+              <td><code>@navbarBackground</code></td>
+              <td><code>@grayDarker</code></td>
+            </tr>
+            <tr>
+              <td><code>@navbarBackgroundHighlight</code></td>
+              <td><code>@grayDark</code></td>
             </tr>
           </tbody>
         </table>
-          </div>
+
-        </div> <!-- /row -->
       </section>
 
 

docs/templates/pages/less.mustache

@@ -99,23 +99,23 @@
                 </tr>
                 <tr>
                   <td><code>@grayDarker</code></td>
-                  <td><code>#222</code></td>
+                  <td>#222</td>
                 </tr>
                 <tr>
                   <td><code>@grayDark</code></td>
-                  <td><code>#333</code></td>
+                  <td>#333</td>
                 </tr>
                 <tr>
                   <td><code>@gray</code></td>
-                  <td><code>#555</code></td>
+                  <td>#555</td>
                 </tr>
                 <tr>
                   <td><code>@grayLight</code></td>
-                  <td><code>#999</code></td>
+                  <td>#999</td>
                 </tr>
                 <tr>
                   <td><code>@grayLighter</code></td>
-                  <td><code>#eee</code></td>
+                  <td>#eee</td>
                 </tr>
                 <tr>
                   <td><code>@white</code></td>
@@ -223,22 +223,66 @@
             </table>
           </div>
         </div> <!-- /row -->
-        <div class="row">
+
-          <div class="span3">
+        <h3>{{_i}}Components{{/i}}</h3>
-            <h3>{{_i}}Visuals{{/i}}</h3>
-          </div>
-          <div class="span9">
         <table class="table table-bordered table-striped">
+          <thead>
+            <tr>
+              <th colspan="2">{{_i}}Buttons{{/i}}</th>
+            </tr>
+          </thead>
           <tbody>
             <tr>
               <td><code>@primaryButtonColor</code></td>
               <td><code>@blue</code></td>
-                  <td></td>
+            </tr>
+          </tbody>
+
+          <thead>
+            <tr>
+              <th colspan="2">{{_i}}Buttons{{/i}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>@placeholderText</code></td>
+              <td><code>@grayLight</code></td>
+            </tr>
+          </tbody>
+
+          <thead>
+            <tr>
+              <th colspan="2">{{_i}}Navbars{{/i}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>@navbarHeight</code></td>
+              <td>40px</td>
+            </tr>
+            <tr>
+              <td><code>@navbarBackground</code></td>
+              <td><code>@grayDarker</code></td>
+            </tr>
+            <tr>
+              <td><code>@navbarBackgroundHighlight</code></td>
+              <td><code>@grayDark</code></td>
+            </tr>
+          </tbody>
+          
+          <thead>
+            <tr>
+              <th colspan="2">{{_i}}Buttons{{/i}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>@placeholderText</code></td>
+              <td><code>@grayLight</code></td>
             </tr>
           </tbody>
         </table>
-          </div>
+
-        </div> <!-- /row -->
       </section>
 
 

lib/alerts.less

@@ -6,13 +6,13 @@
   padding: 8px 35px 8px 14px;
   margin-bottom: @baseLineHeight;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  background-color: #fcf8e3;
+  background-color: @warningBackground;
-  border: 1px solid #f3edd2;
+  border: 1px solid @warningBorder;
   .border-radius(4px);
 }
 .alert,
 .alert-heading {
-  color: #c09853;
+  color: @warningText;
 }
 
 // Adjust close link position
@@ -26,31 +26,31 @@
 // ----------------
 
 .alert-success {
-  background-color: #dff0d8;
+  background-color: @successBackground;
-  border-color: #cfe8c4;  
+  border-color: @successBorder;  
 }
 .alert-success,
 .alert-success .alert-heading {
-  color: #468847;
+  color: @successText;
 }
 .alert-danger,
 .alert-error {
-  background-color: #f2dede;
+  background-color: @errorBackground;
-  border-color: #e9c7c7;
+  border-color: @errorBorder;
 }
 .alert-danger,
 .alert-error,
 .alert-danger .alert-heading,
 .alert-error .alert-heading {
-  color: #B94A48;
+  color: @errorText;
 }
 .alert-info {
-  background-color: #d9edf7;
+  background-color: @infoBackground;
-  border-color: #bfe1f2;
+  border-color: @infoBorder;
 }
 .alert-info,
 .alert-info .alert-heading {
-  color: #3a87ad;
+  color: @infoText;
 }
 
 

lib/forms.less

@@ -295,17 +295,17 @@ textarea[readonly] {
     border-color: @textColor;
   }
 }
-// Error
-.control-group.error {
-  .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
-}
 // Warning
 .control-group.warning {
-  .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+  .formFieldState(@warningText, @warningBorder, @warningBackground);
+}
+// Error
+.control-group.error {
+  .formFieldState(@errorText, @errorBorder, @errorBackground);
 }
 // Success
 .control-group.success {
-  .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+  .formFieldState(@successText, @successBorder, @successBackground);
 }
 
 // HTML5 invalid states

lib/mixins.less

@@ -48,7 +48,7 @@
 
 // Placeholder text
 // -------------------------
-.placeholder(@color: @placeHolderText) {
+.placeholder(@color: @placeholderText) {
   :-moz-placeholder {
     color: @color;
   }

lib/variables.less

@@ -52,11 +52,9 @@
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
-// Input placeholder text color
-@placeHolderText:       @grayLight;
-
 // Z-index master list
 // Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
 @zindexDropdown:        1000;
 @zindexPopover:         1010;
 @zindexTooltip:         1020;
@@ -64,9 +62,29 @@
 @zindexModalBackdrop:   1040;
 @zindexModal:           1050;
 
+// Input placeholder text color
+@placeholderText:       @grayLight;
+
 // Navbar
-@navBarHeight:                    40px;
+@navbarHeight:                    40px;
 @navbarBackground:                @grayDarker;
 @navbarBackgroundHighlight:       @grayDark;
 
+// Form states and alerts
+@warningText:             #c09853;
+@warningBackground:       #fcf8e3;
+@warningBorder:           #f3edd2;
+
+@errorText:               #b94a48;
+@errorBackground:         #f2dede;
+@errorBorder:             #e9c7c7;
+
+@successText:             #468847;
+@successBackground:       #dff0d8;
+@successBorder:           #cfe8c4;
+
+@infoText:                #3a87ad;
+@infoBackground:          #d9edf7;
+@infoBorder:              #bfe1f2;
+