Merge branch 'feature/WW-24-styles'

package.json

@@ -34,7 +34,9 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
+    "compression-webpack-plugin": "^8.0.0",
     "eslint": "^7.27.0",
+    "terser-webpack-plugin": "^5.1.3",
     "webpack-cli": "^4.7.0"
   }
 }

src/styles/core/button.scss

@@ -7,7 +7,7 @@
     user-select: none;
     background-color: transparent;
     border: $border-width $border-style transparent;
-    font-size: map-get($text-size-map, 6);
+    font-size: 14px;
     font-weight: $font-weight-semibold;
     border-radius: 0.25em;
     appearance: none;
@@ -24,14 +24,14 @@
 
     &:disabled,
     &.disabled,
-    &[aria-disabled=true] {
+    &[aria-disabled="true"] {
         cursor: default;
         background-position: 0 0;
     }
 
     &:active,
     &.selected,
-    &[aria-selected=true] {
+    &[aria-selected="true"] {
         background-image: none;
     }
 
@@ -64,7 +64,7 @@
     }
 
     &.btn-link {
-        color: $text-blue;
+        color: $blue-07;
         text-decoration: none;
 
         &:hover {
@@ -74,12 +74,12 @@
 
     &.btn-sm {
         padding: 3px 10px;
-        font-size: $font-size-small;
+        font-size: 12px;
         line-height: 20px;
     }
 
     &.btn-lg {
-        padding: $em-spacer-6 1.25em;
+        padding: 14px 1.25em;
         font-size: inherit;
         border-radius: 6px;
     }
@@ -89,31 +89,29 @@
         width: 100%;
         text-align: center;
     }
-
-
 }
 
 .btn-icon {
     display: inline-block;
     padding: 5px;
     margin-left: 5px;
-    line-height: $lh-condensed-ultra;
+    line-height: 2px;
-    color: $text-gray;
+    color: gray-04;
     vertical-align: middle;
     background: transparent;
     border: $border-width $border-style transparent;
 
     &:hover {
-        color: $text-blue;
+        color: $blue-01;
     }
 
     &:disabled,
-    &[aria-disabled=true] {
+    &[aria-disabled="true"] {
-        color: $gray-400;
+        color: $gray-08;
         cursor: default;
 
         &:hover {
-            color: $gray-400;
+            color: $gray-08;
         }
     }
 
@@ -130,8 +128,8 @@
 
         span,
         div {
-            display:inline-block;
+            display: inline-block;
-            vertical-align:top;
+            vertical-align: top;
         }
 
         @each $color, $value in $button-map {
@@ -187,23 +185,23 @@
     display: inline-block;
     height: 12px;
     padding: 0 5px 5px;
-    font-size: $font-size-small;
+    font-size: 12px;
     font-weight: $font-weight-bold;
     line-height: 6px;
-    color: $gray-700;
+    color: $gray-07;
     text-decoration: none;
     vertical-align: middle;
-    background: lighten($gray-300, 5%);
+    background: lighten($gray-03, 5%);
     border: 0;
     border-radius: 1px;
 
     &:hover {
         text-decoration: none;
-        background-color: darken($gray-300, 4%);
+        background-color: darken($gray-03, 4%);
     }
 
     &:active {
-        color: $text-white;
+        color: $white;
-        background-color: $blue-400;
+        background-color: $blue-04;
     }
 }

src/styles/core/index.scss

@@ -1,2 +1,6 @@
 @import "./colors.scss";
+@import "./variables.scss";
+@import "./button.scss";
 @import "./main.scss";
+@import "./typography.scss";
+@import "./normalize.scss";

src/styles/core/main.scss

@@ -1,5 +1,66 @@
 app-main {
     * {
         font-family: Roboto;
+        font-size: 14px;
+        color: $white;
+    }
+
+    input,
+    select,
+    textarea,
+    button {
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    a {
+        color: $blue-07;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    hr,
+    .line {
+        // Horizontal line should look more clean
+        height: 0;
+        margin: 15px 0;
+        overflow: hidden;
+        background: transparent;
+        border: 0;
+        border-bottom: $border-width $border-style $gray-03;
+    }
+
+    table {
+        border-spacing: 0;
+        border-collapse: collapse;
+    }
+
+    td,
+    th {
+        padding: 0;
+    }
+
+    button {
+        cursor: pointer;
+        border-radius: 0;
+    }
+
+    details {
+        summary {
+            cursor: pointer;
+        }
+        &:not([open]) {
+            > *:not(summary) {
+                display: none !important;
+            }
+        }
+    }
+
+    [hidden][hidden] {
+        display: none !important;
     }
 }

src/styles/core/normalize.scss

@@ -8,342 +8,344 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
- html {
+html {
     line-height: 1.15; /* 1 */
     -webkit-text-size-adjust: 100%; /* 2 */
-  }
+}
 
-  /* Sections
+/* Sections
      ========================================================================== */
 
-  /**
+/**
    * Remove the margin in all browsers.
    */
 
-  body {
+body {
     margin: 0;
-  }
+}
 
-  /**
+/**
    * Render the `main` element consistently in IE.
    */
 
-  main {
+main {
     display: block;
-  }
+}
 
-  /**
+/**
    * Correct the font size and margin on `h1` elements within `section` and
    * `article` contexts in Chrome, Firefox, and Safari.
    */
 
-  h1 {
+h1 {
     font-size: 2em;
     margin: 0.67em 0;
-  }
+}
 
-  /* Grouping content
+/* Grouping content
      ========================================================================== */
 
-  /**
+/**
    * 1. Add the correct box sizing in Firefox.
    * 2. Show the overflow in Edge and IE.
    */
 
-  hr {
+hr {
     box-sizing: content-box; /* 1 */
     height: 0; /* 1 */
     overflow: visible; /* 2 */
-  }
+}
 
-  /**
+/**
    * 1. Correct the inheritance and scaling of font size in all browsers.
    * 2. Correct the odd `em` font sizing in all browsers.
    */
 
-  pre {
+pre {
     font-family: monospace, monospace; /* 1 */
     font-size: 1em; /* 2 */
-  }
+}
 
-  /* Text-level semantics
+/* Text-level semantics
      ========================================================================== */
 
-  /**
+/**
    * Remove the gray background on active links in IE 10.
    */
 
-  a {
+a {
     background-color: transparent;
-  }
+}
 
-  /**
+/**
    * 1. Remove the bottom border in Chrome 57-
    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    */
 
-  abbr[title] {
+abbr[title] {
     border-bottom: none; /* 1 */
     text-decoration: underline; /* 2 */
     text-decoration: underline dotted; /* 2 */
-  }
+}
 
-  /**
+/**
    * Add the correct font weight in Chrome, Edge, and Safari.
    */
 
-  b,
+b,
-  strong {
+strong {
     font-weight: bolder;
-  }
+}
 
-  /**
+/**
    * 1. Correct the inheritance and scaling of font size in all browsers.
    * 2. Correct the odd `em` font sizing in all browsers.
    */
 
-  code,
+code,
-  kbd,
+kbd,
-  samp {
+samp {
     font-family: monospace, monospace; /* 1 */
     font-size: 1em; /* 2 */
-  }
+}
 
-  /**
+/**
    * Add the correct font size in all browsers.
    */
 
-  small {
+small {
     font-size: 80%;
-  }
+}
 
-  /**
+/**
    * Prevent `sub` and `sup` elements from affecting the line height in
    * all browsers.
    */
 
-  sub,
+sub,
-  sup {
+sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
-  }
+}
 
-  sub {
+sub {
     bottom: -0.25em;
-  }
+}
 
-  sup {
+sup {
     top: -0.5em;
-  }
+}
 
-  /* Embedded content
+/* Embedded content
      ========================================================================== */
 
-  /**
+/**
    * Remove the border on images inside links in IE 10.
    */
 
-  img {
+img {
     border-style: none;
-  }
+}
 
-  /* Forms
+/* Forms
      ========================================================================== */
 
-  /**
+/**
    * 1. Change the font styles in all browsers.
    * 2. Remove the margin in Firefox and Safari.
    */
 
-  button,
+button,
-  input,
+input,
-  optgroup,
+optgroup,
-  select,
+select,
-  textarea {
+textarea {
     font-family: inherit; /* 1 */
     font-size: 100%; /* 1 */
     line-height: 1.15; /* 1 */
     margin: 0; /* 2 */
-  }
+}
 
-  /**
+/**
    * Show the overflow in IE.
    * 1. Show the overflow in Edge.
    */
 
-  button,
+button,
-  input { /* 1 */
+input {
+    /* 1 */
     overflow: visible;
-  }
+}
 
-  /**
+/**
    * Remove the inheritance of text transform in Edge, Firefox, and IE.
    * 1. Remove the inheritance of text transform in Firefox.
    */
 
-  button,
+button,
-  select { /* 1 */
+select {
+    /* 1 */
     text-transform: none;
-  }
+}
 
-  /**
+/**
    * Correct the inability to style clickable types in iOS and Safari.
    */
 
-  button,
+button,
-  [type="button"],
+[type="button"],
-  [type="reset"],
+[type="reset"],
-  [type="submit"] {
+[type="submit"] {
     -webkit-appearance: button;
-  }
+}
 
-  /**
+/**
    * Remove the inner border and padding in Firefox.
    */
 
-  button::-moz-focus-inner,
+button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
+[type="submit"]::-moz-focus-inner {
     border-style: none;
     padding: 0;
-  }
+}
 
-  /**
+/**
    * Restore the focus styles unset by the previous rule.
    */
 
-  button:-moz-focusring,
+button:-moz-focusring,
-  [type="button"]:-moz-focusring,
+[type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
+[type="submit"]:-moz-focusring {
     outline: 1px dotted ButtonText;
-  }
+}
 
-  /**
+/**
    * Correct the padding in Firefox.
    */
 
-  fieldset {
+fieldset {
     padding: 0.35em 0.75em 0.625em;
-  }
+}
 
-  /**
+/**
    * 1. Correct the text wrapping in Edge and IE.
    * 2. Correct the color inheritance from `fieldset` elements in IE.
    * 3. Remove the padding so developers are not caught out when they zero out
    *    `fieldset` elements in all browsers.
    */
 
-  legend {
+legend {
     box-sizing: border-box; /* 1 */
     color: inherit; /* 2 */
     display: table; /* 1 */
     max-width: 100%; /* 1 */
     padding: 0; /* 3 */
     white-space: normal; /* 1 */
-  }
+}
 
-  /**
+/**
    * Add the correct vertical alignment in Chrome, Firefox, and Opera.
    */
 
-  progress {
+progress {
     vertical-align: baseline;
-  }
+}
 
-  /**
+/**
    * Remove the default vertical scrollbar in IE 10+.
    */
 
-  textarea {
+textarea {
     overflow: auto;
-  }
+}
 
-  /**
+/**
    * 1. Add the correct box sizing in IE 10.
    * 2. Remove the padding in IE 10.
    */
 
-  [type="checkbox"],
+[type="checkbox"],
-  [type="radio"] {
+[type="radio"] {
     box-sizing: border-box; /* 1 */
     padding: 0; /* 2 */
-  }
+}
 
-  /**
+/**
    * Correct the cursor style of increment and decrement buttons in Chrome.
    */
 
-  [type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
+[type="number"]::-webkit-outer-spin-button {
     height: auto;
-  }
+}
 
-  /**
+/**
    * 1. Correct the odd appearance in Chrome and Safari.
    * 2. Correct the outline style in Safari.
    */
 
-  [type="search"] {
+[type="search"] {
     -webkit-appearance: textfield; /* 1 */
     outline-offset: -2px; /* 2 */
-  }
+}
 
-  /**
+/**
    * Remove the inner padding in Chrome and Safari on macOS.
    */
 
-  [type="search"]::-webkit-search-decoration {
+[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
-  }
+}
 
-  /**
+/**
    * 1. Correct the inability to style clickable types in iOS and Safari.
    * 2. Change font properties to `inherit` in Safari.
    */
 
-  ::-webkit-file-upload-button {
+::-webkit-file-upload-button {
     -webkit-appearance: button; /* 1 */
     font: inherit; /* 2 */
-  }
+}
 
-  /* Interactive
+/* Interactive
      ========================================================================== */
 
-  /*
+/*
    * Add the correct display in Edge, IE 10+, and Firefox.
    */
 
-  details {
+details {
     display: block;
-  }
+}
 
-  /*
+/*
    * Add the correct display in all browsers.
    */
 
-  summary {
+summary {
     display: list-item;
-  }
+}
 
-  /* Misc
+/* Misc
      ========================================================================== */
 
-  /**
+/**
    * Add the correct display in IE 10+.
    */
 
-  template {
+template {
     display: none;
-  }
+}
 
-  /**
+/**
    * Add the correct display in IE 10.
    */
 
-  [hidden] {
+[hidden] {
     display: none;
-  }
+}

src/styles/core/typography.scss

@@ -8,13 +8,6 @@ h6 {
     margin-bottom: 0;
 }
 
-h1 { @include h1; }
-h2 { @include h2; }
-h3 { @include h3; }
-h4 { @include h4; }
-h5 { @include h5; }
-h6 { @include h6; }
-
 p {
     margin-top: 0;
     margin-bottom: 10px;
@@ -56,19 +49,6 @@ dd {
     margin-left: 0;
 }
 
-tt,
-code {
-    font-family: $mono-font;
-    font-size: $font-size-small;
-}
-
-pre {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-family: $mono-font;
-    font-size: $font-size-small
-}
-
 .icon {
     vertical-align: text-bottom;
 }

src/styles/core/variables.scss

@@ -0,0 +1,36 @@
+$border-width: 1px;
+$border-style: solid;
+
+$font-weight-semibold: 400;
+$font-weight-bold: 600;
+
+$button-map: (
+    "primary": (
+        $blue-08,
+        $white,
+    ),
+    "disabled": (
+        $gray-08,
+        $white,
+    ),
+    "secondary": (
+        $orange-08,
+        $white,
+    ),
+    "alert": (
+        $red-08,
+        $white,
+    ),
+    "black": (
+        $black,
+        $white,
+    ),
+    "white": (
+        $white,
+        $black,
+    ),
+    "yellow": (
+        $yellow-06,
+        $white,
+    ),
+);

src/styles/main.scss

@@ -1,8 +1,8 @@
-@import "./core//index.scss";
+@import "./core/index.scss";
-@import "./thorn/index.scss";
 @import "./menu-item/index.scss";
 @import "./sidebar/index.scss";
 @import "./modal/index.scss";
 @import "./table/index.scss";
 @import "./app-loader/index.scss";
 @import "./circle-loader/index.scss";
+@import "./page/index.scss";

src/styles/menu-item/menu-item.scss

@@ -31,7 +31,7 @@ menu-item {
                 color: $gray-01;
                 border-radius: 0;
                 padding: 2px 0;
-                height: 50px;
+                height: 44px;
                 text-align: left;
                 padding-left: 80px;
                 &:hover {
@@ -51,7 +51,7 @@ menu-item {
             grid-area: custom;
             display: flex;
             width: 10px;
-            height: 50px;
+            height: 100%;
             background-color: $blue-09;
             cursor: pointer;
             user-select: none;

src/styles/page/index.scss

@@ -0,0 +1 @@
+@import "./page.scss";

src/styles/page/page.scss

@@ -0,0 +1,6 @@
+.page {
+    &.--title {
+        font-size: 28px;
+        margin: 8px 0;
+    }
+}

src/styles/thorn/button/button-groups.scss

@@ -1,106 +0,0 @@
-.btn-group {
-    display: inline-block;
-    vertical-align: middle;
-    @include clearfix();
-
-    + .btn-group,
-    + .btn {
-        margin-left: $spacer-1;
-    }
-
-    .btn-group-item {
-        position: relative;
-        float: left;
-        border-right-width: 0;
-        border-radius: 0;
-
-        &:first-child {
-            border-top-left-radius: 0.25em;
-            border-bottom-left-radius: 0.25em;
-        }
-
-        &:last-child {
-            border-right-width: $border-width;
-            border-top-right-radius: 0.25em;
-            border-bottom-right-radius: 0.25em;
-        }
-
-        &.btn-rounder {
-            &:first-child {  
-                border-top-left-radius: 2em;
-                border-bottom-left-radius: 2em;
-            }
-            &:last-child {
-                border-top-right-radius: 2em;
-                border-bottom-right-radius: 2em;
-            }
-        }
-
-        &.btn-squared {
-            &:first-child {  
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-            &:last-child {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-        }
-    }
-
-    .btn-group-parent {
-        float: left;
-      
-        &:first-child .btn-group-item {
-            border-top-left-radius: 0.25em;
-            border-bottom-left-radius: 0.25em;
-
-            &.btn-rounder {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-                border-top-left-radius: 2em;
-                border-bottom-left-radius: 2em;
-            }
-
-            &.btn-squared {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-        }
-      
-        &:last-child .btn-group-item {
-            border-right-width: $border-width;
-            border-top-right-radius: 0.25em;
-            border-bottom-right-radius: 0.25em;
-
-            &.btn-rounder {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-                border-top-right-radius: 2em;
-                border-bottom-right-radius: 2em;
-            }
-
-            &.btn-squared {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-        }
-      
-        .btn-group-item {
-            border-right-width: 0;
-            border-radius: 0;
-        }
-      }
-      
-      .btn-group-item,
-      .btn-group-parent {
-            &:focus,
-            &:active {
-                z-index: 1;
-            }
-      }
-}

src/styles/thorn/button/dropdown.scss

@@ -1,286 +0,0 @@
-.dropdown {
-    position: relative
-}
-
-.dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 100;
-    width: 150px;
-    padding-top: $spacer-2;
-    padding-bottom: $spacer-2;
-    margin-top: 2px;
-    list-style: none;
-    background-color: $bg-white;
-    background-clip: padding-box;
-    border: $border-width $border-style $border-gray;
-    border-radius: $spacer-1;
-    box-shadow: $box-shadow-lg;
-
-    &.-inherit {
-        width: 100%;
-    }
-
-    &::before,
-    &::after {
-        position: absolute;
-        display: inline-block;
-        content: "";
-    }
-
-    &::before {
-        border: $spacer-2 $border-style transparent;
-        border-bottom-color: $border-black-fade;
-    }
-
-    &::after {
-        border: 7px $border-style transparent;
-        border-bottom-color: $border-white;
-    }
-
-    > ul {
-        list-style: none;
-    }
-
-    &-w {
-        top: 0;
-        right: 100%;
-        left: auto;
-        width: auto;
-        margin-top: 0;
-        margin-right: $spacer-2;
-
-        &::before {
-            top: 10px;
-            right: -$spacer-3;
-            left: auto;
-            border-color: transparent;
-            border-left-color: $border-black-fade;
-        }
-
-        &::after {
-            top: 11px;
-            right: -14px;
-            left: auto;
-            border-color: transparent;
-            border-left-color: $border-white;
-        }
-    }
-
-    &-e {
-        top: 0;
-        left: 100%;
-        width: auto;
-        margin-top: 0;
-        margin-left: $spacer-2;
-
-        &::before {
-            top: $spacer-2;
-            left: -$spacer-3;
-            border-color: transparent;
-            border-right-color: $border-black-fade;
-        }
-
-        &::after {
-            top: 11px;
-            left: -14px;
-            border-color: transparent;
-            border-right-color: $border-white;
-        }
-    }
-
-    &-ne {
-        top: auto;
-        bottom: 100%;
-        left: 0;
-        margin-bottom: 3px;
-
-        &::before,
-        &::after {
-            top: auto;
-            right: auto;
-        }
-
-        &::before {
-            bottom: -$spacer-2;
-            left: 9px;
-            border-top: $spacer-2 $border-style $border-black-fade;
-            border-right: $spacer-2 $border-style transparent;
-            border-bottom: 0;
-            border-left: $spacer-2 $border-style transparent;
-        }
-
-        &::after {
-            bottom: -7px;
-            left: 10px;
-            border-top: 7px $border-style $border-white;
-            border-right: 7px $border-style transparent;
-            border-bottom: 0;
-            border-left: 7px $border-style transparent;
-        }
-    }
-
-    &-s {
-        right: 50%;
-        left: auto;
-        transform: translateX(50%);
-
-        &::before {
-            top: -$spacer-3;
-            right: 50%;
-            transform: translateX(50%);
-        }
-
-        &::after {
-            top: -14px;
-            right: 50%;
-            transform: translateX(50%);
-        }
-    }
-
-    &-sw {
-        right: 0;
-        left: auto;
-
-        &::before {
-            top: -$spacer-3;
-            right: 9px;
-            left: auto;
-        }
-
-        &::after {
-            top: -14px;
-            right: 10px;
-            left: auto;
-        }
-    }
-
-    &-se {
-        &::before {
-            top: -$spacer-3;
-            left: 9px;
-        }
-    
-        &::after {
-            top: -14px;
-            left: 10px;
-        }
-    }
-
-    .dropdown-item {
-        display: block;
-        padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
-        overflow: hidden;
-        color: $text-gray-darker;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    
-        &:focus,
-        &:hover {
-            color: $text-black;
-            text-decoration: none;
-            background-color: $gray-100;
-            outline: none;
-    
-            > .icon {
-            color: inherit;
-            opacity: 1;
-            }
-        }
-    
-        &.btn-link {
-            width: 100%;
-            text-align: left;
-        }
-    }
-
-    .dropdown-signout {
-        width: 100%;
-        text-align: left;
-        background: none;
-        border: 0;
-    }
-    
-    .dropdown-divider {
-        display: block;
-        height: 0;
-        margin: $spacer-2 0;
-        border-top: $border;
-    }
-    
-    .dropdown-header {
-        padding: $spacer-1 $spacer-3;
-        font-size: $h6-size;
-        color: $text-gray-darker;
-    }
-
-    .dropdown-item[aria-checked="false"] .icon-check {
-        display: none;
-    }
-}
-
-.dropdown-menu-dark {
-    color: $text-white !important;
-    background: $gray-800 !important;
-    border-color: $border-gray-darker !important;
-    box-shadow: $box-shadow-lg;
-
-    &::before {
-        border-bottom-color: $border-gray-darker;
-    }
-
-    &::after {
-        border-bottom-color: $gray-800;
-    }
-
-
-    .dropdown-header {
-        color: $gray-300 !important;
-    }
-
-    .dropdown-divider {
-        border-top-color: $border-gray-darker !important;
-    }
-
-    .dropdown-item {
-        color: inherit !important;
-
-        &:focus,
-        &:hover {
-            background-color: lighten($gray-800, 10%) !important;
-            color: $white !important;
-        }
-    }
-
-
-    &.dropdown-menu-w {
-        &::before {
-        border-color: transparent transparent transparent $border-gray-darker !important;
-        }
-
-        &::after {
-        border-color: transparent transparent transparent $gray-800 !important;
-        }
-    }
-
-    &.dropdown-menu-e {
-        &::before {
-        border-color: transparent $border-gray-darker transparent transparent !important;
-        }
-
-        &::after {
-        border-color: transparent $gray-800 transparent transparent !important;
-        }
-    }
-
-    &.dropdown-menu-ne {
-        &::before {
-        border-color: $border-gray-darker transparent transparent transparent !important;
-        }
-
-        &::after {
-        border-color: $gray-800 transparent transparent transparent !important;
-        }
-    }
-}

src/styles/thorn/button/index.scss

@@ -1,3 +0,0 @@
-@import "./buttons.scss";
-@import "./button-groups.scss";
-@import "./dropdown.scss";

src/styles/thorn/card/cards.scss

@@ -1,44 +0,0 @@
-.card {
-    position: relative;
-    display: block;
-    margin: auto;
-    min-width: 0;
-    word-wrap: break-word;
-    background-color: $bg-white;
-    background-clip: border-box;
-    border: $border-width $border-style $black-fade-30;
-    border-radius: .25em;
-
-    &::after, 
-    &::before {
-        box-sizing: border-box;
-    }
-
-    &:hover, &:active, &:focus {
-        border: $border-width $border-style $black-fade-15;
-    }
-
-    .card-img-top {
-        width: 100%;
-        border-top-left-radius: calc(.25rem - 1px);
-        border-top-right-radius: calc(.25rem - 1px);
-
-        &img {
-            object-fit: contain;
-            max-width: 100%;
-            max-height: 100%;
-            width: auto;
-            height: auto;
-        }
-    }
-
-    .card-body {
-        flex: 1 1 auto;
-        min-height: 1px;
-        padding: 1.25rem;
-
-        .card-title {
-            margin-bottom: .75rem;
-        }
-    }
-}

src/styles/thorn/card/index.scss

@@ -1,3 +0,0 @@
-@import "../core/support/index.scss";
-
-@import "./cards.scss";

src/styles/thorn/core/default/elements.scss

@@ -1,70 +0,0 @@
-* { // With border-box box sizing, padding and margin will be included in width and height which gives much better results
-    box-sizing: border-box;
-}
-
-body { // Default colors and fonts for entire body element 
-    background-color: $bg-white;
-    color: $text-black-lighter;
-    font-family: $body-font;
-    font-size: $body-font-size;
-    line-height: $body-line-height;
-}
-
-input,
-select,
-textarea,
-button {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-}
-
-a {
-    color: $text-blue;
-    text-decoration: none;
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-hr,
-.line { // Horizontal line should look more clean
-    height: 0;
-    margin: 15px 0;
-    overflow: hidden;
-    background: transparent;
-    border: 0;
-    border-bottom: $border-width $border-style $gray-300;
-}
-
-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-}
-
-td,
-th {
-    padding: 0;
-}
-
-button {
-    cursor: pointer;
-    border-radius: 0;
-}
-
-details {
-    summary { 
-        cursor: pointer;
-    }
-    &:not([open]) {
-        > *:not(summary) {
-            display: none !important;
-        }
-    }
-}
-
-[hidden][hidden] {
-    display: none !important;
-}
-

src/styles/thorn/core/default/index.scss

@@ -1,5 +0,0 @@
-@import "../support/index.scss";
-
-@import "./normalize.scss";
-@import "./elements.scss";
-@import "./typography.scss";

src/styles/thorn/core/index.scss

@@ -1,3 +0,0 @@
-@import "./support/index.scss";
-
-@import "./default/index.scss";

src/styles/thorn/core/support/index.scss

@@ -1,2 +0,0 @@
-@import "./variables/index.scss";
-@import "./mixins/index.scss";

src/styles/thorn/core/support/mixins/index.scss

@@ -1,2 +0,0 @@
-@import "./layout.scss";
-@import "./typography.scss";

src/styles/thorn/core/support/mixins/layout.scss

@@ -1,49 +0,0 @@
-@mixin breakpoint($breakpoint) {
-  @if $breakpoint == "" {
-    @content;
-  }
-
-  @else {
-    $value: map-get($breakpoints, $breakpoint);
-
-    @if $value != null {
-      @media (min-width: $value) {
-        @content;
-      }
-    }
-
-    @else {
-      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-        + "Please make sure it is defined in `$breakpoints` map.";
-    }
-  }
-}
-
-
-@mixin retina-media-query {
-  @media
-    only screen and (-webkit-min-device-pixel-ratio: 2),
-    only screen and (min--moz-device-pixel-ratio: 2),
-    only screen and (-moz-min-device-pixel-ratio: 2),
-    only screen and (-o-min-device-pixel-ratio: 2/1),
-    only screen and (min-device-pixel-ratio: 2),
-    only screen and (min-resolution: 192dpi),
-    only screen and (min-resolution: 2dppx) {
-    @content;
-  }
-}
-
-
-@mixin clearfix {
-  &::before {
-    display: table;
-    content: "";
-  }
-
-  &::after {
-    display: table;
-    clear: both;
-    content: "";
-  }
-}
-  

src/styles/thorn/core/support/mixins/typography.scss

@@ -1,71 +0,0 @@
-@mixin hide-text() {
-    overflow: hidden;
-    text-indent: 100%;
-    white-space: nowrap;
-}
-
-@mixin h1 {
-    font-size: $h1-size;
-    font-weight: $font-weight-bold;
-}
-
-@mixin h2 {
-    font-size: $h2-size;
-    font-weight: $font-weight-bold;
-}
-
-@mixin h3 {
-    font-size: $h3-size;
-    font-weight: $font-weight-bold;
-}
-
-@mixin h4 {
-    font-size: $h4-size;
-    font-weight: $font-weight-bold;
-}
-
-@mixin h5 {
-    font-size: $h5-size;
-    font-weight: $font-weight-bold;
-}
-
-@mixin h6 {
-    font-size: $h6-size;
-    font-weight: $font-weight-bold;
-}
-
-@mixin f1-responsive {
-    font-size: $h1-size-mobile; 
-    @include breakpoint(md) { 
-        font-size: $h1-size; 
-    }
-}
-
-@mixin f2-responsive {
-    font-size: $h2-size-mobile;
-    @include breakpoint(md) { 
-        font-size: $h2-size; 
-    }
-}
-
-@mixin f3-responsive {
-    font-size: $h3-size-mobile;
-    @include breakpoint(md) { 
-        font-size: $h3-size; 
-    }
-}
-
-@mixin h1-responsive {
-    @include f1-responsive;
-    font-weight: $font-weight-bold;
-}
-
-@mixin h2-responsive {
-    @include f2-responsive;
-    font-weight: $font-weight-bold;
-}
-
-@mixin h3-responsive {
-    @include f3-responsive;
-    font-weight: $font-weight-bold;
-}

src/styles/thorn/core/support/variables/colors.scss

@@ -1,349 +0,0 @@
-$black: #1c1d1f !default;
-$black-light: #202020 !default;
-
-$white: #fff !default;
-$darkwhite: darken($white, 5%) !default;
-
-// Grays
-$gray-000:      #ececec !default;
-$gray-100:      #e2e2e2 !default;
-$gray-200:      #cfcaca !default;
-$gray-300:      #b6b1b1 !default;
-$gray-400:      #a1a6ac !default;
-$gray-500:      #7f8286 !default;
-$gray-600:      #6c6e70 !default;
-$gray-700:      #5d5f61 !default;
-$gray-800:      #434446 !default;
-$gray-900:      #2f3131 !default;
-
-$gray:          $gray-500 !default;
-$gray-light:    $gray-300 !default;
-$gray-dark:     $gray-800 !default;  
-
-$grays: (
-    0: $gray-000,
-    1: $gray-100,
-    2: $gray-200,
-    3: $gray-300,
-    4: $gray-400,
-    5: $gray-500,
-    6: $gray-600,
-    7: $gray-700,
-    8: $gray-800,
-    9: $gray-900
-)   !default;
-
-// Red
-$red-000:       #ffd5d5 !default;
-$red-100:       #ffbfbf !default;
-$red-200:       #ff8a8a !default;
-$red-300:       #ff5858 !default;
-$red-400:       #ec4e32 !default;
-$red-500:       #ec1818 !default;
-$red-600:       #d41f1f !default;
-$red-700:       #b30a0a !default;
-$red-800:       #880707 !default;
-$red-900:       #680707 !default;
-
-$red:           $red-500 !default;
-
-$reds: (
-    0: $red-000,
-    1: $red-100,
-    2: $red-200,
-    3: $red-300,
-    4: $red-400,
-    5: $red-500,
-    6: $red-600,
-    7: $red-700,
-    8: $red-800,
-    9: $red-900
-)   !default;
-
-// Green
-$green-000:     #d5ffdf !default;
-$green-100:     #95eba9 !default;
-$green-200:     #63ee84 !default;
-$green-300:     #3aec63 !default;
-$green-400:     #2cf85c !default;
-$green-500:     #16c725 !default;
-$green-600:     #0caa19 !default;
-$green-700:     #12901c !default;
-$green-800:     #0c6b14 !default;
-$green-900:     #094e0f !default;
-
-$green:         $green-500 !default;
-
-$greens: (
-    0: $green-000,
-    1: $green-100,
-    2: $green-200,
-    3: $green-300,
-    4: $green-400,
-    5: $green-500,
-    6: $green-600,
-    7: $green-700,
-    8: $green-800,
-    9: $green-900
-)   !default;
-
-// Blue
-$blue-000:      #d5e2ff !default;
-$blue-100:      #afc7fa !default;
-$blue-200:      #89a4e0 !default;
-$blue-300:      #678ee2 !default;
-$blue-400:      #427af3 !default;
-$blue-500:      #296cff !default;
-$blue-600:      #0c52eb !default;
-$blue-700:      #1347b9 !default;
-$blue-800:      #0c3692 !default;
-$blue-900:      #082562 !default;
-
-$blue:          $blue-500 !default;
-
-$blues: (
-    0: $blue-000,
-    1: $blue-100,
-    2: $blue-200,
-    3: $blue-300,
-    4: $blue-400,
-    5: $blue-500,
-    6: $blue-600,
-    7: $blue-700,
-    8: $blue-800,
-    9: $blue-900
-)   !default;
-
-// Yellow
-$yellow-000:    #fffbdd !default;
-$yellow-100:    #fdf7c7 !default;
-$yellow-200:    #f3e89f !default;
-$yellow-300:    #ffec8d !default;
-$yellow-400:    #ffdc4f !default;
-$yellow-500:    #ffd036 !default;
-$yellow-600:    #e6b208 !default;
-$yellow-700:    #ca9c05 !default;
-$yellow-800:    #ac860a !default;
-$yellow-900:    #7c6006 !default; 
-
-$yellow:        $yellow-500 !default;
-
-$yellows: (
-    0: $yellow-000,
-    1: $yellow-100,
-    2: $yellow-200,
-    3: $yellow-300,
-    4: $yellow-400,
-    5: $yellow-500,
-    6: $yellow-600,
-    7: $yellow-700,
-    8: $yellow-800,
-    9: $yellow-900
-)   !default;
-
-// Orange
-$orange-000:    #fae8d8 !default;
-$orange-100:    #fcdec4 !default;
-$orange-200:    #f8c69d !default;
-$orange-300:    #f8a971 !default;
-$orange-400:    #fb8f42 !default;
-$orange-500:    #f6731b !default;
-$orange-600:    #d85e0d !default;
-$orange-700:    #bb4f07 !default;
-$orange-800:    #aa4705 !default;
-$orange-900:    #b84f09 !default;
-
-$orange:        $orange-500 !default;
-
-$oranges: (
-    0: $orange-000,
-    1: $orange-100,
-    2: $orange-200,
-    3: $orange-300,
-    4: $orange-400,
-    5: $orange-500,
-    6: $orange-600,
-    7: $orange-700,
-    8: $orange-800,
-    9: $orange-900
-)   !default;
-
-// Purple
-$purple-000:    #f5f0ff !default;
-$purple-100:    #e6dcfd !default;
-$purple-200:    #d1bcf9 !default;
-$purple-300:    #b392f0 !default;
-$purple-400:    #8a63d2 !default;
-$purple-500:    #6f42c1 !default;
-$purple-600:    #5a32a3 !default;
-$purple-700:    #4c2889 !default;
-$purple-800:    #3a1d6e !default;
-$purple-900:    #29134e !default;
-
-$purple:        $purple-500 !default;
-
-$purples: (
-    0: $purple-000,
-    1: $purple-100,
-    2: $purple-200,
-    3: $purple-300,
-    4: $purple-400,
-    5: $purple-500,
-    6: $purple-600,
-    7: $purple-700,
-    8: $purple-800,
-    9: $purple-900
-)   !default;
-
-// Pink
-$pink-000:      #ffeef8 !default;
-$pink-100:      #fedbf0 !default;
-$pink-200:      #f9b3dd !default;
-$pink-300:      #f692ce !default;
-$pink-400:      #ec6cb9 !default;
-$pink-500:      #ea4aaa !default;
-$pink-600:      #d03592 !default;
-$pink-700:      #b93a86 !default;
-$pink-800:      #99306f !default;
-$pink-900:      #6d224f !default;
-
-$pink:          $pink-500 !default;
-
-$pinks: (
-    0: $pink-000,
-    1: $pink-100,
-    2: $pink-200,
-    3: $pink-300,
-    4: $pink-400,
-    5: $pink-500,
-    6: $pink-600,
-    7: $pink-700,
-    8: $pink-800,
-    9: $pink-900
-)   !default;
-
-// buttons
-
-$button-map: (
-    "default": ($gray, $white),
-    "black": ($black, $white),
-    "white": ($white, $black),
-    "red": ($red, $white),
-    "green": ($green, $white),
-    "blue": ($blue, $white),
-    "orange": ($orange, $white),
-    "yellow": ($yellow, $black),
-    "lightred": ($red-200, $black),
-    "lightgreen": ($green-200, $black),
-    "lightblue": ($blue-200, $black),
-    "lightorange": ($orange-200, $black),
-    "lightyellow": ($yellow-200, $black)
-
-)   !default;
-
-// Fades
-$black-fade-05:      rgba($black, 0.05) !default;
-$black-fade-10:      rgba($black, 0.1) !default;
-$black-fade-15:      rgba($black, 0.15) !default;
-$black-fade-30:      rgba($black, 0.3) !default;
-$black-fade-50:      rgba($black, 0.5) !default;
-$black-fade-70:      rgba($black, 0.7) !default;
-$black-fade-85:      rgba($black, 0.85) !default;
-
-$white-fade-05:      rgba($white, 0.05) !default;
-$white-fade-10:      rgba($white, 0.1) !default;
-$white-fade-15:      rgba($white, 0.15) !default;
-$white-fade-30:      rgba($white, 0.3) !default;
-$white-fade-50:      rgba($white, 0.5) !default;
-$white-fade-70:      rgba($white, 0.7) !default;
-$white-fade-85:      rgba($white, 0.85) !default;
-
-$hue-maps: (
-    "gray":     $grays,
-    "red":      $reds,
-    "green":    $greens,
-    "blue":     $blues,
-    "yellow":   $yellows,
-    "orange":   $oranges,
-    "purple":   $purples,
-    "pink":     $pinks
-)   !default;
-
-// Border colors
-$border-default:        $gray-500 !default;
-$border-white:          $white !default;
-$border-black-fade:     $black-fade-15 !default;
-$border-white-fade:     $white-fade-15 !default;
-$border-gray-dark:      $gray-300 !default;
-$border-gray-darker:    $gray-700 !default;
-$border-gray-light:     $gray-100 !default;
-$border-gray:           $gray-200 !default;
-$border-red:            $red !default;
-$border-red-light:      $red-200 !default;
-$border-green:          $green !default;
-$border-green-light:    $green-200 !default;
-$border-blue:           $blue !default;
-$border-blue-light:     $blue-200 !default;
-$border-yellow:         $yellow !default;
-$border-yellow-light:   $yellow-200 !default;
-$border-orange:         $orange !default;
-$border-orange-light:   $orange-200 !default;
-$border-purple:         $purple !default;
-$border-purple-light:   $purple-200 !default;
-$border-pink:           $pink !default;
-$border-pink-light:     $pink-200 !default;
-
-$border-color-button:   $border-black-fade !default;
-
-// Background colors
-$bg-white:              $white !default;
-$bg-darkwhite:          $darkwhite !default;
-$bg-black:              $black !default;
-$bg-black-fade:         $black-fade-50 !default;
-$bg-gray-dark:          $gray-300 !default;
-$bg-gray-darker:        $gray-800 !default;
-$bg-gray-light:         $gray-100 !default;
-$bg-gray:               $gray-200 !default;
-$bg-red:                $red !default;
-$bg-red-light:          $red-200 !default;
-$bg-green:              $green !default;
-$bg-green-light:        $green-200 !default;
-$bg-blue:               $blue !default;
-$bg-blue-light:         $blue-200 !default;
-$bg-yellow:             $yellow !default;
-$bg-yellow-light:       $yellow-200 !default;
-$bg-orange:             $orange !default;
-$bg-orange-light:       $orange-200 !default;
-$bg-purple:             $purple !default;
-$bg-purple-light:       $purple-200 !default;
-$bg-pink:               $pink !default;
-$bg-pink-light:         $pink-200 !default;
-
-// diffstat background
-$bg-diffstat-added:     darken($green-400, 5%) !default;
-$bg-diffstat-deleted:   $red-600 !default;
-$bg-diffstat-neutral:   $gray-300 !default;
-
-// Text colors
-$text-white:            $white !default;
-$text-darkwhite:        $darkwhite !default;
-$text-black:            $black !default;
-$text-black-lighter:    $black-light !default;
-$text-gray-dark:        $gray-300 !default;
-$text-gray-darker:      $gray-700 !default;
-$text-gray-light:       $gray-100 !default;
-$text-gray:             gray-200 !default;
-$text-red:              $red !default;
-$text-red-light:        $red-200 !default;
-$text-green:            $green !default;
-$text-green-light:      $green-200 !default;
-$text-blue:             $blue   !default;
-$text-blue-light:       $blue-200 !default;
-$text-yellow:           $yellow !default;
-$text-yellow-light:     $yellow-200 !default;
-$text-orange:           $orange !default;
-$text-orange-light:     $orange-200 !default;
-$text-purple:           $purple !default;
-$text-purple-light:     $purple-200 !default;
-$text-pink:             $pink !default;
-$text-pink-light:       $pink-200 !default;

src/styles/thorn/core/support/variables/index.scss

@@ -1,3 +0,0 @@
-@import "./colors.scss";
-@import "./layout.scss";
-@import "./typography.scss";

src/styles/thorn/core/support/variables/layout.scss

@@ -1,164 +0,0 @@
-//Spacers for margins and padding
-
-// default spacer
-$spacer: 4px !default;
-
-// spacer scale
-$spacer-0: 0 !default;                      // 0
-$spacer-1: round($spacer / 2) !default;     // 2px
-$spacer-2: $spacer !default;                // 4px
-$spacer-3: $spacer * 2 !default;            // 8px
-$spacer-4: $spacer * 3 !default;            // 12px
-$spacer-5: $spacer * 4 !default;            // 16px
-$spacer-6: $spacer-4 * 2 !default;          // 24px
-$spacer-7: $spacer-5 * 2 !default;          // 32px
-$spacer-8: $spacer-4 * 3 !default;          // 36px
-$spacer-9: $spacer-6 * 2 !default;          // 42px
-$spacer-10: $spacer * 9 !default;          // 56px
-$spacer-11: $spacer-7 * 2 !default;          // 64px
-$spacer-12: $spacer-8 * 2 !default;          // 72px
-
-// Lists of spacers, one is for loops
-
-$spacers: (
-    $spacer-0,
-    $spacer-1,
-    $spacer-2,
-    $spacer-3,
-    $spacer-4,
-    $spacer-5,
-    $spacer-6,
-    $spacer-7,
-    $spacer-8,
-    $spacer-9,
-    $spacer-10,
-    $spacer-11,
-    $spacer-12
-)   !default;
-
-$spacer-map: (
-    0: $spacer-0,
-    1: $spacer-1,
-    2: $spacer-2,
-    3: $spacer-3,
-    4: $spacer-4,
-    5: $spacer-5,
-    6: $spacer-6,
-    7: $spacer-7,
-    8: $spacer-8,
-    9: $spacer-9,
-    10: $spacer-10,
-    11: $spacer-11,
-    12: $spacer-12
-)   !default;
-
-// em spacers
-
-$em-spacer-1: 0.0625em !default;    // 1/16
-$em-spacer-2: 0.125em !default;     // 1/8
-$em-spacer-3: 0.25em !default;      // 1/4
-$em-spacer-4: 0.375em !default;     // 3/8
-$em-spacer-5: 0.5em !default;       // 1/2
-$em-spacer-6: 0.75em !default;      // 3/4
-
-// widths
-
-// container widths
-
-$container-default: 840px !default;
-$container-sm: 540px !default;
-$container-md: 720px !default;
-$container-lg: 960px !default;
-$container-xl: 1140px !default;
-$container-xxl: 1320px !default;
-
-$width-default: 840px !default;
-$width-sm: 540px !default;
-$width-md: 720px !default;
-$width-lg: 960px !default;
-$width-xl: 1140px !default;
-$width-xxl: 1320px !default;
-
-$container-width: (
-    sm: $container-sm,
-    md: $container-md,
-    default: $container-default,
-    lg: $container-lg,
-    xl: $container-xl,
-    xxl: $container-xxl
-)   !default;
-
-// form breakpoints
-$breakpoints: (
-    sm: 540px,
-    md: 720px,
-    lg: 960px,
-    xl: 1140px,
-    xxl: 1320px
-)   !default;
-
-$responsive-variants: (
-    "": "",
-    sm: "-sm",
-    md: "-md",
-    lg: "-lg",
-    xl: "-xl",
-    xxl: "-xxl"
-)   !default;
-
-$responsive-positions: (
-    static,
-    relative,
-    absolute,
-    fixed,
-    sticky
-)   !default;
-
-$display-values: (
-    inline,
-    block,
-    inline-block,
-    flex,
-    inline-flex,
-    table,
-    table-cell,
-    none
-)   !default;
-
-// map of edges
-
-$edges: (
-    top: (top-left, top-right),
-    right: (top-right, bottom-right),
-    bottom: (bottom-right, bottom-left),
-    left: (bottom-left, top-left)
-)   !default;
-
-// Border variables
-
-$border-width: 1px !default;
-$border-color: $border-default !default;
-$border-style: solid !default;
-$border: $border-width $border-color $border-style !default;
-$border-radius: 2px !default;
-
-// Tooltip variables
-
-$tooltip-max-width: 260px !default;
-$tooltip-background-color: $black !default;
-$tooltip-text-color: $darkwhite !default;
-$tooltip-delay: 0.4s !default;
-$tooltip-duration: 0.2s !default;
-
-// Box shadow
-
-$box-shadow: 0 1px 2px $black-fade-10 !default;
-$box-shadow-md: 0 1px 5px $black-fade-15 !default;
-$box-shadow-lg: 0 1px 15px $black-fade-15 !default;
-$box-shadow-xl: 0 10px 50px $black-fade-05 !default;
-
-// Other shadow
-
-$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default;
-$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default;
-$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;

src/styles/thorn/core/support/variables/typography.scss

@@ -1,85 +0,0 @@
-// Heading sizes - mobile
-$h00-size-mobile:       40px !default;
-$h0-size-mobile:        32px !default;
-$h1-size-mobile:        26px !default;
-$h2-size-mobile:        22px !default;
-$h3-size-mobile:        18px !default;
-
-// Heading sizes - desktop
-$h00-size:              48px !default;
-$h0-size:               40px !default;
-$h1-size:               32px !default;
-$h2-size:               24px !default;
-$h3-size:               20px !default;
-$h4-size:               16px !default;
-$h5-size:               14px !default;
-$h6-size:               12px !default;
-
-$font-size-small:       12px !default;
-
-// Font weights
-$font-weight-bold:      600 !default;
-$font-weight-semibold:  500 !default;
-$font-weight-normal:    400 !default;
-$font-weight-light:     300 !default;
-
-// Line heights
-$lh-condensed-ultra:    1 !default;
-$lh-condensed:          1.25 !default;
-$lh-default:            1.5 !default;
-
-// Text size map
-
-$text-size-mobile-map: (
-    0: 0px,
-    1: 4px,
-    2: 6px,
-    3: 8px,
-    4: 10px,
-    5: 12px,
-    6: 14px,
-    7: 16px,
-    8: 18px,
-    9: 20px,
-    10: 22px,
-    11: 24px,
-    12: 28px,
-    13: 32px,
-    14: 40px,
-    15: 48px,
-    16: 56px,
-    17: 64px
-)   !default;
-
-$text-size-map: (
-    0: 0px,
-    1: 6px,
-    2: 8px,
-    3: 10px,
-    4: 12px,
-    5: 14px,
-    6: 16px,
-    7: 18px,
-    8: 20px,
-    9: 22px,
-    10: 24px,
-    11: 28px,
-    12: 32px,
-    13: 40px,
-    14: 48px,
-    15: 56px,
-    16: 64px,
-    17: 72px
-)   !default;
-
-
-
-// Font stacks
-$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
-
-// Monospace font stack
-$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !default;
-
-// The base body size
-$body-font-size:        14px !default;
-$body-line-height:      $lh-default !default;

src/styles/thorn/index.scss

@@ -1,9 +0,0 @@
-//@import "../node_modules/css.gg/icons/all.scss";
-
-@import './core/index.scss';
-
-@import './utilities/index.scss';
-@import './layout/index.scss';
-@import './button/index.scss';
-@import './labels/index.scss';
-@import './card/index.scss';

src/styles/thorn/labels/index.scss

@@ -1,3 +0,0 @@
-@import "../core/support/index.scss";
-
-@import "./labels.scss";

src/styles/thorn/labels/labels.scss

@@ -1,75 +0,0 @@
-.label {
-    display: inline-block;
-    padding: 3px $spacer-1;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
-    line-height: $lh-condensed-ultra;
-    color: $text-white;
-    background-color: $bg-blue;
-    border-radius: 2px;
-    box-shadow: inset 0 -1px 0 rgba($black, 0.12);
-
-    &:hover {
-        text-decoration: none;
-    }
-
-    &-gray {
-       color: $text-gray-darker;
-       background-color: lighten($gray, 20%); 
-    }
-
-    &-dark-gray {
-        color: $text-darkwhite;
-        background-color: $gray;
-    }
-
-    &-outline {
-        margin-top: -1px;
-        margin-bottom: -1px;
-        font-weight: $font-weight-normal;
-        color: $text-gray;
-        background-color: transparent;
-        border: $border-width $border-style $border-black-fade;
-        box-shadow: none;
-    }
-}
-
-.state {
-    display: inline-block;
-    padding: $spacer-2 $spacer-3;
-    font-weight: $font-weight-bold;
-    font-size: $body-font-size;
-    line-height: 20px;
-    color: $text-white;
-    text-align: center;
-    white-space: nowrap;
-    border-radius: $border-radius;
-    background-color: $bg-blue;
-    border-radius: 2px;
-    box-shadow: inset 0 -1px 0 rgba($black, 0.12);
-}
-
-.counter {
-    display: inline-block;
-    padding: $spacer-1 $spacer-2;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
-    line-height: $lh-condensed-ultra;
-    color: $text-gray;
-    background-color: rgba($black, 0.08);
-    border-radius: 15px;
-
-    &:empty {
-        visibility: hidden;
-    }
-
-    &.-dark {
-        background-color: $gray;
-        color: $text-white;
-    }
-
-    &.-light {
-        background-color: $black-fade-15;
-        color: $text-gray-dark;
-    }
-}

src/styles/thorn/layout/container.scss

@@ -1,35 +0,0 @@
-.container {
-    max-width: $container-default;
-    margin-right: auto;
-    margin-left: auto;   
-}
-
-.container-sm {
-    max-width: $container-sm;
-    margin-right: auto;
-    margin-left: auto;   
-}
-
-.container-md {
-    max-width: $container-md;
-    margin-right: auto;
-    margin-left: auto;   
-}
-
-.container-lg {
-    max-width: $container-lg;
-    margin-right: auto;
-    margin-left: auto;   
-}
-
-.container-xl {
-    max-width: $container-xl;
-    margin-right: auto;
-    margin-left: auto;   
-}
-
-.container-xxl {
-    max-width: $container-xxl;
-    margin-right: auto;
-    margin-left: auto;   
-}

src/styles/thorn/layout/grid-offset.scss

@@ -1,15 +0,0 @@
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
-        .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
-        .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
-        .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
-        .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
-        .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
-        .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
-        .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
-        .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
-        .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
-        .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
-    }
-}

src/styles/thorn/layout/grid.scss

@@ -1,59 +0,0 @@
-.col-1 { width: (1 / 12 * 100%); }
-.col-2 { width: (2 / 12 * 100%); }
-.col-3 { width: (3 / 12 * 100%); }
-.col-4 { width: (4 / 12 * 100%); }
-.col-5 { width: (5 / 12 * 100%); }
-.col-6 { width: (6 / 12 * 100%); }
-.col-7 { width: (7 / 12 * 100%); }
-.col-8 { width: (8 / 12 * 100%); }
-.col-9 { width: (9 / 12 * 100%); }
-.col-10 { width: (10 / 12 * 100%); }
-.col-11 { width: (11 / 12 * 100%); }
-.col-12 { width: 100%; }
-
-@each $breakpoint in map-keys($breakpoints) {
-    @include breakpoint($breakpoint) {
-        .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
-        .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
-        .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
-        .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
-        .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
-        .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
-        .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
-        .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
-        .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
-        .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
-        .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
-        .col-#{$breakpoint}-12 { width: 100%; }
-    }
-}
-
-@mixin gutters ($gutter-width: $spacer-3) {
-    margin-right: -$gutter-width;
-    margin-left: -$gutter-width;
-
-    > [class*="col-"] {
-        padding-right: $gutter-width !important;
-        padding-left: $gutter-width !important;
-    }
-}
-
-.gutter {
-    @include gutters($spacer-3);
-}
-
-.gutter-condensed {
-    @include gutters($spacer-2);
-}
-
-.gutter-spacious {
-    @include gutters($spacer-4);
-}
-
-@each $breakpoint in map-keys($breakpoints) {
-    @include breakpoint($breakpoint) {
-        .gutter-#{$breakpoint} { @include gutters($spacer-3); }
-        .gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); }
-        .gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); }
-    }
-}

src/styles/thorn/layout/header.scss

@@ -1,149 +0,0 @@
-.header {
-    z-index: 32;
-    display: flex;
-    padding: $spacer-3;
-    font-size: $body-font-size;
-    line-height: $lh-default;
-    color: $darkwhite;
-    background-color: $bg-gray-darker;
-    align-items: center;
-    flex-wrap: nowrap;
-
-    &.--light {
-        background-color: $bg-darkwhite;
-        color: $black;
-
-        .header-link{
-            color: $black;
-            &:hover,
-            &:focus {
-                color: $text-gray-darker;
-            }
-
-            
-        }
-    }
-}
-
-.header-item {
-    display: flex;
-    margin-right: $spacer-3;
-    align-self: stretch;
-    align-items: center;
-    flex-wrap: nowrap;
-}
-
-.header-item--full {
-    flex: auto;
-}
-
-.header-link {
-    font-weight: $font-weight-bold;
-    color: $text-white;
-    white-space: nowrap;
-
-    &:hover,
-    &:focus {
-        color: $text-gray-light;
-        text-decoration: none;
-    }
-}
-
-.header-dropdown {
-    position: relative;
-
-    ul {
-        list-style-type: none;
-    }
-    
-    .header-dropdown-menu {
-        border: $border-width $border-style $gray;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        background-color: $bg-white;
-        border-bottom-left-radius: .25rem;
-        border-bottom-right-radius: .25rem;
-        position: absolute;
-        width: 100%;
-
-        li {
-            display: block;
-        }
-
-        .dropdown-item {
-            display: block;
-            padding: $spacer-2 $spacer-2 $spacer-2 $spacer-4;
-            width: 100%;
-            overflow: hidden;
-            color: $gray;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            &:focus,
-            &:hover {
-                color: $text-black;
-                text-decoration: none;
-                background-color: $gray-100;
-                outline: none;
-        
-                > .icon {
-                color: inherit;
-                opacity: 1;
-                }
-            }
-
-            &.btn-link {
-                width: 100%;
-                text-align: left;
-            }
-
-            a {
-                text-decoration: none;
-                color: inherit;
-            }
-        }
-
-        .dropdown-signout {
-            width: 100%;
-            text-align: left;
-            background: none;
-            border: 0;
-        }
-        
-        .dropdown-divider {
-            display: block;
-            height: 0;
-            margin: 0 0;
-            border-top: $border;
-        }
-        
-        .dropdown-header {
-            padding: $spacer-1 $spacer-3;
-            font-size: $h6-size;
-            color: $text-gray-darker;
-        }
-    
-        .dropdown-item[aria-checked="false"] .icon-check {
-            display: none;
-        }
-
-        *:last-child {
-            border-bottom-left-radius: calc(.25rem - 1px);
-            border-bottom-right-radius: calc(.25rem - 1px);
-        }
-
-    }
-}
-
-
-.header-dropdown[open] {
-    .header-button {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border: $border-width $border-style $gray;
-    }
-
-    .header-dropdown-menu {
-        position: absolute;
-    }
-}

src/styles/thorn/layout/index.scss

@@ -1,6 +0,0 @@
-@import "../core/support/index.scss";
-
-@import "./container.scss";
-@import "./grid.scss";
-@import "./grid-offset.scss";
-@import "./header.scss";

src/styles/thorn/utilities/animations.scss

@@ -1,171 +0,0 @@
-.anim-fade-in {
-    animation-name: fade-in;
-    animation-duration: 1s;
-    animation-timing-function: ease-in-out;
-
-    &.fast {
-        animation-duration: 300ms;
-    }
-}
-
-@keyframes fade-in {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.anim-fade-out {
-    animation-name: fade-out;
-    animation-duration: 1s;
-    animation-timing-function: ease-out;
-
-    &.fast {
-        animation-duration: 0.3s;
-    }
-}
-
-@keyframes fade-out {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-.anim-fade-up {
-    opacity: 0;
-    animation-name: fade-up;
-    animation-duration: 0.3s;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease-out;
-    animation-delay: 1s;
-}
-
-@keyframes fade-up {
-    0% {
-        opacity: 0.8;
-        transform: translateY(100%);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.anim-fade-down {
-    animation-name: fade-down;
-    animation-duration: 0.3s;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease-in;
-}
-
-@keyframes fade-down {
-    0% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-
-    100% {
-        opacity: 0.5;
-        transform: translateY(100%);
-    }
-}
-
-.anim-grow-x {
-    width: 0%;
-    animation-name: grow-x;
-    animation-duration: 0.3s;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease;
-    animation-delay: 0.5s;
-}
-
-@keyframes grow-x {
-    to { width: 100%; }
-}
-
-.anim-shrink-x {
-    animation-name: shrink-x;
-    animation-duration: 0.3s;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease-in-out;
-    animation-delay: 0.5s;
-}
-
-@keyframes shrink-x {
-    to { width: 0%; }
-}
-
-.anim-scale-in {
-    animation-name: scale-in;
-    animation-duration: 0.15s;
-    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
-}
-
-@keyframes scale-in {
-    0% {
-        opacity: 0;
-        transform: scale(0.5);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.anim-pulse {
-    animation-name: pulse;
-    animation-duration: 2s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 0.3;
-    }
-
-    10% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0.3;
-    }
-}
-
-    .anim-pulse-in {
-    animation-name: pulse-in;
-    animation-duration: 0.5s;
-}
-
-@keyframes pulse-in {
-    0% {
-        transform: scale3d(1, 1, 1);
-    }
-
-    50% {
-        transform: scale3d(1.1, 1.1, 1.1);
-    }
-
-    100% {
-        transform: scale3d(1, 1, 1);
-    }
-}
-
-.hover-grow {
-    transition: transform 0.3s;
-    backface-visibility: hidden;
-
-    &:hover {
-        transform: scale(1.025);
-    }
-}

src/styles/thorn/utilities/borders.scss

@@ -1,196 +0,0 @@
-.border-x {
-    border-right: $border !important;
-    border-left: $border !important;
-}
-
-.border-y {
-    border-top: $border !important;
-    border-bottom: $border !important;
-}
-
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint){
-        .border#{$variant} {
-            border: $border !important;
-        }
-        .border#{$variant}-0 {
-            border: 0 !important;
-        }
-        .border#{$variant}-top {
-            border-top: $border !important;
-        }
-        .border#{$variant}-bottom {
-            border-bottom: $border !important;
-        }
-        .border#{$variant}-right {
-            border-right: $border !important;
-        }
-        .border#{$variant}-left {
-            border-left: $border !important;
-        }
-        .border#{$variant}-top-0 {
-            border-top: 0 !important;
-        }
-        .border#{$variant}-bottom-0 {
-            border-bottom: 0 !important;
-        }
-        .border#{$variant}-right-0 {
-            border-right: 0 !important;
-        }
-        .border#{$variant}-left-0 {
-            border-left: 0 !important;
-        }
-        .rounded#{$variant}-0 {
-            border-radius: 0 !important;
-        }
-        .rounded#{$variant}-1 {
-            border-radius: $border-radius !important;
-        }
-        .rounded#{$variant}-2 {
-            border-radius: $border-radius * 2 !important;
-        }
-
-        @each $edge, $corners in $edges {
-            .rounded#{$variant}-#{$edge}-0 {
-                @each $corner in $corners {
-                    border-#{$corner}-radius: 0 !important;
-                }
-            }
-            .rounded#{$variant}-#{$edge}-1 {
-                @each $corner in $corners {
-                    border-#{$corner}-radius: $border-radius !important;
-                }
-            }
-            .rounded#{$variant}-#{$edge}-2 {
-                @each $corner in $corners {
-                    border-#{$corner}-radius: $border-radius * 2 !important;
-                }
-            }
-        }
-    }
-}
-
-.circle {
-    border-radius: 50% !important;
-}
-
-.border-dashed {
-    border-style: dashed !important;
-}
-
-.border-green           { border-color: $border-green !important; }
-.border-green-light     { border-color: $border-green-light !important; }
-.border-red             { border-color: $border-red !important; }
-.border-red-light       { border-color: $border-red-light !important; }
-.border-blue            { border-color: $border-blue !important; }
-.border-blue-light      { border-color: $border-blue-light !important; }
-.border-purple          { border-color: $border-purple !important; }
-.border-purple-light    { border-color: $border-purple-light !important; }
-.border-pink            { border-color: $border-pink !important; }
-.border-pink-light      { border-color: $border-pink-light !important; }
-.border-orange          { border-color: $border-orange !important; }
-.border-orange-light    { border-color: $border-orange-light !important; }
-.border-yellow          { border-color: $border-yellow !important; }
-.border-yellow-light    { border-color: $border-yellow-light !important; }
-.border-gray            { border-color: $border-gray !important; }
-.border-gray-light      { border-color: $border-gray-light !important; }
-.border-gray-dark       { border-color: $border-gray-dark !important; }
-.border-gray-darker     { border-color: $border-gray-darker !important; }
-.border-black           { border-color: $black !important; }
-.border-white           { border-color: $white !important; }
-
-.border-black-fade      { border-color: $border-black-fade !important; }
-.border-white-fade      { border-color: $border-white-fade !important; }
-
-.border-white-fade-15   { border-color: $border-white-fade !important; }
-.border-white-fade-30   { border-color: $white-fade-30 !important; }
-.border-white-fade-50   { border-color: $white-fade-50 !important; }
-.border-white-fade-70   { border-color: $white-fade-70 !important; }
-.border-white-fade-85   { border-color: $white-fade-85 !important; }
-
-.border-hover {
-    &:hover{
-        border-color: $border-gray;
-    }
-    &-green:hover{
-        border-color: $border-green !important;
-    }
-    &-green-light:hover{
-        border-color: $border-green-light !important;
-    }
-    &-red:hover{
-        border-color: $border-red !important;
-    }
-    &-red-light:hover{
-        border-color: $border-red-light !important;
-    }
-    &-blue:hover{
-        border-color: $border-blue !important;
-    }
-    &-blue-light:hover{
-        border-color: $border-blue-light !important;
-    }
-    &-purple:hover{
-        border-color: $border-purple !important;
-    }
-    &-purple-light:hover{
-        border-color: $border-purple-light !important;
-    }
-    &-pink:hover{
-        border-color: $border-pink !important;
-    }
-    &-pink-light:hover{
-        border-color: $border-pink-light !important;
-    }
-    &-orange:hover{
-        border-color: $border-orange !important;
-    }
-    &-orange-light:hover{
-        border-color: $border-orange-light !important;
-    }
-    &-yellow:hover{
-        border-color: $border-yellow !important;
-    }
-    &-yellow-light:hover{
-        border-color: $border-yellow-light !important;
-    }
-    &-gray:hover{
-        border-color: $border-gray !important;
-    }
-    &-gray-light:hover{
-        border-color: $border-gray-light !important;
-    }
-    &-gray-dark:hover{
-        border-color: $border-gray-dark !important;
-    }
-    &-gray-darker:hover{
-        border-color: $border-gray-darker !important;
-    }
-    &-black:hover{
-        border-color: $black !important;
-    }
-    &-white:hover{
-        border-color: $white !important;
-    }
-    &-black-fade:hover{
-        border-color: $border-black-fade !important;
-    }
-    &-white-fade :hover{
-        border-color: $border-white-fade  !important;
-    }
-    &-white-fade-15:hover{
-        border-color: $white-fade-15 !important;
-    }
-    &-white-fade-30:hover{
-        border-color: $white-fade-30 !important;
-    }
-    &-white-fade-50:hover{
-        border-color: $white-fade-50 !important;
-    }
-    &-white-fade-70:hover{
-        border-color: $white-fade-70 !important;
-    }
-    &-white-fade-85:hover{
-        border-color: $white-fade-85 !important;
-    }
-}

