Move from box-shadow to border-image for pixelated borders (#234)

* refactor: Convert pixelated borders from box-shadows to border-images

Our previous usage of `box-shadows` and pseudo elements proved to be pretty buggy. Converting to
`border-image`s seems to have fixed a lot of the issues that `box-shadows` caused, such as
`background-color`s appering over top of our borders.

BREAKING CHANGE: This change both eliminates pseudo elements from several components, and adds
pseudo elements to components that did not have them before. This could cause compatibility issues
for users that relied on the existence of those pseudo elements for various styling techniques.

* style(buttons): Remove superfluous commented code

scss/base/variables.scss

@@ -7,6 +7,7 @@ $background-color: $color-white;
 
 $cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png);
 $cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png);
+$border-size: 0.25em;
 
 $default-colors: (
   normal: $background-color,

scss/elements/balloons.scss

@@ -1,25 +1,12 @@
 .nes-balloon {
+  @include rounded-corners();
   position: relative;
   display: inline-block;
   padding: 1rem 1.5rem;
   margin: 8px;
   margin-bottom: 30px;
-  background-color: $background-color;
 
-  // prettier-ignore
+  background-color: $background-color;
-  box-shadow:
-    0 -4px $background-color,
-    0 -8px $base-color,
-    4px 0 $background-color,
-    4px -4px $base-color,
-    8px 0 $base-color,
-    0 4px $background-color,
-    0 8px $base-color,
-    -4px 0 $background-color,
-    -4px 4px $base-color,
-    -8px 0 $base-color,
-    -4px -4px $base-color,
-    4px 4px $base-color;
 
   > :last-child {
     margin-bottom: 0;

scss/elements/buttons.scss

@@ -1,81 +1,34 @@
 @mixin btn-style($color, $background, $hover-background, $shadow) {
   color: $color;
   background-color: $background;
+
+  &::after {
+    position: absolute;
+    top: -$border-size;
+    right: -$border-size;
+    bottom: -$border-size;
+    left: -$border-size;
+    content: "";
     box-shadow: inset -4px -4px $shadow;
+  }
 
   &:hover,
   &:focus {
     background-color: $hover-background;
+
+    &::after {
       box-shadow: inset -6px -6px $shadow;
     }
+  }
 
-  &:active {
+  &:active::after {
     box-shadow: inset 4px 4px $shadow;
   }
 }
 
-@mixin btn-extra-pixelize-style($color, $background, $hover-background, $shadow) {
-  color: $color;
-  background-color: $background;
-
-  &:hover,
-  &:focus {
-    background-color: $hover-background;
-    outline: 0;
-    // prettier-ignore
-    box-shadow:
-      0 -4px $hover-background,
-      inset 0 -2px $shadow,
-      0 -8px $base-color,
-      4px 0 $shadow,
-      4px -4px $base-color,
-      8px 0 $base-color,
-      0 4px $shadow,
-      4px 4px $base-color,
-      0 8px $base-color,
-      -4px 0 $hover-background,
-      inset -2px 0 $shadow,
-      -4px -4px $base-color,
-      -8px 0 $base-color,
-      -4px 4px $base-color;
-  }
-
-  &:active {
-    // prettier-ignore
-    box-shadow:
-      0 -4px $shadow,
-      0 -8px $base-color,
-      4px 0 $hover-background,
-      4px -4px $base-color,
-      8px 0 $base-color,
-      0 4px $hover-background,
-      4px 4px $base-color,
-      0 8px $base-color,
-      -4px 0 $shadow,
-      -4px -4px $base-color,
-      -8px 0 $base-color,
-      -4px 4px $base-color;
-  }
-
-  // prettier-ignore
-  box-shadow:
-    0 -4px $background,
-    0 -8px $base-color,
-    4px 0 $shadow,
-    4px -4px $base-color,
-    8px 0 $base-color,
-    0 4px $shadow,
-    4px 4px $base-color,
-    0 8px $base-color,
-    -4px 0 $background,
-    -4px -4px $base-color,
-    -8px 0 $base-color,
-    -4px 4px $base-color;
-}
-
 // Default style
 .nes-btn {
-  $border-size: 4px;
+  @include compact-rounded-corners();
 
   position: relative;
   display: inline-block;
@@ -85,7 +38,6 @@
   vertical-align: middle;
   cursor: $cursor-click-url, pointer;
   user-select: none;
-  border: none;
 
   @include btn-style(
     $base-color,
@@ -94,32 +46,6 @@
     map-get($default-colors, "shadow")
   );
 
-  &::before,
-  &::after {
-    position: absolute;
-    box-sizing: content-box;
-    width: 100%;
-    height: 100%;
-    content: "";
-    border-color: $base-color;
-    border-style: solid;
-    border-width: $border-size;
-  }
-
-  &::before {
-    top: $border-size * -1;
-    left: 0;
-    border-right: $border-size / 2;
-    border-left: $border-size / 2;
-  }
-
-  &::after {
-    top: 0;
-    left: $border-size * -1;
-    border-top: $border-size / 2;
-    border-bottom: $border-size / 2;
-  }
-
   &:focus {
     outline: 0;
   }
@@ -147,30 +73,4 @@
       @include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
     }
   }
-
-  &.is-rounded {
-    box-sizing: content-box;
-    padding: 6px 8px;
-    @include btn-extra-pixelize-style(
-      $base-color,
-      map-get($default-colors, "normal"),
-      map-get($default-colors, "hover"),
-      map-get($default-colors, "shadow")
-    );
-
-    &::before,
-    &::after {
-      border-width: 0;
-    }
-    @each $type in $types {
-      &.is-#{nth($type, 1)} {
-        @include btn-extra-pixelize-style(
-          nth($type, 2),
-          nth($type, 3),
-          nth($type, 4),
-          nth($type, 5)
-        );
-      }
-    }
-  }
 }

scss/elements/containers.scss

@@ -1,36 +1,14 @@
 .nes-container {
   position: relative;
   padding: 1.5rem 2rem;
+  border-color: black;
+  border-style: solid;
+  border-width: 4px;
 
   > :last-child {
     margin-bottom: 0;
   }
 
-  &::before,
-  &::after {
-    position: absolute;
-    z-index: -1;
-    content: "";
-  }
-
-  &::before {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &::after {
-    top: 2px;
-    right: 2px;
-    bottom: 2px;
-    left: 2px;
-    border-color: $base-color;
-    border-style: solid;
-    border-width: 4px;
-    border-radius: 4px;
-  }
-
   &.is-centered {
     text-align: center;
   }
@@ -65,13 +43,8 @@
 
   &.is-dark {
     color: $background-color;
-    &::before {
     background-color: $base-color;
-    }
+    border-color: white;
-
-    &::after {
-      border-color: #fff;
-    }
 
     &.with-title {
       > .title {
@@ -81,45 +54,14 @@
     }
   }
 
-  @mixin rounded($base, $background) {
-    color: $base;
-    border: none;
-    border-radius: 0;
-    // prettier-ignore
-    box-shadow:
-      0 -4px $background,
-      0 -8px,
-      4px 0 $background,
-      4px -4px,
-      8px 0,
-      0 4px $background,
-      0 8px,
-      -4px 0 $background,
-      -4px 4px,
-      -8px 0,
-      -4px -4px,
-      4px 4px;
-  }
-
   &.is-rounded {
+    @include rounded-corners();
+
     padding: 1rem 1.5rem;
     margin: 14px 8px;
 
-    &::after {
-      @include rounded($base-color, $background-color);
-    }
-
     &.is-dark {
-      &::after {
+      @include rounded-corners(true);
-        @include rounded($background-color, $base-color);
-      }
-
-      &::before {
-        top: -8px;
-        right: -8px;
-        bottom: -8px;
-        left: -8px;
-      }
     }
 
     &.with-title {

scss/elements/dialogs.scss

@@ -11,7 +11,6 @@
   }
 
   &.is-rounded {
-    border: none;
+    @include rounded-corners();
-    box-shadow: 4px 0 $base-color, -4px 0 $base-color, 0 4px $base-color, 0 -4px $base-color;
   }
 }

scss/elements/progress.scss

@@ -1,11 +1,11 @@
 .nes-progress {
+  @include compact-rounded-corners();
   width: 100%;
   height: 48px;
-  padding: 4px;
   margin: 4px;
   color: $base-color;
   background-color: $background-color;
-  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
+
   -webkit-appearance: none;
   appearance: none;
 

scss/elements/tables.scss

@@ -3,42 +3,69 @@
   overflow-x: auto;
   overflow-y: hidden;
 }
+
 .nes-table {
   table-layout: fixed;
   background-color: $background-color;
-  @mixin thsAndTdsBoxShadow($color) {
-    th,
-    td {
-      padding: 0.5rem;
-      word-wrap: break-word;
-    }
 
   tr {
-      th + th {
+    margin-left: -0.25em;
-        box-shadow: -4px 0 $color;
   }
+
+  th,
   td {
-        box-shadow: 0 -4px $color;
+    position: relative;
-      }
+    padding: 0.5rem;
-      td:not(:first-child) {
+    word-wrap: break-word;
-        box-shadow: -4px 0 $color, 0 -4px $color;
+    border-color: $base-color;
+    border-style: solid;
+    border-width: 0 0.25em 0.25em 0;
+
+    &:last-child {
+      border-right-width: 0;
     }
+
+    &::after,
+    &::before {
+      position: absolute;
+      display: block;
+      width: 0.25em;
+      height: 0.25em;
+      content: "";
+      background-color: $base-color;
+    }
+
+    &::after {
+      bottom: -0.25em;
+      left: -0.25em;
+    }
+
+    &::before {
+      top: -0.25em;
+      right: -0.25em;
+    }
+
+    &:last-child::before {
+      top: initial;
+      bottom: -0.25em;
     }
   }
+
   &.is-centered th {
     text-align: center;
   }
+
   &.is-bordered {
     margin: 4px;
-    box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
+    border-spacing: 0;
-    @include thsAndTdsBoxShadow($base-color);
+    border-collapse: separate;
+
+    @include compact-rounded-corners();
   }
+
   &.is-dark {
-    position: relative;
     color: $background-color;
     background-color: $base-color;
-    box-shadow: 4px -4px $base-color, -4px -4px $base-color, -4px 4px $base-color,
-      4px 4px $base-color;
 
     &::before {
       position: absolute;
@@ -47,14 +74,40 @@
       bottom: 0;
       left: 0;
       content: "";
-      background: linear-gradient(to left, transparent 4px, $background-color 4px) no-repeat,
-        linear-gradient(to bottom, transparent 4px, $background-color 4px) no-repeat,
-        linear-gradient(to right, transparent 4px, $background-color 4px) no-repeat,
-        linear-gradient(to top, transparent 4px, $background-color 4px) no-repeat;
-      background-position: 100% 0, 100% 0, 0 100%, 0 100%;
-      background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
     }
 
-    @include thsAndTdsBoxShadow($background-color);
+    &.is-bordered {
+      @include compact-rounded-corners(true);
+    }
+
+    th,
+    td {
+      border-color: $background-color;
+
+      &::after,
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  /***************************************************************************  \
+    This eliminates the gap between the last row in a table and the border, as
+    well as hiding the derelict pixels in the bottom right and bottom left of
+    the last row of a table
+  \  ***************************************************************************/
+  tbody,
+  thead:last-child {
+    tr:last-child {
+      th,
+      td {
+        border-bottom-width: 0;
+
+        &:first-child::after,
+        &:last-child::before {
+          display: none;
+        }
+      }
+    }
   }
 }

scss/form/inputs.scss

@@ -1,19 +1,15 @@
 .nes-input,
 .nes-textarea {
   @mixin border-style($border, $outline) {
+    @include compact-rounded-corners();
+    @include compact-border-image($border);
+
     outline-color: $outline;
-    // prettier-ignore
-    box-shadow:
-      0 4px $border,
-      0 -4px $border,
-      4px 0 $border,
-      -4px 0 $border;
   }
 
   width: 100%;
   padding: 0.5rem 1rem;
   margin: 4px;
-  border: none;
 
   @include border-style($base-color, map-get($default-colors, "hover"));
 

scss/form/selects.scss

@@ -15,15 +15,15 @@
   margin: 4px;
 
   select {
+    @include compact-rounded-corners();
     width: 100%;
     padding: 0.5rem 2.5rem 0.5rem 1rem;
-    -webkit-appearance: none;
-    appearance: none;
     cursor: $cursor-click-url, pointer;
-    border: none;
     border-radius: 0;
     outline-color: map-get($default-colors, "hover");
-    box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
+
+    -webkit-appearance: none;
+    appearance: none;
 
     &:invalid {
       color: map-get($disabled-colors, shadow);
@@ -56,8 +56,9 @@
       }
 
       select {
+        @include compact-border-image($color);
+
         outline-color: nth($type, 3);
-        box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
       }
     }
   }

scss/utilities/_index.scss

@@ -2,3 +2,4 @@
 
 @import "animations.scss";
 @import "icon-mixin.scss";
+@import "rounded-corners-mixin.scss";

scss/utilities/rounded-corners-mixin.scss

@@ -0,0 +1,46 @@
+%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 class="svg-border" 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="#{$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 class="svg-border" 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="#{$color}" /></svg>');
+}
+
+@mixin rounded-corners($isDark: false) {
+  @extend %rounded-corner-defaults;
+
+  border-image-slice: 3;
+  border-image-width: 3;
+
+  @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;
+
+  @if $isDark {
+    @include compact-border-image($color-white);
+
+    border-image-outset: 0;
+  } @else {
+    @include compact-border-image($color-black);
+
+    border-image-outset: 2;
+  }
+}