#2610 and #2607 iterating on checkbox variable additions

src/definitions/modules/checkbox.less

@@ -165,15 +165,15 @@
 
 .ui.checkbox input:focus ~ .box:before,
 .ui.checkbox input:focus ~ label:before {
-  background: @checkboxFocusedBackground;
-  border-color: @checkboxFocusedBorderColor;
+  background: @checkboxFocusBackground;
+  border-color: @checkboxFocusBorderColor;
 }
 .ui.checkbox input:focus ~ .box:after,
 .ui.checkbox input:focus ~ label:after {
-  color: @checkboxFocusedColor;
+  color: @checkboxFocusCheckColor;
 }
 .ui.checkbox input:focus ~ label {
-  color: @labelFocusedColor;
+  color: @labelFocusColor;
 }
 
 /*--------------
@@ -217,6 +217,10 @@
   background: @checkboxActiveFocusBackground;
   border-color: @checkboxActiveFocusBorderColor;
 }
+.ui.checkbox input:checked ~ .box:after,
+.ui.checkbox input:checked ~ label:after {
+  color: @checkboxActiveFocusCheckColor;
+}
 
 
 /*--------------
@@ -312,6 +316,16 @@
   background-color: @bulletColor;
 }
 
+/* Focus */
+.ui.radio.checkbox input:focus ~ .box:before,
+.ui.radio.checkbox input:focus ~ label:before {
+  background-color: @radioFocusBackground;
+}
+.ui.radio.checkbox input:checked ~ .box:after,
+.ui.radio.checkbox input:checked ~ label:after {
+  background-color: @radioFocusBulletColor;
+}
+
 /* Active */
 .ui.radio.checkbox input:checked ~ .box:before,
 .ui.radio.checkbox input:checked ~ label:before {
@@ -322,6 +336,16 @@
   background-color: @radioActiveBulletColor;
 }
 
+/* Active Focus */
+.ui.radio.checkbox input:focus:checked ~ .box:before,
+.ui.radio.checkbox input:focus:checked ~ label:before {
+  background-color: @radioActiveBackground;
+}
+.ui.radio.checkbox input:focus:checked ~ .box:after,
+.ui.radio.checkbox input:focus:checked ~ label:after {
+  background-color: @radioActiveBulletColor;
+}
+
 /*--------------
      Slider
 ---------------*/
@@ -517,11 +541,11 @@
 /* Active */
 .ui.toggle.checkbox input:checked ~ .box,
 .ui.toggle.checkbox input:checked ~ label {
-  color: @toggleOnLabelColor;
+  color: @toggleOnLabelColor !important;
 }
 .ui.toggle.checkbox input:checked ~ .box:before,
 .ui.toggle.checkbox input:checked ~ label:before {
-  background-color: @toggleOnLaneColor;
+  background-color: @toggleOnLaneColor !important;
 }
 .ui.toggle.checkbox input:checked ~ .box:after,
 .ui.toggle.checkbox input:checked ~ label:after {
@@ -532,11 +556,11 @@
 /* Active Focus */
 .ui.toggle.checkbox input:focus:checked ~ .box,
 .ui.toggle.checkbox input:focus:checked ~ label {
-  color: @toggleOnFocusLabelColor;
+  color: @toggleOnFocusLabelColor !important;
 }
 .ui.toggle.checkbox input:focus:checked ~ .box:before,
 .ui.toggle.checkbox input:focus:checked ~ label:before {
-  background-color: @toggleOnFocusLaneColor;
+  background-color: @toggleOnFocusLaneColor !important;
 }
 
 /*******************************

src/themes/colored/modules/checkbox.variables

@@ -10,7 +10,7 @@
 @sliderOnLineColor: @primaryColor;
 
 /* Radio */
-@radioActiveBulletColor @primaryColor;
+@radioActiveBulletColor: @primaryColor;
 
 /* Handle */
 @handleBackground: @white @subtleGradient;

src/themes/default/modules/checkbox.variables

@@ -47,11 +47,11 @@
 @checkboxPressedColor: @selectedTextColor;
 @labelPressedColor: @selectedTextColor;
 
-/* Focused */
-@checkboxFocusedBackground: @offWhite;
-@checkboxFocusedBorderColor: @selectedBorderColor;
-@checkboxFocusedColor: @selectedTextColor;
-@labelFocusedColor: @selectedTextColor;
+/* Focus */
+@checkboxFocusBackground: @offWhite;
+@checkboxFocusBorderColor: @selectedBorderColor;
+@checkboxFocusCheckColor: @selectedTextColor;
+@labelFocusColor: @selectedTextColor;
 
 /* Active */
 @labelActiveColor: @selectedTextColor;
@@ -61,8 +61,8 @@
 @checkboxActiveCheckOpacity: 1;
 
 /* Active Focus */
-@checkboxActiveFocusBackground: @checkboxFocusedBackground;
-@checkboxActiveFocusBorderColor: @checkboxFocusedBorderColor;
+@checkboxActiveFocusBackground: @checkboxFocusBackground;
+@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor;
 @checkboxActiveFocusCheckColor: @selectedTextColor;
 
 /* Indeterminate */
@@ -93,10 +93,13 @@
 @bulletColor: @textColor;
 @bulletRadius: @circularRadius;
 
-@radioActiveBackground: @white;
+@radioFocusBackground: @checkboxFocusBackground;
+@radioFocusBulletColor: @checkboxFocusCheckColor;
+
+@radioActiveBackground: @checkboxActiveBackground;
 @radioActiveBulletColor: @checkboxActiveCheckColor;
 
-@radioActiveFocusBackground: @white;
+@radioActiveFocusBackground: @checkboxActiveFocusBackground;
 @radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor;
 
 /* Slider & Toggle Handle */