diff --git a/apps/common/main/resources/less/about.less b/apps/common/main/resources/less/about.less
index 2f2745fc3..f45c41727 100644
--- a/apps/common/main/resources/less/about.less
+++ b/apps/common/main/resources/less/about.less
@@ -23,19 +23,19 @@
         margin: 0 30px;
         font: 12px Tahoma;
         letter-spacing: 1px;
-        color: var(--text-normal);
+        color: @text-normal;
         font-weight: bold;
         white-space: nowrap;
     }
 
     .asc-about-version {
         font: 15px Tahoma;
-        color: var(--text-tertiary);
+        color: @text-tertiary;
     }
 
     .asc-about-companyname {
         font: bold 15px Tahoma;
-        color: var(--text-normal);
+        color: @text-normal;
     }
 
     label {
@@ -43,11 +43,11 @@
         &.asc-about-desc-name,
         &.asc-about-lic {
             font: 12px Tahoma;
-            color: var(--text-normal);
+            color: @text-normal;
         }
 
         &.asc-about-desc-name {
-            color: var(--text-normal);
+            color: @text-normal;
             white-space: pre;
         }
 
@@ -59,7 +59,7 @@
 
     a {
         font: 12px Tahoma;
-        color: var(--text-normal);
+        color: @text-normal;
     }
 
     .separator.horizontal {
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 03140ac56..4c8d98e62 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: var(--text-normal);
+    color: @text-normal;
 
     .btnsize(@value) {
         min-width: @value;
@@ -98,7 +98,7 @@
             &::after {
                 content: ' ';
                 position: absolute;
-                border: 1px solid var(--icon-notification-badge);
+                border: 1px solid @icon-notification-badge;
                 border-left: 0 none;
                 border-right: 0 none;
                 width: 6px;
@@ -113,7 +113,7 @@
                 width: 10px;
                 height: 7px;
                 bottom: 2px;
-                background-color: var(--background-notification-badge);
+                background-color: @background-notification-badge;
                 border-radius: 2px;
                 right: 0;
             }
@@ -129,7 +129,7 @@
                 width: 8px;
                 height: 8px;
                 background-color: transparent;
-                border: solid 1px var(--text-normal);
+                border: solid 1px @text-normal;
                 border-bottom: none;
                 border-right: none;
             }
@@ -161,7 +161,7 @@
     &.active:not(.disabled) {
         .caret-up, .caret-down {
             &::after {
-                border-color: var(--background-normal);
+                border-color: @background-normal;
             }
         }
     }
@@ -290,7 +290,7 @@
     .btn.small;
 
     &.bg-white {
-        background-color: var(--background-normal);
+        background-color: @background-normal;
     }
 
     &:before,
@@ -301,14 +301,14 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: var(--highlight-button-hover);
+        background-color: @highlight-button-hover;
     }
 
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        color: var(--text-normal);
-        background-color: var(--highlight-button-pressed);
+        color: @text-normal;
+        background-color: @highlight-button-pressed;
     }
 
     &:not(.icon-top)
@@ -381,12 +381,12 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: var(--highlight-button-hover);
+        background-color: @highlight-button-hover;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: var(--highlight-button-pressed);
+        background-color: @highlight-button-pressed;
         //color: #fff;  btn-category has no text
     }
 
@@ -436,7 +436,7 @@
 
     &.open {
         > .btn-toolbar {
-                //color: var(--text-normal);
+                //color: @text-normal;
 
                 // Show no shadow for `.btn-link` since it has no other button styles.
                 &.btn-link {
@@ -451,7 +451,7 @@
 
     &.over {
         > button {
-            //background-color: var(--highlight-button-hover);
+            //background-color: @highlight-button-hover;
         }
     }
 
@@ -498,7 +498,7 @@
 
         &.over:not(.disabled),
         &.open {
-            box-shadow: inset 0 0 0 1px var(--highlight-button-hover);
+            box-shadow: inset 0 0 0 1px @highlight-button-hover;
 
             button:not(.active):not(.btn-text-split-default) {
                 background-color: transparent;
@@ -509,13 +509,13 @@
             button {
                 &:not(.active) {
                     &:hover {
-                        background-color: var(--highlight-button-hover);
+                        background-color: @highlight-button-hover;
                     }
                 }
 
                 &:active,
                 &:active:hover {
-                    background-color: var(--highlight-button-pressed);
+                    background-color: @highlight-button-pressed;
                 }
             }
         }
@@ -523,7 +523,7 @@
         &.open {
             > button:not(.active) {
                 &:last-of-type {
-                    background-color: var(--highlight-button-pressed);
+                    background-color: @highlight-button-pressed;
                 }
             }
 
@@ -533,7 +533,7 @@
         }
 
         button.active:not(.disabled) {
-            background-color: var(--highlight-button-pressed);
+            background-color: @highlight-button-pressed;
         }
 
         .btn + .btn {
@@ -568,7 +568,7 @@
     .over,
     &:active,
     &.active {
-        background: var(--background-normal)  !important;
+        background: @background-normal  !important;
         .box-shadow(none)  !important;
     }
 
@@ -602,7 +602,7 @@
     background-color: transparent;
 
     &.bg-white {
-        background-color: var(--background-normal);
+        background-color: @background-normal;
     }
 
     .icon {
@@ -616,17 +616,17 @@
         background-repeat: no-repeat;
     }
 
-    box-shadow: inset 0 0 0 1px var(--border-regular-control);
+    box-shadow: inset 0 0 0 1px @border-regular-control;
     .border-radius(@border-radius-small);
 
     &:hover,
     &.over {
-        background-color: var(--highlight-button-hover);
+        background-color: @highlight-button-hover;
     }
 
     &:active,
     &.active {
-        background-color: var(--highlight-button-pressed);
+        background-color: @highlight-button-pressed;
     }
 }
 
@@ -645,13 +645,13 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: var(--highlight-button-hover) !important;
+        background-color: @highlight-button-hover !important;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: var(--highlight-button-pressed) !important;
-        border-color: var(--highlight-button-pressed);
+        background-color: @highlight-button-pressed !important;
+        border-color: @highlight-button-pressed;
         color: white;
     }
 
@@ -680,12 +680,12 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: var(--highlight-button-hover) !important;
+        background-color: @highlight-button-hover !important;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: var(--highlight-button-pressed) !important;
+        background-color: @highlight-button-pressed !important;
         color: white;
     }
 
@@ -712,13 +712,13 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: var(--highlight-button-hover) !important;
+        background-color: @highlight-button-hover !important;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: var(--highlight-button-pressed) !important;
-        border-color: var(--highlight-button-pressed);
+        background-color: @highlight-button-pressed !important;
+        border-color: @highlight-button-pressed;
         color: white;
     }
 
@@ -750,12 +750,12 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: var(--highlight-button-hover) !important;
+        background-color: @highlight-button-hover !important;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: var(--highlight-button-pressed) !important;
+        background-color: @highlight-button-pressed !important;
     }
 
     &[disabled],
@@ -833,22 +833,22 @@
 .dlg-btn {
     font-weight: bold;
     width: 86px;
-    color: var(--text-normal);
-    background-color: var(--background-normal);
-    border: 1px solid var(--border-regular-control);
+    color: @text-normal;
+    background-color: @background-normal;
+    border: 1px solid @border-regular-control;
 
     &:hover:not(.disabled),
     &.hover:not(.disabled) {
-        background-color: var(--highlight-button-hover);
+        background-color: @highlight-button-hover;
     }
 
     &.primary {
-        color: var(--text-inverse);
-        background-color: var(--background-primary-dialog-button);
+        color: @text-inverse;
+        background-color: @background-primary-dialog-button;
 
         &:hover:not(.disabled),
         &.hover:not(.disabled) {
-            background-color: var(--highlight-primary-dialog-button-hover);
+            background-color: @highlight-primary-dialog-button-hover;
         }
     }
 
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index fcea81bf4..32b030d9d 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -11,7 +11,7 @@
 
     .area {
         position: absolute;
-        border-bottom: 1px solid var(--border-toolbar);
+        border-bottom: 1px solid @border-toolbar;
         overflow: hidden;
     }
 
@@ -57,7 +57,7 @@
             margin: 0 5px 3px 0;
             width: 12px;
             height: 12px;
-            border: 1px solid var(--border-toolbar);
+            border: 1px solid @border-toolbar;
         }
 
         .name {
@@ -101,7 +101,7 @@
                 }
 
                 .user-name {
-                    color: var(--text-normal);
+                    color: @text-normal;
                     font-size: 12px;
                     font-weight: bold;
                     overflow: hidden;
@@ -112,7 +112,7 @@
                 .color {
                     width: 12px;
                     height: 12px;
-                    border: 1px solid var(--border-toolbar);
+                    border: 1px solid @border-toolbar;
                     margin: 0 5px 3px 0;
                     vertical-align: middle;
                 }
@@ -143,11 +143,11 @@
             height: 100%;
             resize: none;
             margin-bottom: 5px;
-            border: 1px solid var(--border-toolbar);
+            border: 1px solid @border-toolbar;
             font-size: 12px;
 
             &:focus {
-                border-color: var(--border-preview-select);
+                border-color: @border-preview-select;
             }
         }
     }
diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less
index b4da1ab96..9d4fc470f 100644
--- a/apps/common/main/resources/less/checkbox.less
+++ b/apps/common/main/resources/less/checkbox.less
@@ -12,8 +12,8 @@
         + label {
             width: 14px;
             height: 14px;
-            background: var(--background-normal);
-            border: 1px solid var(--border-regular-control);
+            background: @background-normal;
+            border: 1px solid @border-regular-control;
             border-radius: 2px;
             position: absolute;
             left: 0;
@@ -25,7 +25,7 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    border: solid var(--text-normal);
+                    border: solid @text-normal;
                     border-width: 0 2px 2px 0;
                     transform: rotate(45deg);
                     width: 5px;
@@ -40,8 +40,8 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    border: 1px solid var(--text-normal);
-                    background: var(--icon-normal);
+                    border: 1px solid @text-normal;
+                    background: @icon-normal;
                     width: 8px;
                     height: 8px;
                     left: 2px;
diff --git a/apps/common/main/resources/less/colorpalette.less b/apps/common/main/resources/less/colorpalette.less
index 5c1e5e494..cf58f0272 100644
--- a/apps/common/main/resources/less/colorpalette.less
+++ b/apps/common/main/resources/less/colorpalette.less
@@ -7,7 +7,7 @@
 
         &:hover,
         &.selected {
-            .box-shadow(0 0 0 1px var(--highlight-button-pressed));
+            .box-shadow(0 0 0 1px @highlight-button-pressed);
         }
     }
 }
