From b08a6b5cecf4a53023053695292146edbd24b960 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Mon, 11 Oct 2021 19:33:34 +0200
Subject: [PATCH] Use a consistent color system

1. Renames color names in palette. Using names such as "primary" and
"secondary" that are in consistent with designs such as material,
bootstrap and metro UI palettes. It adds `color-` prefix on color
variables in line with Vue Design System.
2. Introduces necessary changes to follow the system color system
   everywhere without using any other color:
     - It changes tooltip background from black to darker primary
     colors.
     - It overrides unset styles from tree component
     - It ensures footer has same color as top menu.
3. Removes opacity CSS changes to have better control on choices. To
   achieve that:
     - It introduces new "light" variants of main colors
     - It switches to colors with different variants (e.g. in Dialogs it
       uses primary color as button as it has variants that can be
       activated on hover meanwhile on-surface color is single).
4. Styles a tags (anchor elements) globally for consistency
---
 src/presentation/components/App.vue           |  31 ++-
 .../components/Code/CodeButtons/Code.vue      |   6 +-
 .../Code/CodeButtons/IconButton.vue           |  17 +-
 .../components/Code/TheCodeArea.vue           |   3 +-
 .../Scripts/Menu/MenuOptionListItem.vue       |   2 +-
 .../components/Scripts/Slider/Handle.vue      |  19 +-
 .../Scripts/View/Cards/CardListItem.vue       |  27 +--
 .../SelectableTree/Node/DocumentationUrls.vue |   4 +-
 .../ScriptsTree/SelectableTree/Node/Node.vue  |  20 +-
 .../SelectableTree/Node/RevertToggle.vue      | 189 +++++++++---------
 .../Scripts/View/TheScriptsView.vue           |  10 +-
 src/presentation/components/Shared/Dialog.vue |   6 +-
 .../components/TheFooter/DownloadUrlList.vue  |  10 +-
 .../TheFooter/DownloadUrlListItem.vue         |   6 -
 .../components/TheFooter/PrivacyPolicy.vue    |   7 -
 .../components/TheFooter/TheFooter.vue        |  30 ---
 src/presentation/components/TheHeader.vue     |   3 +-
 src/presentation/components/TheSearchBar.vue  |  32 +--
 src/presentation/styles/colors.scss           |  33 ++-
 src/presentation/styles/tooltip.scss          |   8 +-
 src/presentation/styles/tree.scss             |  38 +++-
 21 files changed, 258 insertions(+), 243 deletions(-)

diff --git a/src/presentation/components/App.vue b/src/presentation/components/App.vue
index a0cd601a..387788fb 100644
--- a/src/presentation/components/App.vue
+++ b/src/presentation/components/App.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="app">
-      <div class="wrapper">
-        <TheHeader class="row" />
-        <TheSearchBar class="row" />
-        <TheScriptArea class="row" />
-        <TheCodeButtons class="row code-buttons" />
+      <div class="app__wrapper">
+        <TheHeader class="app__row" />
+        <TheSearchBar class="app__row" />
+        <TheScriptArea class="app__row" />
+        <TheCodeButtons class="app__row app__code-buttons" />
         <TheFooter />
       </div>
    </div>
@@ -41,27 +41,36 @@ export default class App extends Vue {
   box-sizing: border-box;
 }
 
+a {
+    color:inherit;
+    text-decoration: underline;
+    cursor: pointer;
+    &:hover {
+        color: $color-primary;
+    }
+}
+
 body {
-  background: $light-gray;
+  background: $color-background;
   font-family: $main-font;
-  color: $slate;
 }
 
 #app {
   margin-right: auto;
   margin-left: auto;
   max-width: 1600px;