src/styles/thorn/utilities/box-shadow.scss

@@ -1,15 +0,0 @@
-.box-shadow {
-    box-shadow: $box-shadow !important;
-}
-.box-shadow-md {
-    box-shadow: $box-shadow-md !important;
-}
-.box-shadow-lg {
-    box-shadow: $box-shadow-lg !important;
-}
-.box-shadow-xl {
-    box-shadow: $box-shadow-xl !important;
-}
-.box-shadow-none {
-    box-shadow: none !important;
-}

src/styles/thorn/utilities/colors.scss

@@ -1,78 +0,0 @@
-@each $hue, $shades in $hue-maps {
-    @each $index, $color in $shades {
-        .color-#{$hue}-#{$index} { color: $color !important; }
-        .bg-#{$hue}-#{$index} { background-color: $color !important; }
-    }
-}
-
-.link-gray {
-    color: $text-gray !important;
-
-    &:hover {
-        color: $text-blue !important;
-    }
-}
-.link-gray-dark {
-    color: $text-gray-dark !important;
-
-    &:hover {
-        color: $text-blue !important;
-    }
-}
-.link-hover-blue {
-    &:hover {
-        color: $text-blue !important;
-    }
-}
-.muted-link {
-    color: $text-gray !important;
-    &:hover {
-        color: $text-blue !important;
-        text-decoration: none;
-    }
-}
-
-.bg-white           { background-color: $bg-white !important; }
-.bg-darkwhite       { background-color: $bg-darkwhite !important; }
-.bg-black           { background-color: $bg-black !important; }
-.bg-black-fade      { background-color: $bg-black-fade !important; }
-.bg-gray-dark       { background-color: $bg-gray-dark !important; }
-.bg-gray-darker     { background-color: $bg-gray-darker !important; }
-.bg-gray-light      { background-color: $bg-gray-light !important; }
-.bg-gray            { background-color: $bg-gray !important; }
-.bg-red             { background-color: $bg-red !important; }
-.bg-red-light       { background-color: $bg-red-light !important; }
-.bg-green           { background-color: $bg-green !important; }
-.bg-green-light     { background-color: $bg-green-light !important; }
-.bg-blue            { background-color: $bg-blue !important; }
-.bg-blue-light      { background-color: $bg-blue-light !important; }
-.bg-yellow          { background-color: $bg-yellow !important; }
-.bg-yellow-light    { background-color: $bg-yellow-light !important; }
-.bg-orange          { background-color: $bg-orange !important; }
-.bg-orange-light    { background-color: $bg-orange-light !important; }
-.bg-purple          { background-color: $bg-purple !important; }
-.bg-purple-light    { background-color: $bg-purple-light !important; }
-.bg-pink            { background-color: $bg-pink !important; }
-.bg-pink-light      { background-color: $bg-pink-light !important; }
-
-.text-white         { color: $text-white !important; }
-.text-darkwhite     { color: $text-darkwhite !important; }
-.text-black         { color: $text-black !important; }
-.text-gray-dark     { color: $text-gray-dark !important; }
-.text-gray-darker   { color: $text-gray-darker !important; }
-.text-gray-light    { color: $text-gray-light !important; }
-.text-gray          { color: $text-gray !important; }
-.text-red           { color: $text-red !important; }
-.text-red-light     { color: $text-red-light !important; }
-.text-green         { color: $text-green !important; }
-.text-green-light   { color: $text-green-light !important; }
-.text-blue          { color: $text-blue !important; }
-.text-blue-light    { color: $text-blue-light !important; }
-.text-yellow        { color: $text-yellow !important; }
-.text-yellow-light  { color: $text-yellow-light !important; }
-.text-orange        { color: $text-orange !important; }
-.text-orange-light  { color: $text-orange-light !important; }
-.text-purple        { color: $text-purple !important; }
-.text-purple-light  { color: $text-purple-light !important; }
-.text-pink          { color: $text-pink !important; }
-.text-pink-light    { color: $text-pink-light !important; }

