@eclipse-scout/core 22.0.0-beta.5 → 22.0.2

package/src/messagebox/MessageBox.less

@@ -88,7 +88,7 @@
       }
     }
 
-    .severity-button(@error-color, @focus-color: @error-focus-box-shadow-color);
+    .severity-button(@error-color, @error-default-button-background-hover-color, @error-default-button-background-active-color, @error-focus-box-shadow-color);
   }
 
   &.warning {
@@ -100,7 +100,7 @@
       }
     }
 
-    .severity-button(@warning-color, @focus-color: @warning-focus-box-shadow-color);
+    .severity-button(@warning-color, @warning-default-button-background-hover-color, @warning-default-button-background-active-color, @warning-focus-box-shadow-color);
   }
 
   &.ok {
@@ -112,7 +112,7 @@
       }
     }
 
-    .severity-button(@ok-color, @focus-color: @ok-focus-box-shadow-color);
+    .severity-button(@ok-color, @ok-default-button-background-hover-color, @ok-default-button-background-active-color, @ok-focus-box-shadow-color);
   }
 
   &.animate-open {

package/src/modeselector/Mode.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -9,10 +9,14 @@
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .mode {
-  border: @mode-border-width solid @control-border-color;
+  --padding-x: @mode-padding-x;
+  --padding-y: @mode-padding-y;
+  --border-width: @mode-border-width;
+
+  border: var(--border-width) solid @control-border-color;
   border-radius: 0;
   flex: 1 1 0;
-  padding: @mode-padding-y @mode-padding-x;
+  padding: var(--padding-y) var(--padding-x);
   #scout.overflow-ellipsis();
 
   &.first {
@@ -29,12 +33,12 @@
 
   &:not(.last):not(.selected) {
     border-right: none;
-    padding-right: @mode-padding-x + @mode-border-width; /* account for the missing border, so that text does not jump */
+    padding-right: calc(var(--padding-x) + var(--border-width)); /* account for the missing border, so that text does not jump */
   }
 
   &.after-selected {
     border-left: none;
-    padding-left: @mode-padding-x + @mode-border-width; /* account for the missing border, so that text does not jump */
+    padding-left: calc(var(--padding-x) + var(--border-width)); /* account for the missing border, so that text does not jump */
   }
 
   // override button (the selected mode cannot be clicked. therefore do not show hover and active colors)
@@ -68,28 +72,20 @@
 }
 
 .mode-selector.alternative {
-  border: @mode-alternative-border-width solid transparent;
 
   & > .mode {
+    --border-width: 0px;
+
     color: @mode-color;
-    border: none;
     background-color: transparent;
     border-radius: @button-border-radius;
 
-    &:not(.last):not(.selected) {
-      padding-right: @mode-padding-x;
-    }
-
-    &.after-selected {
-      padding-left: @mode-padding-x;
-    }
-
     &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      background-color: @mode-alternative-hover-background-color;
     }
 
     &:active {
-      background-color: rgba(0, 0, 0, 0.1);
+      background-color: @mode-alternative-active-background-color;
     }
 
     &.selected {
@@ -120,26 +116,8 @@
 }
 
 .dense .mode-selector {
-
   & > .mode {
-    padding: @mode-padding-dense;
-
-    &:not(.last):not(.selected) {
-      padding-right: @mode-padding-dense-x + @mode-border-width; /* account for the missing border, so that text does not jump */
-    }
-
-    &.after-selected {
-      padding-left: @mode-padding-dense-x + @mode-border-width; /* account for the missing border, so that text does not jump */
-    }
-  }
-
-  &.alternative > .mode {
-    &:not(.last):not(.selected) {
-      padding-right: @mode-padding-dense-x;
-    }
-
-    &.after-selected {
-      padding-left: @mode-padding-dense-x;
-    }
+    --padding-x: @mode-padding-dense-x;
+    --padding-y: @mode-padding-dense-y;
   }
 }

package/src/modeselector/ModeSelector.js

@@ -133,7 +133,7 @@ export default class ModeSelector extends Widget {
     let selectedModePosX = 0, selectedModeWidth = 0;
     if (this.selectedMode && this.selectedMode.$container) {
       selectedModePosX = graphics.position(this.selectedMode.$container).x;
-      selectedModeWidth = graphics.size(this.selectedMode.$container).width;
+      selectedModeWidth = graphics.size(this.selectedMode.$container, {exact: true}).width;
     }
     this.$slider.cssLeft(selectedModePosX);
     this.$slider.cssWidth(selectedModeWidth);

package/src/modeselector/ModeSelector.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -22,6 +22,7 @@
   &.alternative {
     background-color: @mode-alternative-background-color;
     border-radius: @button-border-radius;
+    border: @mode-selector-alternative-border-width solid transparent;
 
     &:not(.disabled) > .mode-slider {
       display: block;

package/src/planner/PlannerHeader.less

@@ -97,7 +97,8 @@
 }
 
 .planner-mode {
-  width: 65px;
+  padding: 0 8px;
+  min-width: 65px;
   text-align: center;
   border-top: 1px solid @control-border-color;
   border-bottom: 1px solid @control-border-color;

package/src/popup/Popup.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {CloseKeyStroke, DialogLayout, Dimension, Event, FocusRule, GlassPaneRenderer, graphics, HtmlComponent, Insets, KeyStrokeContext, Point, PopupLayout, Rectangle, scout, scrollbars, strings, Widget} from '../index';
+import {CloseKeyStroke, DialogLayout, Dimension, Event, FocusRule, GlassPaneRenderer, graphics, HtmlComponent, Insets, KeyStrokeContext, Point, PopupLayout, Rectangle, scout, scrollbars, strings, Widget, widgets} from '../index';
 import $ from 'jquery';
 
 export default class Popup extends Widget {
@@ -185,18 +185,17 @@ export default class Popup extends Widget {
 
   _openWithoutParent() {
     // resolve parent for entry-point (don't change the actual property)
-    let parent = this.parent;
-    if (parent.destroyed) {
+    if (this.parent.destroyed) {
       return;
     }
-    if (parent.rendered || parent.rendering) {
-      this.open(parent.entryPoint());
+    if (this.parent.rendered || this.parent.rendering) {
+      this.open(this._getDefaultOpen$Parent());
       return;
     }
 
     // This is important for popups rendered in another (native) browser window. The DOM in the popup window
     // is rendered later, so we must wait until that window is rendered and layouted. See popup-window.html.
-    parent.one('render', () => {
+    this.parent.one('render', () => {
       this.session.layoutValidator.schedulePostValidateFunction(() => {
         if (this.destroyed || this.rendered) {
           return;
@@ -206,6 +205,14 @@ export default class Popup extends Widget {
     });
   }
 
+  /**
+   * Only called if parent.rendered or parent.rendering
+   * @return {$}
+   */
+  _getDefaultOpen$Parent() {
+    return this.parent.entryPoint();
+  }
+
   open($parent) {
     if (!$parent) {
       this._openWithoutParent();
@@ -442,6 +449,15 @@ export default class Popup extends Widget {
     return cssClass;
   }
 
+  _animateRemovalWhileRemovingParent() {
+    if (!this.$anchor) {
+      // Allow remove animations for popups without an anchor
+      return true;
+    }
+    // If parent is the anchor, prevent remove animation to ensure popup will be removed together with the anchor
+    return widgets.get(this.$anchor) !== this.parent;
+  }
+
   _isRemovalPrevented() {
     // If removal of a parent is pending due to an animation then don't return true to make sure popups are closed before the parent animation starts.
     // However, if the popup itself is removed by an animation, removal should be prevented to ensure remove() won't run multiple times.
@@ -1037,7 +1053,7 @@ export default class Popup extends Widget {
 
   _handleGlassPanes() {
     let parentCoveredByGlassPane = this.session.focusManager.isElementCovertByGlassPane(this.parent.$container);
-    // if a popup is covered by a glass pane the glass pane's need to be rerendered to ensure a glass pane is also painted over the popup
+    // if a popup is covered by a glass pane the glass pane's need to be re-rendered to ensure a glass pane is also painted over the popup
     if (parentCoveredByGlassPane) {
       this.session.focusManager.rerenderGlassPanes();
     }

package/src/popup/PopupLayout.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2020 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -135,9 +135,6 @@ export default class PopupLayout extends AbstractLayout {
    * @returns {Dimension}
    */
   _calcMaxSize() {
-    // Position the popup at the desired location before doing any calculations to consider the preferred bounds
-    this._position(false);
-
     let maxWidth, maxHeight,
       htmlComp = this.popup.htmlComp,
       windowPaddingX = this.popup.windowPaddingX,
@@ -159,7 +156,7 @@ export default class PopupLayout extends AbstractLayout {
       horizontalAlignment = this.popup.horizontalAlignment,
       verticalAlignment = this.popup.verticalAlignment;
 
-    // Decide whether the prefSize can be used or the popup needs to be shrinked so that it fits into the viewport
+    // Decide whether the prefSize can be used or the popup needs to be shrunken so that it fits into the viewport
     // The decision is based on the preferred opening direction
     // Example: The popup would like to be opened leftedge and bottom
     // If there is enough space on the right and on the bottom -> pref size is used
@@ -219,9 +216,6 @@ export default class PopupLayout extends AbstractLayout {
    * @returns {Insets}
    */
   _calcMaxSizeAroundAnchor() {
-    // Position the popup at the desired location before doing any calculations because positioning adds CSS classes which might change margins
-    this._position(false);
-
     let maxWidthLeft, maxWidthRight, maxHeightDown, maxHeightUp,
       htmlComp = this.popup.htmlComp,
       windowPaddingX = this.popup.windowPaddingX,

package/src/scrollbar/Scrollbar.less

@@ -133,7 +133,7 @@
   transition: box-shadow 250ms;
   position: absolute;
   pointer-events: none;
-  z-index: 1; // ensure shadow layout over elements having a z-index
+  z-index: 1; // ensure shadow lays over elements having a z-index
 
   #scout.scroll-shadow();
 
@@ -157,6 +157,13 @@
     --scroll-shadow-size: @scroll-shadow-size;
     --scroll-shadow-blur: @scroll-shadow-blur;
     --scroll-shadow-spread: @scroll-shadow-spread;
+
+    // Allow a widget to adjust the size of the shadow container
+    --scroll-shadow-inset-top: 0;
+    --scroll-shadow-inset-right: 0;
+    --scroll-shadow-inset-bottom: 0;
+    --scroll-shadow-inset-left: 0;
+
     @scroll-shadow-blur-spread-color: var(--scroll-shadow-blur) calc(-1 * var(--scroll-shadow-spread)) var(--scroll-shadow-color);
     @scroll-shadow-top: inset 0 var(--scroll-shadow-size) @scroll-shadow-blur-spread-color;
     @scroll-shadow-bottom: inset 0 calc(-1 * var(--scroll-shadow-size)) @scroll-shadow-blur-spread-color;

package/src/scrollbar/scrollbars.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {arrays, Device, graphics, HtmlComponent, objects, scout} from '../index';
+import {arrays, Device, graphics, HtmlComponent, Insets, objects, scout} from '../index';
 import $ from 'jquery';
 
 /**
@@ -159,6 +159,17 @@ export function installScrollShadow($container, session, options) {
   _installMutationObserver(session);
   _installIntersectionObserver();
   intersectionObserver.observe($container[0]);
+
+  // this is required in addition to the intersection observer because the observer events are handled asynchronously later after all the setTimeout calls.
+  // Then the shadow might stay visible too long which has an impact on layout updates.
+  let containerElement = $container[0];
+  let visibleListener = e => {
+    if (e.target === containerElement) {
+      _onScrollableVisibleChange(containerElement, e.type === 'show');
+    }
+  };
+  $container.data('scroll-shadow-visible-listener', visibleListener);
+  $container.on('hide show', visibleListener);
 }
 
 export function uninstallScrollShadow($container, session) {
@@ -177,6 +188,10 @@ export function uninstallScrollShadow($container, session) {
   if (intersectionObserver) {
     intersectionObserver.unobserve($container[0]);
   }
+  let visibleListener = $container.data('scroll-shadow-visible-listener');
+  if (visibleListener) {
+    $container.off('hide show', visibleListener);
+  }
   let $scrollables = _$scrollables[session];
   if (!$scrollables || !$scrollables.some($scrollable => $scrollable.data('scroll-shadow'))) {
     _uninstallMutationObserver();
@@ -237,7 +252,7 @@ export function updateScrollShadow($container) {
   $shadow.toggleClass('bottom', !atBottom && style.indexOf('bottom') > -1);
   $shadow.toggleClass('left', !atLeft && style.indexOf('left') > -1);
   $shadow.toggleClass('right', !atRight && style.indexOf('right') > -1);
-  graphics.setBounds($shadow, graphics.bounds($container, {exact: true}));
+  graphics.setBounds($shadow, graphics.bounds($container, {exact: true}).subtract(insets($shadow)));
   graphics.setMargins($shadow, graphics.margins($container));
   $shadow.css('border-radius', $container.css('border-radius'));
 
@@ -253,6 +268,13 @@ export function updateScrollShadow($container) {
   function atEnd(scrollPos, scrollSize, offsetSize) {
     return scrollPos + 1 >= scrollSize - offsetSize;
   }
+
+  function insets($shadow) {
+    return new Insets($shadow.cssPxValue('--scroll-shadow-inset-top'),
+      $shadow.cssPxValue('--scroll-shadow-inset-right'),
+      $shadow.cssPxValue('--scroll-shadow-inset-bottom'),
+      $shadow.cssPxValue('--scroll-shadow-inset-left'));
+  }
 }
 
 /**
@@ -726,7 +748,7 @@ export function scrollToBottom($scrollable, options) {
 /**
  * @param location object with x and y properties
  * @param $scrollables one or more scrollables to check against
- * @eturns {boolean} true if the location is visible in the current viewport of all the $scrollables, or if $scrollables is null
+ * @returns {boolean} true if the location is visible in the current viewport of all the $scrollables, or if $scrollables is null
  */
 export function isLocationInView(location, $scrollables) {
   if (!$scrollables || $scrollables.length === 0) {

package/src/session/Session.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -422,6 +422,8 @@ export default class Session {
     // Extract client session data without creating a model adapter for it. It is (currently) only used to transport the desktop's adapterId.
     let clientSessionData = this._getAdapterData(data.startupData.clientSession);
     this.desktop = this.getOrCreateWidget(clientSessionData.desktop, this.rootAdapter.widget);
+    App.get()._triggerDesktopReady(this.desktop);
+
     let renderDesktopImpl = function() {
       this._renderDesktop();
 
@@ -443,6 +445,7 @@ export default class Session {
       this._resumeBackgroundJobPolling();
 
       this.ready = true;
+      App.get()._triggerSessionReady(this);
 
       $.log.isInfoEnabled() && $.log.info('Session initialized. Detected ' + Device.get());
       if ($.log.isDebugEnabled()) {

package/src/style/colors-dark.less

@@ -19,13 +19,13 @@
 @palette-gray-3: #BFC2C3;
 @palette-gray-4: #A7ACAD;
 @palette-gray-5: #7E8588;
-@palette-gray-5-1: #445155;
-@palette-gray-6: #344146;
-@palette-gray-6-1: #283438;
-@palette-gray-7: #252e31;
-@palette-gray-8: #1F272B;
-@palette-gray-9: #181C1F;
-@palette-gray-10: #0C1013;
+@palette-gray-5-1: #4B595E;
+@palette-gray-6: #3B494F;
+@palette-gray-6-1: #2E3C41;
+@palette-gray-7: #2C363A;
+@palette-gray-8: #252F34;
+@palette-gray-9: #1F2428;
+@palette-gray-10: #0E1316;
 
 @fade-white-0: fade(@palette-white, 25%);
 @fade-white-1: fade(@palette-white, 18%);
@@ -75,8 +75,14 @@
 @warning-color: @palette-orange-2;
 @ok-color: @palette-green-2;
 @error-background-color: @background-color;
+@error-default-button-background-hover-color: lighten(@error-color, 6%);
+@error-default-button-background-active-color: lighten(@error-color, 10%);
 @error-focus-box-shadow-color: mix(@error-color, @palette-black, 50%);
+@warning-default-button-background-hover-color: lighten(@warning-color, 8%);
+@warning-default-button-background-active-color: lighten(@warning-color, 12%);
 @warning-focus-box-shadow-color: mix(@warning-color, @palette-black, 50%);
+@ok-default-button-background-hover-color: lighten(@ok-color, 8%);
+@ok-default-button-background-active-color: lighten(@ok-color, 14%);
 @ok-focus-box-shadow-color: mix(@ok-color, @palette-black, 50%);
 @focus-border-color: @focus-color;
 @focus-box-shadow-color: darken(@focus-color, 30%);
@@ -102,7 +108,8 @@
 @popup-2-background-color: @palette-gray-6;
 @popup-2-backdrop-background-color: fade(@popup-2-background-color, 80%);
 @popup-2-backdrop-filter: blur(15px);
-@selected-hover-background-color: darken(@selected-background-color, 10%);
+@selected-hover-background-color: lighten(@selected-background-color, 8%);
+@selected-active-background-color: lighten(@selected-background-color, 12%);
 @selected-disabled-background-color: @palette-gray-5;
 @text-color: @palette-gray-2;
 @text-color-1: @palette-gray-3;
@@ -129,9 +136,11 @@
 @carousel-current-item-color: @palette-gray-1;
 @check-box-border-color: @palette-gray-5;
 @mode-color: @text-color;
-@mode-alternative-background-color: @palette-gray-10;
+@mode-alternative-background-color: fade(@palette-black, 60%);
 @mode-alternative-selected-background-color: @palette-gray-7;
 @mode-alternative-selected-background-disabled-color: @palette-gray-8;
+@mode-alternative-hover-background-color: @palette-gray-9;
+@mode-alternative-active-background-color: @palette-gray-6;
 @closer-action-color: @text-color;
 @closer-color: @palette-gray-3;
 @closer-hover-color: @text-color;
@@ -150,13 +159,15 @@
 @date-picker-separator-color: @palette-gray-4;
 @date-picker-day-preselected-background-color: fade(@palette-white, 8%);
 @dashboard-tile-border-color: @border-color;
-@dashboard-tile-alternative-selected-border-color: @dashboard-tile-selected-border-color;
-@dashboard-tile-default-selected-border-color: @dashboard-tile-selected-border-color;
+@dashboard-tile-default-inverted-selected-border-color: @item-selection-border-color;
+@dashboard-tile-alternative-selected-border-color: @dashboard-tile-default-selected-border-color;
+@dashboard-tile-alternative-inverted-selected-border-color: @item-selection-border-color;
 @desktop-bench-drop-shadow-color: fade(@palette-black, 35%);
 @desktop-header-background-color: @palette-gray-10;
 @desktop-header-border-color: @palette-gray-8;
 @desktop-header-color: @title-color;
 @desktop-logo-background-color: transparent;
+@desktop-tab-border-color: @border-color;
 @desktop-tab-closer-hover-background-color: @hover-background-color;
 @desktop-tab-closer-active-background-color: @active-background-color;
 @desktop-tab-status-color: @save-needer-color;
@@ -179,6 +190,7 @@
 @planner-large-scale-item-line-color: fade(@palette-white, 20%);
 @planner-resource-title-color: @text-color;
 @planner-small-scale-item-line-color: fade(@palette-white, 7%);
+@scroll-shadow-alpha: 0;
 @scrollbar-thumb-main-color: @palette-white;
 @scrollbar-thumb-color: fade(@scrollbar-thumb-main-color, 20%);
 @scrollbar-thumb-hover-color: fade(@scrollbar-thumb-main-color, 30%);
@@ -235,6 +247,8 @@
 @tile-default-inverted-link-hover-color: @link-hover-color;
 @tile-default-inverted-status-hover-background-color: @hover-background-color;
 @tile-default-inverted-status-active-background-color: @active-background-color;
+@tile-default-inverted-error-status-color: @status-error-color;
+@tile-default-inverted-error-status-hover-color: @status-error-hover-color;
 @tile-default-label-color: @text-color-1;
 @tile-default-link-active-color: @link-active-color;
 @tile-table-default-inverted-selection-background-color: @item-selection-background-color;

package/src/style/colors.less

@@ -101,8 +101,14 @@
 @ok-color: @palette-green-5;
 @error-background-color: @palette-red-0;
 @error-border-color: @error-color;
+@error-default-button-background-hover-color: darken(@error-color, 6%);
+@error-default-button-background-active-color: darken(@error-color, 13%);
 @error-focus-box-shadow-color: fade(@error-color, 40%);
+@warning-default-button-background-hover-color: darken(@warning-color, 6%);
+@warning-default-button-background-active-color: darken(@warning-color, 13%);
 @warning-focus-box-shadow-color: fade(@warning-color, 40%);
+@ok-default-button-background-hover-color: darken(@ok-color, 6%);
+@ok-default-button-background-active-color: darken(@ok-color, 13%);
 @ok-focus-box-shadow-color: fade(@ok-color, 40%);
 @focus-border-color: @accent-color-3;
 @focus-box-shadow-color: darken(@accent-color-1, 10%);
@@ -221,9 +227,12 @@
 @context-menu-item-color: @text-color;
 @context-menu-item-icon-color: @link-color;
 @dashboard-tile-border-color: darken(@palette-gray-3, 5%);
-@dashboard-tile-selected-border-color: @item-selection-border-color;
+@dashboard-tile-default-inverted-background-color: mix(@tile-default-inverted-background-color, @tile-default-inverted-selection-background-color, 65%);
+@dashboard-tile-alternative-inverted-background-color: mix(@tile-alternative-inverted-background-color, @tile-alternative-inverted-selection-background-color, 65%);
+@dashboard-tile-default-selected-border-color: @item-selection-border-color;
+@dashboard-tile-default-inverted-selected-border-color: @dashboard-tile-default-inverted-background-color;
 @dashboard-tile-alternative-selected-border-color: @tile-alternative-inverted-background-color;
-@dashboard-tile-default-selected-border-color: @tile-default-inverted-background-color;
+@dashboard-tile-alternative-inverted-selected-border-color: @dashboard-tile-alternative-inverted-background-color;
 @date-picker-day-hover-background-color: @hover-background-color;
 @date-picker-day-selected-color: @selected-color;
 @date-picker-day-selected-background-color: @selected-background-color;
@@ -260,6 +269,7 @@
 @desktop-header-background-color: @accent-color-3;
 @desktop-header-border-color: @border-color;
 @desktop-tab-background-color: fade(@palette-black, 10%);
+@desktop-tab-border-color: transparent;
 @desktop-tab-flash-background-color: fade(@palette-black, 40%);
 @desktop-tab-closer-hover-background-color: fade(@palette-black, 14%);
 @desktop-tab-closer-active-background-color: fade(@palette-black, 20%);
@@ -292,6 +302,8 @@
 @mode-alternative-selected-background-color: @palette-white;
 @mode-alternative-selected-background-disabled-color: @palette-gray-4;
 @mode-alternative-background-color: rgba(0, 0, 0, 0.08);
+@mode-alternative-hover-background-color: rgba(0, 0, 0, 0.05);
+@mode-alternative-active-background-color: rgba(0, 0, 0, 0.1);
 @navigate-up-button-border-color: @button-border-color;
 @navigate-up-button-color: @button-color;
 @desktop-navigation-background-color: @desktop-header-background-color;
@@ -474,6 +486,8 @@
 @tile-default-inverted-link-active-color: fade(@tile-default-inverted-color, 75%);
 @tile-default-inverted-status-hover-background-color: fade(@palette-black, 15%);
 @tile-default-inverted-status-active-background-color: fade(@palette-black, 20%);
+@tile-default-inverted-error-status-color: @palette-red-3;
+@tile-default-inverted-error-status-hover-color: @tile-default-inverted-error-status-color;
 @tile-placeholder-background-color: @palette-gray-3;
 @tile-scrollbar-thumb-inverted-main-color: @palette-gray-4;
 @tile-scrollbar-thumb-inverted-color: fade(@tile-scrollbar-thumb-inverted-main-color, 30%);
@@ -509,7 +523,7 @@
 @top-label-disabled-color: @label-disabled-color;
 @tree-node-active-background-color: @item-active-background-color;
 @tree-node-control-color: inherit;
-@view-tab-selected-color: @active-color;
+@view-tab-selected-color: @outline-title-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: fade(@palette-black, 20%);

package/src/style/fonts.less

@@ -38,6 +38,11 @@ Try these to switch between fonts:
 
 @letter-spacing: 0.2px;
 
+// Arial font is hard to vertically align, especially with icons
+// This variable can be used to fix the alignment for specific widgets that can have an icon
+// or are often placed to the side of widgets with icons
+@text-margin-top: 1px;
+
 @icon-font-weight-light: 300;
 
 @tooltip-font-weight: @font-weight-normal;

package/src/style/mixins.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -70,26 +70,30 @@
     padding-bottom: 0;
   }
 
-  .inverted-bottom-round-edge(@border-radius: 12px, @width: 24px, @color: #ffffff) {
+  .inverted-bottom-round-edge(@border-radius: 12px, @color: #ffffff) {
+    @border-width: 5px;
+
     --color: @color; // Allows to change color only
     position: absolute;
     pointer-events: none;
     background-color: transparent;
-    bottom: 0;
-    height: 2 * @width;
-    width: @width;
-    box-shadow: 0 @width 0 0 var(--color);
-    // Cut the leftover on the bottom to only get the edge. Use 110%/-10% because with 100%/0% there are drawing issues, at least with Chrome (a very thin line won't be colored)
-    clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%);
+    bottom: -@border-width;
+    height: @border-radius;
+    width: @border-radius;
+    box-sizing: content-box;
+    border: @border-width solid var(--color);
+    border-top: none;
 
     &.left {
-      left: -@width;
-      border-bottom-right-radius: @border-radius;
+      left: -@border-radius;
+      border-bottom-right-radius: @border-radius+@border-width;
+      border-left: none;
     }
 
     &.right {
-      right: -@width;
-      border-bottom-left-radius: @border-radius;
+      right: -@border-radius;
+      border-bottom-left-radius: @border-radius+@border-width;
+      border-right: none;
     }
   }
 
@@ -213,8 +217,7 @@
     }
   }
 
-  .tooltip-status,
-  .info-status {
+  .tooltip-status {
     visibility: visible;
     cursor: pointer;
 
@@ -236,6 +239,10 @@
     }
   }
 
+  .info-status {
+    #scout.tooltip-status();
+  }
+
   .ok-status {
     visibility: visible;
     cursor: pointer;

package/src/style/sizes-dark.less

@@ -8,5 +8,8 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
+@desktop-tab-border-width: 1px;
 @popup-border-width: 1px;
-@tooltip-border-width: 1px;
+@tooltip-border-width: 1px;
+@scroll-shadow-size-large: 14px;
+@scroll-shadow-size: @scroll-shadow-size-large;