Move column counts to global config, tweak default unselected colors

server/documents/elements/button.html.eco

@@ -93,6 +93,23 @@ themes      : ['Default', 'Basic', 'Chubby', 'Amazon', 'GitHub']
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Basic</h4>
+    <p>A basic button removes all unnecessary formatting</p>
+    <div class="ui basic button">
+      <i class="icon user"></i>
+      Add Friend
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui inverted segment">
+      <div class="ui inverted basic button">
+        <i class="icon globe"></i>
+        Change Language
+      </div>
+    </div>
+  </div>
+
   <div class="example">
     <h4 class="ui header">Inverted</h4>
     <p>A button can be formatted to appear on dark backgrounds</p>
@@ -280,23 +297,6 @@ themes      : ['Default', 'Basic', 'Chubby', 'Amazon', 'GitHub']
     </div>
   </div>
 
-  <div class="example">
-    <h4 class="ui header">Basic</h4>
-    <p>A basic button removes all unnecessary formatting</p>
-    <div class="ui basic button">
-      <i class="icon user"></i>
-      Add Friend
-    </div>
-  </div>
-  <div class="another example">
-    <div class="ui inverted segment">
-      <div class="ui inverted basic button">
-        <i class="icon globe"></i>
-        Change Language
-      </div>
-    </div>
-  </div>
-
   <div class="example">
     <h4 class="ui header">Colors</h4>
     <p>A button can have different colors:</p>

src/themes/packages/default/collections/grid.variables

@@ -17,6 +17,42 @@
 @firstRowSpacing: 0rem;
 
 @columnMaxImageWidth: 100%;
+@columnCount: 16;
+
+@oneWide        : (1 / @columnCount * 100%);
+@twoWide        : (2 / @columnCount * 100%);
+@threeWide      : (3 / @columnCount * 100%);
+@fourWide       : (4 / @columnCount * 100%);
+@fiveWide       : (5 / @columnCount * 100%);
+@sixWide        : (6 / @columnCount * 100%);
+@sevenWide      : (7 / @columnCount * 100%);
+@eightWide      : (8 / @columnCount * 100%);
+@nineWide       : (9 / @columnCount * 100%);
+@tenWide        : (10 / @columnCount * 100%);
+@elevenWide     : (11 / @columnCount * 100%);
+@twelveWide     : (12 / @columnCount * 100%);
+@thirteenWide   : (13 / @columnCount * 100%);
+@fourteenWide   : (14 / @columnCount * 100%);
+@fifteenWide    : (15 / @columnCount * 100%);
+@sixteenWide    : (16 / @columnCount * 100%);
+
+@oneColumn      : (1 / 1 * 100%);
+@twoColumn      : (1 / 2 * 100%);
+@threeColumn    : (1 / 3 * 100%);
+@fourColumn     : (1 / 4 * 100%);
+@fiveColumn     : (1 / 5 * 100%);
+@sixColumn      : (1 / 6 * 100%);
+@sevenColumn    : (1 / 7 * 100%);
+@eightColumn    : (1 / 8 * 100%);
+@nineColumn     : (1 / 9 * 100%);
+@tenColumn      : (1 / 10 * 100%);
+@elevenColumn   : (1 / 11 * 100%);
+@twelveColumn   : (1 / 12 * 100%);
+@thirteenColumn : (1 / 13 * 100%);
+@fourteenColumn : (1 / 14 * 100%);
+@fifteenColumn  : (1 / 15 * 100%);
+@sixteenColumn  : (1 / 16 * 100%);
+
 
 /*******************************
            Variations

src/themes/packages/default/globals/site.variables

@@ -26,48 +26,6 @@
 @highlightBackground : #FFFFCC;
 @highlightColor      : @textColor;
 
-
-/*-------------------
-         Grid
---------------------*/
-
-@columnCount: 16;
-
-@oneWide        : (1 / @columnCount * 100%);
-@twoWide        : (2 / @columnCount * 100%);
-@threeWide      : (3 / @columnCount * 100%);
-@fourWide       : (4 / @columnCount * 100%);
-@fiveWide       : (5 / @columnCount * 100%);
-@sixWide        : (6 / @columnCount * 100%);
-@sevenWide      : (7 / @columnCount * 100%);
-@eightWide      : (8 / @columnCount * 100%);
-@nineWide       : (9 / @columnCount * 100%);
-@tenWide        : (10 / @columnCount * 100%);
-@elevenWide     : (11 / @columnCount * 100%);
-@twelveWide     : (12 / @columnCount * 100%);
-@thirteenWide   : (13 / @columnCount * 100%);
-@fourteenWide   : (14 / @columnCount * 100%);
-@fifteenWide    : (15 / @columnCount * 100%);
-@sixteenWide    : (16 / @columnCount * 100%);
-
-@oneColumn      : (1 / 1 * 100%);
-@twoColumn      : (1 / 2 * 100%);
-@threeColumn    : (1 / 3 * 100%);
-@fourColumn     : (1 / 4 * 100%);
-@fiveColumn     : (1 / 5 * 100%);
-@sixColumn      : (1 / 6 * 100%);
-@sevenColumn    : (1 / 7 * 100%);
-@eightColumn    : (1 / 8 * 100%);
-@nineColumn     : (1 / 9 * 100%);
-@tenColumn      : (1 / 10 * 100%);
-@elevenColumn   : (1 / 11 * 100%);
-@twelveColumn   : (1 / 12 * 100%);
-@thirteenColumn : (1 / 13 * 100%);
-@fourteenColumn : (1 / 14 * 100%);
-@fifteenColumn  : (1 / 15 * 100%);
-@sixteenColumn  : (1 / 16 * 100%);
-
-
 /*-------------------
      Breakpoints
 --------------------*/
@@ -103,7 +61,7 @@
            BG Colors
 *******************************/
 
-@subtleTransparentBlack : rgba(0, 0, 0, 0.02);
+@subtleTransparentBlack : rgba(0, 0, 0, 0.01);
 @transparentBlack       : rgba(0, 0, 0, 0.05);
 @strongTransparentBlack : rgba(0, 0, 0, 0.10);
 
@@ -223,7 +181,7 @@
 @invertedSelectedTextColor   : rgba(255, 255, 255, 1);
 @invertedDisabledTextColor   : rgba(255, 255, 255, 0.3);
 
-@unselectedTextColor         : rgba(0, 0, 0, 0.5);
+@unselectedTextColor         : rgba(0, 0, 0, 0.4);
 @selectedTextColor           : rgba(0, 0, 0, 0.8);
 @disabledTextColor           : rgba(0, 0, 0, 0.2);