From d3e922f0c8dc309bc609ebd75fd7e90134c1eaca Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Mon, 5 Mar 2012 00:29:16 -0800
Subject: add a ton new variables for type, buttons, inputs

---
 less/buttons.less     | 18 ++++++++---------
 less/forms.less       | 14 ++++++-------
 less/scaffolding.less |  2 +-
 less/variables.less   | 56 +++++++++++++++++++++++++++++++++++++++++++++------
 4 files changed, 67 insertions(+), 23 deletions(-)

(limited to 'less')

diff --git a/less/buttons.less b/less/buttons.less
index 85f18ff0c..f93cd01a9 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -16,9 +16,9 @@
   text-align: center;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
   vertical-align: middle;
-  .buttonBackground(@white, darken(@white, 10%));
-  border: 1px solid #ccc;
-  border-bottom-color: #bbb;
+  .buttonBackground(@btnBackground, @btnBackgroundHighlight);
+  border: 1px solid @btnBorder;
+  border-bottom-color: darken(@btnBorder, 10%);
   .border-radius(4px);
   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   .box-shadow(@shadow);
@@ -132,27 +132,27 @@
 // Set the backgrounds
 // -------------------------
 .btn-primary {
-  .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
+  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
 }
 // Warning appears are orange
 .btn-warning {
-  .buttonBackground(lighten(@orange, 15%), @orange);
+  .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
 }
 // Danger and error appear as red
 .btn-danger {
-  .buttonBackground(#ee5f5b, #bd362f);
+  .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
 }
 // Success appears as green
 .btn-success {
-  .buttonBackground(#62c462, #51a351);
+  .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
 }
 // Info appears as a neutral blue
 .btn-info {
-  .buttonBackground(#5bc0de, #2f96b4);
+  .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
 }
 // Inverse appears as dark gray
 .btn-inverse {
-  .buttonBackground(@gray, @grayDarker);
+  .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
 }
 
 
diff --git a/less/forms.less b/less/forms.less
index 7f02ce365..ec3e89e1a 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -71,7 +71,7 @@ select,
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @gray;
-  border: 1px solid #ccc;
+  border: 1px solid @inputBorder;
   .border-radius(3px);
 }
 .uneditable-textarea {
@@ -110,7 +110,7 @@ input[type="file"] {
   padding: initial;
   line-height: initial;
   border: initial;
-  background-color: @white;
+  background-color: @inputBackground;
   background-color: initial;
   .box-shadow(none);
 }
@@ -139,7 +139,7 @@ input[type="file"] {
 // Chrome on Linux and Mobile Safari need background-color
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
-  background-color: @white;
+  background-color: @inputBackground;
 }
 
 // Make multiple select elements height not fixed
@@ -268,7 +268,7 @@ textarea[disabled],
 input[readonly],
 select[readonly],
 textarea[readonly] {
-  background-color: #f5f5f5;
+  background-color: @inputDisabledBackground;
   border-color: #ddd;
   cursor: not-allowed;
 }
@@ -314,7 +314,7 @@ select:focus:required:invalid {
   padding: (@baseLineHeight - 1) 20px @baseLineHeight;
   margin-top: @baseLineHeight;
   margin-bottom: @baseLineHeight;
-  background-color: #f5f5f5;
+  background-color: #grayLight;
   border-top: 1px solid #ddd;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
 }
@@ -322,7 +322,7 @@ select:focus:required:invalid {
 // For text that needs to appear as an input but should not be an input
 .uneditable-input {
   display: block;
-  background-color: @white;
+  background-color: @inputBackground;
   border-color: #eee;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
   cursor: not-allowed;
@@ -387,7 +387,7 @@ select:focus:required:invalid {
     line-height: @baseLineHeight;
     text-align: center;
     text-shadow: 0 1px 0 @white;
-    background-color: #f5f5f5;
+    background-color: #grayLight;
     border: 1px solid #ccc;
     .border-radius(3px 0 0 3px);
   }
diff --git a/less/scaffolding.less b/less/scaffolding.less
index c2e683ac6..57c74eda0 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -12,7 +12,7 @@ body {
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @textColor;
-  background-color: @white;
+  background-color: @bodyBackground;
 }
 
 
diff --git a/less/variables.less b/less/variables.less
index 3d448ab21..5bcddfb33 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -7,10 +7,6 @@
 // GLOBAL VALUES
 // --------------------------------------------------
 
-// Links
-@linkColor:             #08c;
-@linkColorHover:        darken(@linkColor, 15%);
-
 // Grays
 @black:                 #000;
 @grayDarker:            #222;
@@ -30,14 +26,57 @@
 @pink:                  #c3325f;
 @purple:                #7a43b6;
 
+// Scaffolding
+@bodyBackground:        @white;
+@textColor:             @grayDark;
+
+// Links
+@linkColor:             #08c;
+@linkColorHover:        #069;
+
 // Typography
 @baseFontSize:          13px;
 @baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
 @baseLineHeight:        18px;
-@textColor:             @grayDark;
+@altFontFamily:         Georgia, "Times New Roman", Times, serif;
+
+@headingsFontFamily:    ''; // empty to use BS default, @baseFontFamily
+@headingsFontWeight:    normal; // instead of browser default, bold
+@headingsColor:         ''; // empty to use BS default, @textColor
 
 // Buttons
-@primaryButtonBackground:    @linkColor;
+@btnBackground:                     @white;
+@btnBackgroundHighlight:            darken(@white, 10%);
+@btnBorder:                         #ccc;
+
+@btnPrimaryBackground:              @linkColor;
+@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
+
+@btnInfoBackground:                 #5bc0de;
+@btnInfoBackgroundHighlight:        #2f96b4;
+
+@btnSuccessBackground:              #62c462;
+@btnSuccessBackgroundHighlight:     #51a351;
+
+@btnWarningBackground:              lighten(@orange, 15%);
+@btnWarningBackgroundHighlight:     @orange;
+
+@btnDangerBackground:               #ee5f5b;
+@btnDangerBackgroundHighlight:      #bd362f;
+
+@btnInverseBackground:              @gray;
+@btnInverseBackgroundHighlight:     @grayDarker;
+
+// Forms
+@inputBackground:               @white;
+@inputBorder:                   #ccc;
+
+@inputDisabledBackground:       @grayLighter;
+
+// Dropdowns
+@dropdownLinkColor:             @grayDark;
+@dropdownLinkColorHover:        @white;
+@dropdownLinkBackgroundHover:   @grayDark;
 
 
 
@@ -74,6 +113,11 @@
 @navbarLinkColor:                 @grayLight;
 @navbarLinkColorHover:            @white;
 
+// Hero unit
+@heroUnitBackground:              #312f2e;
+@heroUnitHeadingColor:            @white;
+@heroUnitLeadColor:               @white;
+
 // Form states and alerts
 @warningText:             #c09853;
 @warningBackground:       #fcf8e3;
-- 
cgit v1.2.3