From 04d2296432858864234f1273b82a1cde5256580f Mon Sep 17 00:00:00 2001
From: Joshua Rouzer <jrouzer01@uscon-m-nx0033.nuix.com>
Date: Sun, 9 Dec 2018 01:32:34 -0500
Subject: [PATCH 1/4] refactor(container): cleanup rounded box-shadow colors

ref #60
---
 scss/elements/containers.scss | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/scss/elements/containers.scss b/scss/elements/containers.scss
index 16ed24c..2beeee9 100644
--- a/scss/elements/containers.scss
+++ b/scss/elements/containers.scss
@@ -82,22 +82,23 @@
   }
 
   @mixin rounded($base, $background) {
+    color: $base;
     border: none;
     border-radius: 0;
     // prettier-ignore
     box-shadow:
       0 -4px $background,
-      0 -8px $base,
+      0 -8px,
       4px 0 $background,
-      4px -4px $base,
-      8px 0 $base,
+      4px -4px,
+      8px 0,
       0 4px $background,
-      0 8px $base,
+      0 8px,
       -4px 0 $background,
-      -4px 4px $base,
-      -8px 0 $base,
-      -4px -4px $base,
-      4px 4px $base;
+      -4px 4px,
+      -8px 0,
+      -4px -4px,
+      4px 4px;
   }
 
   &.is-rounded {

From 55a6e3ac000dde49ebb53cd912112e3d6bffac9c Mon Sep 17 00:00:00 2001
From: Joshua Rouzer <jrouzer01@uscon-m-nx0033.nuix.com>
Date: Sun, 9 Dec 2018 17:29:53 -0500
Subject: [PATCH 2/4] refactor(icons): use default color

ref #60
---
 scss/icons/icons.scss             | 10 +++++-----
 scss/pixel-arts/bcrikko.scss      |  2 +-
 scss/pixel-arts/nes-jp-icon.scss  |  2 +-
 scss/pixel-arts/snes-icon.scss    |  2 +-
 scss/pixel-arts/snes-jp-icon.scss |  2 +-
 scss/utilities/icon-mixin.scss    | 15 ++++++++++++---
 6 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
index 43971b9..f2ee487 100644
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -40,14 +40,14 @@
     }
 
     &.heart::before {
-      @include pixelize($icon-heart, $icon-heart-colors, $px);
+      @include pixelize($icon-heart, $icon-heart-colors, $px, nth($icon-heart-colors, 3));
     }
     &.heart.is-empty::before {
       @include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
     }
 
     &.star::before {
-      @include pixelize($icon-star, $icon-star-colors, $px);
+      @include pixelize($icon-star, $icon-star-colors, $px, nth($icon-star-colors, 3));
     }
     &.star.is-empty::before {
       @include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
@@ -78,15 +78,15 @@
     }
 
     &.facebook::before {
-      @include pixelize($icon-facebook, $icon-facebook-colors, $px);
+      @include pixelize($icon-facebook, $icon-facebook-colors, $px, nth($icon-facebook-colors, 2));
     }
 
     &.github::before {
-      @include pixelize($icon-github, $icon-github-colors, $px);
+      @include pixelize($icon-github, $icon-github-colors, $px, nth($icon-github-colors, 2));
     }
 
     &.youtube::before {
-      @include pixelize($icon-youtube, $icon-youtube-colors, $px);
+      @include pixelize($icon-youtube, $icon-youtube-colors, $px, nth($icon-youtube-colors, 2));
     }
 
     &.close::before {
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
index 348bf24..be3dc5b 100644
--- a/scss/pixel-arts/bcrikko.scss
+++ b/scss/pixel-arts/bcrikko.scss
@@ -34,6 +34,6 @@
     content: "";
     background: transparent;
 
-    @include pixelize($bcrikko, $bcrikko-colors, $px);
+    @include pixelize($bcrikko, $bcrikko-colors, $px, nth($bcrikko-colors, 2));
   }
 }
diff --git a/scss/pixel-arts/nes-jp-icon.scss b/scss/pixel-arts/nes-jp-icon.scss
index b98a993..0223271 100644
--- a/scss/pixel-arts/nes-jp-icon.scss
+++ b/scss/pixel-arts/nes-jp-icon.scss
@@ -28,6 +28,6 @@
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px);
+    @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
   }
 }
