Removed SCSS variables, and replaced with CSS --vars

package.json

@@ -16,7 +16,8 @@
     "vue": "^2.6.10",
     "vue-cli-plugin-yaml": "^1.0.2",
     "vue-js-modal": "^2.0.0-rc.6",
-    "vue-router": "^3.0.3"
+    "vue-router": "^3.0.3",
+    "vue-select": "^3.11.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.10.0",
@@ -44,7 +45,8 @@
       "airbnb-base"
     ],
     "rules": {
-      "import/no-unresolved": "off"
+      "import/no-unresolved": "off",
+      "arrow-parens": 0
     },
     "parserOptions": {
       "parser": "babel-eslint"
@@ -59,4 +61,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="dashy">
+  <div id="dashy" data-theme="dark">
     <Header :pageInfo="getPageInfo(pageInfo)" />
     <router-view />
     <Footer />
@@ -38,10 +38,10 @@ export default {
 
 <style lang="scss">
 @import '../src/styles/global-styles.scss';
-@import '../src/styles/color-pallet.scss';
+@import '../src/styles/color-palette.scss';
 
 body {
-  background: $background;
+  background: var(--background);
   margin: 0;
   padding: 0;
 }

src/components/Collapsable.vue

@@ -87,7 +87,6 @@ export default {
 
 <style scoped lang="scss">
 
-@import '../../src/styles/color-pallet.scss';
 @import '../../src/styles/constants.scss';
 @import '../../src/styles/media-queries.scss';
 
@@ -95,7 +94,7 @@ export default {
     padding: 5px;
     margin: 10px;
     border-radius: $curve-factor;
-    background: $ascent;
+    background: var(--primary);
     // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     box-shadow: 1px 1px 2px #130f23;
@@ -144,7 +143,7 @@ export default {
         border-radius: $curve-factor;
         transition: all 0.25s ease-out;
         text-align: left;
-        color:$bg-with-opacity;
+        color: var(--background-transparent);
 
         h3 {
             margin: 0;
@@ -154,7 +153,7 @@ export default {
     }
 
     .lbl-toggle:hover {
-        color: $background;
+        color: var(--background);
     }
 
     .lbl-toggle::before {
@@ -178,7 +177,7 @@ export default {
         max-height: 0px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
-        background: $bg-with-opacity;
+        background: var(--background-transparent);
         border-radius: 0 0 $inner-radius $inner-radius;
     }
 

src/components/FilterTile.vue

@@ -94,18 +94,16 @@ export default {
 
 <style scoped lang="scss">
 
-@import '../../src/styles/color-pallet.scss';
-
   section {
     display: flex;
     align-items: center;
     align-items: stretch;
-    background: linear-gradient(0deg, var(--background) 0%, $header-color 100%);
+    background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
   }
   form {
     border-radius: 0 0 20px 0;
     padding: 0 0.2rem 0.2rem 0;
-    background: $header-color;
+    background: var(--background-darker);
     label {
         display: inline;
         color: var(--primary);
@@ -123,7 +121,7 @@ export default {
       background: var(--background);
       color: var(--primary);
       &:focus {
-        background: $bg-with-opacity;
+        background: var(--background-transparent);
       }
     }
     .clear-search {
@@ -135,7 +133,7 @@ export default {
       cursor: pointer;
       &:hover {
         opacity: 1;
-        background: $header-color;
+        background: var(--background-darker);
       }
     }
   }
@@ -151,7 +149,7 @@ export default {
 
     span.options-label {
       font-size: 0.8rem;
-      color: $ascent-with-opacity;
+      color: var(--primary-transparent);
       width: 5.5rem;
       text-align: left;
     }
@@ -164,10 +162,10 @@ export default {
     }
 
     .display-options {
-      color: $ascent-with-opacity;
+      color: var(--primary-transparent);
       svg {
         path {
-          fill: $ascent-with-opacity;
+          fill: var(--primary-transparent);
         }
         width: 1rem;
         height: 1rem;
@@ -180,7 +178,7 @@ export default {
         opacity: 0.8;
         cursor: pointer;
         &:hover, &.selected {
-          background: $ascent-with-opacity;
+          background: var(--primary-transparent);
           path { fill: var(--background); }
         }
       }

src/components/Header.vue

@@ -22,14 +22,13 @@ 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: $header-color;
+    background: var(--background-darker);
     align-items: center;
     align-content: flex-start;
     @media screen and (max-width: 600px) {

src/components/Item.vue

@@ -100,7 +100,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../src/styles/color-pallet.scss';
 @import '../../src/styles/constants.scss';
 
 /* Item wrapper */
@@ -108,7 +107,7 @@ export default {
   flex-grow: 1;
   height: 100px;
   position: relative;
-  color: $ascent;
+  color: var(--primary);
   vertical-align: middle;
   margin: 0.5rem;
   background: #607d8b33;
@@ -123,7 +122,7 @@ export default {
     background: #607d8b4d;
   }
   &:focus {
-    border: 2px solid $ascent;
+    border: 2px solid var(--primary);
     outline: none;
   }
   &.short {
@@ -161,7 +160,8 @@ export default {
     .overflow-dots {
       display: block;
       opacity: 1;
-      background: $overflow-ellipse;
+      background: black;
+      // background: $overflow-ellipse;
       position: absolute;
       z-index: 5;
       right: 0;
@@ -189,18 +189,18 @@ export default {
 
   /* Colourize icons on hover */
   .tile-svg {
-    filter: drop-shadow(4px 8px 3px $transparent-black);
+    filter: drop-shadow(4px 8px 3px var(--transparent-50));
   }
   .tile-icon {
     filter:
-      drop-shadow(4px 8px 3px $transparent-black)
+      drop-shadow(4px 8px 3px var(--transparent-50))
       saturate(2);
   }
 }
 
 .tile-icon {
   width: 60px;
-  filter: drop-shadow(2px 4px 6px $transparent-black) saturate(0.65);
+  filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
 }
 
 .tile-svg {
@@ -217,7 +217,7 @@ export default {
     right: 0;
     top: 0;
     path {
-      fill: $ascent-with-opacity;
+      fill: var(--primary-transparent);
     }
   }
   &.short svg {

src/components/ItemGroup.vue

@@ -53,7 +53,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../src/styles/color-pallet.scss';
 @import '../../src/styles/constants.scss';
 
 .no-items {
@@ -64,7 +63,7 @@ export default {
     cursor: default;
     border-radius: $curve-factor;
     background: #607d8b33;
-    color: $ascent;
+    color: var(--primary);
     box-shadow: 1px 1px 2px #373737;
 }
 

src/components/ItemIcon.vue

@@ -82,10 +82,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../src/styles/color-pallet.scss';
 
 .tile-icon {
     width: 60px;
-    filter: drop-shadow(2px 4px 6px $transparent-black) saturate(0.65);
+    filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
 }
 </style>

src/components/KeyboardShortcutInfo.vue

@@ -62,8 +62,6 @@ export default {
 
 <style scoped lang="scss">
 
-@import '../../src/styles/color-pallet.scss';
-
 .kb-sc-info {
   position: fixed;
   width: 30em;
@@ -73,12 +71,12 @@ export default {
   padding: 0.1em 0.3em;
   z-index: 10;
   border-radius: 12px;
-  border: 1px solid $header-color;
+  border: 1px solid var(--background-darker);
   -webkit-box-shadow: 2px 1px 5px #130f23;
   box-shadow: 2px 1px 5px #130f23;
-  border: 1px solid $ascent;
+  border: 1px solid var(--primary);
-  color: $ascent;
+  color: var(--primary);
-  background: $header-color;
+  background: var(--background-darker);
   cursor: default;
   opacity: 0.94;
   @media screen and (max-width: 600px) {
@@ -88,9 +86,9 @@ export default {
     position: absolute;
     top: -35px;
     left: 20px;
-    border: 1px solid $ascent;
+    border: 1px solid var(--primary);
-    color: $ascent;
+    color: var(--primary);
-    background: $header-color;
+    background: var(--background-darker);
     padding: 4px;
     border-radius: 5px;
   }
@@ -100,12 +98,12 @@ export default {
     width: 1em;
     padding: 0 0 6px 6px;
     height: 1em;
-    background: $transparent-black;
+    background: var(--transparent-50);
     margin-top: 3px;
     border: 1px solid transparent;
     cursor: pointer;
     &:hover {
-      border: 1px solid $ascent;
+      border: 1px solid var(--primary);
       opacity: 0.6;
     }
   }

src/components/Nav.vue

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

src/components/PageTitle.vue

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

src/components/ThemeSelector.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="theme-selector-section" v-if="themes" >
     <span class="theme-label">Themes</span>
-    <v-select :options="themeNames" v-model="selectedTheme" label="Theme" class="theme-dropdown" />
+    <v-select
+      :options="themeNames"
+      v-model="selectedTheme"
+      class="theme-dropdown"
+      :tabindex="100"
+    />
   </div>
 </template>
 
@@ -33,8 +38,7 @@ export default {
     const added = Object.keys(this.themes).map(
       name => this.themeHelper.add(name, this.themes[name]),
     );
-    Promise.all(added).then(sheets => {
+    Promise.all(added).then(() => {
-      console.log(`${sheets.length} themes loaded`);
       this.loading = false;
       this.themeHelper.theme = 'Deafault';
     });
@@ -44,7 +48,6 @@ export default {
 
 <style lang="scss">
 
-@import '../../src/styles/color-pallet.scss';
 @import 'vue-select/src/scss/vue-select.scss';
 
 .theme-dropdown {
@@ -56,7 +59,7 @@ export default {
   span.vs__selected, li.vs__dropdown-option {
     color: var(--primary);
   }
-  button.vs__clear, svg.vs__open-indicator {
+  svg.vs__open-indicator {
     fill: var(--primary);
   }
   ul.vs__dropdown-menu {
@@ -67,6 +70,9 @@ export default {
     background: var(--primary);
     color: var(--background);
   }
+  button.vs__clear {
+    display: none;
+  }
 }
 
 .theme-selector-section {

src/data/conf.yml

@@ -2,6 +2,8 @@
 pageInfo:
   title: Hello World
   description: 'This is a demo'
+appConfig:
+  externalStyleSheet: 'https://bootswatch.com/4/solar/bootstrap.min.css'
 sections:
 - name: Firewall
   items:

src/main.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
-import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js
+
+import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js, tooltip component
 import VModal from 'vue-js-modal'; // Modal component
+import VSelect from 'vue-select'; // Select dropdown component
 
 import App from './App.vue';
 import router from './router';
@@ -8,6 +10,8 @@ import './registerServiceWorker';
 
 Vue.use(VTooltip);
 Vue.use(VModal);
+Vue.component('v-select', VSelect);
+
 Vue.config.productionTip = false;
 
 new Vue({

src/router.js

@@ -13,6 +13,7 @@ const router = new Router({
       component: Home,
       props: {
         sections: conf.sections || [],
+        appConfig: conf.appConfig || {},
       },
       meta: {
         title: 'Home Page',

src/styles/color-palette.scss

@@ -0,0 +1,17 @@
+
+:root {
+  /* Basic*/
+  --background: #0b1021;
+  --background-darker: #05070e;
+  --primary: #5cabca;
+
+  /* Modified Colors */
+  --primary-transparent: #5cabcab3;
+  --background-transparent: #0b1021cc;
+
+  /* Semi-Transparent Black*/
+  --transparent-70: #000000b3;
+  --transparent-50: #00000080;
+  --transparent-30: #0000004d;
+
+}

src/styles/color-pallet.scss

@@ -1,19 +0,0 @@
-
-
-// [data-theme="dark"] {
-//   I will put the variables here.
-// }
-
-/* Core Pallet */
-$background: #0b1021;
-$ascent: #5cabca;
-
-/* Action Colors */
-$transparent-black: #0000008a;
-$overflow-ellipse: #283e51;
-
-/* 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.7);

src/styles/global-styles.scss

@@ -1,5 +1,4 @@
 
-
 @font-face {
     font-family: 'Inconsolata';
     src: url('./assets/Inconsolata-Light.ttf');
@@ -8,16 +7,17 @@
 html {
     margin: 0;
     padding: 0;
+    transition: all 1s;
 }
 
-body {
+/* Default app font face */
+body, div, p, a, span, label, input {
     font-family: 'Inconsolata', sans-serif;
 }
 
+/* Headings font face */
 h1, h2, h3, h4, h5 {
     font-family: 'Inconsolata', sans-serif;
 }
 
-p, a, span, div, input {
+
-    font-family: 'Inconsolata', sans-serif;
-}

src/styles/themes/DemoTheme.scss

@@ -0,0 +1,4 @@
+body {
+  background: red !important;
+  border: 2px dashed yellow;
+}

src/views/Home.vue

@@ -101,7 +101,6 @@ export default {
       if (this.appConfig) {
         if (this.appConfig.externalStyleSheet) {
           const externals = this.appConfig.externalStyleSheet;
-          console.log(externals);
           if (Array.isArray(externals)) {
             externals.forEach((ext, i) => {
               availibleThemes[`External Stylesheet ${i + 1}`] = ext;
@@ -141,7 +140,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../src/styles/color-pallet.scss';
 @import '../../src/styles/media-queries.scss';
 
 .home {
@@ -185,7 +183,7 @@ export default {
 
 .no-data {
     font-size: 2rem;
-    color: $background;
+    color: var(--background);
     background: #ffffffeb;
     width: fit-content;
     margin: 2rem auto;

vue.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   chainWebpack: config => {
-    config.module.rules.delete("svg");
+    config.module.rules.delete('svg');
   },
   configureWebpack: {
     module: {

yarn.lock

@@ -8572,6 +8572,11 @@ vue-router@^3.0.3:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
   integrity sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw==
 
+vue-select@^3.11.2:
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.11.2.tgz#3ef93e3f2707e133c2df0b2920a05eea78764d18"
+  integrity sha512-pIOcY8ajWNSwg8Ns4eHVr5ZWwqKCSZeQRymTnlUI8i+3QiQXF6JIM4lylK6mVfbccs4S6vOyxB7zmJBpp7tDUg==
+
 vue-style-loader@^4.1.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"