diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index c937d79d4..cc30c8b41 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -4,7 +4,7 @@
 
 .btn {
     border-radius: 1px;
-    color: @gray-deep;
+    color: @text-normal;
 
     .btnsize(@value) {
         min-width: @value;
@@ -125,7 +125,7 @@
                 width: 8px;
                 height: 8px;
                 background-color: transparent;
-                border: solid 1px @gray-deep;
+                border: solid 1px @text-normal;
                 border-bottom: none;
                 border-right: none;
             }
@@ -617,7 +617,7 @@
         background-repeat: no-repeat;
     }
 
-    box-shadow: inset 0 0 0 1px @gray;
+    box-shadow: inset 0 0 0 1px @border-regular-control;
     .border-radius(@border-radius-small);
 
     &:hover,
@@ -834,7 +834,7 @@
 .dlg-btn {
     font-weight: bold;
     width: 86px;
-    color: @gray-deep;
+    color: @text-normal;
     background-color: @secondary;
 
     &:hover:not(.disabled),
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index eb46fdf2e..f23d199f4 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -101,7 +101,7 @@
                 }
 
                 .user-name {
-                    color: @gray-deep;
+                    color: @text-normal;
                     font-size: 12px;
                     font-weight: bold;
                     overflow: hidden;
diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less
index 698b5d86c..588f34fda 100644
--- a/apps/common/main/resources/less/checkbox.less
+++ b/apps/common/main/resources/less/checkbox.less
@@ -13,7 +13,7 @@
             width: 14px;
             height: 14px;
             background: #fff;
-            border: 1px solid @gray;
+            border: 1px solid @border-regular-control;
             border-radius: 2px;
             position: absolute;
             left: 0;
@@ -25,7 +25,7 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    border: solid @gray-deep;
+                    border: solid @text-normal;
                     border-width: 0 2px 2px 0;
                     transform: rotate(45deg);
                     width: 5px;
@@ -40,7 +40,7 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    border: 1px solid @gray-deep;
+                    border: 1px solid @text-normal;
                     background: @gray-soft;
                     width: 8px;
                     height: 8px;
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index cc442813c..0d72900aa 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -43,7 +43,7 @@
     }
 
     .dropdown-menu {
-        border-color: @gray;
+        border-color: @border-regular-control;
         border-top-right-radius: 0;
         border-top-left-radius: 2px;
         margin: 0;
@@ -84,13 +84,13 @@
 
     .item {
         padding: 3px;
-        border: 1px solid @gray;
+        border: 1px solid @border-regular-control;
         .box-shadow(none);
         margin: 0 -1px -1px 0;
 
 
         &:hover {
-            .box-inner-shadow(0 0 0 2px @gray);
+            .box-inner-shadow(0 0 0 2px @border-regular-control);
         }
 
         &.selected {
@@ -188,7 +188,7 @@
     &.disabled {
         .item {
             &:hover:not(.selected) {
-                .box-shadow(0 0 0 1px @gray);
+                .box-shadow(0 0 0 1px @border-regular-control);
             }
         }
     }
@@ -238,7 +238,7 @@
 
     .item {
         &:hover {
-            .box-shadow(0 0 0 1px @gray);
+            .box-shadow(0 0 0 1px @border-regular-control);
         }
     }
 
@@ -265,13 +265,13 @@
 
     .item {
         margin-left: 4px;
-        .box-shadow(0 0 0 1px @gray);
+        .box-shadow(0 0 0 1px @border-regular-control);
     }
 
     &.disabled {
         .item {
             &:hover:not(.selected) {
-                .box-shadow(0 0 0 1px @gray);
+                .box-shadow(0 0 0 1px @border-regular-control);
             }
         }
     }
diff --git a/apps/common/main/resources/less/comments-panel.less b/apps/common/main/resources/less/comments-panel.less
index 0a4115f85..2167858cc 100644
--- a/apps/common/main/resources/less/comments-panel.less
+++ b/apps/common/main/resources/less/comments-panel.less
@@ -11,7 +11,7 @@
     }
 
     .user-name {
-        color: @gray-deep;
+        color: @text-normal;
         font-size: 12px;
         font-weight: bold;
         overflow: hidden;
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index 33484dbf9..8c1949c2f 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -93,7 +93,7 @@
         border: 1px solid @border-toolbar;
         word-break: break-all;
         line-height: 15px;
-        color: @gray-deep;
+        color: @text-normal;
         &:focus {
             border-color: @gray-darker;
         }
@@ -119,7 +119,7 @@
     }
 
     .user-name {
-        color: @gray-deep;
+        color: @text-normal;
         font-size: 12px;
         font-weight: bold;
         overflow: hidden;
diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index 8591a2e24..6bcc32f1c 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -22,7 +22,7 @@
         margin: 4px;
         cursor: pointer;
 
-        .box-shadow(0 0 0 1px @gray);
+        .box-shadow(0 0 0 1px @border-regular-control);
 
         &:hover,
         &.selected {
@@ -58,7 +58,7 @@
                     opacity: 0.5;
                 }
 
-                .box-shadow(0 0 0 1px @gray);
+                .box-shadow(0 0 0 1px @border-regular-control);
 
                 &:hover:not(.disabled),
                 &.selected:not(.disabled) {
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 291a6ce48..8633aea4b 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -62,7 +62,7 @@
 
     .dropdown-menu {
         label {
-            color: @gray-deep;
+            color: @text-normal;
         }
     }
 
@@ -227,7 +227,7 @@
     }
 
     label {
-        color: @gray-deep;
+        color: @text-normal;
     }
 
     .cousers-list {
@@ -261,7 +261,7 @@
         }
 
         .user-name {
-            color: @gray-deep;
+            color: @text-normal;
             font-size: 12px;
             font-weight: bold;
             white-space: nowrap;
diff --git a/apps/common/main/resources/less/history.less b/apps/common/main/resources/less/history.less
index cfc27b3d2..a5a4f5418 100644
--- a/apps/common/main/resources/less/history.less
+++ b/apps/common/main/resources/less/history.less
@@ -88,7 +88,7 @@
 
     .history-item-wrap {
         padding: 10px 2px 15px 20px;
-        color: @gray-deep;
+        color: @text-normal;
         text-overflow: ellipsis;
 
         .user-date {
diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less
index ae0c3328a..9e2812493 100644
--- a/apps/common/main/resources/less/input.less
+++ b/apps/common/main/resources/less/input.less
@@ -1,7 +1,7 @@
 .form-control {
     .border-radius(@border-radius-small);
     .box-shadow(none);
-    color: @gray-deep;
+    color: @text-normal;
     .user-select(text);
 
     &:focus {
diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less
index 65e3e6bbe..efcdeb750 100644
--- a/apps/common/main/resources/less/loadmask.less
+++ b/apps/common/main/resources/less/loadmask.less
@@ -52,7 +52,7 @@
     .left-panel & {
         line-height: @loadmask-small-image-height;
         background-color: transparent;
-        color: @gray-deep;
+        color: @text-normal;
         padding: 8px;
         top: 78px;
         transform: translate(-50%, 0);
diff --git a/apps/common/main/resources/less/masked-field.less b/apps/common/main/resources/less/masked-field.less
index e935726cb..35170677c 100644
--- a/apps/common/main/resources/less/masked-field.less
+++ b/apps/common/main/resources/less/masked-field.less
@@ -1,6 +1,6 @@
 .masked-field {
     text-align: right;
-    border: 1px solid @gray;
+    border: 1px solid @border-regular-control;
     border-radius: 2px;
     padding: 0 3px;
 
diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
index c95c3657f..487d54086 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -19,7 +19,7 @@
             height: 14px;
 
             background: #fff;
-            border: 1px solid @gray;
+            border: 1px solid @border-regular-control;
             border-radius: 50%;
         }
 
@@ -28,7 +28,7 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    background: @gray-deep;
+                    background: @text-normal;
                     border-radius: 50%;
                     width: 8px;
                     height: 8px;
diff --git a/apps/common/main/resources/less/scroller.less b/apps/common/main/resources/less/scroller.less
index c7bb8398d..dbd64c7e7 100644
--- a/apps/common/main/resources/less/scroller.less
+++ b/apps/common/main/resources/less/scroller.less
@@ -31,7 +31,7 @@
 
                 background-position: center 0;
                 .border-radius(2px);
-                border: 1px solid @gray;
+                border: 1px solid @border-regular-control;
                 -o-transition: background-color .5s 0 linear;
                 -webkit-transition: background-color .5s 0 linear;
                 -moz-transition: background-color .5s 0 linear;
@@ -43,7 +43,7 @@
         .hover {
             .ps-scrollbar-x {
                 &.always-visible-x {
-                    background-color: @gray;
+                    background-color: @border-regular-control;
                     background-position: center -7px;
                 }
             }
@@ -85,7 +85,7 @@
                 background-repeat: no-repeat;
                 background-position: 0 center;
                 .border-radius(2px);
-                border: 1px solid @gray;
+                border: 1px solid @border-regular-control;
                 -o-transition: background-color .5s 0 linear;
                 -webkit-transition: background-color .5s 0 linear;
                 -moz-transition: background-color .5s 0 linear;
@@ -97,7 +97,7 @@
         .hover {
             .ps-scrollbar-y {
                 &.always-visible-y {
-                    background-color: @gray;
+                    background-color: @border-regular-control;
                     background-position: -7px center;
                 }
             }
diff --git a/apps/common/main/resources/less/switcher.less b/apps/common/main/resources/less/switcher.less
index 442099378..d2606b820 100644
--- a/apps/common/main/resources/less/switcher.less
+++ b/apps/common/main/resources/less/switcher.less
@@ -16,7 +16,7 @@
     .sw-right {
         display: inline-block;
         height: 100%;
-        background-color: @gray;
+        background-color: @border-regular-control;
         border-top-right-radius: 2px;
         border-bottom-right-radius: 2px;
     }
@@ -43,11 +43,11 @@
         cursor: default;
 
         .sw-left {
-            background-color: @gray;
+            background-color: @border-regular-control;
         }
 
         .thumb {
-            border-color: @gray;
+            border-color: @border-regular-control;
         }
     }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 7823396df..2436441d5 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -246,7 +246,7 @@
         }
 
         &.border {
-            border: 1px solid @gray;
+            border: 1px solid @border-regular-control;
             .border-radius(1px);
             width: 22px;
             height: 22px;
@@ -305,7 +305,7 @@
 
         .tabs, .extra {
             background-color: transparent;
-            box-shadow: inset 0 -1px 0 0 @gray;
+            box-shadow: inset 0 -1px 0 0 @border-regular-control;
         }
 
         .tabs {
@@ -319,7 +319,7 @@
                 &:after {
                     //transition: opacity .1s;
                     //transition: bottom .1s;
-                    border-top: @underscore_height solid @gray-deep;
+                    border-top: @underscore_height solid @text-normal;
                     content: '';
                     position: absolute;
                     width: 100%;
@@ -342,7 +342,7 @@
                 }
 
                 > a {
-                    color: @gray-deep;
+                    color: @text-normal;
 
                     &::after {
                         display:block;
@@ -376,7 +376,7 @@
             }
 
             &:after {
-                border-color: @gray-deep;
+                border-color: @text-normal;
             }
         }
 
@@ -387,11 +387,11 @@
             }
 
             svg.icon {
-                fill: @gray-deep;
+                fill: @text-normal;
             }
 
             .caption {
-                color: @gray-deep;
+                color: @text-normal;
             }
 
             &:hover:not(.disabled) {
@@ -414,7 +414,7 @@
         }
 
         #rib-doc-name {
-            color: @gray-deep;
+            color: @text-normal;
         }
 
         &.editor-native-color {
@@ -460,7 +460,7 @@
     svg.icon {
         background-image: none;
 
-        fill: @gray-deep;
+        fill: @text-normal;
     }
 
     &.borders--small {
diff --git a/apps/common/main/resources/less/tooltip.less b/apps/common/main/resources/less/tooltip.less
index cd0aea8ce..5201a320d 100644
--- a/apps/common/main/resources/less/tooltip.less
+++ b/apps/common/main/resources/less/tooltip.less
@@ -39,7 +39,7 @@
 .tooltip-inner {
     font-size: 11px;
     background-color: @body-bg;
-    color: @gray-deep;
+    color: @text-normal;
     padding: 5px 12px;
     border: 1px solid rgba(0, 0, 0, 0.15);
     .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
diff --git a/apps/common/main/resources/less/variables.less b/apps/common/main/resources/less/variables.less
index d9dd1c409..31d1076cf 100644
--- a/apps/common/main/resources/less/variables.less
+++ b/apps/common/main/resources/less/variables.less
@@ -13,10 +13,10 @@
 // Grays
 // -------------------------
 
-@gray-deep:             #444444; //rgb(68, 68, 68)
+//@gray-deep:             #444444; //rgb(68, 68, 68)
 @gray-darker:           #848484; //rgb(132, 132, 132)
 //@gray-dark:             #cbcbcb; //rgb(203, 203, 203)
-@gray:                  #cfcfcf; //rgb(207, 207, 207)
+//@gray:                  #cfcfcf; //rgb(207, 207, 207)
 @gray-light:            #f1f1f1; //rgb(241, 241, 241)
 @gray-lighter:          #ededed; //rgb(237, 237, 237)
 @gray-soft:             #adadad; //rgb(173, 173, 173)
@@ -41,7 +41,7 @@
 // -------------------------
 
 @body-bg:               #fff;
-@text-color:            #cbcbcb;
+@text-color:            #cbcbcb; // @gray-dark
 
 // Links
 // -------------------------
@@ -176,7 +176,7 @@
 @input-bg-disabled:              @gray-lighter;
 
 @input-color:                    #000;
-@input-border:                   @gray;
+@input-border:                   #cfcfcf; // @gray;
 @input-border-radius:            @border-radius-base;
 @input-border-radius-large:      @border-radius-large;
 @input-border-radius-small:      @border-radius-small;
@@ -191,7 +191,7 @@
 //** Small `.form-control` border radius
 @input-border-radius-small:      @border-radius-small;
 
-@input-color-placeholder:        @gray;
+@input-color-placeholder:        #cfcfcf; // @gray;
 
 @input-height-base:              (floor(@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + 5);
 @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@@ -199,7 +199,7 @@
 
 @form-group-margin-bottom:       15px;
 
-@legend-color:                   #cbcbcb;
+@legend-color:                   #cbcbcb; // @gray-dark
 @legend-border-color:            #e5e5e5;
 
 @input-group-addon-bg:           @input-bg;
@@ -216,16 +216,16 @@
 @dropdown-fallback-border:       #ccc;
 @dropdown-divider-bg:            #e5e5e5;
 
-@dropdown-link-color:            @gray-deep;
-@dropdown-link-hover-color:      darken(@gray-deep, 5%);
+@dropdown-link-color:            #444; // @gray-deep;
+@dropdown-link-hover-color:      darken(#444, 5%); // darken(@gray-deep, 5%);
 @dropdown-link-hover-bg:         @secondary;
 
 @dropdown-link-active-color:     @component-active-color;
 @dropdown-link-active-bg:        @component-active-bg;
 
-@dropdown-link-disabled-color:   @gray;
+@dropdown-link-disabled-color:   #cfcfcf; // @gray;
 
-@dropdown-header-color:          @gray;
+@dropdown-header-color:          #cfcfcf; // @gray;
 
 
 // COMPONENT VARIABLES
@@ -373,7 +373,7 @@
 @nav-tabs-link-hover-border-color:          @gray-lighter;
 
 @nav-tabs-active-link-hover-bg:             @body-bg;
-@nav-tabs-active-link-hover-color:          @gray;
+@nav-tabs-active-link-hover-color:          #cfcfcf; // @gray;
 @nav-tabs-active-link-hover-border-color:   #ddd;
 
 @nav-tabs-justified-link-border-color:            #ddd;
diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less
index 36bbfe7f4..cf9a23c09 100644
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@@ -180,10 +180,10 @@
 
                         a {
                             text-decoration: underline;
-                            color: @gray-deep;
+                            color: @text-normal;
 
                             &:focus, &:hover {
-                                color: @gray-deep;
+                                color: @text-normal;
                             }
                         }
                     }
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index aa9724fe6..26b78ef09 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -33,7 +33,7 @@
 
         &.disabled > a {
           cursor: default;
-          color: @gray;
+          color: @border-regular-control;
         }
 
       }
@@ -123,7 +123,7 @@
 .flex-settings {
   #file-menu-panel & {
     &.bordered {
-      border-bottom: 1px solid @gray;
+      border-bottom: 1px solid @border-regular-control;
     }
     overflow: hidden;
     position: relative;
diff --git a/apps/documenteditor/main/resources/less/layout.less b/apps/documenteditor/main/resources/less/layout.less
index 2b5240838..da3efab6c 100644
--- a/apps/documenteditor/main/resources/less/layout.less
+++ b/apps/documenteditor/main/resources/less/layout.less
@@ -2,7 +2,7 @@ body {
     width: 100%;
     height: 100%;
     .user-select(none);
-    color: @gray-deep;
+    color: @text-normal;
 
     &.safari {
         position: absolute;
diff --git a/apps/documenteditor/main/resources/less/statusbar.less b/apps/documenteditor/main/resources/less/statusbar.less
index 6de4f322f..33ac5899e 100644
--- a/apps/documenteditor/main/resources/less/statusbar.less
+++ b/apps/documenteditor/main/resources/less/statusbar.less
@@ -7,7 +7,7 @@
 
     .status-label {
         font-weight: bold;
-        color: @gray-deep;
+        color: @text-normal;
         white-space: nowrap;
         position: relative;
         top: 1px;
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index a79310a9a..308377e03 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -49,7 +49,7 @@
             width: 246px;
             height: @contents-menu-item-height;
 
-            .box-shadow(0 0 0 1px @gray);
+            .box-shadow(0 0 0 1px @border-regular-control);
 
             &:hover,
             &.selected {
@@ -125,7 +125,7 @@
                 opacity: 0.5;
 
                 &:hover {
-                    .box-shadow(0 0 0 1px @gray);
+                    .box-shadow(0 0 0 1px @border-regular-control);
                 }
             }
         }
@@ -181,7 +181,7 @@
 }
 
 .item-equation {
-    border: 1px solid @gray;
+    border: 1px solid @border-regular-control;
     .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
 }
 
@@ -189,8 +189,8 @@
     cursor: default;
     position: relative;
     padding: 14px 11px;
-    border-left: 1px solid @gray;
-    border-top: 1px solid @gray;
+    border-left: 1px solid @border-regular-control;
+    border-top: 1px solid @border-regular-control;
 }
 
 .save-style-link {
@@ -239,5 +239,5 @@
     position: absolute;
     z-index: @zindex-dropdown - 20;
     background-color: @gray-light;
-    border: 1px solid @gray;
+    border: 1px solid @border-regular-control;
 }
\ No newline at end of file
diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less
index 1da57c2d0..7d0d3f0c7 100644
--- a/apps/presentationeditor/main/resources/less/app.less
+++ b/apps/presentationeditor/main/resources/less/app.less
@@ -150,7 +150,7 @@
 
 .slidenum-div {
     background-color: @body-bg;
-    color: @gray-deep;
+    color: @text-normal;
     padding: 5px 12px;
     border: 1px solid rgba(0, 0, 0, 0.15);
     .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
diff --git a/apps/presentationeditor/main/resources/less/layout.less b/apps/presentationeditor/main/resources/less/layout.less
index ff84af5f7..34ed35b70 100644
--- a/apps/presentationeditor/main/resources/less/layout.less
+++ b/apps/presentationeditor/main/resources/less/layout.less
@@ -2,7 +2,7 @@ body {
     width: 100%;
     height: 100%;
     .user-select(none);
-    color: @gray-deep;
+    color: @text-normal;
 
     &.safari {
         position: absolute;
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 7d69c96e2..e28e5d919 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -191,7 +191,7 @@
 
         .flex-settings {
             &.bordered {
-                border-bottom: 1px solid @gray;
+                border-bottom: 1px solid @border-regular-control;
             }
             overflow: hidden;
             position: relative;
diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less
index 74bf73dfc..61b6f1319 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -7,7 +7,7 @@
 
     .status-label {
         font-weight: bold;
-        color: @gray-deep;
+        color: @text-normal;
         white-space: nowrap;
         position: relative;
         top: 1px;
diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less
index 2c82b2d21..52bf97be5 100644
--- a/apps/presentationeditor/main/resources/less/toolbar.less
+++ b/apps/presentationeditor/main/resources/less/toolbar.less
@@ -118,7 +118,7 @@
 }
 
 .item-equation {
-    border: 1px solid @gray;
+    border: 1px solid @border-regular-control;
     .background-ximage-v2('toolbar/math.png', 1500px);
 }
 
@@ -132,7 +132,7 @@
     position: absolute;
     z-index: @zindex-dropdown - 20;
     background-color: @gray-light;
-    border: 1px solid @gray;
+    border: 1px solid @border-regular-control;
 }
 
 .item-theme {
diff --git a/apps/spreadsheeteditor/main/resources/less/filterdialog.less b/apps/spreadsheeteditor/main/resources/less/filterdialog.less
index 1c3b82bb2..76db9ad23 100644
--- a/apps/spreadsheeteditor/main/resources/less/filterdialog.less
+++ b/apps/spreadsheeteditor/main/resources/less/filterdialog.less
@@ -23,7 +23,7 @@
       &.selected {
         background-color: @secondary;
         border-color: @secondary;
-        color: @gray-deep;
+        color: @text-normal;
         border-style: solid;
         border-width: 1px 0;
       }
@@ -94,7 +94,7 @@
       }
 
       &.border {
-        border: 1px solid @gray;
+        border: 1px solid @border-regular-control;
         .border-radius(1px);
         width: 22px;
         height: 22px;
diff --git a/apps/spreadsheeteditor/main/resources/less/layout.less b/apps/spreadsheeteditor/main/resources/less/layout.less
index 8a5ec5a6d..36ed624eb 100644
--- a/apps/spreadsheeteditor/main/resources/less/layout.less
+++ b/apps/spreadsheeteditor/main/resources/less/layout.less
@@ -2,7 +2,7 @@ body {
     width: 100%;
     height: 100%;
     .user-select(none);
-    color: @gray-deep;
+    color: @text-normal;
 
     &.safari {
         position: absolute;
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index e160b7aef..3a50ce72b 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -117,7 +117,7 @@
 
                 &.disabled > a {
                     cursor: default;
-                    color: @gray;
+                    color: @border-regular-control;
                 }
             }
 
@@ -181,7 +181,7 @@
 
         .flex-settings {
             &.bordered {
-                border-bottom: 1px solid @gray;
+                border-bottom: 1px solid @border-regular-control;
             }
             overflow: hidden;
             position: relative;
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index 46d9b20c5..d38a6b4b8 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -272,14 +272,14 @@
                     }
 
                     > span {
-                        border-left: 2px solid @gray-deep;
+                        border-left: 2px solid @text-normal;
                         padding-left: 9px;
                     }
                     
                     &.right {
                         > span {
                             border-left: 1px solid @border-toolbar;
-                            border-right: 2px solid @gray-deep;
+                            border-right: 2px solid @text-normal;
                             padding-right: 9px;
                             padding-left: 10px;
                         }
@@ -318,7 +318,7 @@
 
     .status-label {
         font-weight: bold;
-        color: @gray-deep;
+        color: @text-normal;
         white-space: nowrap;
     }
 
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index c532ae550..5f8723de2 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -136,7 +136,7 @@
 }
 
 .item-equation {
-    border: 1px solid @gray;
+    border: 1px solid @border-regular-control;
     .background-ximage-v2('toolbar/math.png', 1500px);
 }
 
@@ -145,7 +145,7 @@
     position: absolute;
     z-index: @zindex-dropdown - 20;
     background-color: @gray-light;
-    border: 1px solid @gray;
+    border: 1px solid @border-regular-control;
 }
 
 #slot-field-fontname {