From 2316c07c3a99c6075e0c32c57e04982c2ddd53d1 Mon Sep 17 00:00:00 2001
From: Igor Guastalla <iguastalla@uolinc.com>
Date: Tue, 28 Jan 2020 07:34:35 -0300
Subject: [PATCH 1/2] feat(list): add list is-dark storybook and classes

---
 scss/elements/lists.scss      | 39 +++++++++++++++++++++--------------
 story/lists/lists.template.js |  6 +++++-
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
index 485b3f6..8101823 100644
--- a/scss/elements/lists.scss
+++ b/scss/elements/lists.scss
@@ -1,3 +1,18 @@
+@mixin list-before(
+  $class,
+  $disc-or-circle,
+  $colors: ($base-color, map-get($default-colors, "shadow"))
+) {
+  &.is-#{$class} li::before {
+    position: absolute;
+    top: calc(50% - 8px);
+    left: -22px;
+    content: "";
+
+    @include pixelize(2px, $disc-or-circle, $colors);
+  }
+}
+
 .nes-list {
   // prettier-ignore
   $disc: (
@@ -18,7 +33,6 @@
     (0,0,1,1,1,1,0,0),
     (0,0,0,1,1,0,0,0)
   );
-  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   list-style-type: none;
 
@@ -26,21 +40,16 @@
     position: relative;
   }
 
-  &.is-disc li::before {
-    position: absolute;
-    top: calc(50% - 8px);
-    left: -22px;
-    content: "";
+  @include list-before("disc", $disc);
+  @include list-before("circle", $circle);
 
-    @include pixelize(2px, $disc, $colors);
-  }
+  &.is-dark {
+    $dark-colors: ($background-color, $base-color);
+    @include list-before("disc", $disc, $dark-colors);
+    @include list-before("circle", $circle, $dark-colors);
 
-  &.is-circle li::before {
-    position: absolute;
-    top: calc(50% - 8px);
-    left: -22px;
-    content: "";
-
-    @include pixelize(2px, $circle, $colors);
+    li {
+      color: $color-white;
+    }
   }
 }
diff --git a/story/lists/lists.template.js b/story/lists/lists.template.js
index f396476..fc42dd6 100644
--- a/story/lists/lists.template.js
+++ b/story/lists/lists.template.js
@@ -1,7 +1,8 @@
-import { radios } from '@storybook/addon-knobs';
+import { radios, boolean } from '@storybook/addon-knobs';
 import classNames from 'classnames';
 
 export default () => {
+  const isDark = boolean('is-dark', false);
   const listOptions = radios('List Type', {
     'is-disc': 'is-disc',
     'is-circle': 'is-circle',
@@ -9,6 +10,9 @@ export default () => {
 
   const listClasses = classNames(
     'nes-list',
+    {
+      'is-dark': isDark,
+    },
     listOptions,
   );
 

From a357881a2e56160e43b7b1e7db0e09b520d8b463 Mon Sep 17 00:00:00 2001
From: Igor Guastalla <iguastalla@uolinc.com>
Date: Tue, 28 Jan 2020 07:38:51 -0300
Subject: [PATCH 2/2] docs: add list is-dark to index doc example

---
 docs/script.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/script.js b/docs/script.js
index 22b0fa0..c1cfd28 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -261,7 +261,27 @@ const sampleCollection = [
     <li>Thou hast had a good afternoon</li>
     <li>Good night.</li>
   </ul>
-</div>`,
+</div>
+
+<section class="nes-container is-dark">
+  <div class="lists">
+    <ul class="nes-list is-disc is-dark">
+      <li>Good morning.</li>
+      <li>Thou hast had a good night's sleep, I hope.</li>
+      <li>Thou hast had a good afternoon</li>
+      <li>Good night.</li>
+    </ul>
+  </div>
+
+  <div class="lists">
+    <ul class="nes-list is-circle is-dark">
+      <li>Good morning.</li>
+      <li>Thou hast had a good night's sleep, I hope.</li>
+      <li>Thou hast had a good afternoon</li>
+      <li>Good night.</li>
+    </ul>
+  </div>
+</section>`,
   },
   {
     title: 'tables',