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.
fomantic · Jul 17, 2020 · 3f0ceaa · 3f0ceaa
1 parent 5c37067
commit 3f0ceaa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/src/definitions/elements/button.less b/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;
   }
 }

diff --git a/src/themes/default/elements/button.variables b/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;