@@ -26,7 +26,7 @@
     padding: 10px;
     .palette-color-item {
         padding: 0;
-        border: 1px solid var(--background-normal);
+        border: 1px solid @background-normal;
         display: inline-block;
         text-decoration: none;
         -moz-outline: 0 none;
@@ -43,21 +43,21 @@
                 width: 12px;
                 cursor: pointer;
                 display: block;
-                border: 1px solid var(--border-color-shading);
+                border: 1px solid @border-color-shading;
             }
         }
 
         &:hover, &.selected {
-            border-color: var(--icon-normal);
+            border-color: @icon-normal;
             em span {
-                border-color: var(--background-normal);
+                border-color: @background-normal;
             }
         }
     }
 
     .color-transparent {
         em span {
-            border:solid 1px var(--border-color-shading);
+            border:solid 1px @border-color-shading;
         }
     }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index f8013f9cb..246dbf72b 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -117,7 +117,7 @@
 
 // Icon
 // -------------------------
-@icon-normal: var(--icon-norma);
+@icon-normal: var(--icon-normal);
 @icon-inverse: var(--icon-inverse);
 @icon-toolbar-header: var(--icon-toolbar-header);
 @icon-contrast-popover: var(--icon-contrast-popover);
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index 46b80e144..884557513 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -23,7 +23,7 @@
     }
 
     img, .image {
-        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 var(--background-normal)";
+        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 @{background-normal}";
 
         @media only screen {
             //@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index 85bc951c2..aee7993b0 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: var(--border-regular-control);
+        border-color: @border-regular-control;
         border-top-right-radius: 0;
         border-top-left-radius: 2px;
         margin: 0;
@@ -84,17 +84,17 @@
 
     .item {
         padding: 3px;
-        border: 1px solid var(--border-regular-control);
+        border: 1px solid @border-regular-control;
         .box-shadow(none);
         margin: 0 -1px -1px 0;
 
 
         &:hover {
-            .box-inner-shadow(0 0 0 2px var(--border-regular-control));
+            .box-inner-shadow(0 0 0 2px @border-regular-control);
         }
 
         &.selected {
-            .box-inner-shadow(0 0 0 2px var(--border-preview-select));
+            .box-inner-shadow(0 0 0 2px @border-preview-select);
         }
     }
 
@@ -188,7 +188,7 @@
     &.disabled {
         .item {
             &:hover:not(.selected) {
-                .box-shadow(0 0 0 1px var(--border-regular-control));
+                .box-shadow(0 0 0 1px @border-regular-control);
             }
         }
     }
@@ -238,7 +238,7 @@
 
     .item {
         &:hover {
-            .box-shadow(0 0 0 1px var(--border-regular-control));
+            .box-shadow(0 0 0 1px @border-regular-control);
         }
     }
 
@@ -265,13 +265,13 @@
 
     .item {
         margin-left: 4px;
-        .box-shadow(0 0 0 1px var(--border-regular-control));
+        .box-shadow(0 0 0 1px @border-regular-control);
     }
 
     &.disabled {
         .item {
             &:hover:not(.selected) {
-                .box-shadow(0 0 0 1px var(--border-regular-control));
+                .box-shadow(0 0 0 1px @border-regular-control);
             }
         }
     }
diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less
index a58d38b0a..6dcbe6fa9 100644
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@@ -69,14 +69,14 @@
     &.input-group-nr.open:not(.no-highlighted) {
         & > .form-control,
         & > .btn {
-            border-color: var(--border-preview-select);
+            border-color: @border-preview-select;
         }
     }
 
     &.input-group-nr:not(.no-highlighted) > .form-control {
         &:focus,
         &:focus ~ button.dropdown-toggle {
-            border-color: var(--border-preview-select);
+            border-color: @border-preview-select;
         }
     }
 
@@ -86,7 +86,7 @@
         }
 
         &.selected {
-            background-color: var(--highlight-button-pressed);
+            background-color: @highlight-button-pressed;
 
             a {
                 color: @dropdown-link-active-color;
@@ -95,7 +95,7 @@
                 &.hover,
                 &:focus,
                 &.focus {
-                    background-color: var(--highlight-button-pressed);
+                    background-color: @highlight-button-pressed;
                 }
             }
         }
@@ -136,7 +136,7 @@
     &.input-group-nr:not(.no-highlighted) {
         & > .form-control,
         & > .btn {
-            border-color: var(--border-preview-select);
+            border-color: @border-preview-select;
         }
     }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index 0a85ec745..87677b394 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -14,7 +14,7 @@
         right: 0;
         bottom: 45px;
         height: 300px;
-        border-bottom: 1px solid var(--border-toolbar);
+        border-bottom: 1px solid @border-toolbar;
 
         &.stretch {
             border-bottom: none;
@@ -32,10 +32,10 @@
         text-align: center;
 
         label {
-            color: var(--text-normal);
+            color: @text-normal;
             font: 12px arial;
             line-height: normal;
-            border-bottom: 1px dotted var(--text-normal);
+            border-bottom: 1px dotted @text-normal;
             padding-top: 12px;
             outline: none;
             height: 29px;
@@ -58,10 +58,10 @@
             width: 100%;
             resize: none;
             margin-bottom: 5px;
-            border: 1px solid var(--border-toolbar);
+            border: 1px solid @border-toolbar;
             height: 100%;
             &:focus {
-                border-color: var(--border-preview-select);
+                border-color: @border-preview-select;
             }
         }
     }
@@ -83,19 +83,19 @@
     line-height: normal;
     position: relative;
     overflow: hidden;
-    color: var(--border-preview-select);
+    color: @border-preview-select;
 
     textarea {
         width: 100%;
         height: 50px;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid var(--border-toolbar);
+        border: 1px solid @border-toolbar;
         word-break: break-all;
         line-height: 15px;
-        color: var(--text-normal);
+        color: @text-normal;
         &:focus {
-            border-color: var(--border-preview-select);
+            border-color: @border-preview-select;
         }
     }
 
@@ -109,7 +109,7 @@
     }
 
     .separator-cmt {
-        border-bottom: 1px solid var(--border-toolbar);
+        border-bottom: 1px solid @border-toolbar;
         margin: 20px 0px 0px 0px;
     }
 
@@ -119,7 +119,7 @@
     }
 
     .user-name {
-        color: var(--text-normal);
+        color: @text-normal;
         font-size: 12px;
         font-weight: bold;
         overflow: hidden;
@@ -133,7 +133,7 @@
     .color {
         width: 12px;
         height: 12px;
-        border: 1px solid var(--border-toolbar);
+        border: 1px solid @border-toolbar;
         margin: 0 5px 3px 0;
         vertical-align: middle;
     }
@@ -177,7 +177,7 @@
     }
 
     .user-message {
-        color: var(--text-normal);
+        color: @text-normal;
         padding: 9px 0px 0 0px;
         white-space: pre-wrap;
         word-wrap: break-word;
@@ -200,11 +200,11 @@
     }
 
     .user-reply {
-        color: var(--text-normal);
+        color: @text-normal;
         margin-top: 10px;
         white-space: pre-wrap;
         width: auto;
-        border-bottom: 1px dotted var(--text-normal);
+        border-bottom: 1px dotted @text-normal;
         height: 16px;
         cursor: pointer;
     }
@@ -402,12 +402,12 @@
         left: 2px;
         width: 15px;
         height: 15px;
-        background-color: var(--background-normal);
+        background-color: @background-normal;
         -moz-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         -webkit-transform: rotate(45deg);
         -o-transform: rotate(45deg);
         transform: rotate(45deg);
