From a739343df5a8e365bf05182cef1ff8de93db51ff Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <juan.delacruz@kaleidos.net>
Date: Tue, 14 Apr 2020 10:15:39 +0200
Subject: [PATCH] Change color variables

---
 .../styles/common/dependencies/colors-v2.scss |   75 --
 .../styles/common/dependencies/colors.scss    |   32 +-
 .../resources/styles/common/framework-v2.scss | 1091 -----------------
 .../resources/styles/common/framework.scss    |   12 +-
 .../styles/main/layouts/library-page.scss     |   10 +-
 .../resources/styles/main/layouts/login.scss  |    8 +-
 .../styles/main/partials/activity-bar.scss    |    8 +-
 .../styles/main/partials/color-palette.scss   |   44 +-
 .../styles/main/partials/dashboard-grid.scss  |   23 +-
 .../styles/main/partials/editable-label.scss  |    2 +-
 .../styles/main/partials/library-bar.scss     |    8 +-
 .../styles/main/partials/lightbox.scss        |   16 +-
 .../styles/main/partials/project-bar.scss     |   10 +-
 .../main/partials/sidebar-align-options.scss  |    4 +-
 .../partials/sidebar-element-options.scss     |    2 +-
 .../styles/main/partials/tool-bar.scss        |    4 +-
 .../styles/main/partials/user-settings.scss   |    2 +-
 .../styles/main/partials/workspace.scss       |    2 +-
 18 files changed, 93 insertions(+), 1260 deletions(-)
 delete mode 100644 frontend/resources/styles/common/dependencies/colors-v2.scss
 delete mode 100644 frontend/resources/styles/common/framework-v2.scss

diff --git a/frontend/resources/styles/common/dependencies/colors-v2.scss b/frontend/resources/styles/common/dependencies/colors-v2.scss
deleted file mode 100644
index f9bbb6da0..000000000
--- a/frontend/resources/styles/common/dependencies/colors-v2.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-
-// Colors
-$color-white: #ffffff;
-$color-black: #000000;
-$color-gray: #90969d;
-
-// Main color
-$color-primary: #78dbbe;
-
-// Secondary colors
-$color-success: #b6dd75;
-$color-complete : #a599c6;
-$color-warning: #e6a16f;
-$color-danger: #de4762;
-$color-info: #59b9e2;
-
-// Mixing Color varriable for creating both light and dark colors
-$mix-percentage-dark: 81%;
-$mix-percentage-darker: 60%;
-$mix-percentage-light: 80%;
-$mix-percentage-lighter: 20%;
-
-// Gray scale
-$color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
-$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
-$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
-$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
-
-// Lighter colors
-$color-success-light: mix($color-success, $color-white, $mix-percentage-light);
-$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);
-
-$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light);
-$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter);
-
-$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light);
-$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter);
-
-$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light);
-$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter);
-
-$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light);
-$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter);
-
-$color-info-light: mix($color-info, $color-white, $mix-percentage-light);
-$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter);
-
-// Darker colors
-$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark);
-$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker);
-
-$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark);
-$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker);
-
-$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark);
-$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker);
-
-$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark);
-$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker);
-
-$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark);
-$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);
-
-$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);
-$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker);
-
-// bg transparent
-$color-dark-bg: rgba(0,0,0,.4);
-$color-light-bg: rgba(255,255,255,.6);
diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
index 1e61ede39..faaf930ae 100644
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ b/frontend/resources/styles/common/dependencies/colors.scss
@@ -2,25 +2,32 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 // Colors
 $color-white: #ffffff;
 $color-black: #000000;
-$color-gray: #90969d;
 $color-canvas: #E8E9EA;
 
 // Main color
 $color-primary: #31EFB8;
 
 // Secondary colors
-$color-success: #b6dd75;
+$color-success: #49D793;
 $color-complete : #a599c6;
-$color-warning: #e6a16f;
-$color-danger: #de4762;
+$color-warning: #FC8802;
+$color-danger: #E65244;
 $color-info: #59b9e2;
 
+// Gray scale
+$color-gray-10: #E3E3E3;
+$color-gray-20: #b1b2b5;
+$color-gray-30: #7B7D85;
+$color-gray-40: #64666A;
+$color-gray-50: #303236; 
+$color-gray-60: #1F1F1F;
+
 // Mixing Color variable for creating both light and dark colors
 $mix-percentage-dark: 81%;
 $mix-percentage-darker: 60%;
@@ -28,19 +35,6 @@ $mix-percentage-light: 80%;
 $mix-percentage-lighter: 20%;
 $mix-percentage-lightest: 10%;
 
-// Gray scale
-$color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
-$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
-$color-gray-lightest: mix($color-gray, $color-white, $mix-percentage-lightest);
-$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
-$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
-$color-gray-10: #E3E3E3;
-$color-gray-20: #b1b2b5;
-$color-gray-30: #7B7D85;
-$color-gray-40: #64666A;
-$color-gray-50: #303236; 
-$color-gray-60: #1F1F1F;
-
 // Lighter colors
 $color-success-light: mix($color-success, $color-white, $mix-percentage-light);
 $color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);