src/styles/thorn/utilities/details.scss

@@ -1,23 +0,0 @@
-.details-overlay[open] > summary::before {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    z-index: 80;
-    display: block;
-    cursor: default;
-    content:  " ";
-    background: transparent;
-}
-
-.details-overlay-dark[open] > summary::before {
-    z-index: 99;
-    background: $bg-black-fade;
-}
-
-.details-fade {
-    > summary { list-style: none; }
-    > summary::before { display: none; }
-    > summary::-webkit-details-marker { display: none; }
-}

src/styles/thorn/utilities/flexbox.scss

@@ -1,117 +0,0 @@
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        .flex#{$variant}-row            { 
-            flex-direction: row !important; 
-        }
-        .flex#{$variant}-row-reverse    { 
-            flex-direction: row-reverse !important; 
-        }
-        .flex#{$variant}-column         { 
-            flex-direction: column !important; 
-        }
-        .flex#{$variant}-column-reverse { 
-            flex-direction: column-reverse !important; 
-        }
-
-        .flex#{$variant}-wrap     { 
-            flex-wrap: wrap !important; 
-        }
-        .flex#{$variant}-nowrap   { 
-            flex-wrap: nowrap !important; 
-        }
-
-        .flex#{$variant}-justify-start    { 
-            justify-content: flex-start !important; 
-        }
-        .flex#{$variant}-justify-end      { 
-            justify-content: flex-end !important; 
-        }
-        .flex#{$variant}-justify-center   { 
-            justify-content: center !important; 
-        }
-        .flex#{$variant}-justify-between  { 
-            justify-content: space-between !important; 
-        }
-        .flex#{$variant}-justify-around   { 
-            justify-content: space-around !important; 
-        }
-
-        .flex#{$variant}-items-start      { 
-            align-items: flex-start !important; 
-        }
-        .flex#{$variant}-items-end        { 
-            align-items: flex-end !important; 
-        }
-        .flex#{$variant}-items-center     { 
-            align-items: center !important; 
-        }
-        .flex#{$variant}-items-baseline   { 
-            align-items: baseline !important; 
-        }
-        .flex#{$variant}-items-stretch    { 
-            align-items: stretch !important; 
-        }
-
-        .flex#{$variant}-content-start    { 
-            align-content: flex-start !important; 
-        }
-        .flex#{$variant}-content-end      { 
-            align-content: flex-end !important; 
-        }
-        .flex#{$variant}-content-center   { 
-            align-content: center !important; 
-        }
-        .flex#{$variant}-content-between  { 
-            align-content: space-between !important; 
-        }
-        .flex#{$variant}-content-around   { 
-            align-content: space-around !important; 
-        }
-        .flex#{$variant}-content-stretch  { 
-            align-content: stretch !important; 
-        }
-        
-        .flex#{$variant}-1        { 
-            flex: 1 !important; 
-        }
-        .flex#{$variant}-auto     { 
-            flex: auto !important; 
-        }
-        .flex#{$variant}-grow-0   { 
-            flex-grow: 0 !important; 
-        }
-        .flex#{$variant}-shrink-0 { 
-            flex-shrink: 0 !important; 
-        }
-
-        .flex#{$variant}-self-auto        { 
-            align-self: auto !important; 
-        }
-        .flex#{$variant}-self-start       { 
-            align-self: flex-start !important; 
-        }
-        .flex#{$variant}-self-end         { 
-            align-self: flex-end !important; 
-        }
-        .flex#{$variant}-self-center      { 
-            align-self: center !important; 
-        }
-        .flex#{$variant}-self-baseline    { 
-            align-self: baseline !important; 
-        }
-        .flex#{$variant}-self-stretch     { 
-            align-self: stretch !important; 
-        }
-
-        .flex#{$variant}-order-1 { 
-            order: 1 !important; 
-        }
-        .flex#{$variant}-order-2 { 
-            order: 2 !important; 
-        }
-        .flex#{$variant}-order-none { 
-            order: inherit !important; 
-        }
-    }
-}
-  

