Add colored checkbox theme, add additional theming variables #394

src/definitions/modules/checkbox.less

@@ -114,7 +114,7 @@
 .ui.checkbox + label {
   cursor: pointer;
   color: @labelColor;
-  transition: color 0.2s ease;
+  transition: @labelTransition;
   user-select: none;
 }
 
@@ -170,7 +170,7 @@
 .ui.checkbox input[type="radio"]:focus ~ .box:before,
 .ui.checkbox input[type="radio"]:focus ~ label:before {
   background: @checkboxFocusedBackground;
-  border: 1px solid @checkboxFocusedBorder;
+  border: @checkboxFocusedBorder;
 }
 .ui.checkbox input[type="checkbox"]:focus ~ .box:after,
 .ui.checkbox input[type="checkbox"]:focus ~ label:after,
@@ -194,7 +194,7 @@
 .ui.checkbox input[type="radio"]:checked ~ .box:before,
 .ui.checkbox input[type="radio"]:checked ~ label:before {
   background: @checkboxActiveBackground;
-  border: 1px solid @checkboxActiveBorder;
+  border: @checkboxActiveBorder;
 }
 
 .ui.checkbox input[type="checkbox"]:checked ~ .box:after,
@@ -205,6 +205,7 @@
   color: @checkboxActiveColor;
 }
 
+
 /*--------------
     Read-Only
 ---------------*/
@@ -265,6 +266,7 @@
   left: @checkboxRadioLeft;
   font-size: @checkboxRadioCircleSize;
 }
+
 /* Radio Checkbox */
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
@@ -275,6 +277,16 @@
   background-color: @checkboxBulletColor;
 }
 
+/* Active */
+
+.ui.radio.checkbox input[type="radio"]:checked ~ .box:before,
+.ui.radio.checkbox input[type="radio"]:checked ~ label:before {
+  background-color: @checkboxRadioActiveBackground;
+}
+.ui.radio.checkbox input[type="radio"]:checked ~ .box:after,
+.ui.radio.checkbox input[type="radio"]:checked ~ label:after {
+  background-color: @checkboxActiveBulletColor;
+}
 
 /*--------------
      Slider
@@ -309,9 +321,8 @@
 
   transform: none;
   border-radius: @sliderLineRadius;
-  transition:
-    background 0.3s ease
-  ;
+  transition: @sliderLineTransition;
+
 }
 
 /* Handle */
@@ -332,9 +343,7 @@
   transform: none;
 
   border-radius: @circularRadius;
-  transition:
-    left 0.3s ease 0s
-  ;
+  transition: @sliderHandleTransition;
 }
 
 /* Focus */
@@ -430,10 +439,7 @@
   left: 0em;
 
   border-radius: @circularRadius;
-  transition:
-    background 0.3s ease 0s,
-    left 0.3s ease 0s
-  ;
+  transition: @toggleHandleTransition;
 }
 
 .ui.toggle.checkbox input[type="checkbox"] ~ .box:after,

src/themes/colored/modules/checkbox.variables

@@ -0,0 +1,14 @@
+@checkboxActiveBackground: @primaryColor;
+@checkboxActiveColor: @white;
+@checkboxActiveBorder: 1px solid @primaryColor;
+
+@sliderOnLineColor: @primaryColor;
+
+@checkboxRadioActiveBackground: @primaryColor;
+@checkboxActiveBulletColor: @primaryColor;
+
+
+@handleBackground: @white @subtleGradient;
+@handleBoxShadow:
+  0px 0px 0px 1px @selectedBorderColor inset
+;

src/themes/default/modules/checkbox.variables

@@ -19,25 +19,18 @@
 @checkboxBorder: 1px solid @solidBorderColor;
 @checkboxBorderRadius: 0.25em;
 @checkboxTransition:
-  background-color 0.3s ease,
-  border 0.3s ease,
-  box-shadow 0.3s ease
+  background-color @defaultDuration @defaultEasing,
+  border @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing
 ;
 
 /* Checkmark */
 @checkboxCheckTop: 0px;
 @checkboxCheckLeft: 0px;
 
-
-/*-------------------
-      Coupling
---------------------*/
-
+/* Label */
 @labelColor: @textColor;
-
-@labelOpacity: 0.6;
-@labelHoverOpacity: 0.8;
-@labelSelectedOpacity: 1;
+@labelTransition: color @defaultDuration @defaultEasing;
 
 /*-------------------
         States
@@ -47,19 +40,19 @@
 @checkboxHoverBorder: 1px solid @selectedBorderColor;
 @labelHoverColor: @hoveredTextColor;
 
-@checkboxPressedBackground: #F5F5F5;
+@checkboxPressedBackground: @offWhite;
 @checkboxPressedBorder: 1px solid @selectedBorderColor;
-@checkboxPressedColor: inherit;
+@checkboxPressedColor: @selectedTextColor;
 @labelPressedColor: @selectedTextColor;
 
-@checkboxFocusedBackground: #F5F5F5;
+@checkboxFocusedBackground: @offWhite;
 @checkboxFocusedBorder: 1px solid @selectedBorderColor;
-@checkboxFocusedColor: inherit;
+@checkboxFocusedColor: @selectedTextColor;
 @labelFocusedColor: @selectedTextColor;
 
 @checkboxActiveBackground: #FFFFFF;
 @checkboxActiveBorder: 1px solid @borderColor;
-@checkboxActiveColor: inherit;
+@checkboxActiveColor: @selectedTextColor;
 @labelActiveColor: @selectedTextColor;
 
 
@@ -81,6 +74,9 @@
 @checkboxBulletColor: @textColor;
 @checkboxBulletRadius: @circularRadius;
 
+@checkboxActiveBulletColor: @checkboxActiveColor;
+@checkboxRadioActiveBackground: @white;
+
 /* Slider & Toggle Handle */
 @handleBackground: @white @subtleGradient;
 @handleBoxShadow:
@@ -91,6 +87,7 @@
 /* Slider */
 @sliderHandleSize: 1.5rem;
 @sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
+@sliderHandleTransition: left @defaultDuration @defaultEasing;
 @sliderLineWidth: 3.5rem;
 
 @sliderWidth: @sliderLineWidth;
@@ -100,6 +97,7 @@
 @sliderLineVerticalOffset: 0.4rem;
 @sliderLineColor: @neutralCheckbox;
 @sliderLineRadius: @circularRadius;
+@sliderLineTransition: background @defaultDuration @defaultEasing;
 
 @sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;
 
@@ -124,8 +122,8 @@
 @toggleHandleRadius: @circularRadius;
 @toggleHandleOffset: 0rem;
 @toggleHandleTransition:
-  background 0.3s ease 0s,
-  left 0.3s ease 0s
+  background @defaultDuration @defaultEasing,
+  left @defaultDuration @defaultEasing
 ;
 
 @toggleLaneHeight: @toggleHandleSize;