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

4 files changed, 41 insertions, 23 deletions

diff --git a/lib/alerts.less b/lib/alerts.less
index 53a43c6e4..20e935fa9 100644
--- a/lib/alerts.less
+++ b/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;
-  border: 1px solid #f3edd2;
+  background-color: @warningBackground;
+  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;
-  border-color: #cfe8c4;  
+  background-color: @successBackground;
+  border-color: @successBorder;  
 }
 .alert-success,
 .alert-success .alert-heading {
-  color: #468847;
+  color: @successText;
 }
 .alert-danger,
 .alert-error {
-  background-color: #f2dede;
-  border-color: #e9c7c7;
+  background-color: @errorBackground;
+  border-color: @errorBorder;
 }
 .alert-danger,
 .alert-error,
 .alert-danger .alert-heading,
 .alert-error .alert-heading {
-  color: #B94A48;
+  color: @errorText;
 }
 .alert-info {
-  background-color: #d9edf7;
-  border-color: #bfe1f2;
+  background-color: @infoBackground;
+  border-color: @infoBorder;
 }
 .alert-info,
 .alert-info .alert-heading {
-  color: #3a87ad;
+  color: @infoText;
 }
 
 
diff --git a/lib/forms.less b/lib/forms.less
index 1f424abaa..2b24fb2f0 100644
--- a/lib/forms.less
+++ b/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
diff --git a/lib/mixins.less b/lib/mixins.less
index a54f6762f..e64b80ad3 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -48,7 +48,7 @@
 
 // Placeholder text
 // -------------------------
-.placeholder(@color: @placeHolderText) {
+.placeholder(@color: @placeholderText) {
   :-moz-placeholder {
     color: @color;
   }
diff --git a/lib/variables.less b/lib/variables.less
index 674a358bf..3c4f562ca 100644
--- a/lib/variables.less
+++ b/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;
+