feat(checkbox): add dark mode to checkbox

We need to add styles when the checkbox is on dark mode, currently, the
checkbox is not visible at all if the container is dark.

scss/form/checkboxes.scss

@@ -46,6 +46,7 @@
     (2,2,2,2,2,2,2,2,0,0)
   );
   $colors: ($base-color, map-get($default-colors, "shadow"));
+  $colors-checkbox-dark: ($color-white, map-get($default-colors, "shadow"));
 
   margin-left: 28px;
   -webkit-appearance: none;
@@ -80,4 +81,24 @@
   &:checked:focus + span::before {
     @include pixelize(2px, $checkbox-checked-focus, $colors);
   }
+  &.is-dark {
+    + span {
+      color: $color-white;
+    }
+    // prettier-ignore
+    + span::before { /* stylelint-disable-line no-descending-specificity */
+      color: $color-white;
+    }
+
+    &:checked + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
+
+      color: $color-white;
+    }
+    &:checked:focus + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
+
+      color: $color-white;
+    }
+  }
 }