Adds basic colored buttons, lightens light colors

src/definitions/elements/button.less

@@ -306,72 +306,6 @@
 }
 
 
-/*-------------------
-       Primary
---------------------*/
-
-.ui.primary.buttons .button,
-.ui.primary.button {
-  background-color: @primaryColor;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
-  background-image: @coloredBackgroundImage;
-}
-.ui.primary.button {
-  box-shadow: @coloredBoxShadow;
-}
-.ui.primary.buttons .button:hover,
-.ui.primary.button:hover {
-  background-color: @primaryColorHover;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
-}
-.ui.primary.buttons .button:active,
-.ui.primary.button:active {
-  background-color: @primaryColorDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
-}
-.ui.primary.buttons .active.button,
-.ui.primary.button.active {
-  background-color: @primaryColorActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
-}
-
-/*-------------------
-      Secondary
---------------------*/
-
-.ui.secondary.buttons .button,
-.ui.secondary.button {
-  background-color: @secondaryColor;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
-  background-image: @coloredBackgroundImage;
-}
-.ui.secondary.button {
-  box-shadow: @coloredBoxShadow;
-}
-.ui.secondary.buttons .button:hover,
-.ui.secondary.button:hover {
-  background-color: @secondaryColorHover;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
-}
-.ui.secondary.buttons .button:active,
-.ui.secondary.button:active {
-  background-color: @secondaryColorDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
-}
-.ui.secondary.buttons .active.button,
-.ui.secondary.button.active {
-  background-color: @secondaryColorActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
-}
-
 /*-------------------
        Social
 --------------------*/
@@ -667,11 +601,13 @@
 
 .ui.basic.buttons .button,
 .ui.basic.button {
-  background-color: transparent !important;
+  background: @basicBackground !important;
   background-image: none;
   color: @textColor !important;
-  font-weight: normal;
-  text-transform: none;
+  padding: @basicPadding;
+  font-weight: @basicFontWeight;
+  border-radius: @basicBorderRadius;
+  text-transform: @basicTextTransform;
   text-shadow: none !important;
   box-shadow: @basicBoxShadow;
 }
@@ -682,6 +618,9 @@
   box-shadow: @basicGroupBoxShadow;
   border-radius: @borderRadius;
 }
+.ui.basic.buttons .button {
+  border-radius: 0em;
+}
 
 .ui.basic.buttons .button:hover,
 .ui.basic.button:hover {
@@ -1152,6 +1091,23 @@
   text-shadow: @invertedTextShadow;
 }
 
+/* Basic */
+.ui.basic.black.buttons .button,
+.ui.basic.black.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @black inset !important;
+  color: @black !important;
+}
+.ui.basic.black.buttons .button:hover,
+.ui.basic.black.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important;
+  color: @blackHover;
+}
+.ui.basic.black.buttons .button:active,
+.ui.basic.black.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
+  color: @blackDown !important;
+}
+
 /* Inverted */
 .ui.inverted.black.buttons .button,
 .ui.inverted.black.button {
@@ -1170,7 +1126,7 @@
 .ui.inverted.black.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.black.basic.buttons .button:hover,
 .ui.inverted.black.buttons .basic.button:hover,
@@ -1214,6 +1170,23 @@
 }
 
 
+/* Basic */
+.ui.basic.blue.buttons .button,
+.ui.basic.blue.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @blue inset !important;
+  color: @blue !important;
+}
+.ui.basic.blue.buttons .button:hover,
+.ui.basic.blue.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important;
+  color: @blueHover;
+}
+.ui.basic.blue.buttons .button:active,
+.ui.basic.blue.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
+  color: @blueDown !important;
+}
+
 /* Inverted */
 .ui.inverted.blue.buttons .button,
 .ui.inverted.blue.button {
@@ -1232,7 +1205,7 @@
 .ui.inverted.blue.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.blue.basic.buttons .button:hover,
 .ui.inverted.blue.buttons .basic.button:hover,
@@ -1273,6 +1246,24 @@
   text-shadow: @invertedTextShadow;
 }
 
