From 2728e03e76e8294cd7de8abd2d561cf0f401d79e Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <juan.delacruz@kaleidos.net>
Date: Tue, 3 Mar 2020 13:14:37 +0100
Subject: [PATCH] fix color theme general issue

---
 frontend/resources/styles/common/base.scss    |  8 +-
 .../styles/common/dependencies/colors.scss    |  1 +
 .../styles/common/dependencies/mixin.scss     |  2 +-
 .../resources/styles/common/framework-v2.scss | 58 +++++++-------
 .../resources/styles/common/framework.scss    | 58 +++++++-------
 frontend/resources/styles/main.scss           |  2 +-
 .../styles/main/partials/activity-bar.scss    |  2 +-
 .../styles/main/partials/color-palette.scss   | 14 ++--
 .../styles/main/partials/colorpicker.scss     | 18 ++---
 .../main/partials/dashboard-bar-v2.scss       | 14 ++--
 .../styles/main/partials/dashboard-bar.scss   | 14 ++--
 .../main/partials/dashboard-grid-v2.scss      | 32 ++++----
 .../styles/main/partials/dashboard-grid.scss  | 32 ++++----
 .../styles/main/partials/library-bar-v2.scss  | 16 ++--
 .../styles/main/partials/library-bar.scss     | 34 ++++----
 .../styles/main/partials/lightbox.scss        | 28 +++----
 .../styles/main/partials/main-bar-v2.scss     | 24 +++---
 .../styles/main/partials/main-bar.scss        | 16 ++--
 .../styles/main/partials/project-bar.scss     |  2 +-
 .../partials/sidebar-document-history.scss    | 28 +++----
 .../partials/sidebar-element-options.scss     | 80 +++++++++----------
 .../styles/main/partials/sidebar-icons.scss   | 10 +--
 .../main/partials/sidebar-layers-v2.scss      | 40 +++++-----
 .../styles/main/partials/sidebar-layers.scss  | 46 +++++------
 .../main/partials/sidebar-sitemap-v2.scss     | 52 ++++++------
 .../styles/main/partials/sidebar-sitemap.scss | 32 ++++----
 .../styles/main/partials/sidebar-tools.scss   |  8 +-
 .../styles/main/partials/sidebar-v2.scss      | 10 +--
 .../styles/main/partials/sidebar.scss         |  8 +-
 .../styles/main/partials/user-settings.scss   | 12 +--
 .../main/partials/workspace-bar-v2.scss       | 58 +++++++-------
 .../styles/main/partials/workspace-bar.scss   | 46 +++++------
 .../styles/main/partials/workspace.scss       | 10 +--
 .../styles/view/layouts/main-layout.scss      | 44 +++++-----
 package-lock.json                             |  3 +
 35 files changed, 433 insertions(+), 429 deletions(-)
 create mode 100644 package-lock.json

diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index 3e31e56a3..b33b94a0a 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -6,8 +6,8 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 body {
-  background-color: lighten($dark-ui-bg, 5%);
-  color: $medium-ui-text;
+  background-color: lighten($color-gray-10, 5%);
+  color: $color-gray-20;
   display: flex;
   flex-direction: column;
   font-family: "sourcesanspro", sans-serif;
@@ -55,7 +55,7 @@ svg {
 
 a {
   cursor: pointer;
-  color: $main-ui-color;
+  color: $color-primary;
 
   &:hover {
     color: $color-primary-dark;
@@ -209,7 +209,7 @@ h4 {
 }
 
 hr {
-  border-top: solid 1px $soft-ui-border;
+  border-top: solid 1px $color-gray-60;
   border-right: 0;
   border-left: 0;
   border-bottom: 0;
diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
index b156ce289..b896180ef 100644
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ b/frontend/resources/styles/common/dependencies/colors.scss
@@ -9,6 +9,7 @@
 $color-white: #ffffff;
 $color-black: #000000;
 $color-gray: #90969d;
+$color-canvas: #E8E9EA;
 
 // Main color
 $color-primary: #31EFB8;
diff --git a/frontend/resources/styles/common/dependencies/mixin.scss b/frontend/resources/styles/common/dependencies/mixin.scss
index 06fbfb27b..c8b7eefeb 100644
--- a/frontend/resources/styles/common/dependencies/mixin.scss
+++ b/frontend/resources/styles/common/dependencies/mixin.scss
@@ -154,7 +154,7 @@
   position: relative;
 
   &::after {
-    background-color: $primary-ui-bg;
+    background-color: $color-gray-50;
     bottom: -3px;
     content: "...";
     padding-left: 10px;
diff --git a/frontend/resources/styles/common/framework-v2.scss b/frontend/resources/styles/common/framework-v2.scss
index 82e823d01..c310432d8 100644
--- a/frontend/resources/styles/common/framework-v2.scss
+++ b/frontend/resources/styles/common/framework-v2.scss
@@ -35,7 +35,7 @@
 .btn-primary {
   @extend %btn;
   align-items: center;
-  background: $main-ui-color;
+  background: $color-primary;
   color: $color-white;
   justify-content: center;
   display: flex;
@@ -185,7 +185,7 @@ ul.slider-dots {
 
     &.current,
     &:hover {
-      background-color: $dark-ui-bg;
+      background-color: $color-gray-10;
     }
 
   }
@@ -319,7 +319,7 @@ ul.slider-dots {
   width: 100%;
 
   &::after {
-    color: $soft-ui-text;
+    color: $color-gray-10;
     font-size: $fs12;
     height: 20px;
     position: absolute;
@@ -366,9 +366,9 @@ ul.slider-dots {
 
 input,
 select {
-  background-color: $input-bg;
+  background-color: $color-gray-50;
   box-sizing: border-box;
-  color: $intense-ui-text;
+  color: $color-gray-60;
   font-family: "sourcesanspro", sans-serif;
   font-size: $fs16;
   margin-bottom: $medium;
@@ -402,8 +402,8 @@ input[type="checkbox"]:focus {
 
 .input-text {
   border: none;
-  border-bottom: 1px solid $soft-ui-border;
-  background-color: $input-bg;
+  border-bottom: 1px solid $color-gray-60;
+  background-color: $color-gray-50;
   box-shadow: none;
   outline: none;
   padding: $small $big $small $small;
@@ -414,7 +414,7 @@ input[type="checkbox"]:focus {
   }
 
   &:focus {
-    border-color: $intense-ui-border;
+    border-color: $color-gray-40;
     box-shadow: none;
 
     @include placeholder {
@@ -442,7 +442,7 @@ input[type="checkbox"]:focus {
 // Element-name
 
 input.element-name {
-  border: 1px solid $soft-ui-border;
+  border: 1px solid $color-gray-60;
   border-radius: $br-small;
   font-size: $fs13;
   margin: 0px;
@@ -489,9 +489,9 @@ input.element-name {
       width: 20px;
       height: 20px;
       margin-right: 10px;
-      background-color: $primary-ui-bg;
-      border: 1px solid $soft-ui-border;
-      box-shadow: inset 0 0 0 0 $main-ui-color ;
+      background-color: $color-gray-50;
+      border: 1px solid $color-gray-60;
+      box-shadow: inset 0 0 0 0 $color-primary ;
       box-sizing: border-box;
     }
 
@@ -751,7 +751,7 @@ input[type=range]::-webkit-slider-runnable-track {
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
   border-radius: 25px;
   border: 0px solid #000101;
 }
@@ -761,13 +761,13 @@ input[type=range]::-webkit-slider-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $intense-ui-icons;
+  background: $color-gray-20;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -8px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
 }
 input[type=range]::-moz-range-track {
   width: 100%;
@@ -775,7 +775,7 @@ input[type=range]::-moz-range-track {
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
   border-radius: 25px;
   border: 0px solid #000101;
 }
@@ -785,7 +785,7 @@ input[type=range]::-moz-range-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $intense-ui-icons;
+  background: $color-gray-20;
   cursor: pointer;
 }
 input[type=range]::-ms-track {
@@ -799,13 +799,13 @@ input[type=range]::-ms-track {
   color: transparent;
 }
 input[type=range]::-ms-fill-lower {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
   border: 0px solid #000101;
   border-radius: 50px;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
 }
 input[type=range]::-ms-fill-upper {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
   border: 0px solid #000101;
   border-radius: 50px;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
@@ -816,14 +816,14 @@ input[type=range]::-ms-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $intense-ui-icons;
+  background: $color-gray-20;
   cursor: pointer;
 }
 input[type=range]:focus::-ms-fill-lower {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
 }
 input[type=range]:focus::-ms-fill-upper {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
 }
 
 // Scroll bar (chrome)
@@ -838,11 +838,11 @@ input[type=range]:focus::-ms-fill-upper {
     background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: $scrollbar-bg;
+    background-color: $color-gray-20;
 
     &:hover {
-      background-color: darken($scrollbar-bg, 14%);
-      outline: 2px solid $main-ui-color;
+      background-color: darken($color-gray-20, 14%);
+      outline: 2px solid $color-primary;
     }
 
 }
@@ -855,9 +855,9 @@ input[type=range]:focus::-ms-fill-upper {
   &:hover {
 
     &::after {
-      background-color: $primary-ui-bg;
+      background-color: $color-gray-50;
       border-radius: $br-small;
-      color: $medium-ui-text;
+      color: $color-gray-20;
       content: attr(alt);
       font-size: $fs11;
       font-weight: bold;
@@ -905,10 +905,10 @@ input[type=range]:focus::-ms-fill-upper {
 
       &::after {
         align-items: center;
-        background-color: $input-bg;
+        background-color: $color-gray-50;
         box-sizing: border-box;
         border-radius: 0;
-        color: $intense-ui-text;
+        color: $color-gray-60;
         display: flex;
         height: 100%;
         justify-content: center;
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index bb872c907..a11783b3f 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -35,7 +35,7 @@
 .btn-primary {
   @extend %btn;
   align-items: center;
-  background: $main-ui-color;
+  background: $color-primary;
   color: $color-white;
   justify-content: center;
   display: flex;
@@ -185,7 +185,7 @@ ul.slider-dots {
 
     &.current,
     &:hover {
-      background-color: $dark-ui-bg;
+      background-color: $color-gray-10;
     }
 
   }
@@ -319,7 +319,7 @@ ul.slider-dots {
   width: 100%;
 
   &::after {
-    color: $medium-ui-text;
+    color: $color-gray-20;
     font-size: $fs12;
     height: 20px;
     position: absolute;
@@ -366,9 +366,9 @@ ul.slider-dots {
 
 input,
 select {
-  background-color: $input-bg;
+  background-color: $color-gray-50;
   box-sizing: border-box;
-  color: $intense-ui-text;
+  color: $color-gray-60;
   font-family: "sourcesanspro", sans-serif;
   font-size: $fs16;
   margin-bottom: $medium;
@@ -402,8 +402,8 @@ input[type="checkbox"]:focus {
 
 .input-text {
   border: none;
-  border-bottom: 1px solid $soft-ui-border;
-  background-color: $input-bg;
+  border-bottom: 1px solid $color-gray-60;
+  background-color: $color-gray-50;
   box-shadow: none;
   outline: none;
   padding: $small $big $small $small;
@@ -414,7 +414,7 @@ input[type="checkbox"]:focus {
   }
 
   &:focus {
-    border-color: $intense-ui-border;
+    border-color: $color-gray-40;
     box-shadow: none;
 
     @include placeholder {
@@ -442,10 +442,10 @@ input[type="checkbox"]:focus {
 // Element-name
 
 input.element-name {
-  background-color: $dark-ui-bg;
-  border: 1px solid $intense-ui-border;
+  background-color: $color-gray-10;
+  border: 1px solid $color-gray-40;
   border-radius: $br-small;
-  color: $intense-ui-text;
+  color: $color-gray-60;
   font-size: $fs13;
   margin: 0px;
   padding: 3px;
@@ -491,9 +491,9 @@ input.element-name {
       width: 20px;
       height: 20px;
       margin-right: 10px;
-      background-color: $primary-ui-bg;
-      border: 1px solid $soft-ui-border;
-      box-shadow: inset 0 0 0 0 $main-ui-color ;
+      background-color: $color-gray-50;
+      border: 1px solid $color-gray-60;
+      box-shadow: inset 0 0 0 0 $color-primary ;
       box-sizing: border-box;
     }
 
@@ -753,7 +753,7 @@ input[type=range]::-webkit-slider-runnable-track {
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
   border-radius: 25px;
   border: 0px solid #000101;
 }
@@ -763,13 +763,13 @@ input[type=range]::-webkit-slider-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $intense-ui-icons;
+  background: $color-gray-20;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -8px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
 }
 input[type=range]::-moz-range-track {
   width: 100%;
@@ -777,7 +777,7 @@ input[type=range]::-moz-range-track {
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
   border-radius: 25px;
   border: 0px solid #000101;
 }
@@ -787,7 +787,7 @@ input[type=range]::-moz-range-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $intense-ui-icons;
+  background: $color-gray-20;
   cursor: pointer;
 }
 input[type=range]::-ms-track {
@@ -801,13 +801,13 @@ input[type=range]::-ms-track {
   color: transparent;
 }
 input[type=range]::-ms-fill-lower {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
   border: 0px solid #000101;
   border-radius: 50px;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
 }
 input[type=range]::-ms-fill-upper {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
   border: 0px solid #000101;
   border-radius: 50px;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
@@ -818,14 +818,14 @@ input[type=range]::-ms-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $intense-ui-icons;
+  background: $color-gray-20;
   cursor: pointer;
 }
 input[type=range]:focus::-ms-fill-lower {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
 }
 input[type=range]:focus::-ms-fill-upper {
-  background: $secondary-ui-bg;
+  background: $color-gray-60;
 }
 
 // Scroll bar (chrome)
@@ -840,11 +840,11 @@ input[type=range]:focus::-ms-fill-upper {
     background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: $scrollbar-bg;
+    background-color: $color-gray-20;
 
     &:hover {
-      background-color: darken($scrollbar-bg, 14%);
-      outline: 2px solid $main-ui-color;
+      background-color: darken($color-gray-20, 14%);
+      outline: 2px solid $color-primary;
     }
 
 }
@@ -859,7 +859,7 @@ input[type=range]:focus::-ms-fill-upper {
     &::after {
       background-color: $color-white;
       border-radius: $br-small;
-      color: $intense-ui-text;
+      color: $color-gray-60;
       content: attr(alt);
       font-size: $fs11;
       font-weight: bold;
@@ -910,7 +910,7 @@ input[type=range]:focus::-ms-fill-upper {
         background-color: $color-white;
         box-sizing: border-box;
         border-radius: 0;
-        color: $intense-ui-text;
+        color: $color-gray-60;
         display: flex;
         height: 100%;
         justify-content: center;
diff --git a/frontend/resources/styles/main.scss b/frontend/resources/styles/main.scss
index 9bd8756b4..ecb0475a9 100644
--- a/frontend/resources/styles/main.scss
+++ b/frontend/resources/styles/main.scss
@@ -11,7 +11,7 @@
 //#################################################
 
 @import 'common/dependencies/colors';
-@import 'common/dependencies/uxbox-light';
+//@import 'common/dependencies/uxbox-light';
 //@import 'common/dependencies/uxbox-dark';
 @import 'common/dependencies/helpers';
 @import 'common/dependencies/mixin';
diff --git a/frontend/resources/styles/main/partials/activity-bar.scss b/frontend/resources/styles/main/partials/activity-bar.scss
index 6a45fe529..34fe4aaac 100644
--- a/frontend/resources/styles/main/partials/activity-bar.scss
+++ b/frontend/resources/styles/main/partials/activity-bar.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .activity-bar {
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   bottom: 0;
   height: 100%;
   position: fixed;
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index 69a195ca0..3039e78e0 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -8,8 +8,8 @@
 .color-palette {
   @include animation(0,.5s,fadeInUp);
   align-items: center;
-  background-color: $primary-ui-bg;
-  border-top: 1px solid $soft-ui-border;
+  background-color: $color-gray-50;
+  border-top: 1px solid $color-gray-60;
   display: flex;
   padding: 1rem;
   position: absolute;
@@ -77,7 +77,7 @@
     }
   }
   &.current {
-    background-color: $main-ui-color;
+    background-color: $color-primary;
     border-color: $color-white;
     svg {
       fill: $color-white;
@@ -111,7 +111,7 @@
   flex-basis: 66px;
   .color {
     background-color: $color-gray-lighter;
-    border: 2px solid $soft-ui-border;
+    border: 2px solid $color-gray-60;
     border-radius: 50%;
     flex-shrink: 0;
     margin-bottom: .4rem;
@@ -153,7 +153,7 @@
     margin-left: 1.5rem;
     .color {
       align-items: center;
-      background-color: $primary-ui-bg;
+      background-color: $color-gray-50;
       border: 3px dashed $color-gray-lighter;
       cursor: pointer;
       display: flex;
@@ -201,7 +201,7 @@
 }
 
 .color-tooltip {
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   border: 1px solid $color-gray-lighter;
   border-radius: 3px;
   left: -102px;
@@ -217,7 +217,7 @@
       max-width: 100px;
     }
     &::after {
-      background-color: $primary-ui-bg;
+      background-color: $color-gray-50;
       bottom: -32px;
       border-bottom: 1px solid $color-gray-lighter;
       border-right: 1px solid $color-gray-lighter;
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index 89f5ffc77..bba8f1211 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -48,7 +48,7 @@
     }
 
     .input-text {
-      color: $intense-ui-text;
+      color: $color-gray-60;
       font-size: $fs13;
       margin: 5px;
       padding: 5px;
@@ -58,7 +58,7 @@
   }
 
   span {
-    color: $medium-ui-text;
+    color: $color-gray-20;
     font-size: $fs12;
   }
 
@@ -154,27 +154,27 @@
 
   .color-info {
     input {
-      border: 1px solid $intense-ui-border;
+      border: 1px solid $color-gray-40;
       border-radius: $br-small;
-      color: $soft-ui-text;
+      color: $color-gray-10;
       margin: 3px 0 0 $x-small;
       padding: 0 $x-small;
       width: 58px;
       font-size: $fs13;
 
       &:focus {
-        border-color: $soft-ui-text;
+        border-color: $color-gray-10;
       }
     }
   }
 
   .type {
-    color: $soft-ui-text;
+    color: $color-gray-10;
     margin-right: $x-small;
   }
 
   .number {
-    color: $intense-ui-text;
+    color: $color-gray-60;
   }
 }
 
@@ -190,14 +190,14 @@
   width: auto;
 
   span {
-    color: $medium-ui-text;
+    color: $color-gray-20;
     font-size: $fs12;
   }
 
   .inputs-area {
 
     .input-text {
-      color: $intense-ui-text;
+      color: $color-gray-60;
       font-size: $fs13;
       margin: 5px;
       padding: 5px;
diff --git a/frontend/resources/styles/main/partials/dashboard-bar-v2.scss b/frontend/resources/styles/main/partials/dashboard-bar-v2.scss
index b2d32457d..093a8af92 100644
--- a/frontend/resources/styles/main/partials/dashboard-bar-v2.scss
+++ b/frontend/resources/styles/main/partials/dashboard-bar-v2.scss
@@ -32,15 +32,15 @@
 
     .input-select {
       background-color: transparent;
-      border-color: $soft-ui-border;
+      border-color: $color-gray-60;
       font-size: $fs14;
       margin-bottom: 0;
       margin-left: $medium;
       padding: 3px 25px 3px 3px;
 
       option {
-        color: $intense-ui-text;
-        background: $secondary-ui-bg;
+        color: $color-gray-60;
+        background: $color-gray-60;
       }
     }
 
@@ -52,9 +52,9 @@
     margin-left: $small;
 
     .input-text {
-      background: $input-bg;
+      background: $color-gray-50;
       border: 0;
-      color: $intense-ui-text;
+      color: $color-gray-60;
       padding: 4px 8px;
       margin: 0;
       max-width: 160px;
@@ -62,14 +62,14 @@
 
     .clear-search {
       align-items: center;
-      background: $input-bg;
+      background: $color-gray-50;
       cursor: pointer;
       display: flex;
       height: 28px;
       padding: 0 5px;
 
       svg {
-        fill: $medium-ui-icons;
+        fill: $color-gray-30;
         height: 15px;
         transform: rotate(45deg);
         width: 15px;
diff --git a/frontend/resources/styles/main/partials/dashboard-bar.scss b/frontend/resources/styles/main/partials/dashboard-bar.scss
index b2d32457d..093a8af92 100644
--- a/frontend/resources/styles/main/partials/dashboard-bar.scss
+++ b/frontend/resources/styles/main/partials/dashboard-bar.scss
@@ -32,15 +32,15 @@
 
     .input-select {
       background-color: transparent;
-      border-color: $soft-ui-border;
+      border-color: $color-gray-60;
       font-size: $fs14;
       margin-bottom: 0;
       margin-left: $medium;
       padding: 3px 25px 3px 3px;
 
       option {
-        color: $intense-ui-text;
-        background: $secondary-ui-bg;
+        color: $color-gray-60;
+        background: $color-gray-60;
       }
     }
 
@@ -52,9 +52,9 @@
     margin-left: $small;
 
     .input-text {
-      background: $input-bg;
+      background: $color-gray-50;
       border: 0;
-      color: $intense-ui-text;
+      color: $color-gray-60;
       padding: 4px 8px;
       margin: 0;
       max-width: 160px;
@@ -62,14 +62,14 @@
 
     .clear-search {
       align-items: center;
-      background: $input-bg;
+      background: $color-gray-50;
       cursor: pointer;
       display: flex;
       height: 28px;
       padding: 0 5px;
 
       svg {
-        fill: $medium-ui-icons;
+        fill: $color-gray-30;
         height: 15px;
         transform: rotate(45deg);
         width: 15px;
diff --git a/frontend/resources/styles/main/partials/dashboard-grid-v2.scss b/frontend/resources/styles/main/partials/dashboard-grid-v2.scss
index 3d0cb407c..f88aa2644 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid-v2.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid-v2.scss
@@ -25,13 +25,13 @@
       width: 100%;
       .edit {
           padding: 5px 10px;
-          background: $primary-ui-bg;
+          background: $color-gray-50;
           border: none;
           height: 100%;
       }
       .close {
           padding: 5px 10px;
-          background: $primary-ui-bg;
+          background: $color-gray-50;
           cursor: pointer;
           svg {
             transform: rotate(45deg);
@@ -126,7 +126,7 @@
         width: 100%;
 
         h3 {
-          color: $intense-ui-text;
+          color: $color-gray-60;
           font-size: $fs16;
           font-weight: 400;
           overflow: hidden;
@@ -138,7 +138,7 @@
         }
 
         span.date {
-          color: $soft-ui-text;
+          color: $color-gray-10;
           font-size: $fs12;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -174,14 +174,14 @@
 
       // PROJECTS, ELEMENTS & ICONS GRID
       &.project-th {
-        background-color: $primary-ui-bg;
-        border-bottom: 2px solid lighten($soft-ui-border, 12%);
+        background-color: $color-gray-50;
+        border-bottom: 2px solid lighten($color-gray-60, 12%);
 
         &:hover {
-          border-color: $main-ui-color;
+          border-color: $color-primary;
 
           h3 {
-            color: $main-ui-color;
+            color: $color-primary;
           }
 
         }
@@ -216,7 +216,7 @@
               margin-right: 0;
 
               svg {
-                fill: $medium-ui-icons;
+                fill: $color-gray-30;
                 margin-right: 0;
               }
 
@@ -235,7 +235,7 @@
               margin-right: 0;
 
               svg {
-                fill: $medium-ui-icons;
+                fill: $color-gray-30;
               }
 
               &:hover {
@@ -257,11 +257,11 @@
 
       // IMAGES SECTION
       &.images-th {
-        background-color: $primary-ui-bg;
+        background-color: $color-gray-50;
         border-bottom: 2px solid lighten($color-gray-light, 12%);
 
         &:hover {
-          border-color: $main-ui-color;
+          border-color: $color-primary;
         }
 
       }
@@ -338,7 +338,7 @@
 .multiselect-bar {
   @include animation(0,.5s,fadeInUp);
   align-items: center;
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   display: flex;
   left: 0;
   justify-content: center;
@@ -363,12 +363,12 @@
 
     svg {
       cursor: pointer;
-      fill: $medium-ui-icons;
+      fill: $color-gray-30;
       height: 20px;
       width: 20px;
 
       &:hover {
-        fill: $intense-ui-icons;
+        fill: $color-gray-20;
       }
 
     }
@@ -393,7 +393,7 @@
   position: relative;
 
   .move-list {
-    background-color: $dark-ui-bg;
+    background-color: $color-gray-10;
     border-radius: $br-small;
     bottom: 30px;
     display: flex;
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index 0fb60b1b3..e2bc9a26d 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -24,13 +24,13 @@
       width: 100%;
       .edit {
           padding: 5px 10px;
-          background: $primary-ui-bg;
+          background: $color-gray-50;
           border: none;
           height: 100%;
       }
       .close {
           padding: 5px 10px;
-          background: $primary-ui-bg;
+          background: $color-gray-50;
           cursor: pointer;
           svg {
             transform: rotate(45deg);
@@ -124,7 +124,7 @@
         width: 100%;
 
         h3 {
-          color: $intense-ui-text;
+          color: $color-gray-60;
           font-size: $fs15;
           font-weight: 400;
           overflow: hidden;
@@ -136,7 +136,7 @@
         }
 
         span.date {
-          color: $medium-ui-text;
+          color: $color-gray-20;
           font-size: $fs12;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -150,13 +150,13 @@
         justify-content: center;
 
         span {
-          color: $intense-ui-text;
+          color: $color-gray-60;
           font-size: $fs15;
         }
 
         &:hover {
           background-color: $color-white;
-          border: 2px solid $main-ui-color;
+          border: 2px solid $color-primary;
         }
 
       }
@@ -164,10 +164,10 @@
       // PROJECTS, ELEMENTS & ICONS GRID
       &.project-th {
         background-color: $color-white;
-        // border: 2px solid $dark-ui-bg;
+        // border: 2px solid $color-gray-10;
 
         &:hover {
-          border-color: $main-ui-color;
+          border-color: $color-primary;
         }
 
         .project-th-actions {
@@ -200,7 +200,7 @@
               margin-right: 0;
 
               svg {
-                fill: $medium-ui-icons;
+                fill: $color-gray-30;
                 margin-right: 0;
               }
 
@@ -219,14 +219,14 @@
               margin-right: 0;
 
               svg {
-                fill: $medium-ui-icons;
+                fill: $color-gray-30;
               }
 
               &:hover {
                 transform: scale(1.4);
 
                 svg {
-                  fill: $soft-ui-icons;
+                  fill: $color-gray-60;
                 }
 
               }
@@ -245,7 +245,7 @@
         border-bottom: 2px solid lighten($color-gray-light, 12%);
 
         &:hover {
-          border-color: $main-ui-color;
+          border-color: $color-primary;
         }
 
       }
@@ -322,7 +322,7 @@
 .multiselect-bar {
   @include animation(0,.5s,fadeInUp);
   align-items: center;
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   display: flex;
   left: 0;
   justify-content: center;
@@ -347,12 +347,12 @@
 
     svg {
       cursor: pointer;
-      fill: $medium-ui-icons;
+      fill: $color-gray-30;
       height: 20px;
       width: 20px;
 
       &:hover {
-        fill: $intense-ui-icons;
+        fill: $color-gray-20;
       }
 
     }
@@ -377,7 +377,7 @@
   position: relative;
 
   .move-list {
-    background-color: $dark-ui-bg;
+    background-color: $color-gray-10;
     border-radius: $br-small;
     bottom: 30px;
     display: flex;
diff --git a/frontend/resources/styles/main/partials/library-bar-v2.scss b/frontend/resources/styles/main/partials/library-bar-v2.scss
index 650a270ee..67b74ca4f 100644
--- a/frontend/resources/styles/main/partials/library-bar-v2.scss
+++ b/frontend/resources/styles/main/partials/library-bar-v2.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .library-bar {
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   bottom: 0;
   height: 100%;
   left: 0;
@@ -21,14 +21,14 @@
 
     .library-tabs {
       align-items: center;
-      background-color: $secondary-ui-bg;
+      background-color: $color-gray-60;
       display: flex;
       justify-content: space-around;
       margin: 0;
       padding-top: 12px;
 
       li {
-        background-color: darken($secondary-ui-bg, 10%);
+        background-color: darken($color-gray-60, 10%);
         border-top-left-radius: 3px;
         border-top-right-radius: 3px;
         color: $color-gray;
@@ -44,8 +44,8 @@
         }
 
         &.current {
-          background-color: $primary-ui-bg;
-          color: $main-ui-color;
+          background-color: $color-gray-50;
+          color: $color-primary;
         }
 
       }
@@ -61,7 +61,7 @@
       padding-bottom: 20px;
 
       li {
-        border-bottom: 1px solid $secondary-ui-bg;
+        border-bottom: 1px solid $color-gray-60;
         cursor: pointer;
         display: flex;
         flex-direction: column;
@@ -84,7 +84,7 @@
         }
 
         .close {
-            background: $primary-ui-bg;
+            background: $color-gray-50;
             cursor: pointer;
             padding: 5px 10px;
 
@@ -103,7 +103,7 @@
 
         &:hover,
         &.current {
-          background-color: $main-ui-color;
+          background-color: $color-primary;
 
           span.element-title,
           .element-subtitle {
diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss
index 51f96ff44..645eacd90 100644
--- a/frontend/resources/styles/main/partials/library-bar.scss
+++ b/frontend/resources/styles/main/partials/library-bar.scss
@@ -22,7 +22,7 @@
     .library-tabs {
       align-items: center;
       background-color: $color-white;
-      border-bottom: 1px solid $medium-ui-border;
+      border-bottom: 1px solid $color-gray-20;
       display: flex;
       justify-content: space-around;
       margin: 0;
@@ -39,12 +39,12 @@
         width: 118px;
 
         &:hover {
-          color: $intense-ui-text;
+          color: $color-gray-60;
         }
 
         &.current {
-          border-color: $main-ui-color;
-          color: $intense-ui-text;
+          border-color: $color-primary;
+          color: $color-gray-60;
         }
 
       }
@@ -67,7 +67,7 @@
         padding: $small $medium;
 
         span.element-title {
-          color: $intense-ui-text;
+          color: $color-gray-60;
           font-size: $fs14;
           overflow-x: hidden;
           text-overflow: ellipsis;
@@ -75,8 +75,8 @@
         }
   
         &.recent-projects {
-          border-top: 1px solid $dark-ui-bg;
-          border-bottom: 1px solid $dark-ui-bg;
+          border-top: 1px solid $color-gray-10;
+          border-bottom: 1px solid $color-gray-10;
         }
 
         input.element-title {
@@ -86,7 +86,7 @@
         }
 
         .close {
-            background: $primary-ui-bg;
+            background: $color-gray-50;
             cursor: pointer;
             padding: 5px 10px;
 
@@ -104,15 +104,15 @@
         }
 
         &:hover {
-          background-color: $main-ui-color;
-          color: $intense-ui-text;
+          background-color: $color-primary;
+          color: $color-gray-60;
         }
 
         &.current {
 
           span.element-title,
           .element-subtitle {
-            color: $intense-ui-text;
+            color: $color-gray-60;
             font-weight: bold;
           }
           input.element-title {
@@ -140,7 +140,7 @@
 
   .add-project {
     align-items: center;
-    background-color: $dark-ui-bg;
+    background-color: $color-gray-10;
     border-radius: $br-small;
     border: 1px solid transparent;
     cursor: pointer;
@@ -150,16 +150,16 @@
     padding: $x-small;
 
     svg {
-      fill: $soft-ui-icons;
+      fill: $color-gray-60;
       height: 16px;
       width: 16px;
     }
 
     &:hover {
-      background-color: $main-ui-color;
+      background-color: $color-primary;
 
       svg {
-        fill: $soft-ui-icons;
+        fill: $color-gray-60;
       }
     }
   }
@@ -174,7 +174,7 @@
   .input-text {
     background: $color-white;
     border: 0;
-    color: $intense-ui-text;
+    color: $color-gray-60;
     font-size: $fs14;
     padding: 4px 8px;
     margin: 0;
@@ -190,7 +190,7 @@
     padding: 0 5px;
 
     svg {
-      fill: $medium-ui-icons;
+      fill: $color-gray-30;
       height: 15px;
       transform: rotate(45deg);
       width: 15px;
diff --git a/frontend/resources/styles/main/partials/lightbox.scss b/frontend/resources/styles/main/partials/lightbox.scss
index d3d99512d..39f5c5aed 100644
--- a/frontend/resources/styles/main/partials/lightbox.scss
+++ b/frontend/resources/styles/main/partials/lightbox.scss
@@ -23,7 +23,7 @@
 
   .lightbox-body {
     align-items: center;
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     border-radius: $br-medium;
     display: flex;
     flex-direction: column;
@@ -117,7 +117,7 @@
       }
 
       span {
-        color: $intense-ui-text;
+        color: $color-gray-60;
         font-size: $fs12;
         margin-left: $small;
       }
@@ -162,7 +162,7 @@
   &:hover {
 
     .big-svg {
-      background-color: $main-ui-color;
+      background-color: $color-primary;
 
       svg {
         fill: $color-white;
@@ -185,7 +185,7 @@
 
     .clipboard-item {
       align-items: center;
-      border-bottom: 1px solid $soft-ui-border;
+      border-bottom: 1px solid $color-gray-60;
       cursor: pointer;
       display: flex;
       padding: $small;
@@ -196,7 +196,7 @@
 
         svg {
           height: 20px;
-          fill: $medium-ui-border;
+          fill: $color-gray-20;
           margin-right: $medium;
           width: 20px;
         }
@@ -206,10 +206,10 @@
       &:hover {
 
         span {
-          color: $main-ui-color;
+          color: $color-primary;
 
           svg {
-            fill: $main-ui-color
+            fill: $color-primary
           }
 
         }
@@ -234,7 +234,7 @@
 // Export dialog
 .content-col {
   align-items: center;
-  border-right: 1px solid $soft-ui-border;
+  border-right: 1px solid $color-gray-60;
   display: flex;
   flex-direction: column;
   flex: 300px;
@@ -252,7 +252,7 @@
 
   .icon {
     align-items: center;
-    background-color: $soft-ui-icons;
+    background-color: $color-gray-60;
     border-radius: $br-medium;
     display: flex;
     flex-shrink: 0;
@@ -261,7 +261,7 @@
     width: 120px;
 
     svg {
-      fill: $medium-ui-icons;
+      fill: $color-gray-30;
       height: 50px;
       width: 50px;
     }
@@ -305,14 +305,14 @@
     }
 
     :last-child {
-      border-right: 1px solid $soft-ui-border;
+      border-right: 1px solid $color-gray-60;
       border-top-right-radius: $br-medium;
       border-bottom-right-radius: $br-medium;
     }
 
     li {
       align-items: center;
-      border: 1px solid $soft-ui-border;
+      border: 1px solid $color-gray-60;
       border-right: none;
       cursor: pointer;
       display: flex;
@@ -322,7 +322,7 @@
       white-space: nowrap;
 
       &:hover {
-        color: $intense-ui-text;
+        color: $color-gray-60;
       }
 
       &.current {
@@ -340,7 +340,7 @@
 
   .library-item {
     border-radius: $br-medium;
-    border: 1px solid $soft-ui-border;
+    border: 1px solid $color-gray-60;
     cursor: pointer;
     display: flex;
     flex-direction: column;
diff --git a/frontend/resources/styles/main/partials/main-bar-v2.scss b/frontend/resources/styles/main/partials/main-bar-v2.scss
index 387f7af7e..dc18147ff 100644
--- a/frontend/resources/styles/main/partials/main-bar-v2.scss
+++ b/frontend/resources/styles/main/partials/main-bar-v2.scss
@@ -7,7 +7,7 @@
 
 .main-bar {
   align-items: center;
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   display: flex;
   height: 60px;
   padding: $x-small $medium;
@@ -17,7 +17,7 @@
   .main-logo {
 
     svg {
-      fill: $medium-ui-icons;
+      fill: $color-gray-30;
       height: 40px;
       width: 120px;
     }
@@ -35,11 +35,11 @@
   li {
 
     a {
-      color: $soft-ui-text;
+      color: $color-gray-10;
       padding: 1rem;
 
       &:hover {
-        color: $intense-ui-text;
+        color: $color-gray-60;
       }
 
     }
@@ -47,7 +47,7 @@
     &.current {
 
       a {
-        color: $intense-ui-text;
+        color: $color-gray-60;
       }
 
     }
@@ -64,7 +64,7 @@
   position: relative;
 
   span {
-    color: $medium-ui-text;
+    color: $color-gray-20;
     margin: $small;
   }
 
@@ -76,9 +76,9 @@
   }
 
   .dropdown {
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     border-radius: $br-small;
-    border: 1px solid $soft-ui-border;
+    border: 1px solid $color-gray-60;
     min-width: 150px;
     padding: 0 $small;
     position: absolute;
@@ -93,23 +93,23 @@
       padding: $small 0;
 
       svg {
-        fill: $medium-ui-text;
+        fill: $color-gray-20;
         height: 12px;
         width: 12px;
       }
 
       span {
-        color: $medium-ui-text;
+        color: $color-gray-20;
       }
 
       &:hover {
 
         span {
-          color: $intense-ui-text;
+          color: $color-gray-60;
         }
 
         svg {
-          fill: $intense-ui-text;
+          fill: $color-gray-60;
         }
 
       }
diff --git a/frontend/resources/styles/main/partials/main-bar.scss b/frontend/resources/styles/main/partials/main-bar.scss
index acea41083..088b3d99d 100644
--- a/frontend/resources/styles/main/partials/main-bar.scss
+++ b/frontend/resources/styles/main/partials/main-bar.scss
@@ -7,7 +7,7 @@
 
 .main-bar {
   align-items: center;
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   display: flex;
   height: 40px;
   padding: $x-small $medium;
@@ -18,7 +18,7 @@
     padding-top: $x-small;
 
     svg {
-      fill: $intense-ui-icons;
+      fill: $color-gray-20;
       height: 30px;
       width: 100px;
     }
@@ -38,11 +38,11 @@
 
     a {
       border-bottom: 2px solid transparent;
-      color: $soft-ui-text;
+      color: $color-gray-10;
       margin: $x-small $big;
 
       &:hover {
-        border-color: $main-ui-color;
+        border-color: $color-primary;
       }
 
     }
@@ -50,7 +50,7 @@
     &.current {
 
       a {
-        border-color: $main-ui-color;
+        border-color: $color-primary;
       }
 
     }
@@ -67,7 +67,7 @@
   position: relative;
 
   span {
-    color: $medium-ui-text;
+    color: $color-gray-20;
     margin: $small;
   }
 
@@ -108,11 +108,11 @@
       &:hover {
 
         span {
-          color: $intense-ui-text;
+          color: $color-gray-60;
         }
 
         svg {
-          fill: $intense-ui-text;
+          fill: $color-gray-60;
         }
 
       }
diff --git a/frontend/resources/styles/main/partials/project-bar.scss b/frontend/resources/styles/main/partials/project-bar.scss
index 05ad05343..6ce9ea098 100644
--- a/frontend/resources/styles/main/partials/project-bar.scss
+++ b/frontend/resources/styles/main/partials/project-bar.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .project-bar {
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   border-right: 1px solid $color-gray-lighter;
   bottom: 0;
   height: 100%;
diff --git a/frontend/resources/styles/main/partials/sidebar-document-history.scss b/frontend/resources/styles/main/partials/sidebar-document-history.scss
index 7ee1f061d..11062d8d8 100644
--- a/frontend/resources/styles/main/partials/sidebar-document-history.scss
+++ b/frontend/resources/styles/main/partials/sidebar-document-history.scss
@@ -8,15 +8,15 @@
 .document-history {
 
   .history-tabs {
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     display: flex;
     width: 100%;
 
     li {
-      background: darken($secondary-ui-bg, 12%);
+      background: darken($color-gray-60, 12%);
       border-top-right-radius: $br-small;
       border-top-left-radius: $br-small;
-      color: $intense-ui-text;
+      color: $color-gray-60;
       cursor: pointer;
       font-size: $fs14;
       font-weight: bold;
@@ -27,8 +27,8 @@
       width: 50%;
 
       &.selected {
-        background-color: $primary-ui-bg;
-        color: $main-ui-color;
+        background-color: $color-gray-50;
+        color: $color-primary;
       }
 
     }
@@ -42,7 +42,7 @@
 
     li {
       align-items: center;
-      border-bottom: 1px solid $soft-ui-border;
+      border-bottom: 1px solid $color-gray-60;
       cursor: pointer;
       display: flex;
       font-size: $fs14;
@@ -57,13 +57,13 @@
         a {
 
           svg {
-            fill: $soft-ui-icons;
+            fill: $color-gray-60;
             height: 15px;
             margin-left: $x-small;
             width: 15px;
 
             &:hover {
-              fill: $intense-ui-icons;
+              fill: $color-gray-20;
             }
 
           }
@@ -75,13 +75,13 @@
         cursor: pointer;
 
         svg {
-          fill: $soft-ui-icons;
+          fill: $color-gray-60;
           height: 12px;
           margin-right: $small;
           width: 12px;
 
           &:hover {
-            fill: $intense-ui-icons;
+            fill: $color-gray-20;
           }
 
         }
@@ -89,7 +89,7 @@
         &.selected {
 
           svg {
-            fill: $intense-ui-icons;
+            fill: $color-gray-20;
           }
 
         }
@@ -97,11 +97,11 @@
       }
 
       &:hover {
-        color: $main-ui-color;
+        color: $color-primary;
       }
 
       &.current {
-        color: $main-ui-color;
+        color: $color-primary;
         font-weight: bold;
 
         span {
@@ -109,7 +109,7 @@
           display: flex;
 
           &::before {
-            background-color: $main-ui-color;
+            background-color: $color-primary;
             border-radius: 50%;
             content: "";
             height: 6px;
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 0c29c61bf..0ba8537bb 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -14,15 +14,15 @@
   }
 
   .element-icons {
-    background-color: $secondary-ui-bg;
-    border: 1px solid $soft-ui-border;
+    background-color: $color-gray-60;
+    border: 1px solid $color-gray-60;
     border-radius: $br-small;
     display: flex;
     margin: $x-small;
 
     li {
       align-items: center;
-      border-right: 1px solid $soft-ui-border;
+      border-right: 1px solid $color-gray-60;
       border-radius: $br-small;
       cursor: pointer;
       display: flex;
@@ -31,7 +31,7 @@
       padding: $small;
 
       svg {
-        fill: $intense-ui-icons;
+        fill: $color-gray-20;
         height: 15px;
         width: 15px;
       }
@@ -39,13 +39,13 @@
       &:hover {
 
         svg {
-          fill: $main-ui-color;
+          fill: $color-primary;
         }
 
       }
 
       &.selected {
-        background-color: $main-ui-color;
+        background-color: $color-primary;
 
         svg {
           fill: $color-white;
@@ -62,12 +62,12 @@
   }
 
   .element-set {
-    border-bottom: 1px solid $soft-ui-border;
-    color: $medium-ui-text;
+    border-bottom: 1px solid $color-gray-60;
+    color: $color-gray-20;
     margin: 0 $x-small;
 
     .element-set-title {
-      color: $soft-ui-text;
+      color: $color-gray-10;
       font-size: $fs14;
       margin-top: $x-small;
       padding: $x-small;
@@ -81,7 +81,7 @@
 
     li {
       align-items: center;
-      border-bottom: 1px solid $soft-ui-border;
+      border-bottom: 1px solid $color-gray-60;
       display: flex;
       flex-direction: row;
       padding: $small;
@@ -90,7 +90,7 @@
       .list-icon {
 
         svg {
-          fill: $medium-ui-icons;
+          fill: $color-gray-30;
           height: 15px;
           margin-right: $x-small;
           width: 15px;
@@ -99,7 +99,7 @@
       }
 
       span {
-        color: $medium-ui-text;
+        color: $color-gray-20;
         font-size: $fs14;
         max-width: 75%;
         overflow-x: hidden;
@@ -116,13 +116,13 @@
         a {
 
           svg {
-            fill: $soft-ui-icons;
+            fill: $color-gray-60;
             height: 15px;
             margin-left: $x-small;
             width: 15px;
 
             &:hover {
-              fill: $intense-ui-icons;
+              fill: $color-gray-20;
             }
 
           }
@@ -136,13 +136,13 @@
         .list-icon {
 
           svg {
-            fill: $main-ui-color;
+            fill: $color-primary;
           }
 
         }
 
         span {
-          color: $main-ui-color;
+          color: $color-primary;
         }
 
       }
@@ -152,13 +152,13 @@
         .list-icon {
 
           svg {
-            fill: $main-ui-color;
+            fill: $color-primary;
           }
 
         }
 
         span {
-          color: $main-ui-color;
+          color: $color-primary;
           font-weight: bold;
         }
 
@@ -185,37 +185,37 @@
   padding: $small $x-small;
 
   .input-text {
-    background-color: $input-bg;
-    border-color: $intense-ui-border;
-    color: $soft-ui-text;
+    background-color: $color-gray-50;
+    border-color: $color-gray-40;
+    color: $color-gray-10;
     font-size: $fs13;
     margin: $x-small;
     padding: $x-small;
     width: 100%;
 
     &:focus {
-      color: lighten($soft-ui-text, 8%);
-      border-color: $medium-ui-border;
+      color: lighten($color-gray-10, 8%);
+      border-color: $color-gray-20;
     }
 
   }
 
   .input-select {
-    color: $soft-ui-text;
+    color: $color-gray-10;
 
     &:focus {
-      color: lighten($soft-ui-text, 8%);
+      color: lighten($color-gray-10, 8%);
     }
 
     option {
-      color: $intense-ui-text;
+      color: $color-gray-60;
       background: $color-white;
       font-size: $fs12;
     }
   }
 
   span {
-    color: $soft-ui-text;
+    color: $color-gray-10;
     font-size: $fs12;
   }
 
@@ -224,12 +224,12 @@
     width: 20%;
 
     svg {
-      fill: $medium-ui-text;
+      fill: $color-gray-20;
       height: 15px;
       width: 15px;
 
       &:hover {
-        fill: $main-ui-color;
+        fill: $color-primary;
       }
 
     }
@@ -237,7 +237,7 @@
     &.selected {
 
       svg {
-        fill: $main-ui-color;
+        fill: $color-primary;
       }
 
     }
@@ -276,8 +276,8 @@
       width: 100%;
 
       option {
-        color: $intense-ui-text;
-        background: $secondary-ui-bg;
+        color: $color-gray-60;
+        background: $color-gray-60;
         font-size: $fs12;
       }
     }
@@ -286,7 +286,7 @@
 
 .color-th {
   background-color: $color-gray-lighter;
-  border: 1px solid $intense-ui-border;
+  border: 1px solid $color-gray-40;
   border-radius: $br-small;
   cursor: pointer;
   flex-shrink: 0;
@@ -296,20 +296,20 @@
 
   &.palette-th {
     align-items: center;
-    border: 1px solid $medium-ui-icons;
+    border: 1px solid $color-gray-30;
     display: flex;
     justify-content: center;
 
     svg {
-      fill: $medium-ui-icons;
+      fill: $color-gray-30;
       height: 16px;
       width: 16px;
     }
 
     &:hover {
-      border-color: $main-ui-color;
+      border-color: $color-primary;
       svg {
-        fill: $main-ui-color;
+        fill: $color-primary;
       }
 
     }
@@ -324,7 +324,7 @@
   span {
 
     svg {
-      fill: $medium-ui-icons;
+      fill: $color-gray-30;
       height: 20px;
       margin: $x-small $small;
       width: 20px;
@@ -334,7 +334,7 @@
     &.current {
 
       svg {
-        fill: $main-ui-color;
+        fill: $color-primary;
       }
 
     }
@@ -362,7 +362,7 @@
     width: 15px;
 
     .color-bar-select {
-      background-color: $primary-ui-bg;
+      background-color: $color-gray-50;
       height: 3px;
       left: -4px;
       position: absolute;
diff --git a/frontend/resources/styles/main/partials/sidebar-icons.scss b/frontend/resources/styles/main/partials/sidebar-icons.scss
index 44ade29dc..32eab98cc 100644
--- a/frontend/resources/styles/main/partials/sidebar-icons.scss
+++ b/frontend/resources/styles/main/partials/sidebar-icons.scss
@@ -19,7 +19,7 @@
 
 .figure-btn {
   align-items: center;
-  background-color: $secondary-ui-bg;
+  background-color: $color-gray-60;
   border-radius: 3px;
   border: 1px solid transparent;
   cursor: pointer;
@@ -31,18 +31,18 @@
   width: 54px;
 
   svg {
-    fill: $intense-ui-icons;
+    fill: $color-gray-20;
     height: 40px;
     width: 40px;
   }
 
   &:hover {
-    background-color: $dark-ui-bg;
-    border-color: $soft-ui-border;
+    background-color: $color-gray-10;
+    border-color: $color-gray-60;
   }
 
   &.selected {
-    background-color: $main-ui-color;
+    background-color: $color-primary;
 
     svg {
       fill: $color-white;
diff --git a/frontend/resources/styles/main/partials/sidebar-layers-v2.scss b/frontend/resources/styles/main/partials/sidebar-layers-v2.scss
index 065147f67..04dcdcd0c 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers-v2.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers-v2.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .layers-tools {
-  border-top: 1px solid $medium-ui-border;
+  border-top: 1px solid $color-gray-20;
   bottom: 0;
   display: flex;
   height: 30px;
@@ -25,12 +25,12 @@
       cursor: pointer;
 
       svg {
-        fill: $medium-ui-icons;
+        fill: $color-gray-30;
         height: 14px;
         width: 14px;
 
         &:hover {
-          fill: $intense-ui-text;
+          fill: $color-gray-60;
         }
 
       }
@@ -40,7 +40,7 @@
 
         svg {
           cursor: auto;
-          fill: $soft-ui-icons;
+          fill: $color-gray-60;
         }
 
       }
@@ -92,7 +92,7 @@
   width: 100%;
 
   ul {
-    border-left: 6px solid $intense-ui-border;
+    border-left: 6px solid $color-gray-40;
     margin: 0;
   }
 
@@ -124,14 +124,14 @@
 
     .element-list-body {
       align-items: center;
-      border-bottom: 1px solid $soft-ui-border;
+      border-bottom: 1px solid $color-gray-60;
       display: flex;
       padding: $small;
       transition: none;
       width: 100%;
 
       svg {
-        fill: $soft-ui-icons;
+        fill: $color-gray-60;
         height: 13px;
         margin-right: 8px;
         width: 13px;
@@ -147,7 +147,7 @@
       .element-icon {
 
         svg {
-          fill: $medium-ui-icons;
+          fill: $color-gray-30;
         }
 
       }
@@ -157,7 +157,7 @@
         width: 12px;
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
           transform: rotate(90deg);
           width: 10px;
         }
@@ -169,7 +169,7 @@
         &:hover {
 
           svg {
-            fill: $medium-ui-icons;
+            fill: $color-gray-30;
           }
 
         }
@@ -198,7 +198,7 @@
         min-height: 16px;
         display: block;
 
-        color: $medium-ui-text;
+        color: $color-gray-20;
         font-size: $fs13;
         overflow-x: hidden;
         text-overflow: ellipsis;
@@ -210,13 +210,13 @@
         .element-icon {
 
           svg {
-            fill: $main-ui-color;
+            fill: $color-primary;
           }
 
         }
 
         span {
-          color: $main-ui-color;
+          color: $color-primary;
         }
 
       }
@@ -224,38 +224,38 @@
       .selected {
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
         }
 
       }
 
       &:hover {
-        border-color: $main-ui-color;
+        border-color: $color-primary;
 
         .element-icon {
 
           svg {
-            fill: $intense-ui-icons;
+            fill: $color-gray-20;
           }
 
         }
 
         span {
-          color: $intense-ui-text;
+          color: $color-gray-60;
         }
 
       }
 
       &.drag-top {
-        border-top: 40px solid $soft-ui-border !important;
+        border-top: 40px solid $color-gray-60 !important;
       }
 
       &.drag-bottom {
-        border-bottom: 40px solid $soft-ui-border !important;
+        border-bottom: 40px solid $color-gray-60 !important;
       }
 
       &.drag-inside {
-        border: 2px solid $main-ui-color !important;
+        border: 2px solid $color-primary !important;
       }
 
     }
diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
index b7084f5ee..c5a519b3d 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .layers-tools {
-  border-top: 1px solid $medium-ui-border;
+  border-top: 1px solid $color-gray-20;
   bottom: 0;
   display: flex;
   height: 30px;
@@ -25,12 +25,12 @@
       cursor: pointer;
 
       svg {
-        fill: $medium-ui-icons;
+        fill: $color-gray-30;
         height: 14px;
         width: 14px;
 
         &:hover {
-          fill: $intense-ui-text;
+          fill: $color-gray-60;
         }
 
       }
@@ -40,7 +40,7 @@
 
         svg {
           cursor: auto;
-          fill: $soft-ui-icons;
+          fill: $color-gray-60;
         }
 
       }
@@ -92,7 +92,7 @@
   width: 100%;
 
   ul {
-    border-left: 6px solid $intense-ui-border;
+    border-left: 6px solid $color-gray-40;
     margin: 0;
   }
 
@@ -130,7 +130,7 @@
       width: 100%;
 
       svg {
-        fill: $soft-ui-icons;
+        fill: $color-gray-60;
         height: 13px;
         margin-right: 8px;
         width: 13px;
@@ -145,7 +145,7 @@
         .block-element {
 
           svg {
-            fill: $medium-ui-icons;
+            fill: $color-gray-30;
           }
         }
       }
@@ -153,7 +153,7 @@
       .element-icon {
 
         svg {
-          fill: $medium-ui-icons;
+          fill: $color-gray-30;
         }
 
       }
@@ -163,7 +163,7 @@
         width: 12px;
 
         svg {
-          fill: $medium-ui-icons;
+          fill: $color-gray-30;
           transform: rotate(90deg);
           width: 10px;
         }
@@ -175,7 +175,7 @@
         &:hover {
 
           svg {
-            fill: $intense-ui-icons;
+            fill: $color-gray-20;
           }
 
         }
@@ -204,7 +204,7 @@
         min-height: 16px;
         display: block;
 
-        color: $medium-ui-text;
+        color: $color-gray-20;
         font-size: $fs13;
         overflow-x: hidden;
         text-overflow: ellipsis;
@@ -216,26 +216,26 @@
         .element-icon {
           
           svg {
-            fill: $main-ui-color;
+            fill: $color-primary;
           }
           
         }
         
         span {
-          color: $main-ui-color;
+          color: $color-primary;
         }
         
         &:hover {
-          background-color: $main-ui-color;
+          background-color: $color-primary;
 
           .element-icon,
           .element-actions {
             svg {
-              fill: $soft-ui-icons;
+              fill: $color-gray-60;
             }
           }
           .element-name {
-            color: $intense-ui-text;
+            color: $color-gray-60;
           }
         }
 
@@ -244,39 +244,39 @@
       .selected {
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
         }
 
       }
 
       &:hover {
-        background-color: $main-ui-color;
+        background-color: $color-primary;
 
         .element-icon,
         .element-actions {
 
           svg {
-            fill: $soft-ui-icons;
+            fill: $color-gray-60;
           }
 
         }
 
         span {
-          color: $intense-ui-text;
+          color: $color-gray-60;
         }
 
       }
 
       &.drag-top {
-        border-top: 40px solid $soft-ui-border !important;
+        border-top: 40px solid $color-gray-60 !important;
       }
 
       &.drag-bottom {
-        border-bottom: 40px solid $soft-ui-border !important;
+        border-bottom: 40px solid $color-gray-60 !important;
       }
 
       &.drag-inside {
-        border: 2px solid $main-ui-color !important;
+        border: 2px solid $color-primary !important;
       }
 
     }
diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss b/frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss
index 2d1ecf5b2..c35f0398b 100644
--- a/frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss
+++ b/frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss
@@ -9,13 +9,13 @@
 
   .project-title {
     align-items: center;
-    border-bottom: 1px solid $soft-ui-border;
+    border-bottom: 1px solid $color-gray-60;
     display: flex;
     padding: $x-small;
     width: 100%;
 
     span {
-      color: $intense-ui-text;
+      color: $color-gray-60;
       font-size: $fs14;
       font-weight: bold;
       max-width: 80%;
@@ -26,7 +26,7 @@
 
     .add-page {
       align-items: center;
-      background-color: $soft-ui-icons;
+      background-color: $color-gray-60;
       border-radius: $br-small;
       border: 1px solid transparent;
       cursor: pointer;
@@ -36,14 +36,14 @@
       padding: $x-small;
 
       svg {
-        fill: $intense-ui-icons;
+        fill: $color-gray-20;
         height: 16px;
         width: 16px;
       }
 
       &:hover {
-        background-color: $dark-ui-bg;
-        border-color: $soft-ui-border;
+        background-color: $color-gray-10;
+        border-color: $color-gray-60;
       }
 
     }
@@ -61,7 +61,7 @@
       .page-icon {
 
         svg {
-          fill: $medium-ui-icons;
+          fill: $color-gray-30;
           height: 15px;
           margin-right: $x-small;
           width: 15px;
@@ -70,7 +70,7 @@
       }
 
       span {
-        color: $medium-ui-text;
+        color: $color-gray-20;
         font-size: $fs14;
         max-width: 75%;
         overflow-x: hidden;
@@ -86,13 +86,13 @@
         a {
 
           svg {
-            fill: $soft-ui-icons;
+            fill: $color-gray-60;
             height: 15px;
             margin-left: $x-small;
             width: 15px;
 
             &:hover {
-              fill: $intense-ui-icons;
+              fill: $color-gray-20;
             }
 
           }
@@ -106,13 +106,13 @@
         .page-icon {
 
           svg {
-            fill: $main-ui-color;
+            fill: $color-primary;
           }
 
         }
 
         span {
-          color: $main-ui-color;
+          color: $color-primary;
         }
 
       }
@@ -122,13 +122,13 @@
         .page-icon {
 
           svg {
-            fill: $main-ui-color;
+            fill: $color-primary;
           }
 
         }
 
         span {
-          color: $main-ui-color;
+          color: $color-primary;
           font-weight: bold;
         }
 
@@ -147,14 +147,14 @@
 
     .element-list-body {
       align-items: center;
-      border-bottom: 1px solid $soft-ui-border;
+      border-bottom: 1px solid $color-gray-60;
       display: flex;
       padding: $small;
       transition: none;
       width: 100%;
 
       svg {
-        fill: $soft-ui-icons;
+        fill: $color-gray-60;
         height: 13px;
         margin-right: 8px;
         width: 13px;
@@ -170,7 +170,7 @@
       .element-icon {
 
         svg {
-          fill: $medium-ui-icons;
+          fill: $color-gray-30;
         }
 
       }
@@ -180,7 +180,7 @@
         width: 12px;
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
           transform: rotate(90deg);
           width: 10px;
         }
@@ -192,7 +192,7 @@
         &:hover {
 
           svg {
-            fill: $medium-ui-icons;
+            fill: $color-gray-30;
           }
 
         }
@@ -221,7 +221,7 @@
         min-height: 16px;
         display: block;
 
-        color: $medium-ui-text;
+        color: $color-gray-20;
         font-size: $fs13;
         overflow-x: hidden;
         text-overflow: ellipsis;
@@ -233,13 +233,13 @@
         .element-icon {
 
           svg {
-            fill: $main-ui-color;
+            fill: $color-primary;
           }
 
         }
 
         span {
-          color: $main-ui-color;
+          color: $color-primary;
         }
 
       }
@@ -247,24 +247,24 @@
       .selected {
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
         }
 
       }
 
       &:hover {
-        border-color: $main-ui-color;
+        border-color: $color-primary;
 
         .element-icon {
 
           svg {
-            fill: $intense-ui-icons;
+            fill: $color-gray-20;
           }
 
         }
 
         span {
-          color: $intense-ui-text;
+          color: $color-gray-60;
         }
 
       }
diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
index 3727cf685..b2c63b6f4 100644
--- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss
+++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
@@ -12,7 +12,7 @@
 
     .add-page {
       align-items: center;
-      background-color: $soft-ui-icons;
+      background-color: $color-gray-60;
       border-radius: $br-small;
       border: 1px solid transparent;
       cursor: pointer;
@@ -22,16 +22,16 @@
       padding: $x-small;
 
       svg {
-        fill: $intense-ui-icons;
+        fill: $color-gray-20;
         height: 16px;
         width: 16px;
       }
 
       &:hover {
-        background-color: $main-ui-color;
+        background-color: $color-primary;
 
         svg {
-          fill: $soft-ui-icons;
+          fill: $color-gray-60;
         }
       }
     }
@@ -48,7 +48,7 @@
       .page-icon {
 
         svg {
-          fill: $medium-ui-icons;
+          fill: $color-gray-30;
           height: 13px;
           margin-right: $small;
           width: 13px;
@@ -57,7 +57,7 @@
       }
 
       span {
-        color: $medium-ui-text;
+        color: $color-gray-20;
         font-size: $fs13;
         max-width: 75%;
         overflow-x: hidden;
@@ -73,7 +73,7 @@
         a {
 
           svg {
-            fill: $soft-ui-icons;
+            fill: $color-gray-60;
             height: 15px;
             margin-left: $x-small;
             opacity: .6;
@@ -90,16 +90,16 @@
       }
 
       &:hover {
-        background-color: $main-ui-color;
+        background-color: $color-primary;
 
         .page-icon {
 
           svg {
-            fill: $soft-ui-icons;
+            fill: $color-gray-60;
           }
 
           span {
-            color: $intense-ui-text;
+            color: $color-gray-60;
           }
 
         }
@@ -116,13 +116,13 @@
         .page-icon {
 
           svg {
-            fill: $main-ui-color;
+            fill: $color-primary;
           }
 
         }
 
         span {
-          color: $main-ui-color;
+          color: $color-primary;
         }
 
       }
@@ -132,12 +132,12 @@
         .page-icon {
 
           svg {
-            fill: $soft-ui-icons;
+            fill: $color-gray-60;
           }
         }
 
         span {
-          color: $intense-ui-text;
+          color: $color-gray-60;
         }
       }
 
@@ -152,7 +152,7 @@
       width: 100%;
 
       svg {
-        fill: $soft-ui-icons;
+        fill: $color-gray-60;
         height: 13px;
         margin-right: 8px;
         width: 13px;
@@ -167,7 +167,7 @@
 
       &.dragging {
         // TODO: revisit this
-        background-color: $dark-ui-bg;
+        background-color: $color-gray-10;
       }
     }
   }
diff --git a/frontend/resources/styles/main/partials/sidebar-tools.scss b/frontend/resources/styles/main/partials/sidebar-tools.scss
index fa569580e..7a2b684b7 100644
--- a/frontend/resources/styles/main/partials/sidebar-tools.scss
+++ b/frontend/resources/styles/main/partials/sidebar-tools.scss
@@ -11,7 +11,7 @@
 
 .tool-btn {
   align-items: center;
-  background-color: $secondary-ui-bg;
+  background-color: $color-gray-60;
   border-radius: 3px;
   cursor: pointer;
   display: flex;
@@ -22,17 +22,17 @@
   width: 54px;
 
   svg {
-    fill: $intense-ui-icons;
+    fill: $color-gray-20;
     height: 35px;
     width: 35px;
   }
 
   &:hover {
-    background-color: $dark-ui-bg;
+    background-color: $color-gray-10;
   }
 
   &.selected {
-    background-color: $main-ui-color;
+    background-color: $color-primary;
 
     svg {
       fill: $color-white;
diff --git a/frontend/resources/styles/main/partials/sidebar-v2.scss b/frontend/resources/styles/main/partials/sidebar-v2.scss
index 13a6e046a..98f6ed6c7 100644
--- a/frontend/resources/styles/main/partials/sidebar-v2.scss
+++ b/frontend/resources/styles/main/partials/sidebar-v2.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .settings-bar {
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   bottom: 0;
   height: 100%;
   position: fixed;
@@ -28,7 +28,7 @@
     height: 100%;
 
     .tool-window {
-      border-bottom: 1px solid $medium-ui-border;
+      border-bottom: 1px solid $color-gray-20;
       display: flex;
       flex-direction: column;
       flex: 1;
@@ -36,19 +36,19 @@
 
       .tool-window-bar {
         align-items: center;
-        border-bottom: 1px solid $medium-ui-border;
+        border-bottom: 1px solid $color-gray-20;
         display: flex;
         flex-shrink: 0;
         padding: 2px $x-small;
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
           height: 12px;
           width: 12px;
         }
 
         span {
-          color: $intense-ui-text;
+          color: $color-gray-60;
           font-weight: bold;
         }
 
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index f858cdf30..497928dbd 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .settings-bar {
-  background-color: $primary-ui-bg;
+  background-color: $color-gray-50;
   bottom: 0;
   height: 100%;
   position: fixed;
@@ -28,7 +28,7 @@
     height: 100%;
 
     .tool-window {
-      border-bottom: 1px solid $soft-ui-border;
+      border-bottom: 1px solid $color-gray-60;
       display: flex;
       flex-direction: column;
       flex: 1;
@@ -41,13 +41,13 @@
         padding: $small;
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
           height: 12px;
           width: 12px;
         }
 
         span {
-          color: $soft-ui-text;
+          color: $color-gray-10;
           font-size: $fs14;
         }
 
diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss
index 1bb286901..f1a222469 100644
--- a/frontend/resources/styles/main/partials/user-settings.scss
+++ b/frontend/resources/styles/main/partials/user-settings.scss
@@ -12,21 +12,21 @@
 
     li {
       background-color: transparent;
-      border: 1px solid $medium-ui-border;
+      border: 1px solid $color-gray-20;
       border-radius: $br-small;
       cursor: pointer;
       margin: $medium;
       padding: $small $medium;
 
       &:hover {
-        background-color: $dark-ui-bg;
+        background-color: $color-gray-10;
         border-color: transparent;
       }
 
       &.current {
-        background-color: $primary-ui-bg;
+        background-color: $color-gray-50;
         border: 0;
-        color: $main-ui-color;
+        color: $color-primary;
       }
 
     }
@@ -42,14 +42,14 @@
   width: 500px;
 
   .user-settings-label {
-    border-bottom: 1px solid $soft-ui-border;
+    border-bottom: 1px solid $color-gray-60;
     font-weight: bold;
     margin: $x-small 0 $medium 0;
     padding: $medium;
   }
 
   .input-text {
-    color: $intense-ui-text;
+    color: $color-gray-60;
   }
 
   .btn-primary {
diff --git a/frontend/resources/styles/main/partials/workspace-bar-v2.scss b/frontend/resources/styles/main/partials/workspace-bar-v2.scss
index 4a4ae7b6c..2b255f39d 100644
--- a/frontend/resources/styles/main/partials/workspace-bar-v2.scss
+++ b/frontend/resources/styles/main/partials/workspace-bar-v2.scss
@@ -7,8 +7,8 @@
 
 .workspace-bar {
   align-items: center;
-  background-color: $primary-ui-bg;
-  border-bottom: 1px solid  $soft-ui-border;
+  background-color: $color-gray-50;
+  border-bottom: 1px solid  $color-gray-60;
   display: flex;
   height: 50px;
   padding: $x-small $medium $x-small 65px;
@@ -17,7 +17,7 @@
 
   .main-icon {
     align-items: center;
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     cursor: pointer;
     display: flex;
     height: 100%;
@@ -31,7 +31,7 @@
       height: 35px;
 
       svg {
-        fill: $medium-ui-icons;
+        fill: $color-gray-30;
         height: 35px;
         width: 35px;
 
@@ -40,7 +40,7 @@
       &:hover {
 
         svg {
-          fill: $main-ui-color;
+          fill: $color-primary;
         }
 
       }
@@ -51,7 +51,7 @@
 
   .project-tree-btn {
     align-items: center;
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     border-radius: $br-small;
     border: 1px solid transparent;
     cursor: pointer;
@@ -60,26 +60,26 @@
     width: 164px;
 
     svg {
-      fill: $intense-ui-icons;
+      fill: $color-gray-20;
       height: 20px;
       margin-right: $small;
       width: 20px;
     }
 
     span {
-      color: $intense-ui-text;
+      color: $color-gray-60;
       overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     &:hover {
-      background-color: $dark-ui-bg;
-      border-color: $soft-ui-border;
+      background-color: $color-gray-10;
+      border-color: $color-gray-60;
     }
 
     &.selected {
-      background-color: $main-ui-color;
+      background-color: $color-primary;
 
       svg {
         fill: $color-white;
@@ -97,7 +97,7 @@
 
     .options-btn {
       align-items: center;
-      border-right: 4px double $soft-ui-border;
+      border-right: 4px double $color-gray-60;
       display: flex;
       margin: 0;
 
@@ -107,7 +107,7 @@
 
       li {
         align-items: center;
-        background-color: $secondary-ui-bg;
+        background-color: $color-gray-60;
         border: 1px solid transparent;
         border-radius: $br-small;
         cursor: pointer;
@@ -124,18 +124,18 @@
         }
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
           height: 18px;
           width: 18px;
         }
 
         &:hover {
-          background-color: $dark-ui-bg;
-          border-color: $soft-ui-border;
+          background-color: $color-gray-10;
+          border-color: $color-gray-60;
         }
 
         &.selected {
-          background-color: $main-ui-color;
+          background-color: $color-primary;
 
           svg {
             fill: $color-white;
@@ -144,18 +144,18 @@
         }
 
         &.view-mode {
-          background-color: $intense-ui-icons;
+          background-color: $color-gray-20;
 
           svg {
-            fill: $secondary-ui-bg;
+            fill: $color-gray-60;
           }
 
           &:hover {
             background-color: $color-white;
-            border-color: $soft-ui-border;
+            border-color: $color-gray-60;
 
             svg {
-              fill: $intense-ui-icons;
+              fill: $color-gray-20;
             }
 
           }
@@ -190,9 +190,9 @@
           .remove-zoom {
             align-items: center;
             border-radius: 50%;
-            border: 1px solid $intense-ui-border;
+            border: 1px solid $color-gray-40;
             cursor: pointer;
-            color: $intense-ui-border;
+            color: $color-gray-40;
             display: none;
             flex-shrink: 0;
             font-size: $fs20;
@@ -241,7 +241,7 @@
 
 .options-btn {
   align-items: center;
-  border-right: 4px double $soft-ui-border;
+  border-right: 4px double $color-gray-60;
   display: flex;
   margin: 0;
 
@@ -251,7 +251,7 @@
 
   li {
     align-items: center;
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     border: 1px solid transparent;
     border-radius: $br-small;
     cursor: pointer;
@@ -268,18 +268,18 @@
     }
 
     svg {
-      fill: $intense-ui-icons;
+      fill: $color-gray-20;
       height: 18px;
       width: 18px;
     }
 
     &:hover {
-      background-color: $dark-ui-bg;
-      border-color: $soft-ui-border;
+      background-color: $color-gray-10;
+      border-color: $color-gray-60;
     }
 
     &.selected {
-      background-color: $main-ui-color;
+      background-color: $color-primary;
 
       svg {
         fill: $color-white;
diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss
index 46b796284..a604a08b0 100644
--- a/frontend/resources/styles/main/partials/workspace-bar.scss
+++ b/frontend/resources/styles/main/partials/workspace-bar.scss
@@ -7,8 +7,8 @@
 
 .workspace-bar {
   align-items: center;
-  background-color: $primary-ui-bg;
-  border-bottom: 1px solid  $soft-ui-border;
+  background-color: $color-gray-50;
+  border-bottom: 1px solid  $color-gray-60;
   display: flex;
   height: 40px;
   padding: $x-small $medium $x-small 65px;
@@ -17,7 +17,7 @@
 
   .main-icon {
     align-items: center;
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     cursor: pointer;
     display: flex;
     height: 100%;
@@ -31,7 +31,7 @@
       height: 30px;
 
       svg {
-        fill: $medium-ui-icons;
+        fill: $color-gray-30;
         height: 30px;
         width: 30px;
 
@@ -40,7 +40,7 @@
       &:hover {
 
         svg {
-          fill: $main-ui-color;
+          fill: $color-primary;
         }
 
       }
@@ -56,14 +56,14 @@
     padding: $x-small;
 
     svg {
-      fill: $intense-ui-icons;
+      fill: $color-gray-20;
       height: 20px;
       margin-right: $small;
       width: 20px;
     }
 
     span {
-      color: $soft-ui-text;
+      color: $color-gray-10;
       font-size: $fs14;
       overflow-x: hidden;
       text-overflow: ellipsis;
@@ -78,7 +78,7 @@
 
     .options-btn {
       align-items: center;
-      border-right: 4px double $soft-ui-border;
+      border-right: 4px double $color-gray-60;
       display: flex;
       margin: 0;
 
@@ -105,7 +105,7 @@
         }
 
         svg {
-          fill: $intense-ui-icons;
+          fill: $color-gray-20;
           height: 18px;
           width: 18px;
         }
@@ -128,7 +128,7 @@
           &:hover {
 
             svg {
-              fill: $soft-ui-icons;
+              fill: $color-gray-60;
             }
           }
 
@@ -161,7 +161,7 @@
         position: relative;
 
         span {
-          color: $medium-ui-text;
+          color: $color-gray-20;
           font-size: $fs15;
         }
 
@@ -169,9 +169,9 @@
         .remove-zoom {
           align-items: center;
           border-radius: 50%;
-          border: 1px solid $intense-ui-border;
+          border: 1px solid $color-gray-40;
           cursor: pointer;
-          color: $intense-ui-border;
+          color: $color-gray-40;
           display: none;
           flex-shrink: 0;
           font-size: $fs20;
@@ -218,7 +218,7 @@
 
 .options-btn {
   align-items: center;
-  border-right: 4px double $soft-ui-border;
+  border-right: 4px double $color-gray-60;
   display: flex;
   margin: 0;
 
@@ -228,7 +228,7 @@
 
   li {
     align-items: center;
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     border: 1px solid transparent;
     border-radius: $br-small;
     cursor: pointer;
@@ -245,18 +245,18 @@
     }
 
     svg {
-      fill: $intense-ui-icons;
+      fill: $color-gray-20;
       height: 18px;
       width: 18px;
     }
 
     &:hover {
-      background-color: $dark-ui-bg;
-      border-color: $soft-ui-border;
+      background-color: $color-gray-10;
+      border-color: $color-gray-60;
     }
 
     &.selected {
-      background-color: $main-ui-color;
+      background-color: $color-primary;
 
       svg {
         fill: $color-white;
@@ -273,7 +273,7 @@
   display: flex;
 
   .view-mode {
-    background-color: $intense-ui-icons;
+    background-color: $color-gray-20;
     align-items: center;
     border-radius: $br-small;
     cursor: pointer;
@@ -290,16 +290,16 @@
     }
 
     svg {
-      fill: $secondary-ui-bg;
+      fill: $color-gray-60;
       height: 18px;
       width: 18px;
     }
 
     &:hover {
-      background-color: $main-ui-color;
+      background-color: $color-primary;
 
       svg {
-        fill: $soft-ui-icons;
+        fill: $color-gray-60;
       }
 
     }
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 91c6f2a17..0dc56cfdf 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .workspace-content {
-  background-color: $canvas-bg;
+  background-color: $color-canvas;
   display: flex;
   height: 100%;
   /* width: 100%; */
@@ -115,10 +115,10 @@
     top: 0px;
 
     rect {
-      fill: $canvas-bg;
+      fill: $color-canvas;
     }
     path {
-      stroke: $medium-ui-text;
+      stroke: $color-gray-20;
     }
   }
 
@@ -128,10 +128,10 @@
     left: 0px;
 
     rect {
-      fill: $canvas-bg;
+      fill: $color-canvas;
     }
     path {
-      stroke: $medium-ui-text;
+      stroke: $color-gray-20;
     }
   }
 
diff --git a/frontend/resources/styles/view/layouts/main-layout.scss b/frontend/resources/styles/view/layouts/main-layout.scss
index 9f32f19a2..67f481510 100644
--- a/frontend/resources/styles/view/layouts/main-layout.scss
+++ b/frontend/resources/styles/view/layouts/main-layout.scss
@@ -16,8 +16,8 @@
 }
 
 .view-nav {
-  background-color: $primary-ui-bg;
-  border-top: 1px solid $soft-ui-border;
+  background-color: $color-gray-50;
+  border-top: 1px solid $color-gray-60;
   border-right: 0;
   display: flex;
   flex-shrink: 0;
@@ -25,7 +25,7 @@
   width: 100%;
 
   @include bp(tablet) {
-    border-right: 1px solid $soft-ui-border;
+    border-right: 1px solid $color-gray-60;
     border-top: 0;
     height: 100%;
     width: 70px;
@@ -44,7 +44,7 @@
 
   li {
     align-items: center;
-    background-color: $secondary-ui-bg;
+    background-color: $color-gray-60;
     border: 1px solid transparent;
     border-radius: $br-small;
     cursor: pointer;
@@ -61,18 +61,18 @@
     }
 
     svg {
-      fill: $intense-ui-icons;
+      fill: $color-gray-20;
       height: 24px;
       width: 24px;
     }
 
     &:hover {
-      background-color: $dark-ui-bg;
-      border-color: $soft-ui-border;
+      background-color: $color-gray-10;
+      border-color: $color-gray-60;
     }
 
     &.selected {
-      background-color: $main-ui-color;
+      background-color: $color-primary;
 
       svg {
         fill: $color-white;
@@ -85,8 +85,8 @@
 }
 
 .view-sitemap {
-  background-color: $primary-ui-bg;
-  border-top: 1px solid $soft-ui-border;
+  background-color: $color-gray-50;
+  border-top: 1px solid $color-gray-60;
   border-right: 0;
   display: flex;
   flex-direction: column;
@@ -96,13 +96,13 @@
   overflow: scroll;
 
   .sitemap-title {
-    border-bottom: 1px solid $soft-ui-border;
+    border-bottom: 1px solid $color-gray-60;
     padding: $small;
     font-weight: bold;
   }
 
   @include bp(tablet) {
-    border-right: 1px solid $soft-ui-border;
+    border-right: 1px solid $color-gray-60;
     border-top: 0;
     height: 100%;
     width: 220px;
@@ -116,7 +116,7 @@
 
   li {
     align-items: center;
-    border-bottom: 1px solid $soft-ui-border;
+    border-bottom: 1px solid $color-gray-60;
     cursor: pointer;
     display: flex;
     flex-direction: row;
@@ -126,7 +126,7 @@
     .page-icon {
 
       svg {
-        fill: $medium-ui-icons;
+        fill: $color-gray-30;
         height: 15px;
         margin-right: $x-small;
         width: 15px;
@@ -135,7 +135,7 @@
     }
 
     span {
-      color: $medium-ui-text;
+      color: $color-gray-20;
       font-size: $fs14;
       max-width: 75%;
       overflow-x: hidden;
@@ -151,13 +151,13 @@
       a {
 
         svg {
-          fill: $soft-ui-icons;
+          fill: $color-gray-60;
           height: 15px;
           margin-left: $x-small;
           width: 15px;
 
           &:hover {
-            fill: $intense-ui-icons;
+            fill: $color-gray-20;
           }
 
         }
@@ -171,13 +171,13 @@
       .page-icon {
 
         svg {
-          fill: $main-ui-color;
+          fill: $color-primary;
         }
 
       }
 
       span {
-        color: $main-ui-color;
+        color: $color-primary;
       }
 
     }
@@ -187,13 +187,13 @@
       .page-icon {
 
         svg {
-          fill: $main-ui-color;
+          fill: $color-primary;
         }
 
       }
 
       span {
-        color: $main-ui-color;
+        color: $color-primary;
         font-weight: bold;
       }
 
@@ -213,7 +213,7 @@
 }
 
 .view-canvas {
-  background-color: $secondary-ui-bg;
+  background-color: $color-gray-60;
   width: 100%;
   overflow: scroll;
   display: flex;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..48e341a09
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}