Fix toggle variables, adjustments to theme

src/definitions/modules/checkbox.less

@@ -221,11 +221,13 @@
 
 .ui.slider.checkbox {
   cursor: pointer;
+  height: @sliderSize;
 }
 
 .ui.slider.checkbox .box,
 .ui.slider.checkbox label {
   padding-left: @sliderLabelDistance;
+  line-height: @sliderLabelLineHeight;
 }
 
 /* Line */
@@ -263,8 +265,8 @@
 
   border: none;
   box-shadow: @handleBoxShadow;
-  width: @handleSize;
-  height: @handleSize;
+  width: @sliderHandleSize;
+  height: @sliderHandleSize;
   top: @sliderHandleOffset;
   left: 0em;
 
@@ -298,11 +300,14 @@
 
 .ui.toggle.checkbox {
   cursor: pointer;
+  height: @toggleSize;
 }
 
 .ui.toggle.checkbox .box,
 .ui.toggle.checkbox label {
-  padding-left: 3em;
+  height: @toggleSize;
+  padding-left: @toggleLabelDistance;
+  line-height: @toggleLabelLineHeight;
 }
 
 /* Switch */
@@ -314,14 +319,14 @@
   position: absolute;
   content: '';
 
-  top: @toggleSwitchVerticalOffset;
+  top: @toggleLaneVerticalOffset;
   z-index: 1;
   border: none;
 
   background-color: @neutralCheckbox;
-  width: @toggleSwitchWidth;
-  height: @toggleSwitchHeight;
-  border-radius: @circularRadius;
+  width: @toggleLaneWidth;
+  height: @toggleLaneHeight;
+  border-radius: @toggleHandleRadius;
 }
 
 /* Handle */
@@ -335,16 +340,13 @@
 
   border: none;
   box-shadow: @handleBoxShadow;
-  width: @handleSize;
-  height: @handleSize;
-  top: @sliderHandleOffset;
+  width: @toggleHandleSize;
+  height: @toggleHandleSize;
+  top: @toggleHandleOffset;
   left: 0em;
 
   border-radius: @circularRadius;
-  transition:
-    background 0.3s ease 0s,
-    left 0.3s ease 0s
-  ;
+  transition: @toggleLabelTransition;
 }
 
 .ui.toggle.checkbox input ~ .box:after,

src/themes/packages/default/globals/site.variables

@@ -71,7 +71,7 @@
 @transparentWhite       : rgba(255, 255, 255, 0.05);
 @strongTransparentWhite : rgba(255, 255, 255, 0.01);
 
-/* Used for differentiating greys */
+/* Used for differentiating neutrals */
 @subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
 
 /* Used for differentiating layers */

src/themes/packages/default/modules/checkbox.variables

@@ -62,35 +62,46 @@
 @checkboxRadioCircleSize: 9px;
 
 /* Slider & Toggle Handle */
-@handleBackground: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+@handleBackground: @white @subtleGradient;
 @handleBoxShadow:
-  0px 2px 2px 0px rgba(0, 0, 0, 0.1),
-  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  @subtleShadow,
+  0px 0px 0px 1px @borderColor inset
 ;
-@handleSize: 1.25rem;
 
 /* Slider */
-@sliderLineWidth: 2.25rem;
+@sliderHandleSize: 1.5rem;
+
+@sliderLineWidth: 3.5rem;
 @sliderLineHeight: 0.25rem;
 @sliderLineVerticalOffset: 0.4rem;
 
-@sliderHandleOffset: (1rem - @handleSize) / 2;
-@sliderTravelDistance: @sliderLineWidth - @handleSize;
+@sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
+@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;
 @sliderLabelDistance: @sliderLineWidth + 1rem;
 
+@sliderSize: @sliderHandleSize;
+@sliderLabelLineHeight: 1rem;
 
 /* Toggle */
-@toggleSwitchWidth: 2.25rem;
-@toggleSwitchHeight: 1.25rem;
-@toggleSwitchVerticalOffset: (1rem - @toggleSwitchHeight) / 2;
+@toggleSize: 1.75rem;
+@toggleHandleSize: @toggleSize;
+@toggleHandleRadius: @circularRadius;
+@toggleHandleOffset: 0rem;
+
+@toggleLaneWidth: 3.5rem;
+@toggleLaneHeight: 1.75rem;
+@toggleLaneVerticalOffset: 0rem;
+@toggleOffOffset: -0.05rem;
+@toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.05rem;
+
+@toggleLabelDistance: @toggleLaneWidth + @toggleSize;
+@toggleLabelLineHeight: 1.5rem;
+@toggleLabelTransition:
+  background 0.3s ease 0s,
+  left 0.3s ease 0s
+;
 
 @toggleFocusColor: @strongTransparentBlack;
-@toggleHandleOffset: (1rem - @handleSize) / 2;
-@toggleTravelDistance: @toggleSwitchWidth - @handleSize;
-@toggleLabelDistance: @toggleSwitchWidth + 1rem;
-
-@toggleOffOffset: -0.2rem;
-@toggleOnOffset: 1.2rem;