Merge pull request #143 from jjspace/60-box-shadow-color

refactor: box shadow color

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;
     }
   }
 }

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 {

scss/utilities/icon-mixin.scss

@@ -1,6 +1,27 @@
-@mixin pixelize($matrix, $colors, $size) {
+@mixin pixelize($matrix, $colors, $size, $default-color: null) {
   $ret: "";
   $moz: "";
+  @if ($default-color == null) {
+    // 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) {
     $row: nth($matrix, $i);
@@ -15,14 +36,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);