-        border: solid 1px var(--border-toolbar);
+        border: solid 1px @border-toolbar;
     }
 }
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index c674f09b8..84a32dd79 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -1,6 +1,6 @@
 label {
     &.link {
-        border-bottom: 1px dotted var(--text-secondary);
+        border-bottom: 1px dotted @text-secondary;
         cursor: pointer;
 
         &.disabled {
@@ -9,7 +9,7 @@ label {
     }
 
     &.link-solid {
-        border-bottom: 1px solid var(--text-secondary);
+        border-bottom: 1px solid @text-secondary;
         cursor: pointer;
 
         &.disabled {
diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index 10854774a..d016d75ac 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -9,7 +9,7 @@
             text-align: center;
             height: 100%;
             width: 100%;
-            color: var(--text-tertiary);
+            color: @text-tertiary;
             td {
                 padding: 5px;
             }
@@ -22,11 +22,11 @@
         margin: 4px;
         cursor: pointer;
 
-        .box-shadow(0 0 0 1px var(--border-regular-control));
+        .box-shadow(0 0 0 1px @border-regular-control);
 
         &:hover,
         &.selected {
-            .box-shadow(0 0 0 2px var(--highlight-button-pressed));
+            .box-shadow(0 0 0 2px @highlight-button-pressed);
         }
     }
 
@@ -58,11 +58,11 @@
                     opacity: 0.5;
                 }
 
-                .box-shadow(0 0 0 1px var(--border-regular-control));
+                .box-shadow(0 0 0 1px @border-regular-control);
 
                 &:hover:not(.disabled),
                 &.selected:not(.disabled) {
-                    .box-shadow(0 0 0 2px var(--highlight-button-pressed));
+                    .box-shadow(0 0 0 2px @highlight-button-pressed);
                 }
             }
         }
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index e12b93a8b..61efc9dc1 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -84,7 +84,7 @@
 
         .no-checkmark.checked {
             .menu-item-icon {
-                background-color: var(--highlight-button-pressed);
+                background-color: @highlight-button-pressed;
                 border-radius: 2px;
             }
         }
diff --git a/apps/common/main/resources/less/extended-color-picker.less b/apps/common/main/resources/less/extended-color-picker.less
index 4c3e35032..d72e23ea6 100644
--- a/apps/common/main/resources/less/extended-color-picker.less
+++ b/apps/common/main/resources/less/extended-color-picker.less
@@ -37,7 +37,7 @@
             width: 63px;
             height: 20px;
             background-color: transparent;
-            border: 1px solid var(--border-regular-control);
+            border: 1px solid @border-regular-control;
 
             &.top {
                 border-bottom: none;
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 3fd528562..61e0bde9a 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -29,7 +29,7 @@
 .toolbar {
     .extra {
         svg.icon {
-            fill: var(--icon-toolbar-header);
+            fill: @icon-toolbar-header;
         }
 
         .btn-slot {
@@ -57,12 +57,12 @@
     }
 
     label {
-        color: var(--text-toolbar-header);
+        color: @text-toolbar-header;
     }
 
     .dropdown-menu {
         label {
-            color: var(--text-normal);
+            color: @text-normal;
         }
     }
 
@@ -98,7 +98,7 @@
         min-width: 50px;
         text-align: center;
 
-        color: var(--text-toolbar-header);
+        color: @text-toolbar-header;
         background-color: transparent;
         border: 0 none;
         cursor: default;
@@ -121,7 +121,7 @@
         white-space: nowrap;
         &.locked {
             text-decoration: none;
-            color: var(--border-preview-select);
+            color: @border-preview-select;
             cursor: default;
         }
 
@@ -227,7 +227,7 @@
     }
 
     label {
-        color: var(--text-normal);
+        color: @text-normal;
     }
 
     .cousers-list {
@@ -256,12 +256,12 @@
             height: 12px;
             display: inline-block;
             vertical-align: middle;
-            border: 1px solid var(--border-toolbar);
+            border: 1px solid @border-toolbar;
             margin: 0 5px 1px 0;
         }
 
         .user-name {
-            color: var(--text-normal);
+            color: @text-normal;
             font-size: 12px;
             font-weight: bold;
             white-space: nowrap;
@@ -344,7 +344,7 @@
     background-color: @header-background-color;
     display: flex;
     height: 100%;
-    color: var(--text-toolbar-header);
+    color: @text-toolbar-header;
     position: relative;
 
     .btn-slot {
@@ -352,7 +352,7 @@
     }
 
     svg.icon {
-        fill: var(--icon-toolbar-header);
+        fill: @icon-toolbar-header;
 
         &.icon-save {
             &.btn-save-coauth, &.btn-synch {
diff --git a/apps/common/main/resources/less/history.less b/apps/common/main/resources/less/history.less
index 9e178f40e..e144e055c 100644
--- a/apps/common/main/resources/less/history.less
+++ b/apps/common/main/resources/less/history.less
@@ -1,6 +1,6 @@
 #history-box {
     position: relative;
-    border-right: 1px solid var(--border-toolbar);
+    border-right: 1px solid @border-toolbar;
 }
 
 #history-header {
@@ -10,7 +10,7 @@
     top: 0;
     right: 0;
     overflow: hidden;
-    border-bottom: 1px solid var(--border-toolbar);
+    border-bottom: 1px solid @border-toolbar;
 
     #history-btn-back {
         height: 27px;
@@ -21,7 +21,7 @@
         cursor: pointer;
 
         &:hover {
-            background-color: var(--highlight-button-hover);
+            background-color: @highlight-button-hover;
         }
     }
 }
@@ -33,7 +33,7 @@
     bottom: 0;
     right: 0;
     overflow: hidden;
-    border-top: 1px solid var(--border-toolbar);
+    border-top: 1px solid @border-toolbar;
 
     #history-btn-expand {
         height: 27px;
@@ -44,7 +44,7 @@
         cursor: pointer;
 
         &:hover {
-            background-color: var(--highlight-button-hover);
+            background-color: @highlight-button-hover;
         }
     }
 }
@@ -64,15 +64,15 @@
 
         &:hover:not(.selected),
         &.over {
-            background-color: var(--highlight-button-hover);
+            background-color: @highlight-button-hover;
         }
 
         &.selected {
-            background-color: var(--highlight-button-pressed);
+            background-color: @highlight-button-pressed;
 
             .user-name,
             .user-date {
-                color: var(--text-inverse);
+                color: @text-inverse;
             }
 
             .revision-expand {
@@ -83,7 +83,7 @@
 
     .history-item-wrap {
         padding: 10px 2px 15px 20px;
-        color: var(--text-normal);
+        color: @text-normal;
         text-overflow: ellipsis;
 
         .user-date {
@@ -99,12 +99,12 @@
             display: inline-block;
             max-width: 60px;
             height: 18px;
-            color: var(--highlight-button-pressed);
+            color: @highlight-button-pressed;
             font-size: 10px;
             white-space: nowrap;
             overflow: hidden;
-            color: var(--text-tertiary);
-            background-color: var(--background-normal);
+            color: @text-tertiary;
+            background-color: @background-normal;
             text-align: center;
             padding: 1px 5px;
             border-radius: 2px;
@@ -124,7 +124,7 @@
         .color {
             width: 12px;
             height: 12px;
-            border: 1px solid var(--border-toolbar);
+            border: 1px solid @border-toolbar;
             margin: 0 5px 3px 0;
             vertical-align: middle;
         }
@@ -144,8 +144,8 @@
         }
 
         .revision-restore {
-            color: var(--text-normal);
-            border-bottom: 1px dotted var(--text-normal);
+            color: @text-normal;
+            border-bottom: 1px dotted @text-normal;
             height: 16px;
             margin-top: 5px;
             white-space: pre-wrap;
diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less
index 640bcf39a..93e16b076 100644
--- a/apps/common/main/resources/less/hsb-colorpicker.less
+++ b/apps/common/main/resources/less/hsb-colorpicker.less
@@ -8,7 +8,7 @@
         width: 22px;
         height: 22px;
         float: left;
-        border: 1px solid var(--border-regular-control);
+        border: 1px solid @border-regular-control;
         background-image: none;
         background-position: 0 -206px;
         background-repeat: no-repeat;
@@ -22,7 +22,7 @@
     }
 
     .color-text {
-        color: var(--text-normal);
+        color: @text-normal;
         height: 22px;
         padding: 4px 32px;
         cursor: default;
@@ -34,7 +34,7 @@
         width: 195px;
         height: 196px;
         position: relative;
-        border: 1px solid var(--border-regular-control);
+        border: 1px solid @border-regular-control;
         background-position: 0 0;
     }
 
@@ -49,7 +49,7 @@
         width: 10px;
         height: 100%;
         position: relative;
-        border: 1px solid var(--border-regular-control);
+        border: 1px solid @border-regular-control;
         background-position: -195px 0;
     }
 
@@ -70,7 +70,7 @@
     }
 
     .empty-color {
-        color: var(--text-normal);
+        color: @text-normal;
         height: 16px;
         margin: 5px 0;
 
@@ -91,7 +91,7 @@
             height: 10px;
             margin-right: 5px;
             margin-top: 1px;
-            border: 1px solid var(--border-regular-control);
+            border: 1px solid @border-regular-control;
         }
     }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less
index 6c18b4269..09cb847ab 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: var(--text-normal);
+    color: @text-normal;
     .user-select(text);
 
     border: 1px solid @border-regular-control;
@@ -52,7 +52,7 @@
 
     &.form-control:focus,
     .form-control:focus {
-        border-color: var(--border-preview-select);
+        border-color: @border-preview-select;
     }
 
     &.error {
@@ -90,12 +90,12 @@ input[type="password"] {
 }
 
 input[type="text"]::selection, textarea::selection {
-    background: var(--highlight-text-select);
-    color: var(--text-inverse);
+    background: @highlight-text-select;
+    color: @text-inverse;
 }
 
 textarea.form-control:focus {
-    border-color: var(--border-preview-select);
+    border-color: @border-preview-select;
 }
 
 .input-field-btn {
diff --git a/apps/common/main/resources/less/language-dialog.less b/apps/common/main/resources/less/language-dialog.less
index 8056af88d..3c82f1a58 100644
--- a/apps/common/main/resources/less/language-dialog.less
+++ b/apps/common/main/resources/less/language-dialog.less
@@ -23,7 +23,7 @@ li {
       &:before {
         display: none;
       }
-      background-color: var(--highlight-button-pressed);
+      background-color: @highlight-button-pressed;
 
       &, &:hover, &:focus {
         color: @dropdown-link-active-color;
diff --git a/apps/common/main/resources/less/layout.less b/apps/common/main/resources/less/layout.less
index 2144206b0..e9e88b51c 100644
--- a/apps/common/main/resources/less/layout.less
+++ b/apps/common/main/resources/less/layout.less
@@ -17,7 +17,7 @@
 
     .layout-resizer {
         z-index: @zindex-dropdown - 10;
-        background: var(--background-toolbar);
+        background: @background-toolbar;
         border: 0 none;
 
         &.move {
@@ -36,8 +36,8 @@
             cursor: row-resize;
 
             &.move {
-                border-top: solid 1px var(--border-toolbar);
-                border-bottom: solid 1px var(--border-toolbar);
+                border-top: solid 1px @border-toolbar;
+                border-bottom: solid 1px @border-toolbar;
             }
         }
     }
@@ -53,8 +53,8 @@
             cursor: col-resize;
 
             &.move {
-                border-left: solid 1px var(--border-toolbar);
-                border-right: solid 1px var(--border-toolbar);
+                border-left: solid 1px @border-toolbar;
+                border-right: solid 1px @border-toolbar;
             }
         }
     }
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index 2fd5dcbfe..9f053048b 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -1,5 +1,5 @@
 .listview {
-  border: 1px solid var(--border-regular-control);
+  border: 1px solid @border-regular-control;
   .border-radius(@border-radius-small);
   line-height: 15px;
 
@@ -14,7 +14,7 @@
         text-align: center;
         width: 100%;
         height: 100%;
-        color: var(--text-tertiary);
+        color: @text-tertiary;
         td {
           padding: 5px;
         }
@@ -22,7 +22,7 @@
   }
 
   &:not(.no-focus):focus {
-    border-color: var(--border-preview-select);
+    border-color: @border-preview-select;
   }
 
   & > .item {
@@ -32,8 +32,8 @@
     cursor: pointer;
     white-space: pre-wrap;
 
-    background-color: var(--background-normal);
-    border-color: var(--border-regular-control);
+    background-color: @background-normal;
+    border-color: @border-regular-control;
     border-style: solid;
     border-width: 1px 0;
     border-top-color: transparent;
@@ -41,16 +41,16 @@
 
   &:not(.disabled) > .item {
     &:hover {
-      background-color: var(--highlight-button-hover);
-      border-color: var(--highlight-button-hover);
+      background-color: @highlight-button-hover;
+      border-color: @highlight-button-hover;
       border-style: solid;
       border-width: 1px 0;
     }
 
     &.selected {
-      background-color: var(--highlight-button-pressed);
-      color: var(--text-inverse);
-      border-color: var(--highlight-button-pressed);
+      background-color: @highlight-button-pressed;
+      color: @text-inverse;
+      border-color: @highlight-button-pressed;
       border-style: solid;
       border-width: 1px 0;
     }
diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less
index 7cb6fb13d..d4163cda9 100644
--- a/apps/common/main/resources/less/loadmask.less
+++ b/apps/common/main/resources/less/loadmask.less
@@ -23,7 +23,7 @@
     border: none;
     background-image: none;
     background-color: rgba(0,0,0,.9);
-    color: var(--background-toolbar);
+    color: @background-toolbar;
     .border-radius(@border-radius-large);
 
     left: 50%;
@@ -52,7 +52,7 @@
     .left-panel & {
         line-height: @loadmask-small-image-height;
         background-color: transparent;
-        color: var(--text-normal);
+        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 0af88cee3..897f8f411 100644
--- a/apps/common/main/resources/less/masked-field.less
+++ b/apps/common/main/resources/less/masked-field.less
@@ -1,10 +1,10 @@
 .masked-field {
     text-align: right;
-    border: 1px solid var(--border-regular-control);
+    border: 1px solid @border-regular-control;
     border-radius: 2px;
     padding: 0 3px;
 
     &:focus {
-        border-color: var(--border-preview-select);
+        border-color: @border-preview-select;
     }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less
index 68b210ca3..ac41d054e 100644
--- a/apps/common/main/resources/less/multislider-gradient.less
+++ b/apps/common/main/resources/less/multislider-gradient.less
@@ -12,19 +12,19 @@
             left: 2px;
             width: 9px;
             height: 9px;
-            background-color: var(--background-normal);
+            background-color: @background-normal;
             -moz-transform: rotate(45deg);
             -ms-transform: rotate(45deg);
             -webkit-transform: rotate(45deg);
             -o-transform: rotate(45deg);
             transform: rotate(45deg);
-            border-top: solid 1px var(--border-regular-control);
-            border-left: solid 1px var(--border-regular-control);
+            border-top: solid 1px @border-regular-control;
+            border-left: solid 1px @border-regular-control;
             border-radius: 0 3px;
             box-sizing: content-box;
             .thumb-top-inner {
-                border-top: solid 1px var(--background-normal);
-                border-left: solid 1px var(--background-normal);
+                border-top: solid 1px @background-normal;
+                border-left: solid 1px @background-normal;
                 height: 100%;
             }
         }
@@ -35,13 +35,13 @@
             left: 1px;
             width: 10px;
             height: 9px;
-            background-color: var(--background-normal);
-            border: solid 1px var(--border-regular-control);
+            background-color: @background-normal;
+            border: solid 1px @border-regular-control;
             border-top: none;
             border-radius: 2px;
             box-sizing: content-box;
             .thumb-bottom-inner {
-                border: solid 1px var(--border-regular-control);
+                border: solid 1px @border-regular-control;
                 border-top: none;
                 height: 100%;
             }
@@ -49,11 +49,11 @@
 
         &.active {
             .thumb-top {
-                border-top: solid 1px var(--border-control-focus);
-                border-left: solid 1px var(--border-control-focus);
+                border-top: solid 1px @border-control-focus;
+                border-left: solid 1px @border-control-focus;
             }
             .thumb-bottom {
-                border: solid 1px var(--border-control-focus);
+                border: solid 1px @border-control-focus;
                 border-top: none;
             }
         }
@@ -80,8 +80,8 @@
 //        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
 
         background-position: 0 0;
-        outline: 1px solid var(--border-control-focus);
-        border: 1px solid var(--border-regular-control);
+        outline: 1px solid @border-control-focus;
+        border: 1px solid @border-regular-control;
         cursor: copy;
     }
 }
diff --git a/apps/common/main/resources/less/opendialog.less b/apps/common/main/resources/less/opendialog.less
index 3b51ec18e..16547c6e7 100644
--- a/apps/common/main/resources/less/opendialog.less
+++ b/apps/common/main/resources/less/opendialog.less
@@ -43,7 +43,7 @@
         height: 110px !important;
         position:relative;
         overflow:hidden;
-        border: var(--border-regular-control) solid 1px;
+        border: @border-regular-control solid 1px;
       }
 
       #id-preview-data {
@@ -59,7 +59,7 @@
 
       td {
         padding: 1px 8px 1px 0;
-        border-right: var(--border-regular-control) solid 1px;
+        border-right: @border-regular-control solid 1px;
         min-width: 30px;
         height: 17px;
         white-space: nowrap;
diff --git a/apps/common/main/resources/less/plugins.less b/apps/common/main/resources/less/plugins.less
index 8b866bf21..3f246f4a3 100644
--- a/apps/common/main/resources/less/plugins.less
+++ b/apps/common/main/resources/less/plugins.less
@@ -26,11 +26,11 @@
 
             &:hover,
             &.over {
-                background-color: var(--highlight-button-hover);
+                background-color: @highlight-button-hover;
             }
 
             &.selected {
-                background-color: var(--highlight-button-pressed);
+                background-color: @highlight-button-pressed;
                 color: #fff;
             }
         }
@@ -82,7 +82,7 @@
         width: 100%;
         height: 38px;
         padding: 10px 12px;
-        border-bottom: 1px solid var(--border-toolbar);
+        border-bottom: 1px solid @border-toolbar;
         
         label {
             width: 100%;
@@ -118,7 +118,7 @@
     width: 100%;
     height: 100%;
     opacity: 0.4;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     z-index: @zindex-tooltip + 1;
 }
 
diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
index 8a394e5fc..c9abcc4e5 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -18,8 +18,8 @@
             width: 14px;
             height: 14px;
 
-            background: var(--background-normal);
-            border: 1px solid var(--border-regular-control);
+            background: @background-normal;
+            border: 1px solid @border-regular-control;
             border-radius: 50%;
         }
 
@@ -28,7 +28,7 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    background: var(--text-normal);
+                    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 9ede0e2e4..7e4a2e2d7 100644
--- a/apps/common/main/resources/less/scroller.less
+++ b/apps/common/main/resources/less/scroller.less
@@ -11,13 +11,13 @@
         }
 
         .ps-scrollbar-x {
-            background-color: var(--background-toolbar);
+            background-color: @background-toolbar;
 
             &.always-visible-x {
                 bottom: 0px;
                 height: 9px;
 
-                background-color: var(--background-toolbar);
+                background-color: @background-toolbar;
                 background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVChTY6AfOH/+/H9SaSYQg1RAlqZhCT5+/AgOSlJoOgY50DqSNZJhEwMDACkvNZLpune5AAAAAElFTkSuQmCC');
                 background-repeat: no-repeat;
 
@@ -31,7 +31,7 @@
 
                 background-position: center 0;
                 .border-radius(2px);
-                border: 1px solid var(--border-regular-control);
+                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: var(--border-regular-control);
+                    background-color: @border-regular-control;
                     background-position: center -7px;
                 }
             }
@@ -52,8 +52,8 @@
         &.in-scrolling {
             .ps-scrollbar-x {
                 &.always-visible-x {
-                    background-color: var(--border-regular-control);
-                    border-color: var(--border-regular-control);
+                    background-color: @border-regular-control;
+                    border-color: @border-regular-control;
                     background-position: center -7px;
                 }
             }
@@ -72,20 +72,20 @@
         }
 
         .ps-scrollbar-y {
-            background-color: var(--background-toolbar);
+            background-color: @background-toolbar;
 
             &.always-visible-y {
                 right: 0px;
                 width: 9px;
 
-                background-color: var(--background-toolbar);
+                background-color: @background-toolbar;
                 .background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC',
                         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px);
 
                 background-repeat: no-repeat;
                 background-position: 0 center;
                 .border-radius(2px);
-                border: 1px solid var(--border-regular-control);
+                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: var(--border-regular-control);
+                    background-color: @border-regular-control;
                     background-position: -7px center;
                 }
             }
@@ -106,8 +106,8 @@
         &.in-scrolling {
             .ps-scrollbar-y {
                 &.always-visible-y {
-                    background-color: var(--border-regular-control);
-                    border-color: var(--border-regular-control);
+                    background-color: @border-regular-control;
+                    border-color: @border-regular-control;
                     background-position: -7px center;
                 }
             }
diff --git a/apps/common/main/resources/less/separator.less b/apps/common/main/resources/less/separator.less
index c0fda0e29..687805dff 100644
--- a/apps/common/main/resources/less/separator.less
+++ b/apps/common/main/resources/less/separator.less
@@ -9,7 +9,7 @@
 .separator {
     display: inline-block;
     position: inherit;
-    border-left: 1px solid var(--border-toolbar);
+    border-left: 1px solid @border-toolbar;
     vertical-align: top;
     padding: 0;
     width: 0;
@@ -20,6 +20,6 @@
 
         border-left: none;
         border-right: none;
-        border-top: 1px solid var(--border-toolbar);
+        border-top: 1px solid @border-toolbar;
     }
 }
diff --git a/apps/common/main/resources/less/spinner.less b/apps/common/main/resources/less/spinner.less
index 30bf18e71..1f6fb9078 100644
--- a/apps/common/main/resources/less/spinner.less
+++ b/apps/common/main/resources/less/spinner.less
@@ -10,7 +10,7 @@
         padding-right: @trigger-width + 2px;
 
         &:focus {
-            border-color: var(--border-preview-select);
+            border-color: @border-preview-select;
         }
     }
 