diff --git a/scss/pixel-arts/snes-icon.scss b/scss/pixel-arts/snes-icon.scss
index 7994e98..6d19652 100644
--- a/scss/pixel-arts/snes-icon.scss
+++ b/scss/pixel-arts/snes-icon.scss
@@ -28,6 +28,6 @@
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px);
+    @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
   }
 }
diff --git a/scss/pixel-arts/snes-jp-icon.scss b/scss/pixel-arts/snes-jp-icon.scss
index e2db10d..0e69ba0 100644
--- a/scss/pixel-arts/snes-jp-icon.scss
+++ b/scss/pixel-arts/snes-jp-icon.scss
@@ -28,6 +28,6 @@
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px);
+    @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
   }
 }
diff --git a/scss/utilities/icon-mixin.scss b/scss/utilities/icon-mixin.scss
index c84d3ed..bf87505 100644
--- a/scss/utilities/icon-mixin.scss
+++ b/scss/utilities/icon-mixin.scss
@@ -1,6 +1,9 @@
-@mixin pixelize($matrix, $colors, $size) {
+@mixin pixelize($matrix, $colors, $size, $default-color: null) {
   $ret: "";
   $moz: "";
+  @if ($default-color == null) {
+    $default-color: nth($colors, 1);
+  }
 
   @for $i from 1 through length($matrix) {
     $row: nth($matrix, $i);
@@ -15,14 +18,20 @@
         }
 
         $color: nth($colors, $dot);
-        $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
-        $moz: $moz + ($j * $size)+" "+ ($i * $size)+" 0 0.020em " + $color;
+        @if $color == $default-color {
+          $ret: $ret + ($j * $size) + " " + ($i * $size);
+          $moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em";
+        } @else {
+          $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
+          $moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em " + $color;
+        }
       }
     }
   }
 
   width: $size;
   height: $size;
+  color: $default-color;
   box-shadow: unquote($ret);
   @-moz-document url-prefix() {
     -webkit-box-shadow: unquote($moz);

From d5173b9ad203b9d1ffc0c314f0905a9884c56fb9 Mon Sep 17 00:00:00 2001
From: Joshua Rouzer <jrouzer01@uscon-m-nx0033.nuix.com>
Date: Sun, 9 Dec 2018 22:01:01 -0500
Subject: [PATCH 3/4] refactor(icons): automatically pick main color

ref #60
---
 scss/icons/icons.scss             | 10 +++++-----
 scss/pixel-arts/bcrikko.scss      |  2 +-
 scss/pixel-arts/nes-jp-icon.scss  |  2 +-
 scss/pixel-arts/snes-icon.scss    |  2 +-
 scss/pixel-arts/snes-jp-icon.scss |  2 +-
 scss/utilities/icon-mixin.scss    | 20 +++++++++++++++++++-
 6 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
index f2ee487..43971b9 100644
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -40,14 +40,14 @@
     }
 
     &.heart::before {
-      @include pixelize($icon-heart, $icon-heart-colors, $px, nth($icon-heart-colors, 3));
+      @include pixelize($icon-heart, $icon-heart-colors, $px);
     }
     &.heart.is-empty::before {
       @include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
     }
 
     &.star::before {
-      @include pixelize($icon-star, $icon-star-colors, $px, nth($icon-star-colors, 3));
+      @include pixelize($icon-star, $icon-star-colors, $px);
     }
     &.star.is-empty::before {
       @include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
@@ -78,15 +78,15 @@
     }
 
     &.facebook::before {
-      @include pixelize($icon-facebook, $icon-facebook-colors, $px, nth($icon-facebook-colors, 2));
+      @include pixelize($icon-facebook, $icon-facebook-colors, $px);
     }
 
     &.github::before {
-      @include pixelize($icon-github, $icon-github-colors, $px, nth($icon-github-colors, 2));
+      @include pixelize($icon-github, $icon-github-colors, $px);
     }
 
     &.youtube::before {
-      @include pixelize($icon-youtube, $icon-youtube-colors, $px, nth($icon-youtube-colors, 2));
+      @include pixelize($icon-youtube, $icon-youtube-colors, $px);
     }
 
     &.close::before {
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
index be3dc5b..348bf24 100644
--- a/scss/pixel-arts/bcrikko.scss
+++ b/scss/pixel-arts/bcrikko.scss
@@ -34,6 +34,6 @@
     content: "";
     background: transparent;
 
-    @include pixelize($bcrikko, $bcrikko-colors, $px, nth($bcrikko-colors, 2));
+    @include pixelize($bcrikko, $bcrikko-colors, $px);
   }
 }