-  .wrapper {
+  .app__wrapper {
     margin: 0% 2% 0% 2%;
-    background-color: white;
+    background-color: $color-surface;
+    color: $color-on-surface;
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
     padding: 2%;
     display:flex;
     flex-direction: column;
-    .row {
+    .app__row {
       margin-bottom: 10px;
     }
-    .code-buttons {
+    .app__code-buttons {
       padding-bottom: 10px;
     }
   }
diff --git a/src/presentation/components/Code/CodeButtons/Code.vue b/src/presentation/components/Code/CodeButtons/Code.vue
index 99ea8b7a..af9136ad 100644
--- a/src/presentation/components/Code/CodeButtons/Code.vue
+++ b/src/presentation/components/Code/CodeButtons/Code.vue
@@ -32,8 +32,8 @@ export default class Code extends Vue {
     white-space: nowrap;
     justify-content: space-between;
     font-family: $normal-font;
-    background-color: $slate;
-    color: $light-gray;
+    background-color: $color-primary-darker;
+    color: $color-on-primary;
     padding-left: 0.3rem;
     padding-right: 0.3rem;
     .dollar {
@@ -45,7 +45,7 @@ export default class Code extends Vue {
         margin-left: 1rem;
         cursor: pointer;
         &:hover {
-            opacity: 0.8;
+            color: $color-primary;
         }
     }
     code {
diff --git a/src/presentation/components/Code/CodeButtons/IconButton.vue b/src/presentation/components/Code/CodeButtons/IconButton.vue
index 631aae99..b95228ea 100644
--- a/src/presentation/components/Code/CodeButtons/IconButton.vue
+++ b/src/presentation/components/Code/CodeButtons/IconButton.vue
@@ -32,25 +32,22 @@ export default class IconButton extends Vue {
     flex-direction: column;
     align-items: center;
 
-    background-color: $accent;
+    background-color: $color-secondary;
+    color: $color-on-secondary;
+
     border: none;
-    color: $white;
     padding:20px;
     transition-duration: 0.4s;
     overflow: hidden;
-    box-shadow: 0 3px 9px $dark-slate;
+    box-shadow: 0 3px 9px $color-primary-darkest;
     border-radius: 4px;
 
     cursor: pointer;
-    // border: 0.1em solid $slate;
-	// border-radius: 80px;
-	// padding: 0.5em;
     width: 10%;
     min-width: 90px;
     &:hover {
-        background: $white;
-        box-shadow: 0px 2px 10px 5px $accent;
-        color: $black;
+        background: $color-surface;
+        box-shadow: 0px 2px 10px 5px $color-secondary;
     }
     &:hover>&__text {
         display: block;
@@ -62,7 +59,7 @@ export default class IconButton extends Vue {
         display: none;
         font-family: $artistic-font;
         font-size: 1.5em;
-        color: $gray;
+        color: $color-primary;
         font-weight: 500;
         line-height: 1.1;
     }
diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index 6e8bc68c..60094da4 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -157,8 +157,7 @@ function getDefaultCode(language: ScriptingLanguage): string {
   height: 100%;
   overflow: auto;
   &__highlight {
-    background-color: $accent;
-    opacity: 0.2; // having procent fails in production (minified) build
+    background-color: $color-secondary-light;
     position: absolute;
   }
 }
diff --git a/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue b/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
index a8b98150..82b30183 100644
--- a/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
+++ b/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
@@ -32,6 +32,6 @@ export default class MenuOptionListItem extends Vue {
     }
 }
 .disabled {
-    color:$gray;
+    color: $color-primary-light;
 }
 </style>
\ No newline at end of file
diff --git a/src/presentation/components/Scripts/Slider/Handle.vue b/src/presentation/components/Scripts/Slider/Handle.vue
index 3236c53f..7a0a3481 100644
--- a/src/presentation/components/Scripts/Slider/Handle.vue
+++ b/src/presentation/components/Scripts/Slider/Handle.vue
@@ -3,12 +3,12 @@
         class="handle"
         :style="{ cursor: cursorCssValue }"
         @mousedown="startResize">
-        <div class="line"></div>
+        <div class="line" />
         <font-awesome-icon
-            class="image"
+            class="icon"
             :icon="['fas', 'arrows-alt-h']" 
         />
-        <div class="line"></div>
+        <div class="line" />
     </div>
 </template>
 
@@ -45,6 +45,9 @@ export default class Handle extends Vue {
 <style lang="scss" scoped>
 @import "@/presentation/styles/colors.scss";
 
+$color          : $color-primary-dark;
+$color-hover    : $color-primary;
+
 .handle {
     user-select: none;
     display: flex;
@@ -52,19 +55,19 @@ export default class Handle extends Vue {
     align-items: center;
     &:hover {
         .line {
-            background: $gray;
+            background: $color-hover;
         }
         .image {
-            color: $gray;
+            color: $color-hover;
         }
     }
     .line {
         flex: 1;
-        background: $dark-gray;
+        background: $color;
         width: 3px;
     }
-    .image {
-        color: $dark-gray;
+    .icon {
+        color: $color;
     }
     margin-right: 5px;
     margin-left: 5px;
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index b74153ea..4ef49841 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -111,8 +111,8 @@ $card-horizontal-gap    : $card-gap;
     padding: /*top:*/ $card-inner-padding /*right:*/ $card-inner-padding /*bottom:*/ 0 /*left:*/ $card-inner-padding;
     position: relative;
     cursor: pointer;
-    background-color: $gray;
-    color: $light-gray;
+    background-color: $color-primary;
+    color: $color-on-primary;
     font-size: 1.5em;
     height: 100%;
     width: 100%;
@@ -125,7 +125,8 @@ $card-horizontal-gap    : $card-gap;
     justify-content: center;
 
     &:hover {
-      background-color: $accent;
+      background-color: $color-secondary;
+      color: $color-on-secondary;
       transform: scale(1.05);
     }
     &:after {
@@ -149,13 +150,13 @@ $card-horizontal-gap    : $card-gap;
   &__expander {
     transition: all 0.2s ease-in-out;
     position: relative;
-    background-color: $slate;
-    color: $light-gray;
+    background-color: $color-primary-darker;
+    color: $color-on-primary;
     display: flex;
     align-items: center;
 
     &__content {
-      flex: 1;flex: 1;
+      flex: 1;
       display: flex;
       justify-content: center;
       word-break: break-word;
@@ -165,10 +166,11 @@ $card-horizontal-gap    : $card-gap;
       width: auto;
       font-size: 1.5em;
       align-self: flex-start;
-      margin-right:0.25em;
+      margin-right: 0.25em;
       cursor: pointer;
+      color: $color-primary-light;
       &:hover {
-        opacity: 0.9;
+        color: $color-primary;
       }
     }
   }
@@ -192,7 +194,8 @@ $card-horizontal-gap    : $card-gap;
   &.is-expanded {
     .card__inner {
       height: auto;
-      background-color: $accent;
+      background-color: $color-secondary;
+      color: $color-on-secondary;
       &:after { // arrow
         content: "";
         display: block;
@@ -201,7 +204,7 @@ $card-horizontal-gap    : $card-gap;
         left: calc(50% - #{$arrow-size});
         border-left: #{$arrow-size} solid transparent;
         border-right: #{$arrow-size} solid transparent;
-        border-bottom: #{$arrow-size} solid #333a45;
+        border-bottom: #{$arrow-size} solid $color-primary-darker;
       }
     }
 
@@ -224,13 +227,13 @@ $card-horizontal-gap    : $card-gap;
     .card__inner {
       pointer-events: none;
       height: auto;
-      opacity: 0.5;
+      background-color: $color-primary-light;
       transform: scale(0.95);
     }
     
     &:hover {
       .card__inner {
-        background-color: $gray;
+        background-color: $color-primary;
         transform: scale(1);
       }
     }
diff --git a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
index 446317f1..19ea9a28 100644
--- a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
@@ -33,11 +33,11 @@
 }
 .documentationUrl {
     display: flex;
-    color: $gray;
+    color: $color-primary;
     cursor: pointer;
     vertical-align: middle;
     &:hover {
-        color: $slate;
+        color: $color-primary-darker;
     }
     &:not(:first-child) {
       margin-left: 0.1em;
diff --git a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
index add21618..202f7162 100644
--- a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
@@ -34,15 +34,15 @@
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 #node {
-    display:flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    .text {
-      display: flex;
-      align-items: center;
-    }
-    .item:not(:first-child) {
-      margin-left: 5px;
-    }
+  display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  .text {
+    display: flex;
+    align-items: center;
+  }
+  .item:not(:first-child) {
+    margin-left: 5px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
index 6d9b94cf..9d7ac728 100644
--- a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
@@ -51,100 +51,109 @@ export default class RevertToggle extends StatefulVue {
 
 
 <style scoped lang="scss">
-    @import "@/presentation/styles/colors.scss";
-    $width: 85px;
-    $height: 30px;
-    // https://www.designlabthemes.com/css-toggle-switch/
-    .checkbox-switch {
+@import "@/presentation/styles/colors.scss";
+
+$color-unchecked-bullet : $color-primary-darker;
+$color-unchecked-text   : $color-on-primary;
+$color-unchecked-bg     : $color-primary;
+$color-checked-bg       : $color-secondary;
+$color-checked-text     : $color-on-secondary;
+$color-checked-bullet   : $color-on-secondary;
+$size-width             : 85px;
+$size-height            : 30px;
+
+// https://www.designlabthemes.com/css-toggle-switch/
+.checkbox-switch {
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    width: $size-width;
+    height: $size-height;
+    -webkit-border-radius: $size-height;
+    border-radius: $size-height;
+    line-height: $size-height;
+    font-size: $size-height / 2;
+    display: inline-block;
+
+    input.input-checkbox {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: $size-width;
+        height: $size-height;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 2;
         cursor: pointer;
-        display: inline-block;
-        overflow: hidden;
+    }
+
+    .checkbox-animate {
         position: relative;
-        width: $width;
-        height: $height;
-        -webkit-border-radius: $height;
-        border-radius: $height;
-        line-height: $height;
-        font-size: $height / 2;
-        display: inline-block;
+        width: $size-width;
+        height: $size-height;
+        background-color: $color-unchecked-bg;
+        -webkit-transition: background-color 0.25s ease-out 0s;
+        transition: background-color 0.25s ease-out 0s;
 
-        input.input-checkbox {
+        // Circle
+        &:before {
+            $circle-size: $size-height * 0.66;
+
+            content: "";
+            display: block;
             position: absolute;
-            left: 0;
-            top: 0;
-            width: $width;
-            height: $height;
-            padding: 0;
-            margin: 0;
-            opacity: 0;
-            z-index: 2;
-            cursor: pointer;
-        }
-
-        .checkbox-animate {
-            position: relative;
-            width: $width;
-            height: $height;
-            background-color: $gray;
-            -webkit-transition: background-color 0.25s ease-out 0s;
-            transition: background-color 0.25s ease-out 0s;
-
-            // Circle
-            &:before {
-                $circle-size: $height * 0.66;
-
-                content: "";
-                display: block;
-                position: absolute;
-                width: $circle-size;
-                height: $circle-size;
-                border-radius: $circle-size * 2;
-                -webkit-border-radius: $circle-size * 2;
-                background-color: $slate;
-                top: $height * 0.16;
-                left: $width * 0.05;
-                -webkit-transition: left 0.3s ease-out 0s;
-                transition: left 0.3s ease-out 0s;
-                z-index: 10;
-            }
-        }
-
-        input.input-checkbox:checked {
-            + .checkbox-animate {
-                background-color: $accent;
-            }
-            + .checkbox-animate:before {
-                left: ($width - $width/3.5);
-                background-color: $light-gray;
-            }
-            + .checkbox-animate .checkbox-off {
-                display: none;
-                opacity: 0;
-            }
-            + .checkbox-animate .checkbox-on {
-                display: block;
-                opacity: 1;
-            }
-        }
-
-        .checkbox-off, .checkbox-on {
-            float: left;
-            color: $white;
-            font-weight: 700;
-                -webkit-transition: all 0.3s ease-out 0s;
-            transition: all 0.3s ease-out 0s;
-        }
-
-        .checkbox-off {
-            margin-left: $width / 3;
-            opacity: 1;
-        }
-
-        .checkbox-on {
-            display: none;
-            float: right;
-            margin-right: $width / 3;
-            opacity: 0;
+            width: $circle-size;
+            height: $circle-size;
+            border-radius: $circle-size * 2;
+            -webkit-border-radius: $circle-size * 2;
+            background-color: $color-unchecked-bullet;
+            top: $size-height * 0.16;
+            left: $size-width * 0.05;
+            -webkit-transition: left 0.3s ease-out 0s;
+            transition: left 0.3s ease-out 0s;
+            z-index: 10;
         }
     }
+
+    input.input-checkbox:checked {
+        + .checkbox-animate {
+            background-color: $color-checked-bg;
+        }
+        + .checkbox-animate:before {
+            left: ($size-width - $size-width/3.5);
+            background-color: $color-checked-bullet;
+        }
+        + .checkbox-animate .checkbox-off {
+            display: none;
+            opacity: 0;
+        }
+        + .checkbox-animate .checkbox-on {
+            display: block;
+            opacity: 1;
+        }
+    }
+
+    .checkbox-off, .checkbox-on {
+        float: left;
+        font-weight: 700;
+            -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+    }
+
+    .checkbox-off {
+        margin-left: $size-width / 3;
+        opacity: 1;
+        color: $color-unchecked-text;
+    }
+
+    .checkbox-on {
+        display: none;
+        float: right;
+        margin-right: $size-width / 3;
+        opacity: 0;
+        color: $color-checked-text;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index a87beb93..406a820b 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -120,20 +120,20 @@ $inner-margin: 4px;
 .search {
     display: flex;
     flex-direction: column;
-    background-color: $slate;
+    background-color: $color-primary-darker;
     &__query {
         display: flex;
         justify-content: center;
         flex-direction: row;
         align-items: center;
         margin-top: 1em;
-        color: $gray;
+        color: $color-primary;
         &__close-button {
             cursor: pointer;
             font-size: 1.25em;
             margin-left: 0.25rem;
             &:hover {
-                opacity: 0.9;
+                color: $color-primary-dark;
             }
         }
     }
@@ -142,7 +142,7 @@ $inner-margin: 4px;
         flex-direction: column;
         word-break:break-word;
         text-transform: uppercase;
-        color: $light-gray;
+        color: $color-on-primary;
         font-size: 1.5em;
         padding:10px;
         text-align:center;
@@ -150,7 +150,7 @@ $inner-margin: 4px;
             padding-bottom:13px;
         }
         a {
-            color: $gray;
+            color: $color-primary;
         }
     }
 }
diff --git a/src/presentation/components/Shared/Dialog.vue b/src/presentation/components/Shared/Dialog.vue
index 7f8a0b90..33c2ace3 100644
--- a/src/presentation/components/Shared/Dialog.vue
+++ b/src/presentation/components/Shared/Dialog.vue
@@ -32,26 +32,30 @@ export default class Dialog extends Vue {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/fonts.scss";
+@import "@/presentation/styles/colors.scss";
 
 .dialog {
+  color: $color-surface;
   font-family: $normal-font;
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
 
   &__content {
+    color: $color-on-surface;
     width: 100%;
     margin: 5%;
   }
 
   &__close-button {
+    color: $color-primary-dark;
     width: auto;
     font-size: 1.5em;
     margin-right: 0.25em;
     align-self: flex-start;
     cursor: pointer;
     &:hover {
-      opacity: 0.9;
+      color: $color-primary;
     }
   }
 }
diff --git a/src/presentation/components/TheFooter/DownloadUrlList.vue b/src/presentation/components/TheFooter/DownloadUrlList.vue
index 230c5a1a..9afdd21f 100644
--- a/src/presentation/components/TheFooter/DownloadUrlList.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlList.vue
@@ -1,7 +1,7 @@
 <template>
   <span 
     class="container"
-    v-bind:class="{ 'container_unsupported': !hasCurrentOsDesktopVersion, 'container_supported': hasCurrentOsDesktopVersion }">
+    v-bind:class="{ 'container-unsupported': !hasCurrentOsDesktopVersion, 'container-supported': hasCurrentOsDesktopVersion }">
     <span class="description">
       <font-awesome-icon class="description__icon" :icon="['fas', 'desktop']"  />
       <span class="description__text">For desktop:</span>
@@ -39,15 +39,16 @@ export default class DownloadUrlList extends Vue {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/media.scss";
+@import "@/presentation/styles/colors.scss";
 
 .container {
   display:flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  &_unsupported {
-    opacity: 0.9;
+  &-unsupported {
+    opacity: $color-primary-light;
   }
-  &_supported {
+  &-supported {
     font-size: 1em;
   }
   .description {
@@ -62,7 +63,6 @@ export default class DownloadUrlList extends Vue {
 .urls {
   &__url {
     &:not(:first-child)::before {
-      opacity: 0.5;
       content: "|";
       font-size: 0.6rem;
       padding: 0 5px;
diff --git a/src/presentation/components/TheFooter/DownloadUrlListItem.vue b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
index fdc59f7f..8ff68bc9 100644
--- a/src/presentation/components/TheFooter/DownloadUrlListItem.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
@@ -71,11 +71,5 @@ function getOperatingSystemName(os: OperatingSystem): string {
     &__inactive {
         font-size: 0.70em;
     }
-    a {
-        color:inherit;
-        &:hover {
-            opacity: 0.8;
-        }
-    }
 }
 </style>
diff --git a/src/presentation/components/TheFooter/PrivacyPolicy.vue b/src/presentation/components/TheFooter/PrivacyPolicy.vue
index 51c6e0ce..47511863 100644
--- a/src/presentation/components/TheFooter/PrivacyPolicy.vue
+++ b/src/presentation/components/TheFooter/PrivacyPolicy.vue
@@ -71,12 +71,5 @@ export default class PrivacyPolicy extends Vue {
           margin-top:0.2rem;
         }
     }
-
-    a {
-      color:inherit;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
 }
 </style>
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index f718d6bc..cdfa6799 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/src/presentation/components/TheFooter/TheFooter.vue
@@ -78,7 +78,6 @@ export default class TheFooter extends Vue {
     this.feedbackUrl = info.feedbackUrl;
   }
 }
-
 </script>
 
 <style scoped lang="scss">
@@ -108,17 +107,8 @@ export default class TheFooter extends Vue {
       }
     }
     flex-wrap: wrap;
-    color: $dark-gray;
     font-size: 1rem;
     font-family: $normal-font;
-    a {
-      color:inherit;
-      text-decoration: underline;
-      cursor: pointer;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
     &__item:not(:first-child) {
       &::before {
         content: "|";
@@ -134,24 +124,4 @@ export default class TheFooter extends Vue {
     }
   }
 }
-.modal {
-    margin-bottom: 10px;
-    display: flex;
-    flex-direction: row;
-
-    &__content {
-      width: 100%;
-    }
-
-    &__close-button {
-      width: auto;
-      font-size: 1.5em;
-      margin-right:0.25em;
-      align-self: flex-start;
-      cursor: pointer;
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-}
 </style>
diff --git a/src/presentation/components/TheHeader.vue b/src/presentation/components/TheHeader.vue
index d8ad5ffb..0e8a3888 100644
--- a/src/presentation/components/TheHeader.vue
+++ b/src/presentation/components/TheHeader.vue
@@ -36,7 +36,6 @@ export default class TheHeader extends Vue {
 
   .title {
     margin: 0;
-    color: $black;
     text-transform: uppercase;
     font-family: $main-font;
     font-size: 2.5em;
@@ -45,7 +44,7 @@ export default class TheHeader extends Vue {
   .subtitle {
     margin: 0;
     font-size: 1.5em;
-    color: $gray;
+    color: $color-primary;
     font-family: $artistic-font;
     font-weight: 500;
     line-height: 1.2;
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index 732ad6a0..56300660 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="search" v-non-collapsing>
-      <input type="search" class="searchTerm"
+      <input type="search" class="search-term"
         :placeholder="searchPlaceHolder"
         v-model="searchQuery" >
-      <div class="iconWrapper">
+      <div class="icon-wrapper">
           <font-awesome-icon :icon="['fas', 'search']" />
       </div>
   </div>
@@ -65,34 +65,36 @@ export default class TheSearchBar extends StatefulVue {
   width: 100%;
   position: relative;
   display: flex;
+  input {
+    background: inherit;
+  }
 }
 
-.searchTerm {
+.search-term {
   width: 100%;
   min-width: 60px;
-  border: 1.5px solid $gray;
+  border: 1.5px solid $color-primary;
   border-right: none;
   height: 36px;
   border-radius: 3px 0 0 3px;
   padding-left:10px;
   padding-right:10px;
   outline: none;
-  color: $gray;
-    font-family: $normal-font;
-    font-size:1em;
+  color: $color-primary;
+  font-family: $normal-font;
+  font-size:1em;
+  &:focus {
+    color: $color-primary-darker;
+  }
 }
 
-.searchTerm:focus{
-  color: $slate;
-}
-
-.iconWrapper {
+.icon-wrapper {
   width: 40px;
   height: 36px;
-  border: 1px solid $gray;
-  background: $gray;
+  border: 1px solid $color-primary;
+  background: $color-primary;
   text-align: center;
-  color: $white;
+  color: $color-on-primary;
   border-radius: 0 5px 5px 0;
   font-size: 20px;
   padding:5px;
diff --git a/src/presentation/styles/colors.scss b/src/presentation/styles/colors.scss
index 2018c485..d2499ec3 100644
--- a/src/presentation/styles/colors.scss
+++ b/src/presentation/styles/colors.scss
@@ -1,8 +1,25 @@
-$white: #fff;
-$light-gray: #eceef1;
-$gray: darken($light-gray, 30%);
-$dark-gray: #616f86;
-$slate: darken($light-gray, 70%);
-$dark-slate: #2f3133;
-$accent: #1abc9c;
-$black: #000
\ No newline at end of file
+/*
+    Colors used throughout the application
+    Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
+    Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
+*/
+
+// --- Primary | The color displayed most frequently across screens and components
+$color-primary              : #949fb0;
+$color-primary-light        : lighten($color-primary, 15%);
+$color-primary-dark         : darken($color-primary, 18%);
+$color-primary-darker       : darken($color-primary, 40%);
+$color-primary-darkest      : darken($color-primary, 44%);
+$color-on-primary           : lighten($color-primary, 30%);     // Text/iconography color that is usable on top of primary color
+
+// --- Secondary | Accent color, should be applied sparingly to accent select parts of UI
+$color-secondary            : #1abc9c;
+$color-secondary-light      : lighten($color-secondary, 48%);
+$color-on-secondary         : #fff;                             // Text/iconography color that is usable on top of secondary color
+
+// --- Surface | Affect surfaces of components, such as cards, sheets, and menus.
+$color-surface              : #fff;
+$color-on-surface           : #000;                             // Text/iconography color that is usable on surface
+
+// Background | Appears behind scrollable content.
+$color-background           : lighten($color-primary, 30);
diff --git a/src/presentation/styles/tooltip.scss b/src/presentation/styles/tooltip.scss
index 3cb7c447..81f15d94 100644
--- a/src/presentation/styles/tooltip.scss
+++ b/src/presentation/styles/tooltip.scss
@@ -1,12 +1,12 @@
-// based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
+// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
 @import "@/presentation/styles/colors.scss";
 
 .tooltip {
     display: block !important;
     z-index: 10000;
     .tooltip-inner {
-      background: $black;
-      color: $white;
+      background: $color-primary-darkest;
+      color: $color-on-primary;
       border-radius: 16px;
       padding: 5px 10px 4px;
     }
@@ -16,7 +16,7 @@
       border-style: solid;
       position: absolute;
       margin: 5px;
-      border-color: $black;
+      border-color: $color-primary-darkest;
       z-index: 1;
     }
     &[x-placement^="top"] {
diff --git a/src/presentation/styles/tree.scss b/src/presentation/styles/tree.scss
index 317a2c77..d30a45ea 100644
--- a/src/presentation/styles/tree.scss
+++ b/src/presentation/styles/tree.scss
@@ -1,41 +1,57 @@
 // Overrides base styling for LiquorTree
 @import "@/presentation/styles/colors.scss";
 
+$color-tree-bg                              : $color-primary-darker;
+$color-node-arrow                           : $color-on-primary;
+$color-node-fg                              : $color-on-primary;
+$color-node-hover-bg                        : $color-primary-dark;
+$color-node-keyboard-bg                     : $color-surface;
+$color-node-keyboard-fg                     : $color-on-surface;
+$color-node-checkbox-checked-bg             : $color-secondary;
+$color-node-checkbox-checked-border         : $color-secondary;
+$color-node-checkbox-checked-checked-tick   : $color-on-secondary;
+$color-node-checkbox-unchecked-bg           : $color-primary-darkest;
+$color-node-checkbox-unchecked-border       : $color-on-primary;
+
 .tree {
-    background: $slate;
+    background: $color-tree-bg;
     &-node { 
         white-space: normal !important;
         > .tree-content {
             > .tree-anchor > span {
-                color: $white;
+                color: $color-node-fg;
                 text-transform: uppercase;
                 font-size: 1.5em;
             }
             &:hover {
-                background: $dark-gray !important;
+                background: $color-node-hover-bg !important;
             }
         }
-        &.selected { // When using keyboard navigation it higlights current item and its child items
-             background: $gray;
+        &.selected { // When using keyboard navigation it highlights current item and its child items
+            background: $color-node-keyboard-bg;
             .tree-text {
-                color: $black !important;
+                color: $color-node-keyboard-fg !important; //  $block
             }
         }
     }
     &-checkbox {
+        border-color: $color-node-checkbox-unchecked-border !important;
         &.checked {
-            background: $accent !important;
-            border-color: $accent !important;
+            background: $color-node-checkbox-checked-bg !important;
+            border-color: $color-node-checkbox-checked-border !important;
+            &:after {
+                border-color: $color-node-checkbox-checked-checked-tick !important;
+            }
         }
         &.indeterminate {
-            border-color: $gray !important;
+            border-color: $color-node-checkbox-unchecked-border !important;
         }
-        background: $dark-slate !important;
+        background: $color-node-checkbox-unchecked-bg !important;
     }
     &-arrow {
         &.has-child {
             &.rtl:after, &:after {
-                border-color: $white !important;
+                border-color: $color-node-arrow !important;
             }
         }
     }