diff --git a/apps/common/main/resources/less/switcher.less b/apps/common/main/resources/less/switcher.less
index a8c781a28..0fbe00a0b 100644
--- a/apps/common/main/resources/less/switcher.less
+++ b/apps/common/main/resources/less/switcher.less
@@ -8,7 +8,7 @@
     .sw-left {
         display: inline-block;
         height: 100%;
-        background-color: var(--highlight-button-pressed);
+        background-color: @highlight-button-pressed;
         border-top-left-radius: 2px;
         border-bottom-left-radius: 2px;
     }
@@ -16,7 +16,7 @@
     .sw-right {
         display: inline-block;
         height: 100%;
-        background-color: var(--border-regular-control);
+        background-color: @border-regular-control;
         border-top-right-radius: 2px;
         border-bottom-right-radius: 2px;
     }
@@ -27,8 +27,8 @@
         right: auto;
         top: 0;
         height: 100%;
-        background-color: var(--background-normal);
-        border: 1px solid var(--highlight-button-pressed);
+        background-color: @background-normal;
+        border: 1px solid @highlight-button-pressed;
         border-radius: 3px;
     }
 
@@ -43,11 +43,11 @@
         cursor: default;
 
         .sw-left {
-            background-color: var(--border-regular-control);
+            background-color: @border-regular-control;
         }
 
         .thumb {
-            border-color: var(--border-regular-control);
+            border-color: @border-regular-control;
         }
     }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/symboltable.less b/apps/common/main/resources/less/symboltable.less
index 11d3d6a18..37f0294d0 100644
--- a/apps/common/main/resources/less/symboltable.less
+++ b/apps/common/main/resources/less/symboltable.less
@@ -7,9 +7,9 @@
   .cell{
     width: 31px;
     height: 33px;
-    border-right: 1px solid var(--border-regular-control);
-    border-bottom: 1px solid var(--border-regular-control);
-    background: var(--background-normal);
+    border-right: 1px solid @border-regular-control;
+    border-bottom: 1px solid @border-regular-control;
+    background: @background-normal;
     align-content: center;
     vertical-align: middle;
     text-align: center;
@@ -24,7 +24,7 @@
   }
 
   .cell-selected{
-    background-color: var(--border-preview-select);
+    background-color: @border-preview-select;
     color: white;
   }
 }