diff --git a/scss/pixel-arts/nes-jp-icon.scss b/scss/pixel-arts/nes-jp-icon.scss
index 0223271..b98a993 100644
--- a/scss/pixel-arts/nes-jp-icon.scss
+++ b/scss/pixel-arts/nes-jp-icon.scss
@@ -28,6 +28,6 @@
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
+    @include pixelize($logo, $logo-colors, $px);
   }
 }
diff --git a/scss/pixel-arts/snes-icon.scss b/scss/pixel-arts/snes-icon.scss
index 6d19652..7994e98 100644
--- a/scss/pixel-arts/snes-icon.scss
+++ b/scss/pixel-arts/snes-icon.scss
@@ -28,6 +28,6 @@
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
+    @include pixelize($logo, $logo-colors, $px);
   }
 }
diff --git a/scss/pixel-arts/snes-jp-icon.scss b/scss/pixel-arts/snes-jp-icon.scss
index 0e69ba0..e2db10d 100644
--- a/scss/pixel-arts/snes-jp-icon.scss
+++ b/scss/pixel-arts/snes-jp-icon.scss
@@ -28,6 +28,6 @@
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
+    @include pixelize($logo, $logo-colors, $px);
   }
 }
diff --git a/scss/utilities/icon-mixin.scss b/scss/utilities/icon-mixin.scss
index bf87505..741288d 100644
--- a/scss/utilities/icon-mixin.scss
+++ b/scss/utilities/icon-mixin.scss
@@ -2,7 +2,25 @@
   $ret: "";
   $moz: "";
   @if ($default-color == null) {
-    $default-color: nth($colors, 1);
+    // count number of each color in matrix and decide main color by highest count
+    $matrix-colors: ();
+    $counts: ();
+    @each $row in $matrix {
+      @each $item in $row {
+        @if $item != 0 {
+          $index: index($matrix-colors, $item);
+          @if not $index {
+            $matrix-colors: append($matrix-colors, $item);
+            $counts: append($counts, 1);
+          } @else {
+            $count: nth($counts, $index) + 1;
+            $counts: set-nth($counts, $index, $count);
+          }
+        }
+      }
+    }
+    // use index of the highest count to get the corresponding matrix color
+    $default-color: nth($colors, nth($matrix-colors, index($counts, max($counts...))));
   }
 
   @for $i from 1 through length($matrix) {

From a202f152e09a3fdebb3010a9f0bf3e1c3935b255 Mon Sep 17 00:00:00 2001
From: Joshua Rouzer <jrouzer01@uscon-m-nx0033.nuix.com>
Date: Sun, 9 Dec 2018 22:18:20 -0500
Subject: [PATCH 4/4] refactor(balloon): box shadow default color

ref #60
---
 scss/elements/balloons.scss | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/scss/elements/balloons.scss b/scss/elements/balloons.scss
index b2e8039..76690ea 100644
--- a/scss/elements/balloons.scss
+++ b/scss/elements/balloons.scss
@@ -51,16 +51,17 @@
       width: 18px;
       height: 4px;
       margin-right: 8px;
+      color: $base-color;
       background-color: $background-color;
       // prettier-ignore
       box-shadow:
-        -4px 0 $base-color,
-        4px 0 $base-color,
+        -4px 0,
+        4px 0,
         -4px 4px $background-color,
-        0 4px $base-color,
-        -8px 4px $base-color,
-        -4px 8px $base-color,
-        -8px 8px $base-color;
+        0 4px,
+        -8px 4px,
+        -4px 8px,
+        -8px 8px;
     }
   }
 
@@ -87,13 +88,13 @@
       background-color: $background-color;
       // prettier-ignore
       box-shadow:
-        -4px 0 $base-color,
-        4px 0 $base-color,
+        -4px 0,
+        4px 0,
         4px 4px $background-color,
-        0 4px $base-color,
-        8px 4px $base-color,
-        4px 8px $base-color,
-        8px 8px $base-color;
+        0 4px,
+        8px 4px,
+        4px 8px,
+        8px 8px;
     }
   }
 }