Removed hard-coded color codes, reference SCSS variables

src/App.vue

@@ -17,7 +17,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import url('../src/global-styles.scss');
+@import '../src/styles/global-styles.scss';
+@import '../src/styles/color-pallet.scss';
 
 #app {
   .footer {

src/components/Collapsable.vue

@@ -68,17 +68,18 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 
+@import '../../src/styles/color-pallet.scss';
+
 .collapsable {
     // width: 310px;
     padding: 5px;
     margin: 10px;
     border-radius: 10px;
-    background: #1CA8DD;
+    background: $ascent;
-    background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     box-shadow: 1px 1px 2px #130f23;
     width: auto;
     // &.col-1 { width: 155px; }
@@ -106,7 +107,7 @@ export default {
         border-radius: 7px;
         transition: all 0.25s ease-out;
         text-align: left;
-        color: #2f323ae6;
+        color:$bg-with-opacity;
 
         h2 {
             margin: 0;
@@ -116,7 +117,7 @@ export default {
     }
 
     .lbl-toggle:hover {
-        color: #2f323a;
+        color: $background;
     }
 
     .lbl-toggle::before {
@@ -140,7 +141,7 @@ export default {
         max-height: 0px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
-        background: #2f323ae6;
+        background: $bg-with-opacity;
         border-radius: 0 0 10px 10px;
     }
 

src/components/FilterTile.vue

@@ -60,23 +60,22 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+@import '../../src/styles/color-pallet.scss';
+
   section {
     display: flex;
     align-items: center;
     align-items: stretch;
-    background: linear-gradient(0deg, rgba(47,50,58,1) 0%, rgba(40,42,50,1) 100%);
+    background: linear-gradient(0deg, $background 0%, $header-color 100%);
   }
   form {
     border-radius: 0 0 20px 0;
     padding: 0 0.2rem 0.2rem 0;
-    background: #282a32;
+    background: $header-color;
     label {
         display: inline;
-        background: -webkit-gradient(
+        color: $ascent;
-          linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
-        background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
         margin: 0.5rem;
         display: inline;
     }
@@ -88,30 +87,29 @@ export default {
       outline: none;
       border: none;
       border-radius: 12px;
-      background: #607d8b33;
+      background: $background;
-      box-shadow: 1px 1px 2px #232323;
+      color: $ascent;
-      color: #1CA8DD;
       &:focus {
-        background: #607d8b4a;
+        background: $bg-with-opacity;
       }
     }
     .clear-search {
       position: absolute;
       margin: 1em 0 0 -2em;
-      color: #1CA8DD;
+      color: $ascent;
       opacity: 0.5;
       border-radius: 50px;
       cursor: pointer;
       &:hover {
         opacity: 1;
-        background: #282a32;
+        background: $header-color;
       }
     }
   }
   .space-filler {
     flex: 1;
     border-radius: 20px 0 0;
-    background: #2f323a;
+    background: $background;
   }
   @media screen and (max-width: 600px) {
     form {

src/components/Header.vue

@@ -19,12 +19,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
+  @import '../../src/styles/color-pallet.scss';
+
   header {
     margin: 0;
     padding: 0.5rem;
     display: flex;
     justify-content: space-between;
-    background: #282a32;
+    background: $header-color;
     align-items: center;
     align-content: flex-start;
     @media screen and (max-width: 600px) {

src/components/Item.vue

@@ -59,11 +59,12 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+@import '../../src/styles/color-pallet.scss';
 
 .item {
     width: 120px;
     height: 100px;
-    color: #1CA8DD;
+    color: $ascent;
     display: inline-block;
     vertical-align: middle;
     margin: 8px;
@@ -79,7 +80,7 @@ export default {
         background: #607d8b4d;
     }
     &:focus {
-        border: 2px solid #1CA8DD;
+        border: 2px solid $ascent;
         outline: none;
     }
     &.short {
@@ -120,7 +121,7 @@ export default {
     .overflow-dots {
         display: block;
         opacity: 1;
-        background: #354857;
+        background: #1b3550;
         position: absolute;
         z-index: 5;
         right: 0;

src/components/ItemGroup.vue

@@ -39,6 +39,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '../../src/styles/color-pallet.scss';
 
 .no-items {
     width: 100px;
@@ -48,7 +49,7 @@ export default {
     cursor: default;
     border-radius: 10px;
     background: #607d8b33;
-    color: #1CA8DD;
+    color: $ascent;
     box-shadow: 1px 1px 2px #373737;
 }
 

src/components/KeyboardShortcutInfo.vue

@@ -59,61 +59,64 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    .kb-sc-info {
+
-      position: fixed;
+@import '../../src/styles/color-pallet.scss';
-      width: 30em;
+
-      bottom: 0;
+.kb-sc-info {
-      right: 10px;
+  position: fixed;
-      margin: 0.5em;
+  width: 30em;
-      padding: 0.1em 0.3em;
+  bottom: 0;
-      z-index: 10;
+  right: 10px;
-      border-radius: 12px;
+  margin: 0.5em;
-      border: 1px solid #282a32;
+  padding: 0.1em 0.3em;
-      -webkit-box-shadow: 2px 1px 5px #130f23;
+  z-index: 10;
-      box-shadow: 2px 1px 5px #130f23;
+  border-radius: 12px;
-      border: 1px solid #39a1e5;
+  border: 1px solid $header-color;
-      color: #39a1e5;
+  -webkit-box-shadow: 2px 1px 5px #130f23;
-      background: #282a32;
+  box-shadow: 2px 1px 5px #130f23;
-      cursor: default;
+  border: 1px solid $ascent;
-      opacity: 0.94;
+  color: $ascent;
-      @media screen and (max-width: 600px) {
+  background: $header-color;
-        display: none;
+  cursor: default;
-      }
+  opacity: 0.94;
-      h5 { /* The dialog title */
+  @media screen and (max-width: 600px) {
-        position: absolute;
+    display: none;
-        top: -35px;
+  }
-        left: 20px;
+  h5 { /* The dialog title */
-        border: 1px solid #39a1e5;
+    position: absolute;
-        color: #39a1e5;
+    top: -35px;
-        background: #282a32;
+    left: 20px;
-        padding: 4px;
+    border: 1px solid $ascent;
-        border-radius: 5px;
+    color: $ascent;
-      }
+    background: $header-color;
-      .close { /* The little exit icon, in top-right */
+    padding: 4px;
-        float: right;
+    border-radius: 5px;
-        border-radius: 20px;
+  }
-        width: 1em;
+  .close { /* The little exit icon, in top-right */
-        padding: 0 0 6px 6px;
+    float: right;
-        height: 1em;
+    border-radius: 20px;
-        background: #0000008a;
+    width: 1em;
-        margin-top: 3px;
+    padding: 0 0 6px 6px;
-        border: 1px solid transparent;
+    height: 1em;
-        cursor: pointer;
+    background: $transparent-black;
-        &:hover {
+    margin-top: 3px;
-          border: 1px solid #39a1e5;
+    border: 1px solid transparent;
-          opacity: 0.6;
+    cursor: pointer;
-        }
+    &:hover {
-      }
+      border: 1px solid $ascent;
-    }
+      opacity: 0.6;
-    /* Animations, animations everywhere */
-    .slide-fade-enter-active {
-      transition: all 1s ease;
-    }
-    .slide-fade-leave-active {
-      transition: all .8s cubic-bezier(.93,.01,.89,.5);
-    }
-    .slide-fade-enter, .slide-fade-leave-to {
-      transform: translateY(35em);
-      opacity: 0;
     }
+  }
+}
+/* Animations, animations everywhere */
+.slide-fade-enter-active {
+  transition: all 1s ease;
+}
+.slide-fade-leave-active {
+  transition: all .8s cubic-bezier(.93,.01,.89,.5);
+}
+.slide-fade-enter, .slide-fade-leave-to {
+  transform: translateY(35em);
+  opacity: 0;
+}
 </style>

src/components/Nav.vue

@@ -13,6 +13,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+@import '../../src/styles/color-pallet.scss';
+
 nav {
     display: flex;
     align-items: center;
@@ -26,7 +29,7 @@ nav {
         background: #607d8b33;
         -webkit-box-shadow: 1px 1px 2px #232323;
         box-shadow: 1px 1px 2px #232323;
-        color: #1CA8DD;
+        color: $ascent;
         text-decoration: none;
         &:hover {
             background: #607d8b1c;
@@ -34,7 +37,7 @@ nav {
         }
     }
     .router-link-active {
-        border: 1px solid #1CA8DD;
+        border: 1px solid $ascent;
     }
 }
 </style>

src/components/PageTitle.vue

@@ -12,19 +12,22 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '../../src/styles/color-pallet.scss';
+
 .page-titles {
   display: flex;
   flex-direction: column;
   h1 {
-    background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    color: $ascent;
-    background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    -webkit-background-clip: text;
+    // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    -webkit-text-fill-color: transparent;
+    // -webkit-background-clip: text;
+    // -webkit-text-fill-color: transparent;
     font-size: 3rem;
     margin: 0;
   }
   span.subtitle {
-    color: #9F86FF;
+    color: $ascent-with-opacity;
     font-style: italic;
     text-shadow: 1px 1px 2px #130f23;
   }

src/styles/color-pallet.scss

@@ -0,0 +1,14 @@
+
+
+/* Core Pallet */
+$background: #0b1021;
+$ascent: #0875c3;
+
+/* Action Colors */
+$transparent-black: #0000008a;
+
+/* Modified Colors */
+$bg-with-opacity: rgba($background, 0.8);
+$header-color: darken($background, 5%);
+$dark-ascent: darken($ascent, 50%);
+$ascent-with-opacity: rgba($ascent, 0.8);

src/views/Home.vue

@@ -70,8 +70,10 @@ export default {
 
 <style lang="scss" scoped>
 
+@import '../../src/styles/color-pallet.scss';
+
 .home {
-  background: #2F323A;
+  background: $background;
   padding-bottom: 1px;
 }