BrushUp: optimize hover colors

- slightly lighten hover and active style
- don't use transparent colors which is relevant if element is on top
  of others, e.g. collapse handles
- add minimal styles to dark theme
- fix selected node display style (default is flex not block)
- fix subtitle color in dark theme

3 files changed, 9 insertions, 8 deletions

diff --git a/eclipse-scout-core/src/style/colors-dark.less b/eclipse-scout-core/src/style/colors-dark.less
index 53302abed1..2af148f989 100644
--- a/eclipse-scout-core/src/style/colors-dark.less
+++ b/eclipse-scout-core/src/style/colors-dark.less
@@ -60,6 +60,7 @@
 /* -------------------------------- */
 
 @active-color: @palette-blue-1-1;
+@active-background-color: lighten(@hover-background-color, 5%);
 @application-loading-background-color: @body-background-color;
 @application-loading01-color: @palette-blue-1-1;
 @application-loading02-color: @palette-cyan-3;
@@ -76,6 +77,7 @@
 @error-background-color: @background-color;
 @focus-border-color: @focus-color;
 @focus-color: @palette-blue-1-1;
+@hover-background-color: @palette-gray-5;
 @highlight-inverted-background-color: @palette-orange-5;
 @hover-color: @active-color;
 @icon-light-color: @text-color;
@@ -86,6 +88,7 @@
 @item-selection-nonfocus-border-color: @border-color;
 @panel-background-color: @palette-gray-8;
 @popup-background-color: @background-color;
+@sub-title-color: @palette-gray-1;
 @text-color-dark: @palette-black;
 @text-color: @palette-gray-1;
 @text-disabled-color: @disabled-color;
@@ -103,8 +106,6 @@
 /* -------------------------------- */
 
 @boxbutton-background-color: @palette-gray-8;
-@button-active-background-color: @selected-background-color;
-@button-active-color: @palette-white;
 @button-background-color: transparent;
 @button-border-color: @palette-blue-4;
 @button-color: @palette-blue-1-1;
@@ -145,6 +146,7 @@
 @desktop-navigation-body-background-color: @palette-gray-9;
 @desktop-navigation-body-in-background-background-color: @palette-black;
 @desktop-navigation-color: @text-color;
+@desktop-navigation-handle-background-color: @desktop-navigation-body-background-color;
 @notification-error-background-color: @notification-ok-background-color;
 @notification-error-border-color: @error-color;
 @notification-info-background-color: @notification-ok-background-color;
diff --git a/eclipse-scout-core/src/style/colors.less b/eclipse-scout-core/src/style/colors.less
index 0ac1ceb3bb..f8781f3100 100644
--- a/eclipse-scout-core/src/style/colors.less
+++ b/eclipse-scout-core/src/style/colors.less
@@ -75,7 +75,7 @@
 /* -------------------------------- */
 
 @active-color: @palette-blue-6;
-@active-background-color: fade(@palette-black, 14%);
+@active-background-color: darken(@hover-background-color, 5%);
 @application-loading-background-color: @palette-white;
 @application-loading01-color: fade(@palette-blue-5, 90%);
 @application-loading02-color: @palette-cyan-4;
@@ -106,8 +106,7 @@
 @highlight-color: @palette-orange-4;
 @highlight-inverted-background-color: @highlight-color;
 @hover-color: @palette-blue-6;
-@hover-background-color: fade(@palette-black, 8%);
-@hover-intense-background-color: fade(@palette-black, 20%);
+@hover-background-color: @palette-gray-3;
 @icon-color: @text-color;
 @icon-disabled-color: @palette-gray-5;
 @icon-inverted-color: @palette-white;
@@ -473,11 +472,11 @@
 @view-tab-selected-color: @active-color;
 @view-tab-selected-background-color: @desktop-navigation-body-background-color;
 @view-tab-in-background-selected-background-color: @desktop-navigation-body-in-background-background-color;
-@view-tab-hover-background-color: @hover-intense-background-color;
+@view-tab-hover-background-color: fade(@palette-black, 20%);
 @view-menu-tab-hover-background-color: fade(@palette-black, 10%);
 @view-menu-tab-menu-selected-background-color: fade(@palette-black, 20%);
 @view-menu-tab-selected-menu-selected-background-color: @selected-with-popup-background-color;
-@view-menu-tab-background-color: @hover-intense-background-color;
+@view-menu-tab-background-color: @view-tab-hover-background-color;
 @view-menu-tile-background-color: fade(@palette-blue-5, 5%);
 @view-menu-tile-hover-background-color: fade(@palette-blue-5, 10%);
 @view-menu-tile-selected-border-color: @item-selection-border-color;
diff --git a/eclipse-scout-core/src/tree/Tree.less b/eclipse-scout-core/src/tree/Tree.less
index b43babe035..174b2f3533 100644
--- a/eclipse-scout-core/src/tree/Tree.less
+++ b/eclipse-scout-core/src/tree/Tree.less
@@ -250,7 +250,7 @@
       }
 
       &.selected {
-        display: block;
+        display: flex;
         color: @outline-selection-color;
         cursor: default;
       }