update variables to inlude @baseFontSize, @baseFontFamily, @baseLineHeight for easier customization; added placeholder for @primaryButtonColor, but didn't implement

7 files changed, 100 insertions, 83 deletions

diff --git a/lib/forms.less b/lib/forms.less
index 56325daa9..b657e53d6 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -8,16 +8,16 @@
 
 // Make all forms have space below them
 form {
-  margin-bottom: @baseline;
+  margin-bottom: @baseLineHeight;
 }
 
 // Groups of fields with labels on top (legends)
 legend {
   display: block;
   width: 100%;
-  margin-bottom: @baseline * 1.5;
-  font-size: @basefont * 1.5;
-  line-height: @baseline * 2;
+  margin-bottom: @baseLineHeight * 1.5;
+  font-size: @baseFontSize * 1.5;
+  line-height: @baseLineHeight * 2;
   color: @grayDark;
   border-bottom: 1px solid #eee;
 }
@@ -27,7 +27,7 @@ label,
 input,
 select,
 textarea {
-  #font > .sans-serif(normal,@basefont,@baseline);
+  #font > .sans-serif(normal,@baseFontSize,@baseLineHeight);
 }
 
 // Identify controls by their labels
@@ -50,10 +50,10 @@ select,
 .uneditable-input {
   display: inline-block;
   width: 210px;
-  height: @baseline;
+  height: @baseLineHeight;
   padding: 4px;
-  font-size: @basefont;
-  line-height: @baseline;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
   color: @gray;
   border: 1px solid #ccc;
   .border-radius(3px);
@@ -90,8 +90,8 @@ input[type=submit] {
 
 select,
 input[type=file] {
-  height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
-  line-height: @baseline * 1.5;
+  height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
+  line-height: @baseLineHeight * 1.5;
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
 }
 
@@ -200,7 +200,7 @@ textarea[readonly] {
 // Style the background of control-groups with errors
 .has-error {
   background: lighten(@red, 55%);
-  padding: (@baseline / 2) 0;
+  padding: (@baseLineHeight / 2) 0;
   margin: -10px 0 10px;
   .border-radius(4px);
   > label,
@@ -234,9 +234,9 @@ textarea[readonly] {
 // ------------
 
 .form-actions {
-  padding: (@baseline - 1) 20px @baseline;
-  margin-top: @baseline;
-  margin-bottom: @baseline;
+  padding: (@baseLineHeight - 1) 20px @baseLineHeight;
+  margin-top: @baseLineHeight;
+  margin-bottom: @baseLineHeight;
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
 }
@@ -375,7 +375,7 @@ textarea[readonly] {
 
 // Margin to space out fieldsets
 .control-group {
-  margin-bottom: @baseline;
+  margin-bottom: @baseLineHeight;
 }
 
 // Bold the labels so they stand out
diff --git a/lib/mixins.less b/lib/mixins.less
index 131d14278..c43f16632 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -46,25 +46,25 @@
 
 // Font Stacks
 #font {
-  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+  .shorthand(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
     font-size: @size;
     font-weight: @weight;
     line-height: @lineHeight;
   }
-  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+  .sans-serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: @size;
     font-weight: @weight;
     line-height: @lineHeight;
   }
-  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+  .serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
     font-family: "Georgia", Times New Roman, Times, serif;
     font-size: @size;
     font-weight: @weight;
     line-height: @lineHeight;
   }
-  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
-    font-family: "Monaco", Courier New, monospace;
+  .monospace(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) {
+    font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
     font-size: @size;
     font-weight: @weight;
     line-height: @lineHeight;
diff --git a/lib/patterns.less b/lib/patterns.less
index 8add82c16..1b27b7184 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -313,7 +313,7 @@
     > a {
       padding: 0 15px;
       margin-right: 2px;
-      line-height: @baseline * 2;
+      line-height: @baseLineHeight * 2;
       border: 1px solid transparent;
       .border-radius(4px 4px 0 0);
       &:hover {
@@ -387,7 +387,7 @@
 // -----------
 
 .breadcrumb {
-  margin: 0 0 @baseline;
+  margin: 0 0 @baseLineHeight;
   padding: 7px 14px;
   #gradient > .vertical(#ffffff, #f5f5f5);
   border: 1px solid #ddd;
@@ -424,12 +424,12 @@
   p {
     font-size: 18px;
     font-weight: 200;
-    line-height: @baseline * 1.5;
+    line-height: @baseLineHeight * 1.5;
   }
 }
 footer {
-  margin-top: @baseline - 1;
-  padding-top: @baseline - 1;
+  margin-top: @baseLineHeight - 1;
+  padding-top: @baseLineHeight - 1;
   border-top: 1px solid #eee;
 }
 
@@ -438,11 +438,11 @@ footer {
 // ------------
 
 .page-header {
-  margin-bottom: @baseline - 1;
+  margin-bottom: @baseLineHeight - 1;
   border-bottom: 1px solid #ddd;
   .box-shadow(0 1px 0 rgba(255,255,255,.5));
   h1 {
-    margin-bottom: (@baseline / 2) - 1px;
+    margin-bottom: (@baseLineHeight / 2) - 1px;
   }
 }
 
@@ -488,7 +488,7 @@ footer {
   padding: 5px 14px 6px;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
   color: #333;
-  font-size: @basefont;
+  font-size: @baseFontSize;
   line-height: normal;
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
@@ -540,14 +540,14 @@ footer {
 
   // Button Sizes
   &.large {
-    font-size: @basefont + 2px;
+    font-size: @baseFontSize + 2px;
     line-height: normal;
     padding: 9px 14px 9px;
     .border-radius(6px);
   }
   &.small {
     padding: 7px 9px 7px;
-    font-size: @basefont - 2px;
+    font-size: @baseFontSize - 2px;
   }
 }
 // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
@@ -621,7 +621,7 @@ input[type=submit].btn {
   color: @black;
   font-size: 20px;
   font-weight: bold;
-  line-height: @baseline * .75;
+  line-height: @baseLineHeight * .75;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   .opacity(20);
   &:hover {
@@ -639,7 +639,7 @@ input[type=submit].btn {
 .alert-message {
   position: relative;
   padding: 7px 15px;
-  margin-bottom: @baseline;
+  margin-bottom: @baseLineHeight;
   color: @grayDark;
   .gradientBar(#fceec1, #eedc94); // warning by default
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
@@ -655,7 +655,7 @@ input[type=submit].btn {
 
   // Remove extra margin from content
   h5 {
-    line-height: @baseline;
+    line-height: @baseLineHeight;
   }
   p {
     margin-bottom: 0;
@@ -715,8 +715,8 @@ input[type=submit].btn {
 // ----------
 
 .pagination {
-  height: @baseline * 2;
-  margin: @baseline 0;
+  height: @baseLineHeight * 2;
+  margin: @baseLineHeight 0;
   ul {
     float: left;
     margin: 0;
@@ -731,7 +731,7 @@ input[type=submit].btn {
   a {
     float: left;
     padding: 0 14px;
-    line-height: (@baseline * 2) - 2;
+    line-height: (@baseLineHeight * 2) - 2;
     border-right: 1px solid;
     border-right-color: #ddd;
     border-right-color: rgba(0,0,0,.15);
@@ -972,7 +972,7 @@ input[type=submit].btn {
 .label {
   padding: 1px 3px 2px;
   background-color: @grayLight;
-  font-size: @basefont * .75;
+  font-size: @baseFontSize * .75;
   font-weight: bold;
   color: @white;
   text-transform: uppercase;
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 26bb0cc05..b6852535c 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -12,7 +12,9 @@ html, body {
 }
 body {
   margin: 0;
-  #font > .sans-serif(normal,@basefont,@baseline);
+  font-family: @baseFontFamily;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
   color: @grayDark;
 }
 
diff --git a/lib/tables.less b/lib/tables.less
index 988483f0e..8a786ffd2 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -9,16 +9,16 @@
 
 table {
   width: 100%;
-  margin-bottom: @baseline;
+  margin-bottom: @baseLineHeight;
   padding: 0;
   border-collapse: separate; // Done so we can round those corners!
   *border-collapse: collapse; /* IE7, collapse table to remove spacing */
-  font-size: @basefont;
+  font-size: @baseFontSize;
   border: 1px solid #ddd;
   .border-radius(4px);
   th, td {
     padding: 10px 10px 9px;
-    line-height: @baseline;
+    line-height: @baseLineHeight;
     text-align: left;
   }
   th {
diff --git a/lib/type.less b/lib/type.less
index ea1f289e7..4232a24df 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -7,10 +7,12 @@
 // ---------
 
 p {
-  #font > .shorthand(normal,@basefont,@baseline);
-  margin-bottom: @baseline / 2;
+  font-family: @baseFontFamily;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
+  margin-bottom: @baseLineHeight / 2;
   small {
-    font-size: @basefont - 2;
+    font-size: @baseFontSize - 2;
     color: @grayLight;
   }
 }
@@ -27,22 +29,22 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 h1 {
-  margin-bottom: @baseline;
+  margin-bottom: @baseLineHeight;
   font-size: 30px;
-  line-height: @baseline * 2;
+  line-height: @baseLineHeight * 2;
   small {
     font-size: 18px;
   }
 }
 h2 {
   font-size: 24px;
-  line-height: @baseline * 2;
+  line-height: @baseLineHeight * 2;
   small {
     font-size: 14px;
   }
 }
 h3 {
-  line-height: @baseline * 2;
+  line-height: @baseLineHeight * 2;
   font-size: 18px;
   small {
     font-size: 14px;
@@ -50,18 +52,18 @@ h3 {
 }
 h4 {
   font-size: 16px;
-  line-height: @baseline * 2;
+  line-height: @baseLineHeight * 2;
   small {
     font-size: 12px;
   }
 }
 h5 {
   font-size: 14px;
-  line-height: @baseline;
+  line-height: @baseLineHeight;
 }
 h6 {
   font-size: 13px;
-  line-height: @baseline;
+  line-height: @baseLineHeight;
   color: @grayLight;
   text-transform: uppercase;
 }
@@ -72,7 +74,7 @@ h6 {
 
 // Unordered and Ordered lists
 ul, ol {
-  margin: 0 0 @baseline 25px;
+  margin: 0 0 @baseLineHeight 25px;
 }
 ul ul,
 ul ol,
@@ -87,7 +89,7 @@ ol {
   list-style: decimal;
 }
 li {
-  line-height: @baseline;
+  line-height: @baseLineHeight;
   color: @gray;
 }
 ul.unstyled {
@@ -97,15 +99,15 @@ ul.unstyled {
 
 // Description Lists
 dl {
-  margin-bottom: @baseline;
+  margin-bottom: @baseLineHeight;
   dt, dd {
-    line-height: @baseline;
+    line-height: @baseLineHeight;
   }
   dt {
     font-weight: bold;
   }
   dd {
-    margin-left: @baseline / 2;
+    margin-left: @baseLineHeight / 2;
   }
 }
 
@@ -135,16 +137,16 @@ em {
 
 // Blockquotes
 blockquote {
-  margin-bottom: @baseline;
+  margin-bottom: @baseLineHeight;
   border-left: 5px solid #eee;
   padding-left: 15px;
   p {
-    #font > .shorthand(300,14px,@baseline);
+    #font > .shorthand(300,14px,@baseLineHeight);
     margin-bottom: 0;
   }
   small {
     display: block;
-    #font > .shorthand(300,12px,@baseline);
+    #font > .shorthand(300,12px,@baseLineHeight);
     color: @grayLight;
     &:before {
       content: '\2014 \00A0';
@@ -155,14 +157,14 @@ blockquote {
 // Addresses
 address {
   display: block;
-  line-height: @baseline;
-  margin-bottom: @baseline;
+  line-height: @baseLineHeight;
+  margin-bottom: @baseLineHeight;
 }
 
 // Inline and block code styles
 code, pre {
   padding: 0 3px 2px;
-  font-family: Monaco, Andale Mono, Courier New, monospace;
+  font-family: Menlo, Monaco, Andale Mono, Courier New, monospace;
   font-size: 12px;
   .border-radius(3px);
 }
@@ -174,9 +176,9 @@ code {
 pre {
   background-color: #f5f5f5;
   display: block;
-  padding: (@baseline - 1) / 2;
-  margin: 0 0 @baseline;
-  line-height: @baseline;
+  padding: (@baseLineHeight - 1) / 2;
+  margin: 0 0 @baseLineHeight;
+  line-height: @baseLineHeight;
   font-size: 12px;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.15);
diff --git a/lib/variables.less b/lib/variables.less
index dcb0a8ebf..864dbe8c0 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -3,19 +3,27 @@
  * ----------------------------------------------------- */
 
 
-// Links
+// LINK COLORS
+// -----------
+
 @linkColor:         #0069d6;
 @linkColorHover:    darken(@linkColor, 15);
 
-// Grays
+
+// GRAYS
+// -----
+
 @black:             #000;
-@grayDark:          #333;
-@gray:              #555;
-@grayLight:         #777;
-@grayLighter:       #ccc;
+@grayDark:          lighten(@black, 25%);
+@gray:              lighten(@black, 50%);
+@grayLight:         lighten(@black, 75%);
+@grayLighter:       lighten(@black, 90%);
 @white:             #fff;
 
-// Accent Colors
+
+// ACCENT COLORS
+// -------------
+
 @blue:              #049CDB;
 @blueDark:          #0064CD;
 @green:             #46a546;
@@ -25,11 +33,10 @@
 @pink:              #c3325f;
 @purple:            #7a43b6;
 
-// Baseline grid
-@basefont:          13px;
-@baseline:          18px;
 
-// Griditude
+// GRID
+// ----
+
 // Modify the grid styles in mixins.less
 @gridColumns:       16;
 @gridColumnWidth:   40px;
@@ -37,7 +44,10 @@
 @extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
 @siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
-// Color Scheme
+
+// COLOR SCHEME
+// ------------
+
 // Use this to roll your own color schemes if you like (unused by Bootstrap by default)
 @baseColor:         @blue;                  // Set a base color
 @complement:        spin(@baseColor, 180);  // Determine a complementary color
@@ -51,10 +61,13 @@
 @analog2:           spin(@baseColor, -22);
 
 
+// THEME VARIABLES
+// ---------------
+
+// Typography
+@baseFontSize:          13px;
+@baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+@baseLineHeight:        18px;
 
-// More variables coming soon:
-// - @basefont to @baseFontSize
-// - @baseline to @baseLineHeight
-// - @baseFontFamily
-// - @primaryButtonColor
-// - anything else? File an issue on GitHub
\ No newline at end of file
+// Visuals
+@primaryButtonColor:    @blue;