From e7ddd65ee267071445c8d89e74a1cf519bc14e4d Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <juan.delacruz@kaleidos.net>
Date: Fri, 19 Feb 2016 19:41:33 +0100
Subject: [PATCH] add new color theme variables

---
 resources/public/styles/base.scss             |  2 +-
 .../styles/dependencies/uxbox-theme.scss      | 36 +++++++++----------
 resources/public/styles/framework.scss        | 10 +++---
 .../public/styles/partials/dashboard-bar.scss |  4 +--
 .../public/styles/partials/main-bar.scss      | 20 +++++------
 .../partials/sidebar-element-options.scss     | 34 +++++++++---------
 .../public/styles/partials/sidebar-icons.scss |  4 +--
 .../styles/partials/sidebar-layers.scss       | 24 ++++++-------
 .../public/styles/partials/sidebar-tools.scss |  2 +-
 resources/public/styles/partials/sidebar.scss |  8 ++---
 .../public/styles/partials/workspace-bar.scss | 14 ++++----
 11 files changed, 78 insertions(+), 80 deletions(-)

diff --git a/resources/public/styles/base.scss b/resources/public/styles/base.scss
index 395f8b457..e9c70d172 100644
--- a/resources/public/styles/base.scss
+++ b/resources/public/styles/base.scss
@@ -1,6 +1,6 @@
 body {
   background-color: $secondary-ui-bg;
-  color: $light-ui-text;
+  color: $medium-ui-text;
   display: flex;
   flex-direction: column;
   font-family: "sourcesanspro", sans-serif;
diff --git a/resources/public/styles/dependencies/uxbox-theme.scss b/resources/public/styles/dependencies/uxbox-theme.scss
index 620522ebd..ee79e50a2 100644
--- a/resources/public/styles/dependencies/uxbox-theme.scss
+++ b/resources/public/styles/dependencies/uxbox-theme.scss
@@ -3,32 +3,30 @@
 
 // Main color
 $main-ui-color: $color-primary;
-$dark-main-ui-color: mix($main-ui-color, $color-black, $mix-percentage-dark);
+$intense-main-ui-color: darken($main-ui-color, 25%);
+
+$ui-flavour: #90969d;
 
 // Background colors
-$primary-ui-bg: $color-white;
-$secondary-ui-bg: $color-gray-lighter;
-$dark-ui-bg: $color-gray-light;
-$bg-ui-color:;
+$primary-ui-bg: #ffffff;
+$secondary-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
+$dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
 
 // Border color
-$dark-ui-border: $color-gray;
-$light-ui-border: $color-gray-light;
-$bright-ui-border: lighten($light-ui-border, 18%);
-$border-ui-color:;
+$intense-ui-border: $ui-flavour;
+$medium-ui-border: mix($ui-flavour, $color-white, $mix-percentage-light);
+$soft-ui-border: lighten($medium-ui-border, 18%);
 
 // Icon colors
-$dark-ui-icons: $color-gray-dark;
-$light-ui-icons: $color-gray-light;
-$bright-ui-icons: $color-gray-lighter;
-$icons-ui-color:;
+$intense-ui-icons: mix($ui-flavour, $color-black, $mix-percentage-dark);
+$medium-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-light);
+$soft-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-lighter);
 
 // Text colors
-$dark-ui-text: $color-gray-darker;
-$light-ui-text: $color-gray;
-$bright-ui-text: $color-gray-light;
-$text-ui-color:;
+$intense-ui-text: mix($ui-flavour, $color-black, $mix-percentage-darker);
+$medium-ui-text: $ui-flavour;
+$soft-ui-text: mix($ui-flavour, $color-white, $mix-percentage-light);
 
 // Canvas colors
