Add twitter button theme, update button variables slightly

src/definitions/elements/button.less

@@ -506,6 +506,7 @@
   margin: @iconMargin;
   transition: @iconTransition;
   vertical-align: @iconVerticalAlign;
+  color: @iconColor;
 }
 .ui.button > .right.icon {
   margin: @rightIconMargin;

src/themes/amazon/elements/button.overrides

@@ -1,6 +1,7 @@
 .ui.button {
   background-image: linear-gradient(center top , #F7F8FA, #E7E9EC) repeat scroll 0 0 rgba(0, 0, 0, 0);
 }
+
 .ui.primary.button {
   color: #111111;
   border: 1px solid;
@@ -10,6 +11,7 @@
   border-color: #C59F43 #AA8326 #957321;
   color: #111111;
 }
+
 .ui.secondary.button {
   border: 1px solid;
   border-color: #3D444C #2F353B #2C3137;
@@ -17,6 +19,8 @@
 .ui.secondary.button:hover {
   border-color: #32373E #24282D #212429;
 }
+
+
 .ui.labeled.icon.buttons .button .icon,
 .ui.labeled.icon.button .icon {
   padding-bottom: 0.48em;

src/themes/amazon/elements/button.variables

@@ -16,7 +16,6 @@
 
 
 @borderRadius: 3px;
-
 @verticalPadding: 0.8em;
 @horizontalPadding: 1.75em;
 
@@ -40,7 +39,6 @@
 @labeledIconBackgroundColor: #313A43;
 @labeledIconColor: #FFFFFF;
 @labeledIconBorder: transparent;
-@labeledIconPadding: (@horizontalPadding + 2.25em);
 
 @black: #444C55;
 @orange: #F4CC67;

src/themes/default/elements/button.variables

@@ -43,10 +43,12 @@
 /* Icon */
 @iconOpacity: 0.8;
 @iconDistance: 0.4em;
+@iconColor: '';
 @iconTransition: opacity @transitionDuration @transitionEasing;
+@iconVerticalAlign: baseline;
+
 @iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
 @rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance;
-@iconVerticalAlign: baseline;
 
 /* Loader */
 @loaderSize: 1.2857em;
@@ -97,9 +99,10 @@
 /* Pressed Down */
 @downBackgroundColor: #CCCCCC;
 @downBackgroundImage: '';
+@downPressedShadow: 0px 1px 4px 0px @borderColor inset !important;
 @downBoxShadow:
   @borderBoxShadow,
-  0px 1px 4px 0px @borderColor inset !important
+  @downPressedShadow
 ;
 @downColor: @pressedTextColor;
 
@@ -255,6 +258,3 @@
 @animationEasing: ease;
 @fadeScaleHigh: 1.5;
 @fadeScaleLow: 0.75;
-
-
-/* Sizing (Uses Defaults) */

src/themes/default/globals/site.variables

@@ -19,8 +19,8 @@
       Base Sizes
 --------------------*/
 
-@emSize            : 14px;
-@fontSize          : 14px;
+@emSize   : 14px;
+@fontSize : 14px;
 
 /*--------------
   Page Heading
@@ -84,24 +84,14 @@
         Sizes
 --------------------*/
 
-/* Exact pixel values @ 14px em */
-@mini            : 0.7142rem;
-@tiny            : 0.8571rem;
-@small           : 0.9285rem;
-@medium          : 1rem;
-@large           : 1.1428rem;
-@big             : 1.2857rem;
-@huge            : 1.4285rem;
-@massive         : 1.7142rem;
-
-@relativeMini    : 0.7142em;
-@relativeTiny    : 0.8571em;
-@relativeSmall   : 0.9285em;
-@relativeMedium  : 1em;
-@relativeLarge   : 1.1428em;
-@relativeBig     : 1.2857em;
-@relativeHuge    : 1.4285em;
-@relativeMassive : 1.7142em;
+@miniSize        : 10px;
+@tinySize        : 12px;
+@smallSize       : 13px;
+@mediumSize      : @emSize;
+@largeSize       : 16px;
+@bigSize         : 18px;
+@hugeSize        : 20px;
+@massiveSize     : 24px;
 
 /*-------------------
         Page
@@ -203,6 +193,30 @@
 @imagePath : "../../themes/default/assets/images";
 @fontPath  : "../../themes/default/assets/fonts";
 
+
+/*-------------------
+       Em Sizes
+--------------------*/
+
+/* Exact pixel values expressed in em */
+@mini            : unit((@miniSize / @mediumSize), rem);
+@tiny            : unit((@tinySize / @mediumSize), rem);
+@small           : unit((@smallSize / @mediumSize), rem);
+@medium          : unit((@mediumSize / @mediumSize), rem);
+@large           : unit((@largeSize / @mediumSize), rem);
+@big             : unit((@bigSize / @mediumSize), rem);
+@huge            : unit((@hugeSize / @mediumSize), rem);
+@massive         : unit((@massiveSize / @mediumSize), rem);
+
+@relativeMini    : unit((@miniSize / @mediumSize), em);
+@relativeTiny    : unit((@tinySize / @mediumSize), em);
+@relativeSmall   : unit((@smallSize / @mediumSize), em);
+@relativeMedium  : unit((@mediumSize / @mediumSize), em);
+@relativeLarge   : unit((@largeSize / @mediumSize), em);
+@relativeBig     : unit((@bigSize / @mediumSize), em);
+@relativeHuge    : unit((@hugeSize / @mediumSize), em);
+@relativeMassive : unit((@massiveSize / @mediumSize), em);
+
 /*-------------------
        Icons
 --------------------*/

src/themes/material/elements/button.variables

@@ -6,8 +6,10 @@
        Element
 --------------------*/
 
-@pageFont : 'Roboto', Arial, sans-serif;
-@medium   : 13px;
+@googleFontName : 'Roboto';
+@pageFont       : 'Roboto', Arial, sans-serif;
+
+@medium: 13px;
 
 @verticalPadding   : 0.8em;
 @horizontalPadding : 0.8em;

src/themes/material/globals/site.variables

@@ -17,6 +17,14 @@
 @emSize            : 14px;
 @fontSize          : 13px;
 
+/*--------------
+      Page
+---------------*/
+
+@pageBackground      : #F9F9F9;
+@lineHeight          : 1.33;
+@textColor           : #212121;
+
 /*--------------
   Page Heading
 ---------------*/
@@ -81,16 +89,6 @@
 @lightPrimaryColor   : @lightBlue;
 @lightSecondaryColor : @lightGrey;
 
-/*-------------------
-        Page
---------------------*/
-
-@pageBackground      : #F7F7F7;
-@pageOverflowX       : hidden;
-
-@lineHeight          : 1.33;
-@textColor           : #212121;
-
 /*-------------------
       Paragraph
 --------------------*/

src/themes/raised/elements/button.overrides

@@ -1,9 +1,3 @@
 /*******************************
            Overrides
 *******************************/
-
-.ui.button.active:not(.basic),
-.ui.button:active {
-  padding-top: @verticalPadding + (@shadowOffset / 2);
-  padding-bottom: @verticalPadding + (@shadowOffset / 2);
-}

src/themes/raised/elements/button.variables

@@ -6,18 +6,17 @@
        Element
 --------------------*/
 
-/* Shadow */
-@verticalAlign: middle;
 @backgroundColor: #F8F8F8;
 @backgroundImage: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
-@shadowDistance: 0.3em;
-@borderBoxShadowColor: @borderColor;
+@verticalAlign: middle;
+@borderRadius: 0.4em;
 
+/* Shadow */
+@shadowDistance: 0.3em;
 @verticalPadding: 1em;
 @horizontalPadding: 2em;
 
-@borderRadius: 0.4em;
-/* transitions */
+/* transition box shadow as well */
 @transition:
   opacity @transitionDuration @transitionEasing,
   background-color @transitionDuration @transitionEasing,

src/themes/twitter/elements/button.overrides

@@ -0,0 +1,13 @@
+/*******************************
+           Overrides
+*******************************/
+
+.ui.primary.button {
+  box-shadow:
+    0px 0px 0px 1px #3B88C3 inset,
+    0 2px 0 rgba(255, 255, 255, 0.15) inset
+  ;
+}
+.ui.primary.button > .icon {
+  color: #FFFFFF;
+}

src/themes/twitter/elements/button.variables

@@ -0,0 +1,46 @@
+/*-------------------
+   Global Variables
+--------------------*/
+
+@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@textColor: #66757F;
+@blue: #55ACEE;
+
+/*-------------------
+   Button Variables
+--------------------*/
+
+@backgroundColor: #F5F8FA;
+@backgroundImage: linear-gradient(@white, @backgroundColor);
+@color: #66757F;
+@borderBoxShadowColor: #E1E8ED;
+
+@textTransform: none;
+@fontWeight: bold;
+@textColor: #333333;
+
+@horizontalPadding: 1.284em;
+@verticalPadding: 0.8571em;
+
+@iconColor: #55ACEE;
+
+@activeBackgroundColor: rgba(0, 0, 0, 0.1);
+
+@primaryColor: @blue;
+@coloredBackgroundImage: @subtleGradient;
+
+
+/*-------------------
+        States
+--------------------*/
+
+@hoverBackgroundColor: #E1E8ED;
+@hoverBackgroundImage: linear-gradient(@white, @hoverBackgroundColor);
+@hoverColor: #292F33;
+
+@downBackgroundColor: #E1E8ED;
+@downColor: #292F33;
+@downPressedShadow: 0px 1px 4px rgba(0, 0, 0, 0.2) inset;
+
+@labeledIconBackgroundColor: rgba(85, 172, 238, 0.05);
+@labeledIconBorder: @borderBoxShadowColor;