start of theme. darren says make super dark

assets/styles/app.scss

@@ -6,6 +6,7 @@
 @import "./base/helpers";
 @import "./base/color";
 @import "./base/basic";
+@import "./base/typography";
 
 @import "./fonts/fira";
 @import "./fonts/dots";

assets/styles/base/_typography.scss

@@ -0,0 +1,150 @@
+// -----------------------------------------------------------------------------
+// This file contains typography styles.
+// -----------------------------------------------------------------------------
+
+//
+HTML {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+html, body {
+  font-size: 12px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--body-text);
+  font-family: 'Fira Sans';
+  font-weight: 300;
+}
+
+h1 {
+margin-bottom: 3rem;
+font-family: Fira Sans;
+font-size: 3.2382850718749987em;
+line-height: 6rem;
+font-weight: 300;
+font-style: normal;
+letter-spacing: 0em;
+}
+
+h2 {
+margin-bottom: 3rem;
+font-family: Fira Sans;
+font-size: 2.815900062499999em;
+line-height: 3rem;
+font-weight: 300;
+font-style: normal;
+letter-spacing: 0em;
+}
+
+h3 {
+margin-bottom: 3rem;
+font-family: Fira Sans;
+font-size: 2.448608749999999em;
+line-height: 3rem;
+font-weight: 300;
+font-style: normal;
+letter-spacing: 0em;
+}
+
+h4 {
+margin-bottom: 3rem;
+font-family: Fira Sans;
+font-size: 2.1292249999999995em;
+line-height: 3rem;
+font-weight: 300;
+font-style: normal;
+letter-spacing: 0em;
+}
+
+h5 {
+margin-bottom: 3rem;
+font-family: Fira Sans;
+font-size: 1.8514999999999995em;
+line-height: 3rem;
+font-weight: 300;
+font-style: normal;
+letter-spacing: 0em;
+}
+
+h6 {
+margin-bottom: 3rem;
+font-family: Fira Sans;
+font-size: 1.25em;
+line-height: 3rem;
+font-weight: 300;
+font-style: normal;
+letter-spacing: .25em;
+text-transform: uppercase;
+}
+
+p {
+margin-bottom: 3rem;
+font-family: Fira Sans;
+font-size: 1.4em;
+line-height: 3rem;
+font-weight: 400;
+font-style: normal;
+letter-spacing: 0em;
+}
+
+@media screen and (max-width: 720px) {
+  h1 {
+  margin-bottom: 3rem;
+  font-size: 6.103515625em;
+  line-height: 9rem;
+  font-weight: 600;
+  font-style: normal;
+  letter-spacing: 0em;
+  }
+  h2 {
+  margin-bottom: 3rem;
+  font-size: 4.8828125em;
+  line-height: 6rem;
+  font-weight: 600;
+  font-style: normal;
+  letter-spacing: 0em;
+  }
+  h3 {
+  margin-bottom: 3rem;
+  font-size: 3.90625em;
+  line-height: 6rem;
+  font-weight: 600;
+  font-style: normal;
+  letter-spacing: 0em;
+  }
+  h4 {
+  margin-bottom: 3rem;
+  font-size: 3.125em;
+  line-height: 6rem;
+  font-weight: 600;
+  font-style: normal;
+  letter-spacing: 0em;
+  }
+  h5 {
+  margin-bottom: 3rem;
+  font-size: 2.5em;
+  line-height: 3rem;
+  font-weight: 600;
+  font-style: normal;
+  letter-spacing: 0em;
+  }
+  h6 {
+  margin-bottom: 3rem;
+  font-size: 2em;
+  line-height: 3rem;
+  font-weight: 600;
+  font-style: normal;
+  letter-spacing: 0em;
+  }
+  p {
+  margin-bottom: 3rem;
+  font-family: Lora;
+  font-size: 1.6em;
+  line-height: 3rem;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: 0em;
+  }
+}

assets/styles/base/_variables.scss

@@ -1,7 +1,7 @@
 $max-width: 1440px !default;
 $min-width: 75% !default;
 