@@ -33,7 +33,7 @@
   width: 100%;
   height: 32px;
   overflow: hidden;
-  border: var(--border-regular-control) solid 1px;
+  border: @border-regular-control solid 1px;
 }
 
 #symbol-table-scrollable-div {
@@ -42,7 +42,7 @@
     height: 132px;
     position:relative;
     overflow:hidden;
-    border: var(--border-regular-control) solid 1px;
+    border: @border-regular-control solid 1px;
   }
 
   #id-preview-data {
diff --git a/apps/common/main/resources/less/synchronize-tip.less b/apps/common/main/resources/less/synchronize-tip.less
index d73aa6243..f6fe3829b 100644
--- a/apps/common/main/resources/less/synchronize-tip.less
+++ b/apps/common/main/resources/less/synchronize-tip.less
@@ -99,7 +99,7 @@
 .asc-synchronizetip {
     padding: 15px 8px 15px 15px;
     border-radius: 5px;
-    background-color: var(--background-notification-popover);
+    background-color: @background-notification-popover;
     overflow: visible;
 
     .right & {
@@ -123,7 +123,7 @@
     position: absolute;
     top: 5px;
     left: 8px;
-    background-color: var(--background-notification-popover);
+    background-color: @background-notification-popover;
     width: 15px;
     height: 15px;
 
@@ -141,8 +141,8 @@
 }
 
 .show-link label {
-    border-bottom: 1px dotted var(--text-link);
-    color: var(--text-link);
+    border-bottom: 1px dotted @text-link;
+    color: @text-link;
     cursor: pointer;
 }
 
diff --git a/apps/common/main/resources/less/tabbar.less b/apps/common/main/resources/less/tabbar.less
index ccb34d01e..ef83e693a 100644
--- a/apps/common/main/resources/less/tabbar.less
+++ b/apps/common/main/resources/less/tabbar.less
@@ -8,9 +8,9 @@
 
         &.active {
             > span, > span:hover, > span:focus {
-                background-color: var(--background-normal);
-                color: var(--text-normal);
-                border-color: var(--background-normal);
+                background-color: @background-normal;
+                color: @text-normal;
+                border-color: @background-normal;
                 cursor: pointer;
             }
         }
@@ -21,8 +21,8 @@
 
         > span {
             display: inline;
-            background-color: var(--background-toolbar);
-            color: var(--text-secondary);
+            background-color: @background-toolbar;
+            color: @text-secondary;
 
             padding-top: 0;
             padding-bottom: 0;
@@ -36,8 +36,8 @@
             }
 
             &:hover, &:focus {
-                background-color: var(--background-toolbar);
-                border-color: var(--background-toolbar);
+                background-color: @background-toolbar;
+                border-color: @background-toolbar;
                 cursor: pointer;
             }
         }
diff --git a/apps/common/main/resources/less/theme-colorpalette.less b/apps/common/main/resources/less/theme-colorpalette.less
index 7186a3345..23783c1ee 100644
--- a/apps/common/main/resources/less/theme-colorpalette.less
+++ b/apps/common/main/resources/less/theme-colorpalette.less
@@ -16,7 +16,7 @@
 
     a {
         padding: 0;
-        border: 1px solid var(--background-normal);
+        border: 1px solid @background-normal;
         float: left;
         text-decoration: none;
         -moz-outline: 0 none;
@@ -24,25 +24,25 @@
         cursor: pointer;
 
         em span {
-            border: 1px solid var(--border-color-shading);
+            border: 1px solid @border-color-shading;
         }
 
         &:hover, &.selected {
-            border-color: var(--icon-normal);
+            border-color: @icon-normal;
             em span {
-                border-color: var(--background-normal);
+                border-color: @background-normal;
             }
         }
     }
 
     .dynamic-empty-color em span {
-        border:solid 1px var(--border-color-shading);
-        background: var(--background-normal);
+        border:solid 1px @border-color-shading;
+        background: @background-normal;
     }
 
     .color-transparent {
         em span {
-            border:solid 1px var(--border-color-shading);
+            border:solid 1px @border-color-shading;
         }
     }
 }
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 91c1b4977..06b10238b 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -77,7 +77,7 @@
             }
 
             &.active {
-                background-color: var(--background-toolbar);
+                background-color: @background-toolbar;
             }
 
 
@@ -88,12 +88,12 @@
                 cursor: default;
                 font-size: 12px;
                 text-align: center;
-                color: var(--text-toolbar-header);
+                color: @text-toolbar-header;
             }
 
             &.active {
                 > a {
-                    color: var(--text-normal);
+                    color: @text-normal;
                 }
             }
         }
@@ -190,8 +190,8 @@
         /**/
     }
 
-    background-color: var(--background-toolbar);
-    .box-inner-shadow(0 -1px 0 var(--border-toolbar));
+    background-color: @background-toolbar;
+    .box-inner-shadow(0 -1px 0 @border-toolbar);
 
     .group {
         position: relative;
@@ -245,7 +245,7 @@
         }
 
         &.border {
-            border: 1px solid var(--border-regular-control);
+            border: 1px solid @border-regular-control;
             .border-radius(1px);
             width: 22px;
             height: 22px;
@@ -263,7 +263,7 @@
         right: 0;
         bottom: 0;
         opacity: 0;
-        background-color: var(--background-toolbar);
+        background-color: @background-toolbar;
         /* z-index: @zindex-tooltip + 1; */
     }
 