src/styles/thorn/utilities/index.scss

@@ -1,14 +0,0 @@
-@import "../core/support/index.scss";
-
-@import "./animations.scss";
-@import "./borders.scss";
-@import "./box-shadow.scss";
-@import "./colors.scss";
-@import "./details.scss";
-@import "./flexbox.scss";
-@import "./layout.scss";
-@import "./margin.scss";
-@import "./padding.scss";
-@import "./typography.scss";
-
-@import "./visibility-display.scss";

src/styles/thorn/utilities/layout.scss

@@ -1,55 +0,0 @@
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        @each $position in $responsive-positions {
-            .position#{$variant}-#{$position} {
-                position: $position !important;
-            }
-        }
-    }
-}
-
-.top-0    { top: 0 !important; }
-.right-0  { right: 0 !important; }
-.bottom-0 { bottom: 0 !important; }
-.left-0   { left: 0 !important; }
-
-.v-align-middle      { vertical-align: middle !important; }
-.v-align-top         { vertical-align: top !important; }
-.v-align-bottom      { vertical-align: bottom !important; }
-.v-align-text-top    { vertical-align: text-top !important; }
-.v-align-text-bottom { vertical-align: text-bottom !important; }
-.v-align-baseline    { vertical-align: baseline !important; }
-
-@each $overflow in (visible, hidden, auto, scroll) {
-    .overflow-#{$overflow} { overflow: $overflow !important; }
-    .overflow-x-#{$overflow} { overflow-x: $overflow !important; }
-    .overflow-y-#{$overflow} { overflow-y: $overflow !important; }
-}
-
-.clearfix {
-    @include clearfix;
-}
-
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        .float#{$variant}-left  { float: left !important; }
-        .float#{$variant}-right  { float: right !important; }
-        .float#{$variant}-none { float: none !important; }
-    }
-}
-
-.width-fit   { max-width: 100% !important; }
-.width-full  { width: 100% !important; }
-.height-fit  { max-height: 100% !important; }
-.height-full { height: 100% !important; }
-
-.min-width-0 { min-width: 0 !important; }
-
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        .width#{$variant}-auto { width: auto !important; }
-        .direction#{$variant}-rtl { direction: rtl !important; }
-        .direction#{$variant}-ltr { direction: ltr !important; }
-    }
-}
-  

