update variables to inlude @baseFontSize, @baseFontFamily, @baseLineHeight for...

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

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: Thu Sep 29 02:20:34 PDT 2011
+ * Date: Tue Oct  4 00:16:55 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -187,9 +187,8 @@ body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
-  font-weight: normal;
   line-height: 18px;
-  color: #333333;
+  color: #404040;
 }
 .container {
   width: 940px;
@@ -393,14 +392,14 @@ a:hover {
  * Headings, body text, lists, code, and more for a versatile and durable typography system
  * ---------------------------------------------------------------------------------------- */
 p {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
-  font-weight: normal;
   line-height: 18px;
   margin-bottom: 9px;
 }
 p small {
   font-size: 11px;
-  color: #777777;
+  color: #bfbfbf;
 }
 h1,
 h2,
@@ -409,7 +408,7 @@ h4,
 h5,
 h6 {
   font-weight: bold;
-  color: #333333;
+  color: #404040;
 }
 h1 small,
 h2 small,
@@ -417,7 +416,7 @@ h3 small,
 h4 small,
 h5 small,
 h6 small {
-  color: #777777;
+  color: #bfbfbf;
 }
 h1 {
   margin-bottom: 18px;
@@ -455,7 +454,7 @@ h5 {
 h6 {
   font-size: 13px;
   line-height: 18px;
-  color: #777777;
+  color: #bfbfbf;
   text-transform: uppercase;
 }
 ul, ol {
@@ -475,7 +474,7 @@ ol {
 }
 li {
   line-height: 18px;
-  color: #555555;
+  color: #808080;
 }
 ul.unstyled {
   list-style: none;
@@ -508,7 +507,7 @@ em {
   line-height: inherit;
 }
 .muted {
-  color: #777777;
+  color: #bfbfbf;
 }
 blockquote {
   margin-bottom: 18px;
@@ -526,7 +525,7 @@ blockquote small {
   font-size: 12px;
   font-weight: 300;
   line-height: 18px;
-  color: #777777;
+  color: #bfbfbf;
 }
 blockquote small:before {
   content: '\2014 \00A0';
@@ -538,7 +537,7 @@ address {
 }
 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;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -577,7 +576,7 @@ legend {
   margin-bottom: 27px;
   font-size: 19.5px;
   line-height: 36px;
-  color: #333333;
+  color: #404040;
   border-bottom: 1px solid #eee;
 }
 label,
@@ -592,7 +591,7 @@ textarea {
 label {
   display: block;
   margin-bottom: 5px;
-  color: #333333;
+  color: #404040;
 }
 input[type=checkbox], input[type=radio] {
   cursor: pointer;
@@ -607,7 +606,7 @@ select,
   padding: 4px;
   font-size: 13px;
   line-height: 18px;
-  color: #555555;
+  color: #808080;
   border: 1px solid #ccc;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -843,15 +842,15 @@ textarea[readonly] {
   cursor: not-allowed;
 }
 :-moz-placeholder {
-  color: #777777;
+  color: #bfbfbf;
 }
 ::-webkit-input-placeholder {
-  color: #777777;
+  color: #bfbfbf;
 }
 .help-text {
   margin-top: 5px;
   margin-bottom: 0;
-  color: #777777;
+  color: #bfbfbf;
 }
 .help-inline {
   display: inline;
@@ -868,7 +867,7 @@ textarea[readonly] {
   max-width: 600px;
 }
 .inline-inputs {
-  color: #555555;
+  color: #808080;
 }
 .inline-inputs span, .inline-inputs input {
   display: inline-block;
@@ -901,7 +900,7 @@ textarea[readonly] {
   margin-right: -1px;
   font-weight: normal;
   line-height: 18px;
-  color: #777777;
+  color: #bfbfbf;
   text-align: center;
   text-shadow: 0 1px 0 #ffffff;
   -webkit-border-radius: 3px 0 0 3px;
@@ -1115,7 +1114,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   overflow: visible;
 }
 .topbar a {
-  color: #777777;
+  color: #bfbfbf;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 .topbar .brand a:hover, .topbar ul .active > a {
@@ -1178,20 +1177,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   transition: none;
 }
 .topbar input:-moz-placeholder {
-  color: #cccccc;
+  color: #e6e6e6;
 }
 .topbar input::-webkit-input-placeholder {
-  color: #cccccc;
+  color: #e6e6e6;
 }
 .topbar input:hover {
-  background-color: #777777;
+  background-color: #bfbfbf;
   background-color: rgba(255, 255, 255, 0.5);
   color: #ffffff;
 }
 .topbar input:focus, .topbar input.focused {
   outline: 0;
   background-color: #ffffff;
-  color: #333333;
+  color: #404040;
   text-shadow: 0 1px 0 #ffffff;
   border: 0;
   padding: 5px 10px;
@@ -1363,7 +1362,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   clear: both;
   font-weight: normal;
   line-height: 18px;
-  color: #555555;
+  color: #808080;
   text-shadow: 0 1px 0 #ffffff;
 }
 .topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
@@ -1377,7 +1376,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   background-image: linear-gradient(top, #eeeeee, #dddddd);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
-  color: #333333;
+  color: #404040;
   text-decoration: none;
   -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
   -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
@@ -1439,7 +1438,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   border-color: #eee #eee #ddd;
 }
 .tabs > li.active > a {
-  color: #555555;
+  color: #808080;
   background-color: #ffffff;
   border: 1px solid #ddd;
   border-bottom-color: transparent;
@@ -1518,10 +1517,10 @@ table .headerSortUp.purple, table .headerSortDown.purple {
 }
 .breadcrumb .divider {
   padding: 0 5px;
-  color: #777777;
+  color: #bfbfbf;
 }
 .breadcrumb .active a {
-  color: #333333;
+  color: #404040;
 }
 .hero-unit {
   background-color: #f5f5f5;
@@ -1806,7 +1805,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   position: relative;
   padding: 7px 15px;
   margin-bottom: 18px;
-  color: #333333;
+  color: #404040;
   background-color: #eedc94;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
   background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
@@ -1868,13 +1867,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   margin-bottom: 0;
 }
 .alert-message.block-message li {
-  color: #333333;
+  color: #404040;
 }
 .alert-message.block-message .alert-actions {
   margin-top: 5px;
 }
 .alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
-  color: #333333;
+  color: #404040;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 .alert-message.block-message.error {
@@ -1925,7 +1924,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 }
 .pagination .disabled a, .pagination .disabled a:hover {
   background-color: transparent;
-  color: #777777;
+  color: #bfbfbf;
 }
 .pagination .next a {
   border: 0;
@@ -2195,7 +2194,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 }
 .label {
   padding: 1px 3px 2px;
-  background-color: #777777;
+  background-color: #bfbfbf;
   font-size: 9.75px;
   font-weight: bold;
   color: #ffffff;

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

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;

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;

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;
 }
 

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 {

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);

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
+// Visuals
+@primaryButtonColor:    @blue;
\ No newline at end of file