action colors

src/Umbraco.Web.UI.Client/src/less/components/editor.less

@@ -101,9 +101,6 @@ input.umb-editor-header__name-input {
 	padding: 0 10px;
 	background: @white;
 	border: 1px solid @gray-8;
-	&:hover {
-		border-color: @turquoise-d1;
-	}
 }
 
 input.umb-editor-header__name-input:disabled {

src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less

@@ -42,13 +42,13 @@
 
 .umb-tree-item.current > .umb-tree-item__inner {
 
-    background: @turquoise-d1; 
+    background: @ui-active; 
     
     // override small icon color. TODO => check usage 
-//    &:before {
-//        color: @turquoise-l2;
-//    }
-
+    &:before {
+        color: @turquoise-l2;
+    }
+    
     .umb-options {
 
         &:hover i {
@@ -57,7 +57,7 @@
 
         i {
             background: @white;
-            border-color: @turquoise-d1;
+            border-color: @ui-active;
             transition: opacity 120ms ease;
         }
     }
@@ -66,7 +66,7 @@
     .umb-tree-icon,
     ins {
         color: @white !important;
-        background-color: @turquoise-d1;
-        border-color: @turquoise-d1;
+        background-color: @ui-active;
+        border-color: @ui-active;
     }
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less

@@ -32,8 +32,8 @@
 }
 
 .umb-sub-views-nav-item.is-active {
-  color: @turquoise-d1;
-  border-bottom-color: @turquoise-d1;
+  color: @ui-active;
+  border-bottom-color: @ui-active;
 }
 
 .show-validation .umb-sub-views-nav-item.-has-error {
@@ -98,7 +98,7 @@
 
 // make dots green the an item is active
 .umb-sub-views-nav-item.is-active .umb-sub-views-nav-item__more i {
-  background-color: @turquoise-d1;
+  background-color: @ui-active;
 }
 
 .umb-sub-views-nav__dropdown.umb-sub-views-nav__dropdown {

src/Umbraco.Web.UI.Client/src/less/components/umb-flatpickr.less

@@ -13,9 +13,9 @@ span.flatpickr-day:hover {
 }
 
 span.flatpickr-day.selected {
-    background-color: @turquoise;
+    background-color: @ui-selected;
 }
 
 span.flatpickr-day.selected:hover {
-    background-color: @turquoise-d1;
-}
+    background-color: @ui-selected-hover;
+}

src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less

@@ -34,7 +34,7 @@
 
 .umb-iconpicker-item.-selected {
     background: @gray-10;
-    border: solid 1px @turquoise-d1;
+    border: solid 1px @ui-active;
     border-radius: @baseBorderRadius;
     box-sizing: border-box;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-list-view-settings.less

@@ -34,11 +34,12 @@
 
 .umb-list-view-settings__create-new {
   font-size: 13px;
-  color: @turquoise-d1;
+  color: @ui-action;
 }
 
 .umb-list-view-settings__create-new:hover {
-  color: @turquoise-d1;
+  color: @ui-action-hover;
+  border-color: @ui-action-hover;
 }
 
 .umb-list-view-settings__remove-new {

src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less

@@ -71,12 +71,12 @@
     margin-right: 5px;
     font-size: 13px;
     font-weight: bold;
-    color: @gray-5;
+    color: @ui-action-disgrete;
     cursor: pointer;
 }
 
 .umb-node-preview__action:hover {
-    color: @turquoise;
+    color: @ui-action-disgrete-hover;
     text-decoration: none;
     opacity: 1;
 }
@@ -90,14 +90,16 @@
     align-items: center;
     justify-content: center;
     border: 1px dashed @gray-7;
-    color: @turquoise-d1;
+    color: @ui-action;
     font-weight: bold;
     padding: 5px 15px;
     box-sizing: border-box;
 }
 
 .umb-node-preview-add:hover {
-    color: @turquoise-d1;
+    color: @ui-action-hover;
+    border-color: @ui-action-hover;
+    text-decoration: none;
 }
 
 .umb-editor-wrapper .umb-node-preview-add {
@@ -112,4 +114,4 @@
     .umb-node-preview-add {
         max-width: none;
     }
-}
+}

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -39,7 +39,7 @@
 @pinkLight:             #f5c1bc;// added 2019
 @brown:                 #9d8057;// added 2019
 
-@u-grey:                #f2ebe6;// added 2019
+@u-greyLight:           #f2ebe6;// added 2019
 @u-white:               #f9f7f4;// added 2019
 
 
@@ -47,7 +47,15 @@
 // -------------------------
 
 @ui-active:             @pinkLight;
+@ui-active-hover:       @pinkLight;
 @ui-selected:           @pinkLight;
+@ui-selected-hover:     @pinkLight;
+
+@ui-action:             @orange;
+@ui-action-hover:       @orange;
+
+@ui-action-disgrete:             @gray-4;
+@ui-action-disgrete-hover:       @orange;
 
 
 // Colors