Link up Less properties to predefined variables

Author: tomgreenfield

frontend/src/core/less/app.less

@@ -6,7 +6,7 @@ html {
 
 body {
   background-color:@ui-content-color;
-  color:@sidebar-color;
+  color: @tertiary-color;
 }
 
 #app {
@@ -65,7 +65,7 @@ span.error {
     > div {
       width: @loading-icon-size;
       height: @loading-icon-size;
-      background-color: #263944;
+      background-color: @tertiary-color;
       margin: 0 @loading-icon-size/3 0 @loading-icon-size/3;
 
       border-radius: 100%;

frontend/src/core/less/colours.less

@@ -48,7 +48,7 @@
 @sidebar-color: @tertiary-color;
 @sidebar-text-color: @primary-color;
 @sidebar-item-hover-color: lighten(@tertiary-color, 10%);
-@sidebar-item-hover-text-color: white;
+@sidebar-item-hover-text-color: @white;
 @sidebar-input-text-color: @white;
 @sidebar-input-placeholder-color: #9fa8ad;
 @sidebar-input-color: #627178;

frontend/src/core/less/sharedStyles.less

@@ -50,7 +50,7 @@
   max-width: 800px;
   margin: 20px;
   border: 1px solid #d6f2f9;
-  background-color: #fff;
+  background-color: @white;
   > .inner {
     padding: 30px;
     form .form-group {

frontend/src/core/less/tables.less

@@ -2,7 +2,7 @@
 
 .tb-title {
     background-color: #9cabc4;
-    color:#fff;
+    color: @white;
     text-align: center;
     border-bottom: 1px gray solid;
     padding: 24px 30px!important;

frontend/src/core/less/tags.less

@@ -2,7 +2,7 @@
 
 div.tagsinput {
   border:1px solid #CCC;
-  background: #FFF;
+  background: @white;
   padding:5px;
   overflow-y: auto;
   border-radius: @button-radius;
@@ -61,7 +61,7 @@ div.tagsinput {
   padding: 4px 0 4px 0;
   margin: 2px 0 0 0;
   list-style: none;
-  background-color: #ffffff;
+  background-color: @white;
   border-color: #ccc;
   border-color: rgba(0, 0, 0, 0.2);
   border-style: solid;
@@ -189,6 +189,6 @@ div.tagsinput {
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
   background: #15a4fa;
-  font-weight: bold;
-  color: #fff;
+  font-weight: @font-weight-bold;
+  color: @white;
 }

frontend/src/modules/assetManagement/less/asset.less

@@ -36,7 +36,7 @@
     right: 0;
     overflow-x:hidden;
     text-align:center;
-    background-color:#fff;
+    background-color: @white;
 
     &-inner {
         padding: 30px 15px;
@@ -74,7 +74,7 @@
     margin-bottom:30px;
     float:left;
     cursor:pointer;
-    background-color:#fff;
+    background-color: @white;
     border: 1px solid #d6f2f9;
     border-radius:3px;
     transition: all 0.3s;
@@ -100,7 +100,7 @@
         background-position:center;
         background-size:cover;
         background-repeat: no-repeat;
-        background-color: white;
+        background-color: @white;
         text-align:center;
         border: 1px solid #d6f2f9;
         border-left: none;
@@ -159,7 +159,7 @@
 
     span.tag-value {
       margin: 5px;
-      color:#fff;
+      color: @white;
       padding: 3px;
       background-color:@primary-color;
     }
@@ -191,14 +191,14 @@
         border: none;
         border-radius: 3px;
         background: #627178;
-        color: #fff;
+        color: @white;
     }
     .modal & button {
         margin-left:-4px;
         color:#9cabc4;
         transition:color 0.3s;
         &:hover {
-            color:#fff;
+            color: @white;
         }
     }
 }
@@ -214,7 +214,7 @@
     top:40px;
     left:0px;
     z-index:5;
-    background-color:#fff;
+    background-color: @white;
     box-shadow:1px 2px 4px 0px #666;
     &-inner {
         padding:30px;
@@ -225,7 +225,8 @@
     position: absolute;
     top: 0px;
     right: 0;
+    color: @primary-color;
     &:hover {
-        color:#15a4fa;
+        color: darken(@primary-color, 5%);
     }
 }

frontend/src/modules/assetManagement/less/assetManagementNew.less

@@ -9,7 +9,7 @@
         visibility:hidden;
         width:76px;
         height:10px;
-        background-color: white;
+        background-color: @white;
         border:1px solid black;
         overflow: hidden;
         border-radius: 8px;

frontend/src/modules/colorLabel/less/colorLabels.less

@@ -7,7 +7,7 @@
     transform: translate(-50%,-50%);
     max-width: 640px;
 
-    background: @adapt-white;
+    background: @white;
     border: solid 1px @popup-border-color;
     box-shadow: 0 0 4px @popup-border-color;
 
@@ -17,7 +17,7 @@
         .colorlabel-header {
             .title {
                 font-size: 17px;
-                font-weight: 700;
+                font-weight: @font-weight-bold;
                 line-height: 20px;
                 padding: 0 4px;
             }
@@ -36,7 +36,7 @@
 
             .color-item {
                 font-size: 0;
-                border: solid 4px @adapt-white;
+                border: solid 4px @white;
                 width: 30px;
                 height: 30px;
                 border-radius: 4px;
@@ -85,7 +85,7 @@
                 }
 
                 &.selected {
-                    border-color: darken(@adapt-white, 50%);
+                    border-color: darken(@white, 50%);
                     border-radius: 8px;
                 }
             }

frontend/src/modules/contextMenu/less/contextMenu.less

@@ -1,14 +1,14 @@
 // Context Menu styling
 // ==============
-@context-menu-color:#34bee0;
-@context-menu-text-color:#fff;
+@context-menu-color: @primary-color;
+@context-menu-text-color: @white;
 
-@context-menu-icon-color:#fff;
+@context-menu-icon-color: @white;
 
 @context-menu-item-color:@context-menu-color;
-@context-menu-item-hover-color:darken(@context-menu-item-color,10%);
+@context-menu-item-hover-color: lighten(@context-menu-item-color, 10%);
 
-@context-menu-item-text-color:white;
+@context-menu-item-text-color: @white;
 @context-menu-item-text-hover-color:@context-menu-item-text-color;
 
 @contect-menu-item-border:1px solid #3e4a5f;
@@ -39,11 +39,11 @@
             padding:12px;
             text-decoration: none;
             color: @context-menu-item-text-color;
-                border-top: 1px solid #60cce7;
+            border-top: 1px solid @context-menu-item-hover-color;
             transition:all 0.3s;
             &:hover {
                 color:@context-menu-item-text-hover-color;
-                background-color:lighten(@context-menu-color, 15%);
+                background-color: @context-menu-item-hover-color;
             }
         }
     }

frontend/src/modules/editor/contentObject/less/editing-overlay-component-list.less

@@ -48,7 +48,7 @@
     border-right:1px solid #ccc;
     padding:0px 10px;
     float:left;
-    background-color:#fff;
+    background-color: @white;
     color:#3e4960;
     transition:background-color 0.2s;
     &:hover {