diff --git a/frontend/resources/styles/common/framework-v2.scss b/frontend/resources/styles/common/framework-v2.scss
deleted file mode 100644
index c310432d8..000000000
--- a/frontend/resources/styles/common/framework-v2.scss
+++ /dev/null
@@ -1,1091 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-
-// Buttons
-
-%btn {
-  appearance: none;
-  align-items: stretch;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  display: flex;
-  font-size: $fs16;
-  font-weight: bold;
-  justify-content: center;
-  padding: 1rem;
-  transition: all .4s;
-  &.btn-big {
-    padding: 2rem 1rem;
-  }
-  &.btn-noshr {
-    flex-shrink: 0;
-  }
-  &.btn-small {
-    font-size: $fs14;
-    padding: .7rem 1rem;
-    line-height: 1.15;
-  }
-}
-
-.btn-primary {
-  @extend %btn;
-  align-items: center;
-  background: $color-primary;
-  color: $color-white;
-  justify-content: center;
-  display: flex;
-  padding: 1rem;
-  &:hover {
-    background: $color-primary-dark;
-    color: $color-white;
-  }
-}
-
-.btn-success {
-  @extend %btn;
-  background: $color-success;
-  color: $color-white;
-  &:hover {
-    background: $color-success-dark;
-    color: $color-white;
-  }
-}
-
-.btn-delete {
-  @extend %btn;
-  background: $color-danger;
-  color: $color-white;
-  &:hover {
-    background: $color-danger-dark;
-    color: $color-white;
-  }
-}
-
-.btn-gray {
-  @extend %btn;
-  background: $color-gray;
-  color: $color-white;
-  &:hover {
-    background: $color-gray-dark;
-  }
-}
-
-.btn-complete {
-  @extend %btn;
-  background: $color-complete;
-  color: $color-white;
-  &:hover {
-    background: $color-complete-dark;
-    color: $color-white;
-  }
-}
-
-.btn-transparent {
-  @extend %btn;
-  background: transparent;
-  border: 2px solid $color-white;
-  color: $color-white;
-  &:hover {
-    background: $color-white;
-    color: $color-info-dark;
-  }
-}
-.btn-large {
-  flex-grow: 3;
-  max-width: 400px;
-  flex-basis: 60%;
-  width: 100%;
-}
-
-.btn-option {
-  display: flex;
-  a {
-    margin-right: .5rem;
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-  &.column {
-    flex-direction: column;
-    a {
-      margin-bottom: .5rem;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  &.mr-small {
-    margin: 1rem 0;
-  }
-  &.btn-option-400 {
-    margin: 0 auto;
-    max-width: 400px;
-  }
-  &.mb {
-    margin-bottom: .5rem;
-  }
-}
-
-input[type=button][disabled],
-.btn-disabled {
-  opacity: .5;
-  pointer-events: none;
-}
-
-// Text color
-
-.text-error {
-  background-color: $color-danger;
-  border-radius: 3px;
-  color: $color-danger-lighter;
-  padding: 3px 6px;
-}
-
-.text-success {
-  background-color: $color-success;
-  border-radius: 3px;
-  color: $color-white;
-  padding: 3px 6px;
-}
-
-.text-warning {
-  background-color: $color-warning;
-  border-radius: 3px;
-  color: $color-white;
-  padding: 3px 6px;
-}
-
-.text-info {
-  background-color: $color-complete;
-  border-radius: 3px;
-  color: $color-white;
-  padding: 3px 6px;
-}
-
-// Slider dots
-
-ul.slider-dots {
-  align-items: center;
-  display: flex;
-
-  li {
-    background-color: transparent;
-    border-radius: 50%;
-    border: 2px solid $color-white;
-    cursor: pointer;
-    height: 12px;
-    flex-shrink: 0;
-    margin: 6px;
-    width: 12px;
-
-    &.current,
-    &:hover {
-      background-color: $color-gray-10;
-    }
-
-  }
-
-  &.dots-purple {
-
-    li {
-      border-color: $color-complete;
-
-      &.current,
-      &:hover {
-        background-color: $color-complete;
-      }
-
-    }
-
-  }
-
-}
-
-// Doted list
-
-.doted-list {
-
-  li {
-    align-items: center;
-    display: flex;
-    padding: $small 0;
-
-    &::before {
-      background-color: $color-complete;
-      border-radius: 50%;
-      content: "";
-      flex-shrink: 0;
-      height: 10px;
-      margin-right: 6px;
-      width: 10px;
-    }
-
-    &.not-included {
-      text-decoration: line-through;
-    }
-
-  }
-
-}
-
-// Tags
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  .tag  {
-    background-color: $color-gray-light;
-    border-radius: 3px;
-    color: $color-white;
-    cursor: pointer;
-    font-size: $fs14;
-    font-weight: bold;
-    margin: 0 $small $small 0;
-    padding: 4px 8px;
-    text-transform: uppercase;
-
-    &:hover {
-      background-color: $color-gray-dark;
-    }
-
-    &.tag-primary {
-      background-color: $color-primary;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-primary-dark;
-      }
-
-    }
-
-    &.tag-green {
-      background-color: $color-success;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-success-dark;
-      }
-
-    }
-
-    &.tag-purple {
-      background-color: $color-complete;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-complete-dark;
-      }
-
-    }
-
-    &.tag-orange {
-      background-color: $color-warning;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-warning-dark;
-      }
-
-    }
-
-    &.tag-red {
-      background-color: $color-danger;
-      color: $color-white;
-
-      &:hover {
-        background-color: $color-danger-dark;
-      }
-
-    }
-
-  }
-
-}
-
-// Input elements
-.input-element {
-  display: flex;
-  position: relative;
-  width: 100%;
-
-  &::after {
-    color: $color-gray-10;
-    font-size: $fs12;
-    height: 20px;
-    position: absolute;
-    right: 3px;
-    top: 26%;
-    width: 20px;
-  }
-
-  // Input amounts
-
-  &.pixels {
-
-    &::after {
-      content: "px";
-    }
-
-  }
-
-  &.percentail {
-
-    &::after {
-      content: "%";
-    }
-
-  }
-
-  &.miliseconds {
-
-    &::after {
-      content: "ms";
-    }
-
-  }
-
-  &.degrees {
-
-    &::after {
-      content: "dg";
-    }
-
-  }
-
-}
-
-input,
-select {
-  background-color: $color-gray-50;
-  box-sizing: border-box;
-  color: $color-gray-60;
-  font-family: "sourcesanspro", sans-serif;
-  font-size: $fs16;
-  margin-bottom: $medium;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  box-sizing: border-box;
-  cursor: pointer;
-  line-height: normal;
-  margin-top: 1px 0 0;
-}
-
-input:focus,
-select:focus,
-textarea:focus,
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-  box-shadow: none;
-  outline: none;
-}
-
-.form-errors {
-  color: $color-danger;
-}
-
-// Input text
-
-.input-text {
-  border: none;
-  border-bottom: 1px solid $color-gray-60;
-  background-color: $color-gray-50;
-  box-shadow: none;
-  outline: none;
-  padding: $small $big $small $small;
-  position: relative;
-
-  @include placeholder {
-    transition: all .3s ease;
-  }
-
-  &:focus {
-    border-color: $color-gray-40;
-    box-shadow: none;
-
-    @include placeholder {
-      opacity: 0;
-      transform: translateY(-20px);
-      transition: all .3s ease;
-    }
-
-  }
-
-  &.success {
-    background-color: $color-success-lighter;
-    border-color: $color-success;
-    color: $color-success-dark;
-  }
-
-  &.error {
-    background-color: $color-danger-lighter;
-    border-color: $color-danger;
-    color: $color-danger-dark;
-  }
-
-}
-
-// Element-name
-
-input.element-name {
-  border: 1px solid $color-gray-60;
-  border-radius: $br-small;
-  font-size: $fs13;
-  margin: 0px;
-  padding: 3px;
-  width: 100%;
-}
-
-// Input select
-
-.input-select {
-  @extend .input-text;
-  background-image: url("/images/svg/arrow-down.svg");
-  background-repeat: no-repeat;
-  background-position: 95% 48%;
-  background-size: 10px;
-  cursor: pointer;
-
-  &.small {
-    padding: $x-small $big $x-small $x-small;
-  }
-
-}
-
-
-// Input radio
-
-.input-radio,
-.input-checkbox {
-  align-items: center;
-  display: flex;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  padding-left: 0px;
-
-  label{
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    margin-right: 15px;
-    font-size: 13px;
-
-    &:before{
-      content:"";
-      width: 20px;
-      height: 20px;
-      margin-right: 10px;
-      background-color: $color-gray-50;
-      border: 1px solid $color-gray-60;
-      box-shadow: inset 0 0 0 0 $color-primary ;
-      box-sizing: border-box;
-    }
-
-  }
-
-  &.column {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-}
-
-.input-radio {
-
-  label {
-    margin-bottom: 6px;
-
-    &:before {
-      border-radius: 99px;
-      transition: box-shadow 0.2s linear 0s, color 0.2s linear 0s;
-    }
-
-  }
-
-  input[type=radio]:checked {
-
-    & + label {
-
-      &:before {
-        box-shadow: inset 0 0 0 5px $color-gray-light ;
-      }
-
-    }
-
-  }
-
-  input[type=radio] {
-    display: none;
-  }
-
-  input[type=radio][disabled] {
-
-    & + label {
-      opacity: 0.65;
-    }
-
-  }
-
-}
-input[type=radio]:checked + label:before{
-
-  .input-radio.radio-success &{
-    box-shadow: inset 0 0 0 5px $color-success;
-  }
-
-  .input-radio.radio-primary &{
-    box-shadow: inset 0 0 0 5px $color-primary;
-  }
-
-  .input-radio.radio-info &{
-    box-shadow: inset 0 0 0 5px $color-info;
-  }
-
-  .input-radio.radio-warning &{
-    box-shadow: inset 0 0 0 5px $color-warning;
-  }
-
-  .input-radio.radio-danger &{
-    box-shadow: inset 0 0 0 5px $color-danger;
-  }
-
-  .input-radio.radio-complete &{
-    box-shadow: inset 0 0 0 5px $color-complete;
-  }
-
-}
-
-// Input checkbox
-
-.input-checkbox {
-
-  input[type=radio][disabled] {
-
-    & + label {
-
-      &:after {
-        background-color: $color-gray-lighter;
-      }
-
-    }
-
-  }
-
-  label {
-    transition: border 0.2s linear 0s, color 0.2s linear 0s;
-    white-space: nowrap;
-    position: relative;
-
-    &:before {
-      top: 1.4px;
-      border-radius: 3px;
-      transition: border 0.2s linear 0s, color 0.2s linear 0s;
-    }
-
-    &::after {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      position: absolute;
-      left: 3.2px;
-      top: 0px;
-      font-size: 11px;
-      transition: border 0.2s linear 0s, color 0.2s linear 0s;
-    }
-
-    &:after {
-      border-radius: 3px;
-    }
-
-  }
-
-  input[type=checkbox] {
-    display: none;
-  }
-
-  &.checkbox-circle {
-
-    label {
-
-      &:after {
-        border-radius: 99px;
-      }
-
-      &:before {
-        border-radius: 99px;
-      }
-
-    }
-
-  }
-
-  input[type=checkbox]:checked {
-
-    & + label {
-
-      &:before {
-        border-width: 10px;
-      }
-
-      &::after {
-        content:"✓";
-        color: #fff;
-        font-size: 16px;
-      }
-
-    }
-
-  }
-
-  input[type=checkbox][disabled] {
-
-    & + label {
-      opacity: 0.65;
-
-      &:before {
-        background-color: #eceff3;
-      }
-
-    }
-
-  }
-
-  &.right {
-
-    label {
-      margin-right: 35px;
-      padding-left:0 !important;
-
-      &:before {
-        right:-35px;
-        left:auto;
-      }
-
-    }
-
-    input[type=checkbox]:checked {
-
-      & + label {
-        position: relative;
-
-        &::after {
-          content:"✓";
-          position: absolute;
-          right: -27px;
-          left: auto;
-        }
-
-      }
-
-    }
-
-  }
-
-}
-
-input[type=checkbox]:checked + label{
-
-  .input-checkbox.check-success &:before{
-    border-color: $color-success;
-  }
-
-  .input-checkbox.check-primary &:before{
-    border-color: $color-primary;
-  }
-
-  .input-checkbox.check-complete &:before{
-    border-color: $color-complete;
-  }
-
-  .input-checkbox.check-warning &:before{
-    border-color: $color-warning;
-  }
-
-  .input-checkbox.check-danger &:before{
-    border-color: $color-danger;
-  }
-
-  .input-checkbox.check-info &:before{
-    border-color: $color-info;
-  }
-
-  .input-checkbox.check-success &::after,
-  .input-checkbox.check-primary &::after,
-  .input-checkbox.check-complete &::after,
-  .input-checkbox.check-warning &::after,
-  .input-checkbox.check-danger &::after,
-  .input-checkbox.check-info &::after {
-    color: $color-white;
-  }
-
-}
-
-// Input slidebar
-
-input[type=range] {
-  background-color: transparent;
-  -webkit-appearance: none;
-  margin: 10px 0;
-  width: 100%;
-}
-input[type=range]:focus {
-  outline: none;
-}
-input[type=range]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 8px;
-  cursor: pointer;
-  animate: 0.2s;
-  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  background: $color-gray-60;
-  border-radius: 25px;
-  border: 0px solid #000101;
-}
-input[type=range]::-webkit-slider-thumb {
-  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  border: 0px solid #000000;
-  height: 24px;
-  width: 8px;
-  border-radius: 7px;
-  background: $color-gray-20;
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -8px;
-}
-input[type=range]:focus::-webkit-slider-runnable-track {
-  background: $color-gray-60;
-}
-input[type=range]::-moz-range-track {
-  width: 100%;
-  height: 8px;
-  cursor: pointer;
-  animate: 0.2s;
-  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  background: $color-gray-60;
-  border-radius: 25px;
-  border: 0px solid #000101;
-}
-input[type=range]::-moz-range-thumb {
-  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  border: 0px solid #000000;
-  height: 24px;
-  width: 8px;
-  border-radius: 7px;
-  background: $color-gray-20;
-  cursor: pointer;
-}
-input[type=range]::-ms-track {
-  width: 100%;
-  height: 8px;
-  cursor: pointer;
-  animate: 0.2s;
-  background: transparent;
-  border-color: transparent;
-  border-width: 39px 0;
-  color: transparent;
-}
-input[type=range]::-ms-fill-lower {
-  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: $color-gray-60;
-  border: 0px solid #000101;
-  border-radius: 50px;
-  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-}
-input[type=range]::-ms-thumb {
-  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  border: 0px solid #000000;
-  height: 24px;
-  width: 8px;
-  border-radius: 7px;
-  background: $color-gray-20;
-  cursor: pointer;
-}
-input[type=range]:focus::-ms-fill-lower {
-  background: $color-gray-60;
-}
-input[type=range]:focus::-ms-fill-upper {
-  background: $color-gray-60;
-}
-
-// Scroll bar (chrome)
-
-::-webkit-scrollbar {
-    background-color: transparent;
-    cursor: pointer;
-    height: 8px;
-    width: 8px;
-}
-::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background-color: $color-gray-20;
-
-    &:hover {
-      background-color: darken($color-gray-20, 14%);
-      outline: 2px solid $color-primary;
-    }
-
-}
-
-// Tooltip
-
-.tooltip {
-  position: relative;
-
-  &:hover {
-
-    &::after {
-      background-color: $color-gray-50;
-      border-radius: $br-small;
-      color: $color-gray-20;
-      content: attr(alt);
-      font-size: $fs11;
-      font-weight: bold;
-      padding: $x-small;
-      position: absolute;
-      left: 130%;
-      text-align: center;
-      top: 0;
-      white-space: nowrap;
-      z-index: 20;
-      @include animation(.3s,.6s,fadeIn);
-    }
-
-  }
-
-  &.tooltip-bottom {
-
-    &:hover {
-
-      &::after {
-        left: -100%;
-        top: 130%;
-      }
-
-    }
-
-  }
-
-  &.tooltip-top {
-
-    &:hover {
-
-      &::after {
-        top: -165%;
-        left: -60%;
-      }
-
-    }
-
-  }
-
-  &.tooltip-hover {
-
-    &:hover {
-
-      &::after {
-        align-items: center;
-        background-color: $color-gray-50;
-        box-sizing: border-box;
-        border-radius: 0;
-        color: $color-gray-60;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        left: 0;
-        top: 0;
-        white-space: normal;
-        width: 100%;
-      }
-
-    }
-
-  }
-
-}
-
-// Messages
-.message {
-  position: fixed;
-  top: 0;
-  left: 0px;
-  width: 100%;
-  z-index: 12;
-  @include animation(0, 1s, fadeInDown);
-
-  .message-body {
-    align-items: center;
-    border-radius: $br-small;
-    border-bottom: 3px solid transparent;
-    color: $color-white;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: 0 auto;
-    padding: $medium $big;
-    position: relative;
-    width: 100%;
-
-    span {
-      font-size: $fs18;
-      max-width: 60%;
-      text-align: center;
-      width: 100%;
-    }
-
-    .close {
-      cursor: pointer;
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      opacity: .3;
-      width: 18px;
-
-      svg {
-        fill: $color-black;
-        height: 18px;
-        width: 18px;
-        transform: rotate(45deg);
-      }
-
-      &:hover {
-        opacity: .8;
-      }
-
-    }
-
-    .message-action {
-      align-items: center;
-      display: flex;
-      justify-content: space-around;
-      margin-top: $medium;
-      max-width: 60%;
-      width: 100%;
-    }
-
-  }
-
-  &.error {
-
-    .message-body {
-      background-color: $color-danger;
-      border-color: $color-danger-dark;
-    }
-
-  }
-
-  &.success {
-
-    .message-body {
-      background-color: $color-success;
-      border-color: $color-success-dark;
-    }
-
-  }
-
-  &.info {
-
-    .message-body {
-      background-color: $color-info;
-      border-color: $color-info-dark;
-    }
-
-  }
-
-  &.quick {
-
-    .message-body {
-
-      .close {
-        display: none;
-      }
-
-    }
-
-  }
-
-  &.hide-message {
-    @include animation(0, .6s, fadeOutUp);
-  }
-
-}
-
-.message-version {
-  align-items: center;
-  background-color: rgba(27, 170, 214, .6);
-  border-radius: $br-small;
-  color: $color-white;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: $small;
-  position: absolute;
-  right: 250px;
-  top: 40px;
-  @include animation(0, 1s, fadeInDown);
-
-  span {
-    font-size: $fs13;
-    font-weight: bold;
-  }
-
-  .message-action {
-    align-items: center;
-    display: flex;
-    justify-content: space-around;
-    margin-top: $small;
-    width: 100%;
-
-    .btn-transparent {
-      font-size: $fs12;
-      padding: .3rem .5rem;
-    }
-
-  }
-
-  &.hide-message {
-    @include animation(0, .6s, fadeOutUp);
-  }
-
-}
-
-.close-bezier {
-  fill: $color-danger;
-  stroke: $color-danger-dark;
-  stroke-width: 2px;
-  cursor: pointer;
-  &:hover {
-    fill: $color-white;
-  }
-}
-
-.message-inline {
-  background-color: $color-info;
-  color: $color-info-darker;
-  margin-bottom: 1.2rem;
-  padding: .8rem;
-  text-align: center;
-  p {
-    margin: 0;
-  }
-}
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index 762012e46..02022aa2f 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -67,10 +67,10 @@
 
 .btn-gray {
   @extend %btn;
-  background: $color-gray;
+  background: $color-gray-30;
   color: $color-white;
   &:hover {
-    background: $color-gray-dark;
+    background: $color-gray-40;
   }
 }
 
