feat(button): dedicated variables for toggle and circular

This PR uses dedicated variables for toggle button and circular button variants to allow for consistent theming.

Circular button had hardcoded values and toggle had fixed global variable names set, which made it nearly impossible to theme individually.

Author: lubber-de

src/definitions/elements/button.less

@@ -1043,16 +1043,16 @@
   .ui.toggle.buttons .active.button,
   .ui.buttons .button.toggle.active,
   .ui.button.toggle.active {
-    background-color: @positiveColor;
+    background-color: @toggleBackgroundColor;
     box-shadow: none;
-    text-shadow: @invertedTextShadow;
-    color: @invertedTextColor;
+    text-shadow: @toggleTextShadow;
+    color: @toggleColor;
   }
 
   .ui.button.toggle.active:hover {
-    background-color: @positiveColorHover;
-    text-shadow: @invertedTextShadow;
-    color: @invertedTextColor;
+    background-color: @toggleHoverBackgroundColor;
+    text-shadow: @toggleHoverTextShadow;
+    color: @toggleHoverColor;
   }
 }
 
@@ -1062,11 +1062,11 @@
   ---------------*/
 
   .ui.circular.button {
-    border-radius: 10em;
+    border-radius: @circularBorderRadius;
   }
 
   .ui.circular.button > .icon {
-    width: 1em;
+    width: @circularIconWidth;
     vertical-align: baseline;
   }
 }

src/themes/default/elements/button.variables

@@ -390,3 +390,15 @@
 @animationEasing: ease;
 @fadeScaleHigh: 1.5;
 @fadeScaleLow: 0.75;
+
+/* Toggle */
+@toggleColor: @invertedTextColor;
+@toggleBackgroundColor: @positiveColor;
+@toggleTextShadow: @invertedTextShadow;
+@toggleHoverColor: @invertedTextColor;
+@toggleHoverBackgroundColor: @positiveColorHover;
+@toggleHoverTextShadow: @invertedTextShadow;
+
+/* Circular */
+@circularBorderRadius: 10em;
+@circularIconWidth: 1em;