src/styles/thorn/utilities/margin.scss

@@ -1,51 +0,0 @@
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        @each $scale, $size in $spacer-map {
-            .m#{$variant}-#{$scale}  { 
-                margin: $size !important; 
-            }
-            .mt#{$variant}-#{$scale} { 
-                margin-top: $size !important; 
-            }
-            .mr#{$variant}-#{$scale} { 
-                margin-right: $size !important; 
-            }
-            .mb#{$variant}-#{$scale} { 
-                margin-bottom: $size !important; 
-            }
-            .ml#{$variant}-#{$scale} { 
-                margin-left: $size !important; 
-            }
-
-            @if ($size != 0) {
-                .mt#{$variant}-n#{$scale} { 
-                    margin-top   : -$size !important; 
-                }
-                .mr#{$variant}-n#{$scale} { 
-                    margin-right : -$size !important; 
-                }
-                .mb#{$variant}-n#{$scale} { 
-                    margin-bottom: -$size !important; 
-                }
-                .ml#{$variant}-n#{$scale} { 
-                    margin-left  : -$size !important; 
-                }
-            }
-
-            .mx#{$variant}-#{$scale} {
-                margin-right: $size !important;
-                margin-left: $size !important;
-            }
-
-            .my#{$variant}-#{$scale} {
-                margin-top: $size !important;
-                margin-bottom: $size !important;
-            }
-        }
-
-        .mx#{$variant}-auto {
-        margin-right: auto !important;
-        margin-left: auto !important;
-        }
-    }
-}

