From 7f3e8dd8187f3769588a77dcccd7fb7f942ffdc7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 15 Apr 2021 19:30:30 +0100
Subject: [PATCH] Wrote a ton of color themes

---
 src/App.vue                                   |   5 +-
 src/components/LinkItems/Collapsable.vue      |   6 +-
 src/components/LinkItems/Item.vue             |  25 ++--
 src/components/LinkItems/ItemGroup.vue        |   2 +-
 src/components/LinkItems/ItemIcon.vue         |   2 +-
 src/components/PageStrcture/PageTitle.vue     |   2 +-
 src/components/Settings/ItemSizeSelector.vue  |   8 +-
 src/components/Settings/LayoutSelector.vue    |   8 +-
 src/components/Settings/SearchBar.vue         |  10 +-
 src/components/Settings/SettingsContainer.vue |   2 +-
 src/components/Settings/ThemeSelector.vue     |  13 +-
 src/data/conf.yml                             |   3 -
 src/styles/color-palette.scss                 |  52 ++-----
 src/styles/color-themes.scss                  | 138 ++++++++++++++++++
 src/styles/themes/DemoTheme.scss              |   4 -
 src/utils/defaults.js                         |  17 ++-
 src/views/Home.vue                            |   6 +-
 17 files changed, 209 insertions(+), 94 deletions(-)
 create mode 100644 src/styles/color-themes.scss
 delete mode 100644 src/styles/themes/DemoTheme.scss

