Merge pull request #366 from HiKaylum/balloons_dark_mode

feat(component-balloons): Dark Mode - Balloons

scss/elements/balloons.scss

@@ -1,3 +1,27 @@
+@mixin box-shadow($color, $fromLeft: true) {
+  @if $fromLeft {
+    // prettier-ignore
+    box-shadow:
+      -4px 0,
+      4px 0,
+      -4px 4px $color,
+      0 4px,
+      -8px 4px,
+      -4px 8px,
+      -8px 8px;
+  } @else {
+    // prettier-ignore
+    box-shadow:
+      -4px 0,
+      4px 0,
+      4px 4px $color,
+      0 4px,
+      8px 4px,
+      4px 8px,
+      8px 8px;
+  }
+}
+
 .nes-balloon {
   @include rounded-corners();
 
@@ -18,6 +42,45 @@
     content: "";
   }
 
+  &.is-dark {
+    @include rounded-corners(true);
+    background: $base-color;
+    color: $background-color;
+    border-image-outset: 2;
+    box-shadow: 0px 0px 0 8px $base-color;
+
+    &.from-left,
+    &.from-right {
+      &::before {
+        background-color: $base-color;
+        border-color: $background-color;
+      }
+
+      &::after {
+        color: $background-color;
+        background-color: $base-color;
+      }
+    }
+
+    &.from-left {
+      &::before {
+        box-shadow: -5px 10px 0 6px $base-color;
+      }
+      &::after {
+        @include box-shadow($base-color);
+      }
+    }
+
+    &.from-right {
+      &::before {
+        box-shadow: 5px 10px 0 6px $base-color;
+      }
+      &::after {
+        @include box-shadow($base-color, false);
+      }
+    }
+  }
+
   &.from-left {
     &::before,
     &::after {
@@ -40,15 +103,7 @@
       margin-right: 8px;
       color: $base-color;
       background-color: $background-color;
-      // prettier-ignore
+      @include box-shadow($background-color);
-      box-shadow:
-        -4px 0,
-        4px 0,
-        -4px 4px $background-color,
-        0 4px,
-        -8px 4px,
-        -4px 8px,
-        -8px 8px;
     }
   }
 
@@ -73,15 +128,7 @@
       height: 4px;
       margin-left: 8px;
       background-color: $background-color;
-      // prettier-ignore
+      @include box-shadow($background-color, false);
-      box-shadow:
-        -4px 0,
-        4px 0,
-        4px 4px $background-color,
-        0 4px,
-        8px 4px,
-        4px 8px,
-        8px 8px;
     }
   }
 }

story/balloons.stories.js

@@ -1,16 +1,18 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios,
+  withKnobs, boolean, radios,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Ballons', module);
 stories.addDecorator(withKnobs);
 
 stories.add('balloon', () => {
-  const selectedClass = radios('direction', {
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
+  const alignment = radios('direction', {
     default: '',
     'from-left': 'from-left',
     'from-right': 'from-right',
   }, '');
-  return `<div class="nes-balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
+  const selectedClasses = [isDark, alignment];
+  return `<div class="nes-balloon ${selectedClasses.join(' ')}"> <p>Hello NES.css</p> </div>`;
 });