implemented styles

.babelrc

@@ -30,7 +30,8 @@
                     "pages": "./src/pages",
                     "configs": "./src/configs",
                     "services": "./src/services",
-                    "layouts": "./src/layouts"
+                    "layouts": "./src/layouts",
+                    "styles": "./src/styles"
                 }
             }
         ],

declaration.d.ts

@@ -0,0 +1 @@
+declare module "*.scss";

package.json

@@ -21,7 +21,11 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-polyfill": "^6.26.0",
     "connect-history-api-fallback": "^1.6.0",
+    "css-loader": "^5.2.6",
     "html-webpack-plugin": "^5.3.1",
+    "node-sass": "^6.0.0",
+    "sass-loader": "^11.1.1",
+    "sass-to-string": "^1.5.1",
     "validator": "^13.6.0",
     "webpack": "^5.38.1",
     "webpack-dev-server": "^3.11.2"

src/components/app-shadow/AppShadowElement.ts

@@ -1,9 +1,5 @@
-import { attr, targets, controller, target } from "@github/catalyst";
+import { controller } from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
+import style from "styles/main.scss";
-import { html, render, until } from "@github/jtml";
-import { PingService } from "services/";
-import { AppService, HttpClient, RouterService } from "core/services";
-import { AuthStore } from "core/store";
 
 @controller
 class AppShadowElement extends HTMLElement {
@@ -13,14 +9,11 @@ class AppShadowElement extends HTMLElement {
 
     connectedCallback() {
         this.attachShadow({ mode: "open" });
-        this.update();
+        const _appMain = document.createElement("app-main");
+        const _style = document.createElement("style");
+        _style.innerHTML = style;
+
+        this.shadowRoot.appendChild(_style);
+        this.shadowRoot.appendChild(_appMain);
     }
-
-    render = () => {
-        return html` <app-main></app-main> `;
-    };
-
-    update = () => {
-        render(this.render(), this.shadowRoot!);
-    };
 }

src/styles/main.scss

@@ -0,0 +1,3 @@
+@import "./thorn/index.scss";
+@import "./sidebar/index.scss";
+@import "./modal/index.scss";

src/styles/modal/index.scss

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

src/styles/modal/modal.scss

@@ -0,0 +1,24 @@
+app-modal {
+    [data-target="app-modal.modalOverlay"] {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1001;
+        background: rgba(0, 0, 0, 0.5);
+        overflow-x: auto;
+        overflow-y: auto;
+
+        [data-target="app-modal.modalContent"] {
+            z-index: 1005;
+            top: 5%;
+            width: 1080px;
+            padding-bottom: 10px;
+            margin: 25px auto;
+            background: #ffffff;
+            box-shadow: 1px 1px 5px -5px #868686;
+            border-radius: 0.5em;
+        }
+    }
+}

src/styles/sidebar/index.scss

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

src/styles/sidebar/sidebar.scss

@@ -0,0 +1,20 @@
+app-menu {
+    [data-target="app-menu.sidebar"] {
+        margin: 0;
+        padding: 0;
+        width: 200px;
+        background-color: #f1f1f1;
+        position: fixed;
+        height: 100%;
+        overflow: auto;
+        top: 0;
+        left: 0;
+    }
+}
+
+app-slot {
+    [data-target="base-layout.content"] {
+        margin-left: 200px;
+        padding: 1px 16px;
+    }
+}

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

@@ -0,0 +1,106 @@
+.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/buttons.scss

@@ -0,0 +1,209 @@
+.btn {
+    display: inline-block;
+    padding: 6px 12px;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: $border-width $border-style transparent;
+    font-size: map-get($text-size-map, 6);
+    font-weight: $font-weight-semibold;
+    border-radius: 0.25em;
+    appearance: none;
+    line-height: 20px;
+
+    &:hover {
+        text-decoration: none;
+        background-repeat: repeat-x;
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled=true] {
+        cursor: default;
+        background-position: 0 0;
+    }
+
+    &:active,
+    &.selected,
+    &[aria-selected=true] {
+        background-image: none;
+    }
+
+    &.btn-squared {
+        border-radius: 0;
+    }
+
+    &.btn-rounder {
+        border-radius: 2em;
+    }
+
+    @each $color, $value in $button-map {
+        &.btn-#{$color} {
+            background-color: nth($value, 1);
+            color: nth($value, 2);
+            &:hover {
+                background-color: darken(nth($value, 1), 10%);
+                color: lighten(nth($value, 2), 5%);
+            }
+            
+            &-transparent {
+                background: transparent;
+                color: $black;
+                &:hover {
+                    background-color: nth($value, 1);
+                    color: nth($value, 2);
+                }
+            }
+        }
+    }
+
+    &.btn-link {
+        color: $text-blue;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    &.btn-sm {
+        padding: 3px 10px;
+        font-size: $font-size-small;
+        line-height: 20px;
+    }
+
+    &.btn-lg {
+        padding: $em-spacer-6 1.25em;
+        font-size: inherit;
+        border-radius: 6px;
+    }
+
+    &.btn-block {
+        display: block;
+        width: 100%;
+        text-align: center;
+    }
+
+
+}
+
+.btn-icon {
+    display: inline-block;
+    padding: 5px;
+    margin-left: 5px;
+    line-height: $lh-condensed-ultra;
+    color: $text-gray;
+    vertical-align: middle;
+    background: transparent;
+    border: $border-width $border-style transparent;
+
+    &:hover {
+        color: $text-blue;
+    }
+
+    &:disabled,
+    &[aria-disabled=true] {
+        color: $gray-400;
+        cursor: default;
+
+        &:hover {
+            color: $gray-400;
+        }
+    }
+
+    &-round {
+        text-decoration: none;
+        outline: none;
+        cursor: pointer;
+        background: transparent;
+        border-radius: 100%;
+        overflow: none;
+        text-align: center;
+        padding: 5px;
+        border: $border-width $border-style transparent;
+
+        span,
+        div {
+            display:inline-block;
+            vertical-align:top;
+        }
+
+        @each $color, $value in $button-map {
+            &.btn-#{$color} {
+                background-color: nth($value, 1);
+                color: nth($value, 2);
+                &:hover {
+                    @if ($color == "black") {
+                        background-color: lighten(nth($value, 1), 20%);
+                        color: nth($value, 2);
+                    } @else if ($color == "white") {
+                        background-color: darken(nth($value, 1), 20%);
+                        color: nth($value, 2);
+                    } @else if ($color == "yellow") {
+                        background-color: darken(nth($value, 1), 10%);
+                        color: lighten(nth($value, 2), 5%);
+                    } @else if (str-index($color, "light")) {
+                        background-color: darken(nth($value, 1), 20%);
+                        color: lighten(nth($value, 2), 5%);
+                    } @else {  
+                        background-color: darken(nth($value, 1), 10%);
+                        color: invert(nth($value, 2), 90%);
+                    }
+                }
+                
+                &-transparent {
+                    background: transparent;
+                    color: $black;
+                    &:hover {
+                        background-color: nth($value, 1);
+                        color: nth($value, 2);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.hidden-text-expander {
+    display: block;
+
+    &.inline {
+        position: relative;
+        top: -1px;
+        display: inline-block;
+        margin-left: 5px;
+        line-height: 0;
+    }
+}
+
+.hidden-text-expander a,
+.ellipsis-expander {
+    display: inline-block;
+    height: 12px;
+    padding: 0 5px 5px;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    line-height: 6px;
+    color: $gray-700;
+    text-decoration: none;
+    vertical-align: middle;
+    background: lighten($gray-300, 5%);
+    border: 0;
+    border-radius: 1px;
+
+    &:hover {
+        text-decoration: none;
+        background-color: darken($gray-300, 4%);
+    }
+
+    &:active {
+        color: $text-white;
+        background-color: $blue-400;
+    }
+}

src/styles/thorn/button/dropdown.scss

@@ -0,0 +1,286 @@
+.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

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

src/styles/thorn/card/cards.scss

@@ -0,0 +1,44 @@
+.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

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

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

@@ -0,0 +1,70 @@
+* { // 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

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

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

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  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 {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  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] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  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,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  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,
+  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,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-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,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  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 {
+    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 {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [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-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [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 {
+    -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-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

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

@@ -0,0 +1,74 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    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;
+}
+
+b,
+strong {
+    font-weight: $font-weight-bold;
+}
+
+small {
+    font-size: 90%;
+}
+
+blockquote {
+    margin: 0;
+}
+
+ul,
+ol {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+ol ol,
+ul ol {
+    list-style-type: upper-roman;
+}
+
+ul ul ol,
+ul ol ol,
+ol ul ol,
+ol ol ol {
+    list-style-type: lower-latin;
+}
+
+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/thorn/core/index.scss

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+@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

@@ -0,0 +1,71 @@
+@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

@@ -0,0 +1,349 @@
+$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

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

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

@@ -0,0 +1,164 @@
+//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

@@ -0,0 +1,85 @@
+// 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

@@ -0,0 +1,9 @@
+//@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

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

src/styles/thorn/labels/labels.scss

@@ -0,0 +1,75 @@
+.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

@@ -0,0 +1,35 @@
+.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

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,59 @@
+.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

@@ -0,0 +1,149 @@
+.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

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

src/styles/thorn/utilities/animations.scss

@@ -0,0 +1,171 @@
+.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

@@ -0,0 +1,196 @@
+.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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,78 @@
+@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

@@ -0,0 +1,23 @@
+.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

@@ -0,0 +1,117 @@
+@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

@@ -0,0 +1,14 @@
+@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

@@ -0,0 +1,55 @@
+@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

@@ -0,0 +1,51 @@
+@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

@@ -0,0 +1,45 @@
+@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

@@ -0,0 +1,270 @@
+.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

@@ -0,0 +1,63 @@
+@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;
+    }
+}

tsconfig.json

@@ -33,7 +33,10 @@
                 "src/services*"
             ],
             "layouts*": [
-                "src/layouts"
+                "src/layouts*"
+            ],
+            "styles*": [
+                "src/styles*"
             ],
             "@src*": [
                 "src*"

webpack.config.js

@@ -8,7 +8,8 @@ const alias = {
     components: path.resolve(__dirname, '/components'),
     pages: path.resolve(__dirname, '/pages'),
     services: path.resolve(__dirname, '/services'),
-    layouts: path.resolve(__dirname, "/layouts")
+    layouts: path.resolve(__dirname, "/layouts"),
+    styles: path.resolve(__dirname, "/styles"),
 };
 
 module.exports = {
@@ -29,7 +30,7 @@ module.exports = {
                 },
                 styles: {
                     name: 'styles',
-                    test: /\.css$/,
+                    test: /\.scss$/,
                     chunks: 'all'
                 }
             }
@@ -54,6 +55,27 @@ module.exports = {
                 resolve: {
                     fullySpecified: false
                 }
+            },
+            {
+                test: /\.css$/,
+                use: {
+                    loader: 'css-loader'
+                }
+            },
+            {
+                test: /\.(scss|css)$/,
+                exclude: /node_modules/,
+                use: [
+                    "sass-to-string",
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            sassOptions: {
+                                outputStyle: "compressed",
+                            },
+                        }
+                    },
+                ]
             }
         ]
     },