+
+/* Basic */
+.ui.basic.green.buttons .button,
+.ui.basic.green.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @green inset !important;
+  color: @green !important;
+}
+.ui.basic.green.buttons .button:hover,
+.ui.basic.green.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important;
+  color: @greenHover;
+}
+.ui.basic.green.buttons .button:active,
+.ui.basic.green.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
+  color: @greenDown !important;
+}
+
 /* Inverted */
 .ui.inverted.green.buttons .button,
 .ui.inverted.green.button {
@@ -1291,7 +1282,7 @@
 .ui.inverted.green.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.green.basic.buttons .button:hover,
 .ui.inverted.green.buttons .basic.button:hover,
@@ -1331,6 +1322,24 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
+
+/* Basic */
+.ui.basic.orange.buttons .button,
+.ui.basic.orange.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @orange inset !important;
+  color: @orange !important;
+}
+.ui.basic.orange.buttons .button:hover,
+.ui.basic.orange.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important;
+  color: @orangeHover;
+}
+.ui.basic.orange.buttons .button:active,
+.ui.basic.orange.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
+  color: @orangeDown !important;
+}
+
 /* Inverted */
 .ui.inverted.orange.buttons .button,
 .ui.inverted.orange.button {
@@ -1349,7 +1358,7 @@
 .ui.inverted.orange.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.orange.basic.buttons .button:hover,
 .ui.inverted.orange.buttons .basic.button:hover,
@@ -1389,6 +1398,24 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
+
+/* Basic */
+.ui.basic.pink.buttons .button,
+.ui.basic.pink.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @pink inset !important;
+  color: @pink !important;
+}
+.ui.basic.pink.buttons .button:hover,
+.ui.basic.pink.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important;
+  color: @pinkHover;
+}
+.ui.basic.pink.buttons .button:active,
+.ui.basic.pink.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
+  color: @pinkDown !important;
+}
+
 /* Inverted */
 .ui.inverted.pink.buttons .button,
 .ui.inverted.pink.button {
@@ -1407,7 +1434,7 @@
 .ui.inverted.pink.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.pink.basic.buttons .button:hover,
 .ui.inverted.pink.buttons .basic.button:hover,
@@ -1447,6 +1474,24 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
+
+/* Basic */
+.ui.basic.purple.buttons .button,
+.ui.basic.purple.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @purple inset !important;
+  color: @purple !important;
+}
+.ui.basic.purple.buttons .button:hover,
+.ui.basic.purple.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important;
+  color: @purpleHover;
+}
+.ui.basic.purple.buttons .button:active,
+.ui.basic.purple.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
+  color: @purpleDown !important;
+}
+
 /* Inverted */
 .ui.inverted.purple.buttons .button,
 .ui.inverted.purple.button {
@@ -1465,7 +1510,7 @@
 .ui.inverted.purple.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.purple.basic.buttons .button:hover,
 .ui.inverted.purple.buttons .basic.button:hover,
@@ -1505,6 +1550,24 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
+
+/* Basic */
+.ui.basic.red.buttons .button,
+.ui.basic.red.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @red inset !important;
+  color: @red !important;
+}
+.ui.basic.red.buttons .button:hover,
+.ui.basic.red.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important;
+  color: @redHover;
+}
+.ui.basic.red.buttons .button:active,
+.ui.basic.red.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
+  color: @redDown !important;
+}
+
 /* Inverted */
 .ui.inverted.red.buttons .button,
 .ui.inverted.red.button {
@@ -1523,7 +1586,7 @@
 .ui.inverted.red.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.red.basic.buttons .button:hover,
 .ui.inverted.red.buttons .basic.button:hover,
@@ -1564,6 +1627,24 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
+
+/* Basic */
+.ui.basic.teal.buttons .button,
+.ui.basic.teal.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @teal inset !important;
+  color: @teal !important;
+}
+.ui.basic.teal.buttons .button:hover,
+.ui.basic.teal.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important;
+  color: @tealHover;
+}
+.ui.basic.teal.buttons .button:active,
+.ui.basic.teal.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
+  color: @tealDown !important;
+}
+
 /* Inverted */
 .ui.inverted.teal.buttons .button,
 .ui.inverted.teal.button {
@@ -1582,7 +1663,7 @@
 .ui.inverted.teal.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.teal.basic.buttons .button:hover,
 .ui.inverted.teal.buttons .basic.button:hover,
@@ -1623,6 +1704,24 @@
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
 }
+
+/* Basic */
+.ui.basic.yellow.buttons .button,
+.ui.basic.yellow.button {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @yellow inset !important;
+  color: @yellow !important;
+}
+.ui.basic.yellow.buttons .button:hover,
+.ui.basic.yellow.button:hover {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important;
+  color: @yellowHover;
+}
+.ui.basic.yellow.buttons .button:active,
+.ui.basic.yellow.button:active {
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
+  color: @yellowDown !important;
+}
+
 /* Inverted */
 .ui.inverted.yellow.buttons .button,
 .ui.inverted.yellow.button {
@@ -1641,7 +1740,7 @@
 .ui.inverted.yellow.basic.button {
   background-color: transparent;
   box-shadow: @basicInvertedBoxShadow !important;
-  color: @white;
+  color: @white !important;
 }
 .ui.inverted.yellow.basic.buttons .button:hover,
 .ui.inverted.yellow.buttons .basic.button:hover,
@@ -1650,6 +1749,73 @@
   color: @lightYellow !important;
 }
 