src/styles/thorn/utilities/padding.scss

@@ -1,45 +0,0 @@
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        @each $scale, $size in $spacer-map {
-            .p#{$variant}-#{$scale}  { 
-                padding: $size !important; 
-            }
-            .pt#{$variant}-#{$scale} { 
-                padding-top: $size !important; 
-            }
-            .pr#{$variant}-#{$scale} { 
-                padding-right: $size !important; 
-            }
-            .pb#{$variant}-#{$scale} { 
-                padding-bottom: $size !important; 
-            }
-            .pl#{$variant}-#{$scale} { 
-                padding-left: $size !important; 
-            }
-            .px#{$variant}-#{$scale} {
-                padding-right: $size !important;
-                padding-left: $size !important;
-            }
-            .py#{$variant}-#{$scale} {
-                padding-top: $size !important;
-                padding-bottom: $size !important;
-            }
-        }
-    }
-}
-
-.p-responsive {
-    padding-right: $spacer-3 !important;
-    padding-left: $spacer-3 !important;
-
-    @include breakpoint(sm) {
-        padding-right: $spacer-6 !important;
-        padding-left: $spacer-6 !important;
-    }
-
-    @include breakpoint(lg) {
-        padding-right: $spacer-3 !important;
-        padding-left: $spacer-3 !important;
-    }
-}
-  

