From 9c4afae3d42521724daed577ddc047a2af82fb4f Mon Sep 17 00:00:00 2001
From: Ilyeo <jrag.tkd@gmail.com>
Date: Tue, 29 Jan 2019 22:40:18 -0600
Subject: [PATCH] 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 | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/scss/form/checkboxes.scss b/scss/form/checkboxes.scss
index 14c75c9..945a326 100644
--- a/scss/form/checkboxes.scss
+++ b/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;
+    }
+  }
 }