@@ -259,7 +259,7 @@ ul.slider-dots {
   }
 
   .tag  {
-    background-color: $color-gray-light;
+    background-color: $color-gray-20;
     border-radius: 3px;
     color: $color-white;
     cursor: pointer;
@@ -270,7 +270,7 @@ ul.slider-dots {
     text-transform: uppercase;
 
     &:hover {
-      background-color: $color-gray-dark;
+      background-color: $color-gray-40;
     }
 
     &.tag-primary {
@@ -539,7 +539,7 @@ input.element-name {
     & + label {
 
       &:before {
-        box-shadow: inset 0 0 0 5px $color-gray-light ;
+        box-shadow: inset 0 0 0 5px $color-gray-20 ;
       }
 
     }
@@ -596,7 +596,7 @@ input[type=radio]:checked + label:before{
     & + label {
 
       &:after {
-        background-color: $color-gray-lighter;
+        background-color: $color-gray-10;
       }
 
     }
diff --git a/frontend/resources/styles/main/layouts/library-page.scss b/frontend/resources/styles/main/layouts/library-page.scss
index 7510797c7..d2b50457d 100644
--- a/frontend/resources/styles/main/layouts/library-page.scss
+++ b/frontend/resources/styles/main/layouts/library-page.scss
@@ -4,7 +4,7 @@
     grid-template-rows: 40px 1fr;
     grid-template-columns: 14.5rem 1fr;
     grid-template-areas: "header header" "sidebar content";
-    border-right: 1px solid $color-gray;
+    border-right: 1px solid $color-gray-30;
 
     & .main-bar {
         grid-area: header;
@@ -47,7 +47,7 @@
 
 .library-header-navigation-item {
     margin: 0 $size-6;
-    color: $color-gray;
+    color: $color-gray-30;
     text-transform: uppercase;
     border-bottom: 1px solid transparent;
     
@@ -257,7 +257,7 @@
 }
 
 .library-card-footer {
-    border-top: 1px solid $color-gray-lighter;
+    border-top: 1px solid $color-gray-10;
     padding: $size-2 $size-2 $size-2 $size-4;
     display: grid;
     grid-template-rows: 50% 50%;
@@ -289,7 +289,7 @@
 }
 
 .library-card-footer-color-label {
-    color: $color-gray;
+    color: $color-gray-30;
     margin-right: 0.25rem;
 }
 
@@ -326,7 +326,7 @@
 
     & .sketch-picker {
         box-shadow: none !important;
-        border: 1px solid $color-gray-lighter !important;
+        border: 1px solid $color-gray-10 !important;
         border-radius: 0 !important;
 
         & input {
diff --git a/frontend/resources/styles/main/layouts/login.scss b/frontend/resources/styles/main/layouts/login.scss
index 6028a356d..ff49584ba 100644
--- a/frontend/resources/styles/main/layouts/login.scss
+++ b/frontend/resources/styles/main/layouts/login.scss
@@ -7,7 +7,7 @@
 
 .login {
   align-items: center;
-  background-color: $color-gray-dark;
+  background-color: $color-gray-40;
   background-image: url("/images/login-bg.jpg");
   background-position: center;
   background-repeat: no-repeat;
@@ -45,7 +45,7 @@
         margin-bottom: $big*2;
 
         @include placeholder {
-          color: $color-gray;
+          color: $color-gray-30;
         }
 
         &:hover {
@@ -58,7 +58,7 @@
 
         &:focus {
           background-color: $color-white;
-          border-color: $color-gray-lighter;
+          border-color: $color-gray-10;
         }
 
         &.success {
@@ -87,7 +87,7 @@
         margin: $big 0;
 
         label {
-          color: $color-gray-light;
+          color: $color-gray-20;
         }
 
       }
diff --git a/frontend/resources/styles/main/partials/activity-bar.scss b/frontend/resources/styles/main/partials/activity-bar.scss
index 34fe4aaac..c4bd911c9 100644
--- a/frontend/resources/styles/main/partials/activity-bar.scss
+++ b/frontend/resources/styles/main/partials/activity-bar.scss
@@ -22,14 +22,14 @@
   }
 
   h4 {
-    color: $color-gray-dark;
+    color: $color-gray-40;
     font-size: $fs16;
     font-weight: bold;
     margin-bottom: $x-small;
   }
 
   .date-ribbon {
-    background-color: lighten($color-gray-light, 12%);
+    background-color: lighten($color-gray-20, 12%);
     color: $color-white;
     font-size: $fs12;
     font-weight: bold;
@@ -39,7 +39,7 @@
   }
 
   .activity-input {
-    border-bottom: 1px solid $color-gray-lighter;
+    border-bottom: 1px solid $color-gray-10;
     display: flex;
     font-size: $fs13;
     padding: $small;
@@ -70,7 +70,7 @@
       }
 
       .activity-time {
-        color: $color-gray-light;
+        color: $color-gray-20;
         font-size: $fs11;
         font-style: italic;
       }
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index 42a7f3a58..f03341003 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -22,7 +22,7 @@
       cursor: pointer;
 
     svg {
-      fill: $color-gray-light;
+      fill: $color-gray-20;
       height: 1rem;
       margin: 0 .5rem;
       width: 1rem;
@@ -30,7 +30,7 @@
     
     &:hover {
       svg {
-        fill: $color-gray-darker;
+        fill: $color-gray-50;
       }
     }
     &.disabled {
@@ -89,7 +89,7 @@
 
 .btn-palette {
   align-items: center;
-  border: 2px solid $color-gray-lighter;
+  border: 2px solid $color-gray-10;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
@@ -97,14 +97,14 @@
   justify-content: center;
   padding: .6rem;
   svg {
-    fill: $color-gray-lighter;
+    fill: $color-gray-10;
     height: 20px;
     width: 20px;
   }
   &:hover {
-    border-color: $color-gray-dark;
+    border-color: $color-gray-40;
     svg {
-      fill: $color-gray-dark;
+      fill: $color-gray-40;
     }
   }
   &.current {
@@ -143,26 +143,26 @@
   flex-basis: 66px;
 
   .color {
-    background-color: $color-gray-lighter;
+    background-color: $color-gray-10;
     border: 2px solid $color-gray-60;
     border-radius: 50%;
     flex-shrink: 0;
     padding: 1.5rem;
   }
   .color-text {
-    color: $color-gray-light;
+    color: $color-gray-20;
     font-size: $fs12;
   }
   &.current {
     .color {
-      border-color: $color-gray-darker;
+      border-color: $color-gray-50;
     }
     .color-text {
-      color: $color-gray-darker;
+      color: $color-gray-50;
       font-weight: bold;
     }
     &::before {
-      background-color: $color-gray-darker;
+      background-color: $color-gray-50;
       border-radius: 3px;
       color: $color-white;
       content: "selected";
@@ -175,10 +175,10 @@
   }
   &:hover {
     .color {
-      border-color: $color-gray-darker;
+      border-color: $color-gray-50;
     }
     .color-text {
-      color: $color-gray-darker;
+      color: $color-gray-50;
     }
   }
   &.add-color {
@@ -186,14 +186,14 @@
     .color {
       align-items: center;
       background-color: $color-gray-50;
-      border: 3px dashed $color-gray-lighter;
+      border: 3px dashed $color-gray-10;
       cursor: pointer;
       display: flex;
       justify-content: center;
       margin-bottom: 1rem;
       padding: .6rem;
       svg {
-        fill: $color-gray-lighter;
+        fill: $color-gray-10;
         height: 30px;
         width: 30px;
       }
@@ -203,13 +203,13 @@
     }
     &:hover {
       .color {
-        border-color: $color-gray;
+        border-color: $color-gray-30;
         svg {
-          fill: $color-gray;
+          fill: $color-gray-30;
         }
       }
       .color-text {
-        color: $color-gray-dark;
+        color: $color-gray-40;
       }
     }
   }
@@ -220,7 +220,7 @@
   cursor: pointer;
   flex-shrink: 0;
   svg {
-    fill: $color-gray-light;
+    fill: $color-gray-20;
     height: 25px;
     transform: rotate(45deg);
     width: 25px;
@@ -234,7 +234,7 @@
 
 .color-tooltip {
   background-color: $color-gray-50;
-  border: 1px solid $color-gray-lighter;
+  border: 1px solid $color-gray-10;
   border-radius: 3px;
   left: -102px;
   padding: 1rem;
@@ -251,8 +251,8 @@
     &::after {
       background-color: $color-gray-50;
       bottom: -32px;
-      border-bottom: 1px solid $color-gray-lighter;
-      border-right: 1px solid $color-gray-lighter;
+      border-bottom: 1px solid $color-gray-10;
+      border-right: 1px solid $color-gray-10;
       content: "";
       height: 20px;
       left: 105px;
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index 9ceedafd8..b4bf6d9fb 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -30,7 +30,7 @@
           cursor: pointer;
           svg {
             transform: rotate(45deg);
-            fill: $color-gray;
+            fill: $color-gray-30;
             height: 20px;
             width: 20px;
           }
@@ -48,7 +48,7 @@
         cursor: pointer;
 
         svg {
-          fill: $color-gray;
+          fill: $color-gray-30;
           height: 20px;
           margin: 0 10px;
           width: 20px;
@@ -57,7 +57,7 @@
         &:hover {
 
           svg {
-            fill: $color-gray-darker;
+            fill: $color-gray-50;
           }
 
         }
@@ -156,7 +156,7 @@
       }
 
       &.add-file {
-        border: 1px dashed $color-gray-light;
+        border: 1px dashed $color-gray-20;
         justify-content: center;
         box-shadow: none;
 
@@ -196,7 +196,7 @@
           width: 100%;
 
           svg {
-            fill: $color-gray-light;
+            fill: $color-gray-20;
             height: 14px;
             margin-right: $x-small;
             width: 14px;
@@ -279,8 +279,8 @@
 
       // IMAGES SECTION
       &.images-th {
-        border: 1px dashed $color-gray-light;
-        border-bottom: 2px solid lighten($color-gray-light, 12%);
+        border: 1px dashed $color-gray-20;
+        border-bottom: 2px solid lighten($color-gray-20, 12%);
 
         &:hover {
           border-color: $color-primary;
@@ -311,7 +311,7 @@
       }
 
       .color-data {
-        color: $color-gray;
+        color: $color-gray-30;
         margin-top: 15px;
       }
 
@@ -431,7 +431,7 @@
       padding-bottom: $medium;
 
       &.title {
-        color: $color-gray-darker;
+        color: $color-gray-50;
       }
 
     }
@@ -447,6 +447,11 @@
     margin: $size-4;
     padding: 3rem;
     width: 100%;
+
+    .grid-files-desc {
+      color: $color-gray-40;
+      margin-bottom: $medium;
+    }
 }
 
 .grid-files-link-text {
diff --git a/frontend/resources/styles/main/partials/editable-label.scss b/frontend/resources/styles/main/partials/editable-label.scss
index 83f80cbf7..66e50ac07 100644
--- a/frontend/resources/styles/main/partials/editable-label.scss
+++ b/frontend/resources/styles/main/partials/editable-label.scss
@@ -21,7 +21,7 @@
     padding: 3px 5px;
 
     & svg {
-        fill: $color-gray;
+        fill: $color-gray-30;
         height: 15px;
         transform: rotate(45deg) translateY(7px);
         width: 15px;
diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss
index 8f16f7d04..6f2196d02 100644
--- a/frontend/resources/styles/main/partials/library-bar.scss
+++ b/frontend/resources/styles/main/partials/library-bar.scss
@@ -9,7 +9,7 @@
   background-color: $color-white;
 
   .library-bar-inside {
-    border-right: 1px solid $color-gray-lighter;
+    border-right: 1px solid $color-gray-10;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -26,7 +26,7 @@
       li {
         background-color: $color-white;
         border-bottom: 2px solid transparent;
-        color: $color-gray;
+        color: $color-gray-30;
         cursor: pointer;
         font-size: $fs14;
         padding: .6rem;
@@ -108,7 +108,7 @@
             padding: 3px 5px;
 
             svg {
-              fill: $color-gray;
+              fill: $color-gray-30;
               height: 15px;
               transform: rotate(45deg) translateY(7px);
               width: 15px;
@@ -117,7 +117,7 @@
         }
 
         .element-subtitle {
-          color: $color-gray-light;
+          color: $color-gray-20;
           font-style: italic;
         }
 
diff --git a/frontend/resources/styles/main/partials/lightbox.scss b/frontend/resources/styles/main/partials/lightbox.scss
index 47521504a..5689eef46 100644
--- a/frontend/resources/styles/main/partials/lightbox.scss
+++ b/frontend/resources/styles/main/partials/lightbox.scss
@@ -62,12 +62,12 @@
       .toggle-layout {
 
         svg {
-          fill: $color-gray;
+          fill: $color-gray-30;
           height: 20px;
           width: 20px;
 
           &:hover {
-            fill: $color-gray-darker;
+            fill: $color-gray-50;
           }
 
         }
@@ -134,12 +134,12 @@
   margin: 1rem;
 
   .big-svg {
-    background-color: $color-gray-lighter;
+    background-color: $color-gray-10;
     border-radius: $br-medium;
     padding: 3rem;
 
     svg {
-      fill: $color-gray;
+      fill: $color-gray-30;
       height: 40px;
       width: 40px;
     }
@@ -155,7 +155,7 @@
   }
 
   .text {
-    color: $color-gray-light;
+    color: $color-gray-20;
     margin-top: .5rem;
   }
 
@@ -251,8 +251,8 @@
 }
 
 .confirm-dialog-cancel-button {
-    border: 1px solid $color-gray;
-    background: $color-gray-lightest;
+    border: 1px solid $color-gray-30;
+    background: $color-canvas;
     border-radius: 2px;
     padding: 0.5rem;
     margin-right: 1rem;
@@ -262,7 +262,7 @@
     cursor: pointer;
 
     &:hover {
-        background: $color-gray-light;
+        background: $color-gray-20;
     }
 }
 
diff --git a/frontend/resources/styles/main/partials/project-bar.scss b/frontend/resources/styles/main/partials/project-bar.scss
index 6ce9ea098..aef5e3aa3 100644
--- a/frontend/resources/styles/main/partials/project-bar.scss
+++ b/frontend/resources/styles/main/partials/project-bar.scss
@@ -7,7 +7,7 @@
 
 .project-bar {
   background-color: $color-gray-50;
-  border-right: 1px solid $color-gray-lighter;
+  border-right: 1px solid $color-gray-10;
   bottom: 0;
   height: 100%;
   left: 50px;
@@ -27,7 +27,7 @@
     padding-top: 60px;
 
     .project-name {
-      border-bottom: 1px solid $color-gray-lighter;
+      border-bottom: 1px solid $color-gray-10;
       font-size: $fs14;
       font-weight: bold;
       padding: 0 $small;
@@ -57,7 +57,7 @@
     position: relative;
 
     svg {
-      fill: $color-gray-light;
+      fill: $color-gray-20;
       height: 12px;
       margin-right: $x-small;
       width: 12px;
@@ -84,13 +84,13 @@
       top: 40%;
 
       svg {
-        fill: $color-gray-light;
+        fill: $color-gray-20;
         height: 12px;
         margin-right: $small;
         width: 12px;
 
         &:hover {
-          fill: $color-gray-dark;
+          fill: $color-gray-40;
         }
 
       }
diff --git a/frontend/resources/styles/main/partials/sidebar-align-options.scss b/frontend/resources/styles/main/partials/sidebar-align-options.scss
index 706afcb6e..9688ba574 100644
--- a/frontend/resources/styles/main/partials/sidebar-align-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-align-options.scss
@@ -27,7 +27,7 @@
     svg {
       height: 16px;
       width: 16px;
-      fill: $color-gray-light;
+      fill: $color-gray-20;
     }
 
     &:hover {
@@ -41,7 +41,7 @@
       background-color: transparent;
       cursor: default;
       svg {
-        fill: $color-gray-dark;
+        fill: $color-gray-40;
       }
     }
   }
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 27c72ce40..b7156016a 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -351,7 +351,7 @@
 }
 
 .color-th {
-  background-color: $color-gray-lighter;
+  background-color: $color-gray-10;
   border: 1px solid $color-gray-10;
   border-radius: $br-small;
   cursor: pointer;
diff --git a/frontend/resources/styles/main/partials/tool-bar.scss b/frontend/resources/styles/main/partials/tool-bar.scss
index 9ab6605d5..8d66fd882 100644
--- a/frontend/resources/styles/main/partials/tool-bar.scss
+++ b/frontend/resources/styles/main/partials/tool-bar.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .tool-bar {
-  background-color: $color-gray-dark;
+  background-color: $color-gray-40;
   bottom: 0;
   height: 100%;
   position: fixed;
@@ -27,7 +27,7 @@
         margin-bottom: $big;
 
         svg {
-          fill: $color-gray-light;
+          fill: $color-gray-20;
           height: 25px;
           width: 25px;
         }
diff --git a/frontend/resources/styles/main/partials/user-settings.scss b/frontend/resources/styles/main/partials/user-settings.scss
index 18d4a5070..f31b47a73 100644
--- a/frontend/resources/styles/main/partials/user-settings.scss
+++ b/frontend/resources/styles/main/partials/user-settings.scss
@@ -17,7 +17,7 @@
 
     .nav-item {
       margin: 0 $size-6;
-      color: $color-gray;
+      color: $color-gray-30;
       text-transform: uppercase;
       border-bottom: 1px solid transparent;
 
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index b49aa5e04..46bcdb10c 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -175,7 +175,7 @@
 }
 
 .workspace-frame-label {
-  fill: $color-gray-dark;
+  fill: $color-gray-40;
   font-size: $fs12;
 }