src/styles/thorn/utilities/typography.scss

@@ -1,270 +0,0 @@
-.h00 {
-    font-size: $h00-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h00-size !important; 
-    }
-}
-
-.h0 {
-    font-size: $h0-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h0-size !important; 
-    }
-}
-
-.h1 {
-    font-size: $h1-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h1-size !important; 
-    }
-}
-
-.h2 {
-    font-size: $h2-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h2-size !important; 
-    }
-}
-
-.h3 {
-    font-size: $h3-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h3-size !important; 
-    }
-}
-
-.h4 {
-    font-size: $h4-size !important;
-}
-
-.h5 { 
-    font-size: $h5-size !important; 
-}
-
-.h6 { 
-    font-size: $h6-size !important; 
-}
-
-.h00,
-.h0,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 { 
-    font-weight: $font-weight-bold !important; 
-}
-
-
-.f00 {
-    font-size: $h00-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h00-size !important;
-    }
-}
-
-.f0 {
-    font-size: $h0-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h0-size !important;
-    }
-}
-
-.f1 {
-    font-size: $h1-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h1-size !important;
-    }
-}
-
-.f2 {
-    font-size: $h2-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h2-size !important; 
-    }
-}
-
-.f3 {
-    font-size: $h3-size-mobile !important;
-
-    @include breakpoint(md) { 
-        font-size: $h3-size !important; 
-    }
-}
-
-.f4 {
-    font-size: $h4-size !important;
-
-    @include breakpoint(md) { 
-        font-size: $h4-size !important; 
-    }
-}
-
-.f5 { 
-    font-size: $h5-size !important; 
-}
-.f6 { 
-    font-size: $h6-size !important; 
-}
-
-.f00-light {
-    font-size: $h00-size-mobile !important;
-    font-weight: $font-weight-light !important;
-
-    @include breakpoint(md) { 
-        font-size: $h00-size !important; 
-    }
-}
-
-.f0-light {
-    font-size: $h0-size-mobile !important;
-    font-weight: $font-weight-light !important;
-
-    @include breakpoint(md) { 
-        font-size: $h0-size !important; 
-    }
-}
-
-.f1-light {
-    font-size: $h1-size-mobile !important;
-    font-weight: $font-weight-light !important;
-
-    @include breakpoint(md) { 
-        font-size: $h1-size !important; 
-    }
-}
-
-    .f2-light {
-    font-size: $h2-size-mobile !important;
-    font-weight: $font-weight-light !important;
-
-    @include breakpoint(md) { 
-        font-size: $h2-size !important; 
-    }
-}
-
-.f3-light {
-    font-size: $h3-size-mobile !important;
-    font-weight: $font-weight-light !important;
-
-    @include breakpoint(md) { 
-        font-size: $h3-size !important; 
-    }
-}
-
-@each $scale, $size in $text-size-map {
-    .text-size-#{$scale}{
-        font-size: map-get($text-size-mobile-map, $scale) !important;
-
-        @include breakpoint(md) {
-            font-size: $size !important;
-        }
-    }
-}
-
-.lead {
-    margin-bottom: 30px;
-    font-size: $h3-size;
-    font-weight: $font-weight-light;
-    color: $text-gray;
-}
-
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        .lh#{$variant}-condensed-ultra { 
-            line-height: $lh-condensed-ultra !important; 
-        }
-        .lh#{$variant}-condensed { 
-            line-height: $lh-condensed !important; 
-        }
-        .lh#{$variant}-default { 
-            line-height: $lh-default !important; 
-        }
-        .lh#{$variant}-0 { 
-            line-height: 0 !important; 
-        }
-    }
-}
-
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        .text#{$variant}-right { 
-            text-align: right !important; 
-        }
-        .text#{$variant}-left { 
-            text-align: left !important; 
-        }
-        .text#{$variant}-center { 
-            text-align: center !important; 
-        }
-    }
-}
-
-.text-normal { 
-    font-weight: $font-weight-normal !important; 
-}
-.text-bold { 
-    font-weight: $font-weight-bold !important;
-}
-.text-italic { 
-    font-style: italic !important; 
-}
-.text-uppercase { 
-    text-transform: uppercase !important; 
-}
-.text-underline { 
-    text-decoration: underline !important; 
-}
-.no-underline { 
-    text-decoration: none !important; 
-}
-.no-wrap { 
-    white-space: nowrap !important; 
-}
-.ws-normal { 
-    white-space: normal !important; 
-}
-
-.break-word {
-    word-break: break-word !important;
-    word-wrap: break-word !important;
-    overflow-wrap: break-word !important;
-}
-
-.wb-break-all { 
-    word-break: break-all !important; 
-}
-
-.text-emphasized {
-    font-weight: $font-weight-bold;
-    color: $text-gray-dark;
-}
-
-.list-style-none { 
-    list-style: none !important; 
-}
-
-.text-shadow-dark {
-    text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75);
-}
-.text-shadow-light {
-    text-shadow: 0 1px 0 rgba($white, 0.5);
-}
-
-.text-mono {
-    font-family: $mono-font !important;
-}
-
-.user-select-none {
-    user-select: none !important;
-}