+
+/*-------------------
+       Primary
+--------------------*/
+
+.ui.primary.buttons .button,
+.ui.primary.button {
+  background-color: @primaryColor;
+  color: @invertedTextColor;
+  text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
+}
+.ui.primary.button {
+  box-shadow: @coloredBoxShadow;
+}
+.ui.primary.buttons .button:hover,
+.ui.primary.button:hover {
+  background-color: @primaryColorHover;
+  color: @invertedTextColor;
+  text-shadow: @invertedTextShadow;
+}
+.ui.primary.buttons .button:active,
+.ui.primary.button:active {
+  background-color: @primaryColorDown;
+  color: @invertedTextColor;
+  text-shadow: @invertedTextShadow;
+}
+.ui.primary.buttons .active.button,
+.ui.primary.button.active {
+  background-color: @primaryColorActive;
+  color: @invertedTextColor;
+  text-shadow: @invertedTextShadow;
+}
+
+/*-------------------
+      Secondary
+--------------------*/
+
+.ui.secondary.buttons .button,
+.ui.secondary.button {
+  background-color: @secondaryColor;
+  color: @invertedTextColor;
+  text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
+}
+.ui.secondary.button {
+  box-shadow: @coloredBoxShadow;
+}
+.ui.secondary.buttons .button:hover,
+.ui.secondary.button:hover {
+  background-color: @secondaryColorHover;
+  color: @invertedTextColor;
+  text-shadow: @invertedTextShadow;
+}
+.ui.secondary.buttons .button:active,
+.ui.secondary.button:active {
+  background-color: @secondaryColorDown;
+  color: @invertedTextColor;
+  text-shadow: @invertedTextShadow;
+}
+.ui.secondary.buttons .active.button,
+.ui.secondary.button.active {
+  background-color: @secondaryColorActive;
+  color: @invertedTextColor;
+  text-shadow: @invertedTextShadow;
+}
+
 /*---------------
     Positive
 ----------------*/

src/themes/packages/chubby/elements/button.variables

@@ -13,6 +13,10 @@
 @horizontalPadding: 2.5em;
 @invertedBorderSize: 3px;
 
+@basicBorderRadius: 0.4em;
+@basicFontWeight: bold;
+@basicTextTransform: uppercase;
+
 @blue: #4A88CB;
 @primaryColor: @blue;
 

src/themes/packages/default/elements/button.variables

@@ -35,6 +35,7 @@
   opacity @transitionDuration @transitionEasing,
   background-color @transitionDuration @transitionEasing,
   color @transitionDuration @transitionEasing,
+  box-shadow @transitionDuration @transitionEasing,
   background @transitionDuration @transitionEasing
 ;
 
@@ -161,15 +162,30 @@
 @invertedVerticalGroupButtonOffset: 0px 0px -(@invertedBorderSize) 0px;
 
 /* Basic */
-@basicBoxShadow: 0px 0px 0px 1px @borderColor;
+@basicBorderSize: 1px;
+@basicColoredBorderSize: 2px;
+@basicPadding: @verticalPadding @horizontalPadding;
+@basicBackground: transparent;
+@basicFontWeight: normal;
+@basicBoxShadow: 0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.1) inset;
 @iconOffset: 0.05em;
 @basicLoadingColor: #FFFFFF;
+@basicBorderRadius: @borderRadius;
+@basicTextTransform: none;
 
+/* Basic Hover */
 @basicHoverBackground: #FAFAFA;
-@basicHoverBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
-
-@basicDownBackground: rgba(0, 0, 0, 0.02);
-@basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+@basicHoverBoxShadow:
+  0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.1) inset,
+  0px 0px 0px 0px rgba(0, 0, 0, 0.1) inset
+;
+/* Basic Down */
+@basicDownBackground: #F8F8F8;
+@basicDownBoxShadow:
+  0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.15) inset,
+  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset
+;
+/* Basic Active */
 @basicActiveBackground: @transparentBlack;
 @basicActiveColor: @selectedTextColor;
 

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

@@ -329,53 +329,53 @@
 --------------------*/
 
 /*---  Colors  ---*/