-$outline-width: 4px;
+$outline-width: 0;
 
 $z-indexes: (
   default: 1,

assets/styles/global/_button.scss

@@ -20,7 +20,7 @@ button,
   user-select: none;
   border: 0 solid transparent;
   padding: $btn-padding;
-  border-radius: 4px;
+  border-radius: $border-radius;
 
   &:hover {
       text-decoration: none;
@@ -99,7 +99,7 @@ fieldset[disabled] .btn {
   padding: 0;
   overflow: hidden;
   background: var(--input-bg);
-  border-radius: 4px;
+  border-radius: $border-radius;
   border: 4px solid transparent;
 
   .btn, .btn-xs, .btn-sm, .btn-lg {

assets/styles/global/_form.scss

@@ -13,7 +13,7 @@ TEXTAREA {
   display: block;
   box-sizing: border-box;
   width: 100%;
-  padding: 9px 12px 8px;
+  padding: 8.5px;
 
   color: var(--input-text);
   background: var(--input-bg);
@@ -23,7 +23,7 @@ TEXTAREA {
   border-radius: $border-radius;
   border-style: solid;
   border-color: transparent;
-  font-size: 15px;
+  // font-size: 15px;
 
   &::placeholder {
     color: var(--input-placeholder);

assets/styles/themes/_dark.scss

@@ -1,8 +1,8 @@
 .theme-dark {
   // Local variables for reused colors
-  $secondary: #9c9fa4;
+  // $secondary: #9c9fa4;
-  $disabled:  #7c8084;
+  // $disabled:  #7c8084;
-  $link:      #6cb4b9;
+  // $link:      #6cb4b9;
 
   //Contrast colors
   $contrasted-dark: $lightest !default;
@@ -30,7 +30,7 @@
   --login-bg:  #{$darkest};
   --body-bg:   #{$darker};
   --body-text:  white;
-  --header-bg: #{$dark};
+  --header-bg: #{$primary};
   --box-bg:    #{$darker};
   --border:    #{$darker};
   --nav-select:    #{$darker};

assets/styles/themes/_light.scss

@@ -4,24 +4,24 @@ $lighter: #BABFC5;
 $light: #9B9FA5;
 $medium: #7B8085;
 $dark: #5B6064;
-$darker: #3C4044;
+$darker: #1F1D25;
-$darkest: #2D3033;
+$darkest: #131217;
 
 
 $contrasted-dark: $darkest !default;
 $contrasted-light: $lightest !default;
 
-$primary:   #12BE72;
+$primary:   #3D98D3;
 $secondary: $darkest;
-$link:      #6cb4b9;
+$link:      $primary;
 $disabled:  $medium;
-$success:   #9ebb85;
+$success:   #96BD7F;
-$info:      #d7c25a;
+$info:      #16A085;
-$warning:   #d7c25a;
+$warning:   #DAC342;
-$error:     #de5347;
+$error:     #EF5A53;
 
 $selected: rgba($primary, .5);
-$border-radius: 4px;
+$border-radius: 3px;
 
 :root {
   // Colors that will have text- and bg- helper classes created
@@ -48,8 +48,8 @@ $border-radius: 4px;
   --body-bg:                    white;
   --body-text:                  black;
   --disabled-bg:                #{$disabled};
-  --header-bg:                  #f1f2f3;
+  --header-bg:                  $primary;
-  --nav-bg:                     #f1f2f3;
+  --nav-bg:                     $primary;
   --nav-bg2:                    #e1e2e3;
   --nav-bg3:                    #d1d2d3;
   --footer-bg:                  #f1f2f3;

components/Accordion.vue

@@ -49,7 +49,7 @@ export default {
 
 <style lang="scss" scoped>
   .header {
-    background-color: var(--nav-pkg);
+    //background-color: var(--nav-pkg);
     border-bottom: solid thin var(--border);
     font-size: 14px;
     padding: 10px;

layouts/default.vue

@@ -83,7 +83,7 @@ export default {
 
     <nav>
       <div v-for="pkg in packages" :key="pkg.name" class="package">
-        <h4>{{ pkg.label }}</h4>
+        <h6>{{ pkg.label }}</h6>
         <hr />
         <Accordion
           v-for="group in pkg.groups"

static/fonts/icons/demo-files/demo.css

@@ -1,4 +1,4 @@
-body {
+/*body {
   padding: 0;
   margin: 0;
   font-family: sans-serif;
@@ -150,3 +150,4 @@ p {
   font-size: 32px;
 }
 
+*/