-$canvas-bg: $color-gray-lighter;
-$scrollbar-bg: $color-gray-light;
+$canvas-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
+$scrollbar-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
diff --git a/resources/public/styles/framework.scss b/resources/public/styles/framework.scss
index a4c8b9ea9..3dacd55a5 100644
--- a/resources/public/styles/framework.scss
+++ b/resources/public/styles/framework.scss
@@ -686,7 +686,7 @@ input[type=range]::-webkit-slider-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $dark-ui-icons;
+  background: $intense-ui-icons;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -8px;
@@ -710,7 +710,7 @@ input[type=range]::-moz-range-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $dark-ui-icons;
+  background: $intense-ui-icons;
   cursor: pointer;
 }
 input[type=range]::-ms-track {
@@ -741,7 +741,7 @@ input[type=range]::-ms-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $dark-ui-icons;
+  background: $intense-ui-icons;
   cursor: pointer;
 }
 input[type=range]:focus::-ms-fill-lower {
@@ -782,7 +782,7 @@ input[type=range]:focus::-ms-fill-upper {
     &::after {
       background-color: $color-white;
       border-radius: $br-small;
-      color: $light-ui-text;
+      color: $medium-ui-text;
       content: attr(alt);
       font-size: $fs11;
       font-weight: bold;
@@ -820,7 +820,7 @@ input[type=range]:focus::-ms-fill-upper {
         background-color: rgba(255,255,255,.7);
         box-sizing: border-box;
         border-radius: 0;
-        color: $dark-ui-text;
+        color: $intense-ui-text;
         display: flex;
         height: 100%;
         justify-content: center;
diff --git a/resources/public/styles/partials/dashboard-bar.scss b/resources/public/styles/partials/dashboard-bar.scss
index a632e319d..a49425019 100644
--- a/resources/public/styles/partials/dashboard-bar.scss
+++ b/resources/public/styles/partials/dashboard-bar.scss
@@ -35,7 +35,7 @@
     .input-text {
       background: rgba(255,255,255,.4);
       border: 0;
-      color: $dark-ui-text;
+      color: $intense-ui-text;
       padding: 4px 8px;
       margin: 0;
       max-width: 160px;
@@ -50,7 +50,7 @@
       padding: 0 5px;
 
       svg {
-        fill: $light-ui-icons;
+        fill: $medium-ui-icons;
         height: 15px;
         transform: rotate(45deg);
         width: 15px;
diff --git a/resources/public/styles/partials/main-bar.scss b/resources/public/styles/partials/main-bar.scss
index 76abd0494..51191c3ed 100644
--- a/resources/public/styles/partials/main-bar.scss
+++ b/resources/public/styles/partials/main-bar.scss
@@ -10,7 +10,7 @@
   .main-logo {
 
     svg {
-      fill: $light-ui-icons;
+      fill: $medium-ui-icons;
       height: 40px;
       width: 120px;
     }
@@ -28,11 +28,11 @@
   li {
 
     a {
-      color: $bright-ui-text;
+      color: $soft-ui-text;
       padding: 1rem;
 
       &:hover {
-        color: $dark-ui-text;
+        color: $intense-ui-text;
       }
 
     }
@@ -40,7 +40,7 @@
     &.current {
 
       a {
-        color: $dark-ui-text;
+        color: $intense-ui-text;
       }
 
     }
@@ -57,7 +57,7 @@
   position: relative;
 
   span {
-    color: $light-ui-text;
+    color: $medium-ui-text;
     margin: $small;
   }
 
@@ -70,7 +70,7 @@
   .dropdown {
     background-color: $color-white;
     border-radius: $br-small;
-    border: 1px solid $bright-ui-border;
+    border: 1px solid $soft-ui-border;
     box-sizing: border-box;
     min-width: 150px;
     padding: 0 $small;
@@ -86,23 +86,23 @@
       padding: $small 0;
 
       svg {
-        fill: $light-ui-text;
+        fill: $medium-ui-text;
         height: 12px;
         width: 12px;
       }
 
       span {
-        color: $light-ui-text;
+        color: $medium-ui-text;
       }
 
       &:hover {
 
         span {
-          color: $dark-ui-text;
+          color: $intense-ui-text;
         }
 
         svg {
-          fill: $dark-ui-text;
+          fill: $intense-ui-text;
         }
 
       }
diff --git a/resources/public/styles/partials/sidebar-element-options.scss b/resources/public/styles/partials/sidebar-element-options.scss
index 3d5d1c969..271d9f3fe 100644
--- a/resources/public/styles/partials/sidebar-element-options.scss
+++ b/resources/public/styles/partials/sidebar-element-options.scss
@@ -3,7 +3,7 @@
 
   .element-icons {
     background-color: $primary-ui-bg;
-    border: 1px solid $bright-ui-border;
+    border: 1px solid $soft-ui-border;
     border-radius: $br-small;
     display: flex;
     height: 100%;
@@ -11,7 +11,7 @@
 
     li {
       align-items: center;
-      border-right: 1px solid $bright-ui-border;
+      border-right: 1px solid $soft-ui-border;
       border-radius: $br-small;
       cursor: pointer;
       display: flex;
@@ -20,7 +20,7 @@
       padding: $small;
 
       svg {
-        fill: $dark-ui-icons;
+        fill: $intense-ui-icons;
         height: 15px;
         width: 15px;
       }
@@ -51,13 +51,13 @@
   }
 
   .element-set {
-    color: $light-ui-text;
+    color: $medium-ui-text;
     margin-left: $x-small;
 
     .element-set-title {
       box-sizing: border-box;
-      border-bottom: 1px dashed $bright-ui-border;
-      color: $light-ui-text;
+      border-bottom: 1px dashed $soft-ui-border;
+      color: $medium-ui-text;
       font-weight: bold;
       padding: 2px $x-small;
       width: 100%;
@@ -74,32 +74,32 @@
 
   .input-text {
     background-color: transparent;
-    border-color: $bright-ui-border;
+    border-color: $soft-ui-border;
     box-sizing: border-box;
-    color: $dark-ui-text;
+    color: $intense-ui-text;
     font-size: $fs13;
     margin: $x-small;
     padding: $x-small;
     width: 100%;
 
     &:focus {
-      color: darken($dark-ui-text, 8%);
-      border-color: $dark-ui-border;
+      color: darken($intense-ui-text, 8%);
+      border-color: $intense-ui-border;
     }
 
   }
 
   .input-select {
-    color: $dark-ui-text;
+    color: $intense-ui-text;
 
     &:focus {
-      color: darken($dark-ui-text, 8%);
+      color: darken($intense-ui-text, 8%);
     }
 
   }
 
   span {
-    color: $light-ui-text;
+    color: $medium-ui-text;
     font-size: $fs12;
   }
 
@@ -108,7 +108,7 @@
     width: 20%;
 
     svg {
-      fill: $light-ui-text;
+      fill: $medium-ui-text;
       height: 15px;
       width: 15px;
 
@@ -141,12 +141,12 @@
 
   &.palette-th {
     align-items: center;
-    border: 2px solid $light-ui-icons;
+    border: 2px solid $medium-ui-icons;
     display: flex;
     justify-content: center;
 
     svg {
-      fill: $light-ui-icons;
+      fill: $medium-ui-icons;
       height: 18px;
       width: 18px;
     }
@@ -167,7 +167,7 @@
   cursor: pointer;
 
   svg {
-    fill: $light-ui-icons;
+    fill: $medium-ui-icons;
     height: 20px;
     margin: 5px 7px 0 7px;
     width: 20px;
diff --git a/resources/public/styles/partials/sidebar-icons.scss b/resources/public/styles/partials/sidebar-icons.scss
index e34a1bc05..108ca40a7 100644
--- a/resources/public/styles/partials/sidebar-icons.scss
+++ b/resources/public/styles/partials/sidebar-icons.scss
@@ -23,14 +23,14 @@
   width: 54px;
 
   svg {
-    fill: $dark-ui-icons;
+    fill: $intense-ui-icons;
     height: 40px;
     width: 40px;
   }
 
   &:hover {
     background-color: $color-white;
-    border-color: $bright-ui-border;
+    border-color: $soft-ui-border;
   }
 
   &.selected {
diff --git a/resources/public/styles/partials/sidebar-layers.scss b/resources/public/styles/partials/sidebar-layers.scss
index f9de1791a..31583803e 100644
--- a/resources/public/styles/partials/sidebar-layers.scss
+++ b/resources/public/styles/partials/sidebar-layers.scss
@@ -1,5 +1,5 @@
 .layers-tools {
-  border-top: 1px solid $light-ui-border;
+  border-top: 1px solid $medium-ui-border;
   bottom: 0;
   display: flex;
   height: 30px;
@@ -18,12 +18,12 @@
       cursor: pointer;
 
       svg {
-        fill: $light-ui-icons;
+        fill: $medium-ui-icons;
         height: 16px;
         width: 16px;
 
         &:hover {
-          fill: $dark-ui-text;
+          fill: $intense-ui-text;
         }
 
       }
@@ -79,14 +79,14 @@
 
     .element-list-body {
       align-items: center;
-      border-bottom: 1px solid $bright-ui-border;
+      border-bottom: 1px solid $soft-ui-border;
       box-sizing: border-box;
       display: flex;
       padding: $small;
       width: 100%;
 
       svg {
-        fill: $bright-ui-icons;
+        fill: $soft-ui-icons;
         height: 13px;
         margin-right: 8px;
         width: 13px;
@@ -103,7 +103,7 @@
       .sublevel-element {
 
         svg {
-          fill: $light-ui-icons;
+          fill: $medium-ui-icons;
         }
 
       }
@@ -113,7 +113,7 @@
         width: 12px;
 
         svg {
-          fill: $dark-ui-icons;
+          fill: $intense-ui-icons;
           transform: rotate(90deg);
           width: 12px;
         }
@@ -125,7 +125,7 @@
         &:hover {
 
           svg {
-            fill: $light-ui-icons;
+            fill: $medium-ui-icons;
           }
 
         }
@@ -150,7 +150,7 @@
       }
 
       span {
-        color: $light-ui-text;
+        color: $medium-ui-text;
         font-size: $fs13;
         overflow-x: hidden;
         text-overflow: ellipsis;
@@ -176,7 +176,7 @@
       .selected {
 
         svg {
-          fill: $dark-ui-icons;
+          fill: $intense-ui-icons;
         }
 
       }
@@ -187,13 +187,13 @@
         .element-icon {
 
           svg {
-            fill: $dark-ui-icons;
+            fill: $intense-ui-icons;
           }
 
         }
 
         span {
-          color: $dark-ui-text;
+          color: $intense-ui-text;
         }
 
       }
diff --git a/resources/public/styles/partials/sidebar-tools.scss b/resources/public/styles/partials/sidebar-tools.scss
index f92f6bc48..d4fd41f46 100644
--- a/resources/public/styles/partials/sidebar-tools.scss
+++ b/resources/public/styles/partials/sidebar-tools.scss
@@ -15,7 +15,7 @@
   width: 54px;
 
   svg {
-    fill: $dark-ui-icons;
+    fill: $intense-ui-icons;
     height: 35px;
     width: 35px;
   }
diff --git a/resources/public/styles/partials/sidebar.scss b/resources/public/styles/partials/sidebar.scss
index f6f6397be..ecd8443bc 100644
--- a/resources/public/styles/partials/sidebar.scss
+++ b/resources/public/styles/partials/sidebar.scss
@@ -23,7 +23,7 @@
     height: 100%;
 
     .tool-window {
-      border-bottom: 1px solid $light-ui-border;
+      border-bottom: 1px solid $medium-ui-border;
       display: flex;
       flex-direction: column;
       flex: 1;
@@ -31,19 +31,19 @@
 
       .tool-window-bar {
         align-items: center;
-        border-bottom: 1px solid $light-ui-border;
+        border-bottom: 1px solid $medium-ui-border;
         display: flex;
         flex-shrink: 0;
         padding: 2px $x-small;
 
         svg {
-          fill: $dark-ui-icons;
+          fill: $intense-ui-icons;
           height: 12px;
           width: 12px;
         }
 
         span {
-          color: $dark-ui-text;
+          color: $intense-ui-text;
           font-weight: bold;
         }
 
diff --git a/resources/public/styles/partials/workspace-bar.scss b/resources/public/styles/partials/workspace-bar.scss
index 459964760..8ad0b8c47 100644
--- a/resources/public/styles/partials/workspace-bar.scss
+++ b/resources/public/styles/partials/workspace-bar.scss
@@ -1,7 +1,7 @@
 .workspace-bar {
   align-items: center;
   background-color: $primary-ui-bg;
-  border-bottom: 1px solid  $bright-ui-border;
+  border-bottom: 1px solid  $soft-ui-border;
   display: flex;
   height: 40px;
   padding: $x-small $medium $x-small 65px;
@@ -24,7 +24,7 @@
       height: 35px;
 
       svg {
-        fill: $light-ui-icons;
+        fill: $medium-ui-icons;
         height: 35px;
         width: 35px;
 
@@ -53,14 +53,14 @@
     padding: $x-small $x-big+$x-small $x-small $medium;
 
     svg {
-      fill: $dark-ui-icons;
+      fill: $intense-ui-icons;
       height: 20px;
       margin-right: $small;
       width: 20px;
     }
 
     span {
-      color: $dark-ui-text;
+      color: $intense-ui-text;
       overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -86,7 +86,7 @@
 
     .options-btn {
       align-items: center;
-      border-right: 1px solid $bright-ui-border;
+      border-right: 1px solid $soft-ui-border;
       display: flex;
       margin: 0;
 
@@ -112,14 +112,14 @@
         }
 
         svg {
-          fill: $dark-ui-icons;
+          fill: $intense-ui-icons;
           height: 18px;
           width: 18px;
         }
 
         &:hover {
           background-color: $color-white;
-          border-color: $bright-ui-border;
+          border-color: $soft-ui-border;
         }
 
         &.selected {