Add more variables for button colors #1591

src/definitions/elements/button.less

@@ -1158,8 +1158,8 @@
 .ui.black.buttons .button,
 .ui.black.button {
   background-color: @black;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @blackTextColor;
+  text-shadow: @blackTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.black.button {
@@ -1174,16 +1174,16 @@
 .ui.black.buttons .button:active,
 .ui.black.button:active {
   background-color: @blackDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @blackTextColor;
+  text-shadow: @blackTextShadow;
 }
 .ui.black.buttons .active.button,
 .ui.black.buttons .active.button:active,
 .ui.black.active.button,
 .ui.black.button .active.button:active {
   background-color: @blackActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @blackTextColor;
+  text-shadow: @blackTextShadow;
 }
 
 /* Basic */
@@ -1272,8 +1272,8 @@
 .ui.blue.buttons .button,
 .ui.blue.button {
   background-color: @blue;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @blueTextColor;
+  text-shadow: @blueTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.blue.button {
@@ -1288,19 +1288,18 @@
 .ui.blue.buttons .button:active,
 .ui.blue.button:active {
   background-color: @blueDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @blueTextColor;
+  text-shadow: @blueTextShadow;
 }
 .ui.blue.buttons .active.button,
 .ui.blue.buttons .active.button:active,
 .ui.blue.active.button,
 .ui.blue.button .active.button:active {
   background-color: @blueActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @blueTextColor;
+  text-shadow: @blueTextShadow;
 }
 
-
 /* Basic */
 .ui.basic.blue.buttons .button,
 .ui.basic.blue.button {
@@ -1385,8 +1384,8 @@
 .ui.green.buttons .button,
 .ui.green.button {
   background-color: @green;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @greenTextColor;
+  text-shadow: @greenTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.green.button {
@@ -1401,16 +1400,16 @@
 .ui.green.buttons .button:active,
 .ui.green.button:active {
   background-color: @greenDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @greenTextColor;
+  text-shadow: @greenTextShadow;
 }
 .ui.green.buttons .active.button,
 .ui.green.buttons .active.button:active,
 .ui.green.active.button,
 .ui.green.button .active.button:active {
   background-color: @greenActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @greenTextColor;
+  text-shadow: @greenTextShadow;
 }
 
 
@@ -1498,8 +1497,8 @@
 .ui.orange.buttons .button,
 .ui.orange.button {
   background-color: @orange;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @orangeTextColor;
+  text-shadow: @orangeTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.orange.button {
@@ -1514,16 +1513,16 @@
 .ui.orange.buttons .button:active,
 .ui.orange.button:active {
   background-color: @orangeDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @orangeTextColor;
+  text-shadow: @orangeTextShadow;
 }
 .ui.orange.buttons .active.button,
 .ui.orange.buttons .active.button:active,
 .ui.orange.active.button,
 .ui.orange.button .active.button:active {
   background-color: @orangeActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @orangeTextColor;
+  text-shadow: @orangeTextShadow;
 }
 
 /* Basic */
@@ -1610,8 +1609,8 @@
 .ui.pink.buttons .button,
 .ui.pink.button {
   background-color: @pink;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @pinkTextColor;
+  text-shadow: @pinkTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.pink.button {
@@ -1626,16 +1625,16 @@
 .ui.pink.buttons .button:active,
 .ui.pink.button:active {
   background-color: @pinkDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @pinkTextColor;
+  text-shadow: @pinkTextShadow;
 }
 .ui.pink.buttons .active.button,
 .ui.pink.buttons .active.button:active,
 .ui.pink.active.button,
 .ui.pink.button .active.button:active {
   background-color: @pinkActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @pinkTextColor;
+  text-shadow: @pinkTextShadow;
 }
 
 /* Basic */
@@ -1722,8 +1721,8 @@
 .ui.purple.buttons .button,
 .ui.purple.button {
   background-color: @purple;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @purpleTextColor;
+  text-shadow: @purpleTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.purple.button {
@@ -1738,16 +1737,16 @@
 .ui.purple.buttons .button:active,
 .ui.purple.button:active {
   background-color: @purpleDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @purpleTextColor;
+  text-shadow: @purpleTextShadow;
 }
 .ui.purple.buttons .active.button,
 .ui.purple.buttons .active.button:active,
 .ui.purple.active.button,
 .ui.purple.button .active.button:active {
   background-color: @purpleActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @purpleTextColor;
+  text-shadow: @purpleTextShadow;
 }
 
 /* Basic */
@@ -1834,8 +1833,8 @@
 .ui.red.buttons .button,
 .ui.red.button {
   background-color: @red;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @redTextColor;
+  text-shadow: @redTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.red.button {
@@ -1850,16 +1849,16 @@
 .ui.red.buttons .button:active,
 .ui.red.button:active {
   background-color: @redDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @redTextColor;
+  text-shadow: @redTextShadow;
 }
 .ui.red.buttons .active.button,
 .ui.red.buttons .active.button:active,
 .ui.red.active.button,
 .ui.red.button .active.button:active {
   background-color: @redActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @redTextColor;
+  text-shadow: @redTextShadow;
 }
 
 /* Basic */
@@ -1947,8 +1946,8 @@
 .ui.teal.buttons .button,
 .ui.teal.button {
   background-color: @teal;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @tealTextColor;
+  text-shadow: @tealTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.teal.button {
@@ -1963,16 +1962,16 @@
 .ui.teal.buttons .button:active,
 .ui.teal.button:active {
   background-color: @tealDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @tealTextColor;
+  text-shadow: @tealTextShadow;
 }
 .ui.teal.buttons .active.button,
 .ui.teal.buttons .active.button:active,
 .ui.teal.active.button,
 .ui.teal.button .active.button:active {
   background-color: @tealActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @tealTextColor;
+  text-shadow: @tealTextShadow;
 }
 
 /* Basic */
@@ -2060,8 +2059,8 @@
 .ui.yellow.buttons .button,
 .ui.yellow.button {
   background-color: @yellow;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @yellowTextColor;
+  text-shadow: @yellowTextShadow;
   background-image: @coloredBackgroundImage;
 }
 .ui.yellow.button {
@@ -2076,16 +2075,16 @@
 .ui.yellow.buttons .button:active,
 .ui.yellow.button:active {
   background-color: @yellowDown;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @yellowTextColor;
+  text-shadow: @yellowTextShadow;
 }
 .ui.yellow.buttons .active.button,
 .ui.yellow.buttons .active.button:active,
 .ui.yellow.active.button,
 .ui.yellow.button .active.button:active {
   background-color: @yellowActive;
-  color: @invertedTextColor;
-  text-shadow: @invertedTextShadow;
+  color: @yellowTextColor;
+  text-shadow: @yellowTextShadow;
 }
 
 /* Basic */

src/themes/default/elements/button.variables

@@ -234,6 +234,30 @@
 @coloredBackgroundImage: none;
 @coloredBoxShadow: @shadowBoxShadow;
 
+/* Inverted by default for solids */
+@blueTextColor: @invertedTextColor;
+@blueTextShadow: @invertedTextShadow;
+@greenTextColor: @invertedTextColor;
+@greenTextShadow: @invertedTextShadow;
+@greyTextColor: @invertedTextColor;
+@greyTextShadow: @invertedTextShadow;
+@orangeTextColor: @invertedTextColor;
+@orangeTextShadow: @invertedTextShadow;
+@pinkTextColor: @invertedTextColor;
+@pinkTextShadow: @invertedTextShadow;
+@purpleTextColor: @invertedTextColor;
+@purpleTextShadow: @invertedTextShadow;
+@redTextColor: @invertedTextColor;
+@redTextShadow: @invertedTextShadow;
+@tealTextColor: @invertedTextColor;
+@tealTextShadow: @invertedTextShadow;
+@yellowTextColor: @invertedTextColor;
+@yellowTextShadow: @invertedTextShadow;
+
+@blackTextColor: @invertedTextColor;
+@blackTextShadow: @invertedTextShadow;
+
+
 /* Ordinality */
 @primaryBackgroundImage: @coloredBackgroundImage;
 @primaryTextColor: @invertedTextColor;