Add default dark theme

themes/default-dark.scss

@@ -0,0 +1,161 @@
+@import '../src/ui-guide-variables';
+
+$theme-color: rgb(77, 168, 100) !default;
+$popup-arrow-size: 8px;
+$box-gutter-size: 8px !default;
+$box-border-size: 3px !default;
+
+[uig-highlight-box] {
+  box-sizing: content-box !important;
+  border: $box-border-size solid lighten($theme-color, 5%);
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 999rem lighten(rgba($theme-color, 0.15), 10%),
+    0 0 0.25rem rgba($theme-color, 0.3);
+  opacity: 0;
+  will-change: padding, margin, opacity;
+
+  &[uig-show] {
+    animation: shrink 0.3s 0.2s forwards;
+
+    @keyframes shrink {
+      from {
+        opacity: 0;
+        padding: $box-gutter-size + 30px;
+        margin: -$box-gutter-size - $box-border-size - 30px;
+      }
+
+      to {
+        opacity: 1;
+        padding: $box-gutter-size;
+        margin: -$box-gutter-size - $box-border-size;
+      }
+    }
+  }
+}
+
+[uig-popup-wrapper] {
+  position: relative;
+  display: flex;
+  max-width: 450px;
+  opacity: 0;
+  will-change: opacity, transform;
+
+  [uig-popup][uig-show][x-placement='top'] & {
+    animation: slide-top 0.2s 0.3s ease-out forwards;
+
+    @keyframes slide-top {
+      from {
+        transform: translateY(30px);
+        opacity: 0;
+      }
+
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  [uig-popup][uig-show][x-placement='right'] & {
+    animation: slide-right 0.2s 0.3s ease-out forwards;
+
+    @keyframes slide-right {
+      from {
+        transform: translateX(-30px);
+        opacity: 0;
+      }
+
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  [uig-popup][uig-show][x-placement='bottom'] & {
+    animation: slide-bottom 0.2s 0.3s ease-out forwards;
+
+    @keyframes slide-bottom {
+      from {
+        transform: translateY(-30px);
+        opacity: 0;
+      }
+
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  [uig-popup][uig-show][x-placement='left'] & {
+    animation: slide-left 0.2s 0.3s ease-out forwards;
+
+    @keyframes slide-left {
+      from {
+        transform: translateX(30px);
+        opacity: 0;
+      }
+
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+
+span[x-arrow] {
+  position: absolute;
+  z-index: 2;
+  display: inline-block;
+  border: $popup-arrow-size solid transparent;
+
+  [uig-popup][x-placement='bottom'] & {
+    top: $box-gutter-size + $box-border-size;
+    border-bottom-color: darken($theme-color, 5%);
+  }
+
+  [uig-popup][x-placement='top'] & {
+    bottom: $box-gutter-size + $box-border-size;
+    border-top-color: darken($theme-color, 5%);
+  }
+
+  [uig-popup][x-placement='right'] & {
+    left: $box-gutter-size + $box-border-size;
+    border-right-color: darken($theme-color, 5%);
+  }
+
+  [uig-popup][x-placement='left'] & {
+    right: $box-gutter-size + $box-border-size;
+    border-left-color: darken($theme-color, 5%);
+  }
+}
+
+[uig-popup-card] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  background-color: $theme-color;
+  color: #fff;
+  border-radius: 0.2rem;
+  overflow: hidden;
+
+  [uig-popup][x-placement='bottom'] & {
+    margin-top: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
+  }
+
+  [uig-popup][x-placement='top'] & {
+    margin-bottom: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
+  }
+
+  [uig-popup][x-placement='right'] & {
+    margin-left: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
+  }
+
+  [uig-popup][x-placement='left'] & {
+    margin-right: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
+  }
+}