First release

node_modules/nes.css/scss/utilities/_index.scss

@@ -0,0 +1,7 @@
+@charset "utf-8";
+
+@import "animations.scss";
+@import "fill-gaps.scss";
+@import "icon-mixin.scss";
+@import "rounded-corners-mixin.scss";
+@import "visually-hidden.scss";

node_modules/nes.css/scss/utilities/animations.scss

@@ -0,0 +1,9 @@
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}

node_modules/nes.css/scss/utilities/fill-gaps.scss

@@ -0,0 +1,5 @@
+// Fill gaps in pixel art dots
+// `transform` property conflict when used for nes-icon
+@mixin fill-gaps() {
+  transform: rotate(0);
+}

node_modules/nes.css/scss/utilities/icon-mixin.scss

@@ -0,0 +1,59 @@
+@mixin pixelize($size, $matrix, $colors, $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);
+
+    @for $j from 1 through length($row) {
+      $dot: nth($row, $j);
+
+      @if $dot != 0 {
+        @if $ret != "" {
+          $ret: $ret + ",";
+          $moz: $moz + ",";
+        }
+
+        $color: nth($colors, $dot);
+        @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);
+
+  // firefox only style
+  @supports (-moz-appearance: meterbar) {
+    box-shadow: unquote($moz);
+  }
+}

node_modules/nes.css/scss/utilities/rounded-corners-mixin.scss

@@ -0,0 +1,64 @@
+%rounded-corner-defaults {
+  border-style: solid;
+  border-width: $border-size;
+}
+
+@mixin border-image($color) {
+  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(#{red($color)},#{green($color)},#{blue($color)})" /></svg>');
+}
+
+@mixin compact-border-image($color) {
+  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(#{red($color)},#{green($color)},#{blue($color)})" /></svg>');
+}
+
+@mixin border-image-repeat() {
+  border-image-repeat: stretch;
+
+  // for chrome
+  @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+    border-image-repeat: space;
+  }
+
+  // for firefox
+  @supports (-moz-appearance: meterbar) {
+    border-image-repeat: stretch;
+  }
+}
+
+@mixin rounded-corners($isDark: false) {
+  @extend %rounded-corner-defaults;
+
+  border-image-slice: 3;
+  border-image-width: 3;
+
+  @include border-image-repeat();
+
+  @if $isDark {
+    @include border-image($color-white);
+
+    border-image-outset: 0;
+  } @else {
+    @include border-image($color-black);
+
+    border-image-outset: 2;
+  }
+}
+
+@mixin compact-rounded-corners($isDark: false) {
+  @extend %rounded-corner-defaults;
+
+  border-image-slice: 2;
+  border-image-width: 2;
+
+  @include border-image-repeat();
+
+  @if $isDark {
+    @include compact-border-image($color-white);
+
+    border-image-outset: 0;
+  } @else {
+    @include compact-border-image($color-black);
+
+    border-image-outset: 2;
+  }
+}

node_modules/nes.css/scss/utilities/visually-hidden.scss

@@ -0,0 +1,13 @@
+/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
+@mixin visually-hidden() {
+  // position: absolute;
+  // margin: -1px;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}