src/styles/thorn/utilities/visibility-display.scss

@@ -1,63 +0,0 @@
-@each $breakpoint, $variant in $responsive-variants {
-    @include breakpoint($breakpoint) {
-        @each $display in $display-values {
-        .d#{$variant}-#{$display} { display: $display !important; }
-        }
-    }
-}
-
-.v-hidden { visibility: hidden !important; }
-.v-visible { visibility: visible !important; }
-
-@media (max-width: $width-sm - 1px) {
-    .hide-sm {
-        display: none !important;
-    }
-}
-
-@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
-    .hide-md {
-        display: none !important;
-    }
-}
-
-@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
-    .hide-lg {
-        display: none !important;
-    }
-}
-
-@media (min-width: $width-lg) {
-    .hide-xl {
-        display: none !important;
-    }
-}
-
-.table-fixed { table-layout: fixed !important; }
-
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    word-wrap: normal;
-    border: 0;
-}
-
-.show-on-focus {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: 0;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-
-    &:focus {
-        z-index: 20;
-        width: auto;
-        height: auto;
-        clip: auto;
-    }
-}

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
 const { DefinePlugin } = require('webpack');
 
 const alias = {
@@ -30,7 +31,11 @@ module.exports = (env, args) => {
     }
     return {
         entry: {
-            app: ['babel-polyfill', './src/index']
+            styles: ['./src/styles/main.scss'],
+            app: {
+                import: ['babel-polyfill', './src/index'],
+                dependOn: 'styles'
+            },
         },
         optimization: {
             runtimeChunk: 'single',
@@ -44,13 +49,10 @@ module.exports = (env, args) => {
                         minSize: 200000,
                         maxSize: 400000
                     },
-                    styles: {
-                        name: 'styles',
-                        test: /\.scss$/,
-                        chunks: 'all'
-                    }
                 }
-            }
+            },
+            minimize: true,
+            minimizer: [new TerserPlugin()],
         },
         output: {
             path: path.join(__dirname, 'public'),
@@ -101,7 +103,7 @@ module.exports = (env, args) => {
             }),
             new DefinePlugin({
                 __CONFIG__: JSON.stringify(settings)
-            })
+            }),
         ],
         resolve: {
             extensions: ['.js', '.ts'],