style(theme): #77 added theme support for checkboxes

Author: bugy

sass/components/_variables.scss

@@ -204,8 +204,8 @@ $input-margin-bottom: 8px;
 $input-margin: 0 0 $input-margin-bottom 0 !default;
 $input-padding: 0 !default;
 $label-font-size: .8rem !default;
-$input-disabled-color: rgba(0,0,0, .42) !default;
-$input-disabled-solid-color: #949494 !default;
+$input-disabled-color: var(--font-color-disabled) !default;
+$input-disabled-solid-color: var(--font-color-disabled) !default;
 $input-disabled-border: 1px dotted $input-disabled-color !default;
 $input-invalid-border: 1px solid $input-error-color !default;
 $input-icon-size: 2rem;
@@ -214,7 +214,7 @@ $placeholder-text-color: var(--font-color-medium) !default;
 // Radio Buttons
 $radio-fill-color: $primary-color !default;
 $radio-focus-color: $primary-color-focus-opaque !default;
-$radio-empty-color: #5a5a5a !default;
+$radio-empty-color: var(--font-color-medium) !default;
 $radio-border: 2px solid $radio-fill-color !default;
 
 // Range

sass/components/forms/_checkboxes.scss

@@ -54,8 +54,8 @@
     transform: scale(1);
     border: 0;
     border-radius: 50%;
-    box-shadow: 0 0 0 10px rgba(0,0,0,.1);
-    background-color: rgba(0,0,0,.1);
+    box-shadow: 0 0 0 10px $bg-focus-color-opaque;
+    background-color: $bg-focus-color-opaque;
   }
 }
 
@@ -159,8 +159,8 @@
       top: 0;
       width: 20px;
       height: 20px;
-      border: 2px solid $secondary-color;
-      background-color: $secondary-color;
+      border: 2px solid $primary-color;
+      background-color: $primary-color;
       z-index: 0;
     }
   }
@@ -169,13 +169,13 @@
   &.tabbed:focus + span:not(.lever):after {
     border-radius: 2px;
     border-color: $radio-empty-color;
-    background-color: rgba(0,0,0,.1);
+    background-color: $bg-focus-color-opaque;
   }
 
   &.tabbed:checked:focus + span:not(.lever):after {
     border-radius: 2px;
-    background-color: $secondary-color;
-    border-color: $secondary-color;
+    background-color: $primary-color;
+    border-color: $primary-color;
   }
 
   // Disabled style