-@primaryColorHover    : lighten( @primaryColor, 5);
-@secondaryColorHover  : lighten( @secondaryColor, 5);
-@tertiaryColorHover   : lighten( @tertiaryColor, 5);
-
-@blueHover            : lighten( @blue, 5);
-@greenHover           : lighten( @green, 5);
-@orangeHover          : lighten( @orange, 5);
-@pinkHover            : lighten( @pink, 5);
-@purpleHover          : lighten( @purple, 5);
-@redHover             : lighten( @red, 5);
-@tealHover            : lighten( @teal, 5);
-@yellowHover          : lighten( @yellow, 5);
-
-@lightBlueHover       : lighten( @lightBlue, 5);
-@lightGreenHover      : lighten( @lightGreen, 5);
-@lightOrangeHover     : lighten( @lightOrange, 5);
-@lightPinkHover       : lighten( @lightPink, 5);
-@lightPurpleHover     : lighten( @lightPurple, 5);
-@lightRedHover        : lighten( @lightRed, 5);
-@lightTealHover       : lighten( @lightTeal, 5);
-@lightYellowHover     : lighten( @lightYellow, 5);
+@primaryColorHover    : lighten( @primaryColor, 7);
+@secondaryColorHover  : lighten( @secondaryColor, 7);
+@tertiaryColorHover   : lighten( @tertiaryColor, 7);
+
+@blueHover            : lighten( @blue, 7);
+@greenHover           : lighten( @green, 7);
+@orangeHover          : lighten( @orange, 7);
+@pinkHover            : lighten( @pink, 7);
+@purpleHover          : lighten( @purple, 7);
+@redHover             : lighten( @red, 7);
+@tealHover            : lighten( @teal, 7);
+@yellowHover          : lighten( @yellow, 7);
+
+@lightBlueHover       : lighten( @lightBlue, 7);
+@lightGreenHover      : lighten( @lightGreen, 7);
+@lightOrangeHover     : lighten( @lightOrange, 7);
+@lightPinkHover       : lighten( @lightPink, 7);
+@lightPurpleHover     : lighten( @lightPurple, 7);
+@lightRedHover        : lighten( @lightRed, 7);
+@lightTealHover       : lighten( @lightTeal, 7);
+@lightYellowHover     : lighten( @lightYellow, 7);
 
 /*---  Emotive  ---*/
-@positiveColorHover   : lighten( @positiveColor, 5);
-@negativeColorHover   : lighten( @negativeColor, 5);
+@positiveColorHover   : lighten( @positiveColor, 7);
+@negativeColorHover   : lighten( @negativeColor, 7);
 
 /*---  Neutrals  ---*/
-@fullBlackHover       : lighten( @fullBlack, 5);
-@blackHover           : lighten( @black, 5);
-@lightBlackHover      : lighten( @lightBlack, 5);
-
-@lightGreyHover       : lighten( @lightGrey, 5);
-@greyHover            : lighten( @grey, 5);
-@darkGreyHover        : lighten( @darkGrey, 5);
-
-@whiteHover           : lighten( @white, 5);
-@offWhiteHover        : lighten( @offWhite, 5);
-@darkWhiteHover       : lighten( @darkWhite, 5);
-
-@facebookHoverColor   : lighten( @facebookColor, 5);
-@twitterHoverColor    : lighten( @twitterColor, 5);
-@googlePlusHoverColor : lighten( @googlePlusColor, 5);
-@linkedInHoverColor   : lighten( @linkedInColor, 5);
-@youtubeHoverColor    : lighten( @youtubeColor, 5);
-@instagramHoverColor  : lighten( @instagramColor, 5);
-@pinterestHoverColor  : lighten( @pinterestColor, 5);
-@vkHoverColor         : lighten( @vkColor, 5);
+@fullBlackHover       : lighten( @fullBlack, 7);
+@blackHover           : lighten( @black, 7);
+@lightBlackHover      : lighten( @lightBlack, 7);
+
+@lightGreyHover       : lighten( @lightGrey, 7);
+@greyHover            : lighten( @grey, 7);
+@darkGreyHover        : lighten( @darkGrey, 7);
+
+@whiteHover           : lighten( @white, 7);
+@offWhiteHover        : lighten( @offWhite, 7);
+@darkWhiteHover       : lighten( @darkWhite, 7);
+
+@facebookHoverColor   : lighten( @facebookColor, 7);
+@twitterHoverColor    : lighten( @twitterColor, 7);
+@googlePlusHoverColor : lighten( @googlePlusColor, 7);
+@linkedInHoverColor   : lighten( @linkedInColor, 7);
+@youtubeHoverColor    : lighten( @youtubeColor, 7);
+@instagramHoverColor  : lighten( @instagramColor, 7);
+@pinterestHoverColor  : lighten( @pinterestColor, 7);
+@vkHoverColor         : lighten( @vkColor, 7);
 
 
 /*-------------------