@@ -304,7 +304,7 @@
 
         .tabs, .extra {
             background-color: transparent;
-            box-shadow: inset 0 -1px 0 0 var(--border-regular-control);
+            box-shadow: inset 0 -1px 0 0 @border-regular-control;
         }
 
         .tabs {
@@ -318,7 +318,7 @@
                 &:after {
                     //transition: opacity .1s;
                     //transition: bottom .1s;
-                    border-top: @underscore_height solid var(--text-normal);
+                    border-top: @underscore_height solid @text-normal;
                     content: '';
                     position: absolute;
                     width: 100%;
@@ -337,11 +337,11 @@
 
                 &:hover:not(.active) {
                     background-color: rgba(0, 0, 0, .05);
-                    //background-color: var(--highlight-button-hover);
+                    //background-color: @highlight-button-hover;
                 }
 
                 > a {
-                    color: var(--text-normal);
+                    color: @text-normal;
 
                     &::after {
                         display:block;
@@ -367,15 +367,15 @@
 
         .tabs .scroll {
             &.left {
-                box-shadow: 5px 0 20px 5px var(--background-toolbar);
+                box-shadow: 5px 0 20px 5px @background-toolbar;
             }
 
             &.right {
-                box-shadow: -5px 0 20px 5px var(--background-toolbar);
+                box-shadow: -5px 0 20px 5px @background-toolbar;
             }
 
             &:after {
-                border-color: var(--text-normal);
+                border-color: @text-normal;
             }
         }
 
@@ -386,34 +386,34 @@
             }
 
             svg.icon {
-                fill: var(--icon-toolbar-header);
+                fill: @icon-toolbar-header;
             }
 
             .caption {
-                color: var(--text-normal);
+                color: @text-normal;
             }
 
             &:hover:not(.disabled) {
-                background-color: var(--highlight-button-hover);
+                background-color: @highlight-button-hover;
             }
 
             &:active, &.active {
                 &:not(.disabled) {
-                    background-color: var(--highlight-button-pressed);
+                    background-color: @highlight-button-pressed;
 
                     svg.icon {
-                        fill: var(--icon-toolbar-header);
+                        fill: @icon-toolbar-header;
                     }
 
                     .caption {
-                        color: var(--text-inverse);
+                        color: @text-inverse;
                     }
                 }
             }
         }
 
         #rib-doc-name {
-            color: var(--text-normal);
+            color: @text-normal;
         }
 
         &.editor-native-color {
@@ -452,22 +452,22 @@
 .btn-toolbar {
     &:active {
         svg.icon {
-            fill: var(--icon-toolbar-header);
+            fill: @icon-toolbar-header;
         }
     }
 
     svg.icon {
         background-image: none;
 
-        fill: var(--icon-normal);
+        fill: @icon-normal;
     }
 
     &.borders--small {
         border-radius: 2px;
-        background-color: var(--background-normal);
+        background-color: @background-normal;
 
         &:not(:active) {
-            box-shadow: inset 0 0 0 1px var(--border-regular-control);
+            box-shadow: inset 0 0 0 1px @border-regular-control;
         }
 
         &, .icon {
@@ -493,7 +493,7 @@
     svg.icon {
         display: inline-block;
         vertical-align: middle;
-        fill: var(--icon-normal);
+        fill: @icon-normal;
     }
 
     width: 20px;
@@ -523,7 +523,7 @@
     svg.icon {
         display: inline-block;
         vertical-align: middle;
-        fill: var(--icon-normal);
+        fill: @icon-normal;
     }
 }
 
diff --git a/apps/common/main/resources/less/tooltip.less b/apps/common/main/resources/less/tooltip.less
index effe9385d..459f245ce 100644
--- a/apps/common/main/resources/less/tooltip.less
+++ b/apps/common/main/resources/less/tooltip.less
@@ -15,7 +15,7 @@
     &.top-right .tooltip-arrow {
         bottom: 1px;
         border-width: 5px 5px 0;
-        border-top-color: var(--background-normal);
+        border-top-color: @background-normal;
     }
 
     &.top-left .tooltip-arrow,
@@ -32,16 +32,16 @@
     &.bottom-right .tooltip-arrow {
         top: 1px;
         border-width: 0 5px 5px;
-        border-bottom-color: var(--background-normal);
+        border-bottom-color: @background-normal;
     }
 }
 
 .tooltip-inner {
     font-size: 11px;
-    background-color: var(--background-normal);
-    color: var(--text-normal);
+    background-color: @background-normal;
+    color: @text-normal;
     padding: 5px 12px;
-    border: 1px solid var(--border-regular-control);
+    border: 1px solid @border-regular-control;
     .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
     background-clip: padding-box;
 
diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less
index 3f8ebf7da..f27e0539d 100644
--- a/apps/common/main/resources/less/treeview.less
+++ b/apps/common/main/resources/less/treeview.less
@@ -12,7 +12,7 @@
       text-align: center;
       height: 100%;
       width: 100%;
-      color: var(--text-tertiary);
+      color: @text-tertiary;
       td {
         padding: 5px;
       }
@@ -20,7 +20,7 @@
   }
 
   &:focus {
-    border-color: var(--border-preview-select);
+    border-color: @border-preview-select;
   }
 
   > .item {
@@ -31,11 +31,11 @@
 
     &:hover,
     &.over {
-      background-color: var(--highlight-button-hover);
+      background-color: @highlight-button-hover;
     }
 
     &.selected {
-      background-color: var(--highlight-button-pressed);
+      background-color: @highlight-button-pressed;
     }
 
     &.selected .empty {
@@ -58,7 +58,7 @@
     text-overflow: ellipsis;
 
     &.empty {
-      color: var(--text-tertiary);
+      color: @text-tertiary;
       font-style: italic;
     }
   }
diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less
index 0cf61e8b9..a9a5c5560 100644
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@@ -27,7 +27,7 @@
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
     border-radius: 5px;
     background-color: @background-normal;
-    border: solid 1px var(--border-toolbar);
+    border: solid 1px @border-toolbar;
 
     left: 0;
     top: 0;
@@ -46,15 +46,15 @@
         top: 0;
         text-overflow: ellipsis;
 
-        color: var(--border-preview-select);
+        color: @border-preview-select;
         text-align: center;
         font-size: 12px;
         font-weight: 700;
         vertical-align: bottom;
         line-height: 26px;
 
-        background: var(--background-toolbar);
-        border-bottom: solid 1px var(--border-toolbar);
+        background: @background-toolbar;
+        border-bottom: solid 1px @border-toolbar;
 
         cursor: move;
 
@@ -92,7 +92,7 @@
                 line-height: 14px;
                 font-size: 14px;
                 font-weight: bold;
-                color: var(--text-normal);
+                color: @text-normal;
                 opacity: 0.7;
 
                 &:hover {
@@ -179,10 +179,10 @@
 
                         a {
                             text-decoration: underline;
-                            color: var(--text-normal);
+                            color: @text-normal;
 
                             &:focus, &:hover {
-                                color: var(--text-normal);
+                                color: @text-normal;
                             }
                         }
                     }
@@ -240,8 +240,8 @@
         width: 5px;
         height: 5px;
         z-index: 1;
-        background: var(--background-toolbar);
-        border: 1px none var(--border-toolbar);
+        background: @background-toolbar;
+        border: 1px none @border-toolbar;
 
         &.left {
             left: 0;
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index b6294f4c9..b5d075999 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -7,8 +7,8 @@
   .panel-menu {
     width: 260px;
     float: left;
-    border-right: 1px solid var(--border-toolbar);
-    background-color: var(--background-toolbar);
+    border-right: 1px solid @border-toolbar;
+    background-color: @background-toolbar;
 
     li {
       list-style: none;
@@ -19,12 +19,12 @@
         margin-bottom: 3px;
 
         &:hover:not(.disabled) {
-          background-color: var(--highlight-button-hover);
+          background-color: @highlight-button-hover;
         }
 
         &.active:not(.disabled) {
           outline: 0;
-          background-color: var(--highlight-button-pressed);
+          background-color: @highlight-button-pressed;
 
           > a {
             color: @text-inverse;
@@ -33,7 +33,7 @@
 
         &.disabled > a {
           cursor: default;
-          color: var(--border-regular-control);
+          color: @border-regular-control;
         }
 
       }
@@ -68,7 +68,7 @@
   .panel-context {
     width: 100%;
     padding-left: 260px;
-    background-color: var(--background-normal);
+    background-color: @background-normal;
 
     .content-box {
       height: 100%;
@@ -123,7 +123,7 @@
 .flex-settings {
   #file-menu-panel & {
     &.bordered {
-      border-bottom: 1px solid var(--border-regular-control);
+      border-bottom: 1px solid @border-regular-control;
     }
     overflow: hidden;
     position: relative;
@@ -173,7 +173,7 @@
   h3 {
     margin: 0;
     font-size: 10pt;
-    color: var(--text-normal);
+    color: @text-normal;
     font-weight: bold;
     padding: 0 0 10px 10px;
     white-space: nowrap;
@@ -207,7 +207,7 @@
   hr {
     margin: 0;
     border-bottom: none;
-    border-color: var(--border-toolbar);
+    border-color: @border-toolbar;
   }
 
   .thumb-list {
@@ -246,7 +246,7 @@
 
     &:hover,
     &.over {
-      background-color: var(--background-toolbar);
+      background-color: @background-toolbar;
     }
 
     .recent-icon {
@@ -268,7 +268,7 @@
     }
 
     .file-info {
-      color: var(--text-secondary);
+      color: @text-secondary;
     }
   }
 }
@@ -285,7 +285,7 @@
   }
 
   .dataview {
-    border-right: 1px solid var(--border-toolbar);
+    border-right: 1px solid @border-toolbar;
 
     & > .item {
       display: block;
@@ -299,11 +299,11 @@
       &:not(.header-name) {
         &:hover,
         &.over {
-          background-color: var(--background-toolbar);
+          background-color: @background-toolbar;
         }
 
         &.selected {
-          background-color: var(--highlight-button-pressed);
+          background-color: @highlight-button-pressed;
           color: @dropdown-link-active-color;
         }
       }
diff --git a/apps/documenteditor/main/resources/less/layout.less b/apps/documenteditor/main/resources/less/layout.less
index 3cb60957f..12153b738 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: var(--text-normal);
+    color: @text-normal;
 
     &.safari {
         position: absolute;
@@ -39,7 +39,7 @@ label {
     top:0;
     right: 0;
     bottom: 0;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     overflow: hidden;
 }
 
diff --git a/apps/documenteditor/main/resources/less/leftmenu.less b/apps/documenteditor/main/resources/less/leftmenu.less
index 658c8023b..51ed180ff 100644
--- a/apps/documenteditor/main/resources/less/leftmenu.less
+++ b/apps/documenteditor/main/resources/less/leftmenu.less
@@ -6,7 +6,7 @@
         overflow: hidden;
 
         .tool-menu-btns {
-            border-right: 1px solid var(--border-toolbar);
+            border-right: 1px solid @border-toolbar;
         }
     }
 }
@@ -26,7 +26,7 @@
 .left-panel {
     padding-left: 40px;
     height: 100%;
-    border-right: 1px solid var(--border-toolbar);
+    border-right: 1px solid @border-toolbar;
 
     #left-panel-chat {
         height: 100%;
@@ -47,7 +47,7 @@
     top: 0;
     position: absolute;
     z-index: @zindex-dropdown - 5;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     overflow: hidden;
 }
 
diff --git a/apps/documenteditor/main/resources/less/navigation.less b/apps/documenteditor/main/resources/less/navigation.less
index f529a07b3..b87947af3 100644
--- a/apps/documenteditor/main/resources/less/navigation.less
+++ b/apps/documenteditor/main/resources/less/navigation.less
@@ -11,7 +11,7 @@
         width: 100%;
         font-weight: bold;
         padding: 10px 12px;
-        border-bottom: 1px solid var(--border-toolbar);
+        border-bottom: 1px solid @border-toolbar;
     }
 
     #navigation-list {
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index c82127545..5953bc833 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -2,8 +2,8 @@
 .tool-menu.right {
     .tool-menu-btns {
         position: absolute;
-        border-left: 1px solid var(--border-toolbar);
-        background-color: var(--background-toolbar);
+        border-left: 1px solid @border-toolbar;
+        background-color: @background-toolbar;
         right: 0;
         overflow: hidden;
     }
@@ -16,7 +16,7 @@
     padding: 0 10px 0 15px;
     position: relative;
     overflow: hidden;
-    border-left: 1px solid var(--border-toolbar);
+    border-left: 1px solid @border-toolbar;
     line-height: 15px;
 }
 
@@ -78,7 +78,7 @@
         width: 100%;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid var(--border-toolbar);
+        border: 1px solid @border-toolbar;
         height: 100%;
 
         &.disabled {
@@ -255,7 +255,7 @@ button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -
 
         &:hover,
         &.over {
-            background-color: var(--highlight-button-hover);
+            background-color: @highlight-button-hover;
 
             .caret {
                 display: inline-block;
diff --git a/apps/documenteditor/main/resources/less/statusbar.less b/apps/documenteditor/main/resources/less/statusbar.less
index 50fb246e6..2b2107001 100644
--- a/apps/documenteditor/main/resources/less/statusbar.less
+++ b/apps/documenteditor/main/resources/less/statusbar.less
@@ -2,12 +2,12 @@
     display: table;
     padding: 2px;
     height: 25px;
-    background-color: var(--background-toolbar);
-    .box-inner-shadow(0 1px 0 var(--border-toolbar));
+    background-color: @background-toolbar;
+    .box-inner-shadow(0 1px 0 @border-toolbar);
 
     .status-label {
         font-weight: bold;
-        color: var(--text-normal);
+        color: @text-normal;
         white-space: nowrap;
         position: relative;
         top: 1px;
@@ -75,7 +75,7 @@
     .cnt-lang {
         display: inline-block;
         cursor: pointer;
-        color: var(--text-normal);
+        color: @text-normal;
         margin-left: 6px;
 
         .caret.up {
@@ -181,7 +181,7 @@
                 height: 12px;
                 display: inline-block;
                 vertical-align: middle;
-                border: 1px solid var(--border-toolbar);
+                border: 1px solid @border-toolbar;
             }
 
             .name {
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index ce47c6690..3316cb45f 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -27,7 +27,7 @@
     right: 0;
     bottom: 0;
     opacity: 0;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     z-index: @zindex-tooltip + 1;
 }
 
@@ -47,11 +47,11 @@
             width: 246px;
             height: @contents-menu-item-height;
 
-            .box-shadow(0 0 0 1px var(--border-regular-control));
+            .box-shadow(0 0 0 1px @border-regular-control);
 
             &:hover,
             &.selected {
-                .box-shadow(0 0 0 2px var(--highlight-button-pressed));
+                .box-shadow(0 0 0 2px @highlight-button-pressed);
             }
         }
 
@@ -59,7 +59,7 @@
             background-color: transparent;
 
             div {
-                .box-shadow(0 0 0 2px var(--highlight-button-pressed));
+                .box-shadow(0 0 0 2px @highlight-button-pressed);
             }
         }
     }
@@ -102,7 +102,7 @@
             display: none !important;
         }
         &, &:hover, &:focus {
-            background-color: var(--highlight-button-pressed);
+            background-color: @highlight-button-pressed;
             color: @dropdown-link-active-color;
             span.color {
                 border-color: rgba(255,255,255,0.7);
@@ -123,7 +123,7 @@
                 opacity: 0.5;
 
                 &:hover {
-                    .box-shadow(0 0 0 1px var(--border-regular-control));
+                    .box-shadow(0 0 0 1px @border-regular-control);
                 }
             }
         }
@@ -173,13 +173,13 @@
 #control-settings-system-color > a.selected,
 #control-settings-system-color > a:hover {
     span {
-        outline: 1px solid var(--icon-normal);
-        border: 1px solid var(--background-normal);
+        outline: 1px solid @icon-normal;
+        border: 1px solid @background-normal;
     }
 }
 
 .item-equation {
-    border: 1px solid var(--border-regular-control);
+    border: 1px solid @border-regular-control;
     .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
 }
 
@@ -187,12 +187,12 @@
     cursor: default;
     position: relative;
     padding: 14px 11px;
-    border-left: 1px solid var(--border-regular-control);
-    border-top: 1px solid var(--border-regular-control);
+    border-left: 1px solid @border-regular-control;
+    border-top: 1px solid @border-regular-control;
 }
 
 .save-style-link {
-    border-bottom: 1px dotted var(--text-secondary);
+    border-bottom: 1px dotted @text-secondary;
     cursor: pointer;
     margin-left: 22px;
 }
@@ -236,6 +236,6 @@
 #special-paste-container {
     position: absolute;
     z-index: @zindex-dropdown - 20;
-    background-color: var(--background-toolbar);
-    border: 1px solid var(--border-regular-control);
+    background-color: @background-toolbar;
+    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 0eb4416c6..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: var(--text-normal);
+    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/document-preview.less b/apps/presentationeditor/main/resources/less/document-preview.less
index 980882882..80a151c48 100644
--- a/apps/presentationeditor/main/resources/less/document-preview.less
+++ b/apps/presentationeditor/main/resources/less/document-preview.less
@@ -3,7 +3,7 @@
 }
 .preview-controls {
     display: table;
-    background: var(--background-toolbar);
+    background: @background-toolbar;
     height: 35px;
     z-index: 10;
     opacity: 0.2;
diff --git a/apps/presentationeditor/main/resources/less/layout.less b/apps/presentationeditor/main/resources/less/layout.less
index 0461e1fb6..ad91dad2c 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: var(--text-normal);
+    color: @text-normal;
 
     &.safari {
         position: absolute;
@@ -50,7 +50,7 @@ label {
     top:0;
     right: 0;
     bottom: 0;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     overflow: hidden;
 }
 
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index e57b96285..5e440103a 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -6,7 +6,7 @@
         overflow: hidden;
 
         .tool-menu-btns {
-            border-right: 1px solid var(--border-toolbar);
+            border-right: 1px solid @border-toolbar;
         }
     }
 }
@@ -17,8 +17,8 @@
         border-right: 0 none;
 
         &.move {
-            border-left: 1px solid var(--border-toolbar);
-            border-right: 1px solid var(--border-toolbar);
+            border-left: 1px solid @border-toolbar;
+            border-right: 1px solid @border-toolbar;
             opacity: 0.4;
         }
     }
@@ -39,7 +39,7 @@
 .left-panel {
     padding-left: 40px;
     height: 100%;
-    border-right: 1px solid var(--border-toolbar);
+    border-right: 1px solid @border-toolbar;
 
     #left-panel-chat {
         height: 100%;
@@ -57,7 +57,7 @@
     top: 0;
     position: absolute;
     z-index: @zindex-dropdown - 5;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     overflow: hidden;
 }
 
@@ -91,8 +91,8 @@
     .panel-menu {
         width: 260px;
         float: left;
-        border-right: 1px solid var(--border-toolbar);
-        background-color: var(--background-toolbar);
+        border-right: 1px solid @border-toolbar;
+        background-color: @background-toolbar;
 
         li {
             list-style: none;
@@ -103,12 +103,12 @@
                 margin-bottom: 3px;
 
                 &:hover {
-                    background-color: var(--highlight-button-hover);
+                    background-color: @highlight-button-hover;
                 }
 
                 &.active {
                     outline: 0;
-                    background-color: var(--highlight-button-pressed);
+                    background-color: @highlight-button-pressed;
 
                     > a {
                         color: #fff;
@@ -191,7 +191,7 @@
 
         .flex-settings {
             &.bordered {
-                border-bottom: 1px solid var(--border-regular-control);
+                border-bottom: 1px solid @border-regular-control;
             }
             overflow: hidden;
             position: relative;
@@ -313,7 +313,7 @@
 
                 &:hover,
                 &.over {
-                    background-color: var(--background-toolbar);
+                    background-color: @background-toolbar;
                 }
 
                 .recent-icon {
@@ -354,7 +354,7 @@
             }
 
             .dataview {
-                border-right: 1px solid var(--border-toolbar);
+                border-right: 1px solid @border-toolbar;
 
                 & > div:not([class^=ps-scrollbar]) {
                     display: block;
@@ -368,11 +368,11 @@
                     &:not(.header-name) {
                         &:hover,
                         &.over {
-                            background-color: var(--background-toolbar);
+                            background-color: @background-toolbar;
                         }
 
                         &.selected {
-                            background-color: var(--highlight-button-pressed);
+                            background-color: @highlight-button-pressed;
                             color: @dropdown-link-active-color;
                         }
                     }
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 7694a1b0f..859a2f985 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -2,8 +2,8 @@
 .tool-menu.right {
     .tool-menu-btns {
         position: absolute;
-        border-left: 1px solid var(--border-toolbar);
-        background-color: var(--background-toolbar);
+        border-left: 1px solid @border-toolbar;
+        background-color: @background-toolbar;
         right: 0;
         overflow: hidden;
     }
@@ -16,7 +16,7 @@
     padding: 0 10px 0 15px;
     position: relative;
     overflow: hidden;
-    border-left: 1px solid var(--border-toolbar);
+    border-left: 1px solid @border-toolbar;
     line-height: 15px;
 }
 
@@ -70,7 +70,7 @@
         width: 100%;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid var(--border-toolbar);
+        border: 1px solid @border-toolbar;
         height: 100%;
 
         &.disabled {
@@ -188,7 +188,7 @@ button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -
 
         &:hover,
         &.over {
-            background-color: var(--highlight-button-hover);
+            background-color: @highlight-button-hover;
 
             .caret {
                 display: inline-block;
diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less
index ce9ec3214..b6c7431a1 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -2,12 +2,12 @@
     display: table;
     padding: 2px;
     height: 25px;
-    background-color: var(--background-toolbar);
-    .box-inner-shadow(0 1px 0 var(--border-toolbar));
+    background-color: @background-toolbar;
+    .box-inner-shadow(0 1px 0 @border-toolbar);
 
     .status-label {
         font-weight: bold;
-        color: var(--text-normal);
+        color: @text-normal;
         white-space: nowrap;
         position: relative;
         top: 1px;
@@ -173,7 +173,7 @@
                 height: 12px;
                 display: inline-block;
                 vertical-align: middle;
-                border: 1px solid var(--border-toolbar);
+                border: 1px solid @border-toolbar;
             }
 
             .name {
diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less
index 1e37704a5..5ff8e21e3 100644
--- a/apps/presentationeditor/main/resources/less/toolbar.less
+++ b/apps/presentationeditor/main/resources/less/toolbar.less
@@ -25,7 +25,7 @@
             &:hover,
             &.selected {
                 .layout > div:first-child {
-                    .box-shadow(0 0 0 2px var(--highlight-button-pressed));
+                    .box-shadow(0 0 0 2px @highlight-button-pressed);
                 }
             }
         }
@@ -76,7 +76,7 @@
             display: none !important;
         }
         &, &:hover, &:focus {
-            background-color: var(--highlight-button-pressed);
+            background-color: @highlight-button-pressed;
             color: @dropdown-link-active-color;
             span.color {
                 border-color: rgba(255,255,255,0.7);
@@ -118,7 +118,7 @@
 }
 
 .item-equation {
-    border: 1px solid var(--border-regular-control);
+    border: 1px solid @border-regular-control;
     .background-ximage-v2('toolbar/math.png', 1500px);
 }
 
@@ -131,8 +131,8 @@
 #special-paste-container {
     position: absolute;
     z-index: @zindex-dropdown - 20;
-    background-color: var(--background-toolbar);
-    border: 1px solid var(--border-regular-control);
+    background-color: @background-toolbar;
+    border: 1px solid @border-regular-control;
 }
 
 .item-theme {
diff --git a/apps/spreadsheeteditor/main/resources/less/celleditor.less b/apps/spreadsheeteditor/main/resources/less/celleditor.less
index aec63ecdd..a8b39714e 100644
--- a/apps/spreadsheeteditor/main/resources/less/celleditor.less
+++ b/apps/spreadsheeteditor/main/resources/less/celleditor.less
@@ -1,14 +1,14 @@
 #cell-editing-box {
-    border-bottom: solid 1px var(--border-toolbar);
-    border-left: solid 1px var(--border-toolbar);
+    border-bottom: solid 1px @border-toolbar;
+    border-left: solid 1px @border-toolbar;
     min-height: 20px;
     background-color: #fff;
 
     .ce-group-name {
         float: left;
         height: 20px;
-        border-bottom: 1px solid var(--border-toolbar);
-        background-color: var(--background-toolbar);
+        border-bottom: 1px solid @border-toolbar;
+        background-color: @background-toolbar;
 
         #ce-cell-name {
             width: 100px;
@@ -17,12 +17,12 @@
             vertical-align: top;
             display: inline-block;
             border: 0 none;
-            border-right: 1px solid var(--border-toolbar);
+            border-right: 1px solid @border-toolbar;
             transition: none;
             -webkit-transition: none;
 
             &[disabled] {
-                color: var(--border-preview-select);
+                color: @border-preview-select;
                 opacity: 0.5;
             }
         }
@@ -31,7 +31,7 @@
             display: inline-block;
             position: absolute;
             left: 80px;
-            background-color: var(--background-toolbar);
+            background-color: @background-toolbar;
 
             button {
                 background-color: #fff;
@@ -75,7 +75,7 @@
         padding-left: 1px;
         margin: 0 16px 0 120px;
         height: 100%;
-        border-left: 1px solid var(--border-toolbar);
+        border-left: 1px solid @border-toolbar;
 
         #ce-cell-content {
             height: 100%;
@@ -87,7 +87,7 @@
             padding-bottom: 0;
 
             &[disabled] {
-                color: var(--border-preview-select);
+                color: @border-preview-select;
                 opacity: 0.5;
             }
         }
@@ -102,8 +102,8 @@
         border-bottom: 0 none;
 
         &.move {
-            border-top: 1px solid var(--border-toolbar);
-            border-bottom: 1px solid var(--border-toolbar);
+            border-top: 1px solid @border-toolbar;
+            border-bottom: 1px solid @border-toolbar;
             opacity: 0.4;
         }
     }
diff --git a/apps/spreadsheeteditor/main/resources/less/filterdialog.less b/apps/spreadsheeteditor/main/resources/less/filterdialog.less
index b9966acc3..efbf4c38f 100644
--- a/apps/spreadsheeteditor/main/resources/less/filterdialog.less
+++ b/apps/spreadsheeteditor/main/resources/less/filterdialog.less
@@ -21,9 +21,9 @@
 
     .item {
       &.selected {
-        background-color: var(--highlight-button-hover);
-        border-color: var(--highlight-button-hover);
-        color: var(--text-normal);
+        background-color: @highlight-button-hover;
+        border-color: @highlight-button-hover;
+        color: @text-normal;
         border-style: solid;
         border-width: 1px 0;
       }
@@ -94,7 +94,7 @@
       }
 
       &.border {
-        border: 1px solid var(--border-regular-control);
+        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 77c670812..c1d710dc5 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: var(--text-normal);
+    color: @text-normal;
 
     &.safari {
         position: absolute;
@@ -33,7 +33,7 @@ label {
     top:0;
     right: 0;
     bottom: 0;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     overflow: hidden;
 }
 
@@ -52,8 +52,8 @@ label {
     }
 
     #editor_sdk {
-        border-top: 1px solid var(--border-toolbar);
-        border-left: 1px solid var(--border-toolbar);
+        border-top: 1px solid @border-toolbar;
+        border-left: 1px solid @border-toolbar;
     }
 
     .layout-resizer {
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index b659ae0cb..0e00ca34f 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -6,7 +6,7 @@
         overflow: hidden;
 
         .tool-menu-btns {
-            border-right: 1px solid var(--border-toolbar);
+            border-right: 1px solid @border-toolbar;
         }
     }
 }
@@ -17,8 +17,8 @@
         border-right: 0 none;
 
         &.move {
-            border-left: 1px solid var(--border-toolbar);
-            border-right: 1px solid var(--border-toolbar);
+            border-left: 1px solid @border-toolbar;
+            border-right: 1px solid @border-toolbar;
             opacity: 0.4;
         }
     }
@@ -39,7 +39,7 @@
 .left-panel {
     padding-left: 40px;
     height: 100%;
-    border-right: 1px solid var(--border-toolbar);
+    border-right: 1px solid @border-toolbar;
 
     #left-panel-chat {
         height: 100%;
@@ -57,7 +57,7 @@
     top: 0;
     position: absolute;
     z-index: @zindex-dropdown - 5;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     overflow: hidden;
 }
 
@@ -91,8 +91,8 @@
     .panel-menu {
         width: 260px;
         float: left;
-        border-right: 1px solid var(--border-toolbar);
-        background-color: var(--background-toolbar);
+        border-right: 1px solid @border-toolbar;
+        background-color: @background-toolbar;
 
         li {
             list-style: none;
@@ -103,12 +103,12 @@
                 margin-bottom: 3px;
 
                 &:hover:not(.disabled) {
-                    background-color: var(--highlight-button-hover);
+                    background-color: @highlight-button-hover;
                 }
 
                 &.active:not(.disabled) {
                     outline: 0;
-                    background-color: var(--highlight-button-pressed);
+                    background-color: @highlight-button-pressed;
 
                     > a {
                         color: #fff;
@@ -117,7 +117,7 @@
 
                 &.disabled > a {
                     cursor: default;
-                    color: var(--border-regular-control);
+                    color: @border-regular-control;
                 }
             }
 
@@ -181,7 +181,7 @@
 
         .flex-settings {
             &.bordered {
-                border-bottom: 1px solid var(--border-regular-control);
+                border-bottom: 1px solid @border-regular-control;
             }
             overflow: hidden;
             position: relative;
@@ -209,7 +209,7 @@
 
             #id-settings-menu {
                 .dataview {
-                    border-right: 1px solid var(--border-toolbar);
+                    border-right: 1px solid @border-toolbar;
 
                     & > div:not([class^=ps-scrollbar]) {
                         display: block;
@@ -232,11 +232,11 @@
 
                         &:hover,
                         &.over {
-                            background-color: var(--background-toolbar);
+                            background-color: @background-toolbar;
                         }
 
                         &.selected {
-                            background-color: var(--highlight-button-pressed);
+                            background-color: @highlight-button-pressed;
                             color: @dropdown-link-active-color;
 
                             .settings-icon {
@@ -377,7 +377,7 @@
 
                 &:hover,
                 &.over {
-                    background-color: var(--background-toolbar);
+                    background-color: @background-toolbar;
                 }
 
                 .recent-icon {
@@ -418,7 +418,7 @@
             }
 
             .dataview {
-                border-right: 1px solid var(--border-toolbar);
+                border-right: 1px solid @border-toolbar;
 
                 & > div:not([class^=ps-scrollbar]) {
                     display: block;
@@ -432,11 +432,11 @@
                     &:not(.header-name) {
                         &:hover,
                         &.over {
-                            background-color: var(--background-toolbar);
+                            background-color: @background-toolbar;
                         }
 
                         &.selected {
-                            background-color: var(--highlight-button-pressed);
+                            background-color: @highlight-button-pressed;
                             color: @dropdown-link-active-color;
                         }
                     }
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 5e6d5e74f..f091d0a1b 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -2,8 +2,8 @@
 .tool-menu.right {
     .tool-menu-btns {
         position: absolute;
-        border-left: 1px solid var(--border-toolbar);
-        background-color: var(--background-toolbar);
+        border-left: 1px solid @border-toolbar;
+        background-color: @background-toolbar;
         right: 0;
         overflow: hidden;
     }
@@ -16,7 +16,7 @@
     padding: 0 10px 0 15px;
     position: relative;
     overflow: hidden;
-    border-left: 1px solid var(--border-toolbar);
+    border-left: 1px solid @border-toolbar;
     line-height: 15px;
 }
 
@@ -70,7 +70,7 @@
         width: 100%;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid var(--border-toolbar);
+        border: 1px solid @border-toolbar;
         height: 100%;
 
         &.disabled {
@@ -258,7 +258,7 @@ button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -
 
         &:hover,
         &.over {
-            background-color: var(--highlight-button-hover);
+            background-color: @highlight-button-hover;
 
             .caret {
                 display: inline-block;
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index 34191ce70..e9e41fba4 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -1,8 +1,8 @@
 .statusbar {
     padding: 0 2px 0;
     height: 25px;
-    background-color: var(--background-toolbar);
-    .box-inner-shadow(0 1px 0 var(--border-toolbar));
+    background-color: @background-toolbar;
+    .box-inner-shadow(0 1px 0 @border-toolbar);
     z-index: 500;
 
     #status-tabs-scroll {
@@ -26,7 +26,7 @@
             text-align: center;
 
             &.disabled {
-                color: var(--border-preview-select);
+                color: @border-preview-select;
                 cursor: default;
             }
         }
@@ -96,7 +96,7 @@
                     height: 12px;
                     display: inline-block;
                     vertical-align: middle;
-                    border: 1px solid var(--border-toolbar);
+                    border: 1px solid @border-toolbar;
                 }
 
                 .name {
@@ -114,8 +114,8 @@
     #status-addtabs-box {
         float: left;
         padding: 3px 8px 0 8px;
-        border-left: 1px solid var(--border-toolbar);
-        border-right: 1px solid var(--border-toolbar);
+        border-left: 1px solid @border-toolbar;
+        border-right: 1px solid @border-toolbar;
         height: 25px;
     }
 
@@ -158,7 +158,7 @@
             display: flex;
 
             > li {
-                background-color: var(--background-toolbar);
+                background-color: @background-toolbar;
 
                 &:first-of-type {
                     span {
@@ -178,16 +178,16 @@
                     padding: 0 10px 0;
                     line-height: 24px;
                     margin-right: -1px;
-                    background-color: var(--background-toolbar);
+                    background-color: @background-toolbar;
                     outline: none;
-                    border-left: 1px solid var(--border-toolbar);
-                    border-right: 1px solid var(--border-toolbar);
-                    border-top: 1px solid var(--border-toolbar);
+                    border-left: 1px solid @border-toolbar;
+                    border-right: 1px solid @border-toolbar;
+                    border-top: 1px solid @border-toolbar;
 
                     &:hover {
-                        border-top-color: var(--border-toolbar);
-                        border-bottom-color: var(--border-toolbar);
-                        color: @black !important;
+                        border-top-color: @border-toolbar;
+                        border-bottom-color: @border-toolbar;
+                        color: @text-normal !important;
                     }
                 }
 
@@ -259,7 +259,7 @@
 
                 &:not(.active) {
                     > span {
-                        color: var(--border-preview-select);
+                        color: @border-preview-select;
                     }
                 }
 
@@ -272,14 +272,14 @@
                     }
 
                     > span {
-                        border-left: 2px solid var(--text-normal);
+                        border-left: 2px solid @text-normal;
                         padding-left: 9px;
                     }
                     
                     &.right {
                         > span {
-                            border-left: 1px solid var(--border-toolbar);
-                            border-right: 2px solid var(--text-normal);
+                            border-left: 1px solid @border-toolbar;
+                            border-right: 2px solid @text-normal;
                             padding-right: 9px;
                             padding-left: 10px;
                         }
@@ -318,7 +318,7 @@
 
     .status-label {
         font-weight: bold;
-        color: var(--text-normal);
+        color: @text-normal;
         white-space: nowrap;
     }
 
@@ -398,7 +398,7 @@
     width: 36px;
     height: 100%;
     opacity: 0;
-    background-color: var(--background-toolbar);
+    background-color: @background-toolbar;
     z-index: @zindex-modal - 1;
 }
 
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 333969131..48f3e06a5 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -64,7 +64,7 @@
             display: none !important;
         }
         &, &:hover, &:focus {
-            background-color: var(--highlight-button-pressed);
+            background-color: @highlight-button-pressed;
             color: @dropdown-link-active-color;
             span.color {
                 border-color: rgba(255,255,255,0.7);
@@ -136,7 +136,7 @@
 }
 
 .item-equation {
-    border: 1px solid var(--border-regular-control);
+    border: 1px solid @border-regular-control;
     .background-ximage-v2('toolbar/math.png', 1500px);
 }
 
@@ -144,8 +144,8 @@
 #autocorrect-paste-container {
     position: absolute;
     z-index: @zindex-dropdown - 20;
-    background-color: var(--background-toolbar);
-    border: 1px solid var(--border-regular-control);
+    background-color: @background-toolbar;
+    border: 1px solid @border-regular-control;
 }
 
 #slot-field-fontname {