diff --git a/src/App.vue b/src/App.vue
index 73d16844..0d86e13d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -37,8 +37,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../src/styles/global-styles.scss';
-@import '../src/styles/color-palette.scss';
+@import '@/styles/global-styles.scss';
+@import '@/styles/color-palette.scss';
+@import '@/styles/color-themes.scss';
 
 body {
   background: var(--background);
diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index d1826f6f..93cff2c1 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -90,13 +90,11 @@ export default {
 @import '@/styles/media-queries.scss';
 
 .collapsable {
-    padding: 5px;
+    padding: var(--item-group-padding);
     margin: 10px;
     border-radius: var(--curve-factor);
     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;
+    box-shadow: var(--item-group-shadow);
     height: fit-content;
     width: 100%;
     width: stretch;
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 31118d2c..c48d414d 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -82,7 +82,7 @@ export default {
         trigger: 'hover focus',
         hideOnTargetClick: true,
         html: false,
-        delay: { show: 350, hide: 200 },
+        delay: { show: 600, hide: 200 },
       };
     },
   },
@@ -100,17 +100,17 @@ export default {
   color: var(--primary);
   vertical-align: middle;
   margin: 0.5rem;
-  background: #607d8b33;
+  background: var(--item-background);
   text-align: center;
   padding: 2px;
   outline: 2px solid transparent;
   border: 1px solid var(--outline-color);
   border-radius: var(--curve-factor);
-  box-shadow: 1px 1px 2px #373737;
+  box-shadow: var(--item-shadow);
   cursor: pointer;
   &:hover {
-    box-shadow: 1px 2px 4px #373737;
-    background: #607d8b4d;
+    box-shadow: var(--item-hover-shadow);
+    background: var(--item-background-hover);
   }
   &:focus {
     outline: 2px solid var(--primary);
@@ -130,6 +130,7 @@ export default {
   overflow: hidden;
   position: relative;
   padding: 0;
+  z-index: 2;
   span.text {
     position: absolute;
     white-space: nowrap;
@@ -150,8 +151,7 @@ export default {
     .overflow-dots {
       display: block;
       opacity: 1;
-      // background: var(--background-transparent);
-      background: #283e51;
+      background: var(--item-background);
       position: absolute;
       z-index: 5;
       right: 0;
@@ -181,14 +181,9 @@ export default {
     }
   }
 
-  /* Colourize icons on hover */
-  .tile-svg {
-    filter: drop-shadow(4px 8px 3px var(--transparent-50));
-  }
-  .tile-icon {
-    filter:
-      drop-shadow(4px 8px 3px var(--transparent-50))
-      saturate(2);
+  /* Apply transofmation of icons on hover */
+  .tile-icon, .tile-svg  {
+    filter: var(--item-icon-transform-hover);
   }
 }
 
diff --git a/src/components/LinkItems/ItemGroup.vue b/src/components/LinkItems/ItemGroup.vue
index 086adb70..18743a69 100644
--- a/src/components/LinkItems/ItemGroup.vue
+++ b/src/components/LinkItems/ItemGroup.vue
@@ -78,7 +78,7 @@ export default {
     border-radius: var(--curve-factor);
     background: #607d8b33;
     color: var(--primary);
-    box-shadow: 1px 1px 2px #373737;
+    box-shadow: var(--item-shadow);
 }
 
 .there-are-items {
diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index f66cccf6..806ea1c3 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -85,6 +85,6 @@ export default {
 
 .tile-icon {
     width: 60px;
-    filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
+    filter: var(--item-icon-transform);
 }
 </style>
diff --git a/src/components/PageStrcture/PageTitle.vue b/src/components/PageStrcture/PageTitle.vue
index 1b90e6c0..88ad2a59 100644
--- a/src/components/PageStrcture/PageTitle.vue
+++ b/src/components/PageStrcture/PageTitle.vue
@@ -26,7 +26,7 @@ export default {
     // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     // -webkit-background-clip: text;
     // -webkit-text-fill-color: transparent;
-    font-size: 3rem;
+    font-size: 2.5rem;
     margin: 0;
   }
   span.subtitle {
diff --git a/src/components/Settings/ItemSizeSelector.vue b/src/components/Settings/ItemSizeSelector.vue
index 55e0e556..a88d6df9 100644
--- a/src/components/Settings/ItemSizeSelector.vue
+++ b/src/components/Settings/ItemSizeSelector.vue
@@ -46,14 +46,14 @@ export default {
 <style scoped lang="scss">
 
 span.options-label {
-  color: var(--primary);
+  color: var(--settings-text-color);
 }
 
 .display-options {
-  color: var(--primary);
+  color: var(--settings-text-color);
   svg {
     path {
-      fill: var(--primary);
+      fill: var(--settings-text-color);
     }
     width: 1rem;
     height: 1rem;
@@ -65,7 +65,7 @@ span.options-label {
     border-radius: var(--curve-factor);
     cursor: pointer;
     &:hover, &.selected {
-      background: var(--primary);
+      background: var(--settings-text-color);
       path { fill: var(--background); }
     }
   }
diff --git a/src/components/Settings/LayoutSelector.vue b/src/components/Settings/LayoutSelector.vue
index 7bfe065f..fec42247 100644
--- a/src/components/Settings/LayoutSelector.vue
+++ b/src/components/Settings/LayoutSelector.vue
@@ -46,14 +46,14 @@ export default {
 <style scoped lang="scss">
 
 span.options-label {
-  color: var(--primary);
+  color: var(--settings-text-color);
 }
 
 .display-options {
-  color: var(--primary);
+  color: var(--settings-text-color);
   svg {
     path {
-      fill: var(--primary);
+      fill: var(--settings-text-color);
     }
     width: 1rem;
     height: 1rem;
@@ -65,7 +65,7 @@ span.options-label {
     border-radius: var(--curve-factor);
     cursor: pointer;
     &:hover, &.selected {
-      background: var(--primary);
+      background: var(--settings-text-color);
       path { fill: var(--background); }
     }
   }
diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index 3f5ef0a7..588ebcaf 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -66,10 +66,10 @@ export default {
     align-items: center;
     border-radius: 0 0 var(--curve-factor-navbar) 0;
     padding: 0 0.2rem 0.2rem 0;
-    background: var(--background-darker);
+    background: var(--search-container-background);
     label {
         display: inline;
-        color: var(--primary);
+        color: var(--settings-text-color);
         margin: 0.5rem;
         display: inline;
     }
@@ -83,16 +83,16 @@ export default {
       border: none;
       border-radius: var(--curve-factor);
       background: var(--background);
-      color: var(--primary);
+      color: var(--settings-text-color);
       border: 1px solid var(--outline-color);
       &:focus {
-        border-color: var(--primary);
+        border-color: var(--settings-text-color);
         opacity: var(--dimming-factor);
       }
     }
     .clear-search {
       position: absolute;
-      color: var(--primary);
+      color: var(--settings-text-color);
       margin: 0.55rem 0 0 -2.2rem;
       padding: 0 0.4rem;
       font-style: normal;
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index d93c6fee..5582addf 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -68,7 +68,7 @@ export default {
     flex: 1;
     padding: 0.5rem 1rem;
     border-radius: var(--curve-factor-navbar) 0 0;
-    background: var(--background);
+    background: var(--settings-background);
     div {
       margin-left: 0.5rem;
       opacity: var(--dimming-factor);
diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index bd5851e7..fa7a8e41 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -91,24 +91,27 @@ export default {
 
 .theme-dropdown {
   div.vs__dropdown-toggle {
-    border-color: var(--primary);
+    border-color: var(--settings-text-color);
     border-radius: var(--curve-factor);
     min-width: 10rem;
     height: 1.8rem;
     font-size: 0.85rem;
+    cursor: pointer;
   }
   span.vs__selected, li.vs__dropdown-option {
-    color: var(--primary);
+    color: var(--settings-text-color);
+    text-transform: capitalize;
   }
   svg.vs__open-indicator {
-    fill: var(--primary);
+    fill: var(--settings-text-color);
   }
   ul.vs__dropdown-menu {
     width: auto;
     background: var(--background);
+    z-index: 5;
   }
   li.vs__dropdown-option--highlight {
-    background: var(--primary);
+    background: var(--settings-text-color);
     color: var(--background);
   }
   button.vs__clear {
@@ -123,7 +126,7 @@ export default {
   height: 100%;
   span.theme-label {
     font-size: 1rem;
-    color: var(--primary);
+    color: var(--settings-text-color);
     margin: 1px 0 2px 0;
   }
 }
diff --git a/src/data/conf.yml b/src/data/conf.yml
index 7ed8eed2..e6280d97 100644
--- a/src/data/conf.yml
+++ b/src/data/conf.yml
@@ -2,9 +2,6 @@
 pageInfo:
   title: Hello World
   description: 'This is a demo'
-appConfig:
-  theme: 'Default'
-  externalStyleSheet: 'https://bootswatch.com/4/solar/bootstrap.min.css'
 sections:
 - name: Firewall
   items:
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 51732419..19a6d1cc 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -19,46 +19,18 @@
   --curve-factor: 5px;
   --curve-factor-navbar: 16px;
   --dimming-factor: 0.8;
-}
 
-html[data-theme='hacker-red'] {
-  --background: #000;
-  --background-darker: #000;
-  --primary: red;
-  --outline-color: red;
-  --curve-factor: 0px;
-}
+  /* Settings for specific components */
+  --item-group-padding: 5px;
+  --item-shadow: 1px 1px 2px #130f23;
+  --item-group-shadow: var(--item-shadow);
+  --item-hover-shadow: 1px 2px 4px #373737;
+  --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
+  --item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
 
-html[data-theme='hacker-green'] {
-  --background: #000;
-  --background-darker: #000;
-  --primary: #2bca2b;
-  --outline-color: #2bca2b;
-  --curve-factor: 0px;
+  --item-background: #607d8b33;
+  --item-background-hover: #607d8b4d;
+  --settings-text-color: var(--primary);
+  --settings-background: var(--background);
+  --search-container-background: var(--background-darker);
 }
-
-html[data-theme='hacker-pink'] {
-  --background: #000;
-  --background-darker: #000;
-  --primary: #e435f1;
-  --outline-color: #e435f1;
-  --curve-factor: 0px;
-}
-
-html[data-theme='high-contrast-light'] {
-  --background: #fff;
-  --background-darker: #fff;
-  --item-group-background: #fff;
-  --primary: #000;
-  --outline-color: #000;
-  --curve-factor: 0px;
-}
-
-html[data-theme='high-contrast-dark'] {
-  --background: #000;
-  --background-darker: #000;
-  --item-group-background: #000;
-  --primary: #fff;
-  --outline-color: #fff;
-  --curve-factor: 0px;
-}
\ No newline at end of file
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
new file mode 100644
index 00000000..e41bbfa3
--- /dev/null
+++ b/src/styles/color-themes.scss
@@ -0,0 +1,138 @@
+html[data-theme='nord'] {
+  --primary: #D8DEE9;
+  --background: #3B4252;
+  --background-darker: #2E3440;
+  --item-background: #434C5E;
+  --item-background-hover: #4C566A;
+  .collapsable:nth-child(1n) { background: #BF616A; }
+  .collapsable:nth-child(2n) { background: #D08770; }
+  .collapsable:nth-child(3n) { background: #EBCB8B; }
+  .collapsable:nth-child(4n) { background: #A3BE8C; }
+}
+
+html[data-theme='nord-frost'] {
+  --primary: #D8DEE9;
+  --background: #3B4252;
+  --background-darker: #2E3440;
+  --item-background: #434C5E;
+  --item-background-hover: #4C566A;
+  .collapsable:nth-child(1n) { background: #8FBCBB; }
+  .collapsable:nth-child(2n) { background: #88C0D0; }
+  .collapsable:nth-child(3n) { background: #81A1C1; }
+  .collapsable:nth-child(4n) { background: #5E81AC; }
+}
+
+html[data-theme='callisto'] {
+  --background: #141b33;
+  --background-darker: #060913;
+  --item-group-background: #0b1021;
+  --item-background: #141b33;
+  --item-background-hover: #060913;
+  --item-hover-shadow: 0 1px 3px #00ccb4b3, 0 1px 2px #00ccb4bf;
+  --primary: #00CCB4;
+}
+
+html[data-theme='thebe'] {
+  --background: #141b33;
+  --background-darker: #060913;
+  --item-group-background: #0b1021;
+  --item-background: #141b33;
+  --item-background-hover: #060913;
+  --item-hover-shadow: 0 1px 3px #9660ecb3, 0 1px 2px #9660ecbf;
+  --primary: #9660ec;
+}
+
+html[data-theme='dracula'] {
+  --background: #44475a;
+  --background-darker: #282a36;
+  --item-group-background: #282a36;
+  --item-background: none;
+  --item-background-hover: #191b22;
+  --item-shadow: none;
+  --item-hover-shadow: none;
+  --settings-text-color: #98ace9;
+  --primary: #6272a4;
+  .collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; span {color: #8be9fd; }}}
+  .collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; span {color: #50fa7b; }}}
+  .collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; span {color: #ffb86c; }}}
+  .collapsable:nth-child(4n) { background: #ff79c6; .item { border: 1px solid #ff79c6; span {color: #ff79c6; }}}
+  .collapsable:nth-child(4n) { background: #bd93f9; .item { border: 1px solid #bd93f9; span {color: #bd93f9; }}}
+}
+
+html[data-theme='bee'] {
+  --primary: #c3eb5c;
+  --item-group-background: #0b1021;
+}
+
+html[data-theme='raspberry-jam'] {
+  --primary: #eb2d6c;
+  --item-group-background: #0b1021;
+}
+
+html[data-theme='tiger'] {
+  --primary: #f58233;
+  --item-group-background: #0b1021;
+}
+
+html[data-theme='matrix-red'] {
+  --background: #000;
+  --background-darker: #000;
+  --primary: red;
+  --outline-color: red;
+  --curve-factor: 0px;
+}
+
+html[data-theme='matrix'] {
+  --background: #000;
+  --background-darker: #000;
+  --primary: #2bca2b;
+  --outline-color: #2bca2b;
+  --curve-factor: 0px;
+}
+
+html[data-theme='hacker-girl'] {
+  --background: #000;
+  --background-darker: #000;
+  --primary: #e435f1;
+  --outline-color: #e435f1;
+  --curve-factor: 0px;
+}
+
+html[data-theme='high-contrast-light'] {
+  --background: #fff;
+  --background-darker: #fff;
+  --item-group-background: #fff;
+  --item-background: #fff;
+  --primary: #000;
+  --outline-color: #000;
+  --curve-factor: 0px;
+}
+
+html[data-theme='high-contrast-dark'] {
+  --background: #000;
+  --background-darker: #000;
+  --item-group-background: #000;
+  --primary: #fff;
+  --outline-color: #fff;
+  --curve-factor: 0px;
+}
+
+html[data-theme='material'] {
+  --primary: #29B6F6;
+  --settings-text-color: #01579b;
+  --background: #e2e1e0;
+  --background-darker: #01579B;
+  --settings-background: #01579B;
+  --item-group-background: #f8f8f8;
+  --item-background: #fff;
+  --item-background-hover: #fff;
+  --settings-background: #29B6F6;
+  --search-container-background: #29B6F6;
+  --curve-factor: 2px;
+  --curve-factor-navbar: 0;
+  --item-group-padding: 5px 0 0;
+  --item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
+  --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
+  --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
+  --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
+}
\ No newline at end of file
diff --git a/src/styles/themes/DemoTheme.scss b/src/styles/themes/DemoTheme.scss
deleted file mode 100644
index 6513e1ab..00000000
--- a/src/styles/themes/DemoTheme.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
-  background: red !important;
-  border: 2px dashed yellow;
-}
\ No newline at end of file
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 51b4284f..fe8eab4b 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -1,4 +1,19 @@
 module.exports = {
   defaultTheme: 'Default',
-  builtInThemes: ['hacker-green', 'hacker-red', 'hacker-pink'],
+  builtInThemes: [
+    'nord',
+    'nord-frost',
+    'callisto',
+    'thebe',
+    'material',
+    'dracula',
+    'matrix',
+    'matrix-red',
+    'hacker-girl',
+    'bee',
+    'raspberry-jam',
+    'tiger',
+    'high-contrast-light',
+    'high-contrast-dark',
+  ],
 };
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f24120ff..73c72855 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -155,12 +155,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../src/styles/media-queries.scss';
+@import '@/styles/media-queries.scss';
 
 .home {
-  background: var(--background);
   padding-bottom: 1px;
-  min-height: 90%;
+  background: var(--background);
+  min-height: calc(100vh - 126px);
 }
 
 /* Outside container wrapping the item groups*/