@eclipse-scout/core 22.0.1 → 22.0.11

package/src/planner/Planner.js

@@ -1533,6 +1533,8 @@ export default class Planner extends Widget {
       this._renderViewRange();
       this._rerenderActivities();
       this._renderSelectedActivity();
+      this.validateLayoutTree(); // Layouting is required for adjusting the scroll position
+      this._reconcileScrollPos();
     }
   }
 

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

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {AjaxCall, App, arrays, BackgroundJobPollingStatus, BackgroundJobPollingSupport, Device, EventSupport, FileInput, files as fileUtil, FocusManager, fonts, icons, LayoutValidator, Locale, MessageBox, ModelAdapter, NullWidget, ObjectFactory, objects, Reconnector, RemoteEvent, ResponseQueue, scout, Status, strings, TextMap, texts, TypeDescriptor, URL, UserAgent, webstorage} from '../index';
+import {AjaxCall, App, arrays, BackgroundJobPollingStatus, BackgroundJobPollingSupport, Device, EventSupport, FileInput, files as fileUtil, FocusManager, fonts, icons, LayoutValidator, Locale, logging, MessageBox, ModelAdapter, NullWidget, ObjectFactory, objects, Reconnector, RemoteEvent, ResponseQueue, scout, Status, strings, TextMap, texts, TypeDescriptor, URL, UserAgent, webstorage} from '../index';
 import $ from 'jquery';
 
 export default class Session {
@@ -1364,13 +1364,16 @@ export default class Session {
   }
 
   /**
-   * Sends a request containing the error message for logging purpose.
-   * The request is sent immediately (does not await pending requests)
+   * Sends a request containing the log message for logging purpose.
+   * The request is sent immediately (does not await pending requests).
+   * @param {string} message the log message
+   * @param {logging.Level} [level] the log level used to log the message. Default is {@link logging.Level.ERROR}.
    */
-  sendLogRequest(message) {
+  sendLogRequest(message, level) {
     let request = this._newRequest({
       log: true,
-      message: message
+      message: message,
+      level: scout.nvl(level, logging.Level.ERROR)
     });
     if (this.currentEvent) {
       request.event = {

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%);
@@ -136,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;
@@ -157,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;
@@ -186,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%);
@@ -242,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

@@ -227,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;
@@ -266,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%);
@@ -298,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;
@@ -480,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%);
@@ -515,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

@@ -33,13 +33,22 @@ Try these to switch between fonts:
 @font-size-large: 16px;
 @font-size-extra-large: 32px;
 
+@font-size-icon-small: 14px;
 @font-size-icon: 16px;
 @font-size-icon-large: 24px;
 
 @letter-spacing: 0.2px;
 
-@icon-font-weight-light: 300;
+// 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;
+
+// Icons aligned with line-height may use this variable.
+// It should have the same size as regular text (not the font-size, the actual size)
+@font-icon-line-height: 15px;
 
+@icon-font-weight-light: 300;
 @tooltip-font-weight: @font-weight-normal;
 
 @font-face {

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;
     }
   }
 

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;

package/src/style/sizes.less

@@ -3,7 +3,7 @@
  * 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -17,6 +17,8 @@
 @border-radius-medium: 8px;
 @border-radius-large: 12px;
 @borderless-field-padding-y: @text-field-padding-y + 1px;
+@breadcrumb-bar-field-padding-bottom: 0;
+@breadcrumb-bar-field-padding-bottom-dense: 4px;
 @collapse-handle-border-radius: @border-radius-medium;
 @control-border-radius: @border-radius;
 @control-alternative-border-radius: @control-border-radius;
@@ -55,7 +57,7 @@
 @focus-box-shadow-size: 3px;
 @text-field-padding-x: 10px;
 @text-field-padding-y: 7px;
-@text-field-padding-top-compensation: 1px;
+@text-field-padding-top-compensation: 1px + @text-margin-top;
 @text-field-alternative-padding-left: 0;
 @text-field-alternative-padding-right: 0;
 @text-field-icon-size: 24px;
@@ -162,6 +164,7 @@
 @desktop-navigation-width: 290px;
 @desktop-notification-no-icon-padding-y: 16px;
 @desktop-tab-border-radius: @view-tab-border-radius;
+@desktop-tab-border-width: 0;
 @desktop-tab-key-box-bottom: @view-tab-key-box-bottom;
 @desktop-tab-margin-top: @view-tab-margin-top;
 @desktop-tab-margin-right: 3px;
@@ -172,7 +175,7 @@
 @desktop-tab-border-radius: @view-tab-selected-border-radius;
 @desktop-tab-margin-top: @view-tab-selected-margin-top;
 @desktop-tool-box-item-border-radius: @view-tab-border-radius;
-@desktop-tool-box-item-font-size: 14px;
+@desktop-tool-box-item-font-size: @font-size-icon-small;
 @desktop-tool-box-item-margin: 3px;
 @desktop-tool-box-item-margin-top: @view-tab-margin-top;
 @detail-table-border-radius: 4px;
@@ -223,21 +226,19 @@
 @mobile-popup-title-margin-top: 10px;
 @mode-padding-x: 12px;
 @mode-padding-y: 6px;
-@mode-padding-dense: @mode-padding-dense-y @mode-padding-dense-x;
 @mode-padding-dense-x: 5px;
 @mode-padding-dense-y: 3px;
 @mode-border-width: 1px;
-@mode-alternative-border-width: 3px;
+@mode-selector-alternative-border-width: 3px;
 @notification-no-icon-padding-y: 13px;
 @outline-breadcrumb-node-padding-x: @outline-title-padding-left;
 @outline-breadcrumb-node-padding-y: 12px;
 @outline-data-padding-top: 16px;
 @outline-font-size: @font-size-normal;
-@outline-node-control-size: 18px;
 @outline-node-control-padding-left: @outline-title-padding-left;
 @outline-node-control-padding-y: @outline-node-padding-y;
 @outline-node-control-line-height: @tree-node-control-line-height;
-@outline-node-font-icon-line-height: 14px;
+@outline-node-font-icon-line-height: @tree-node-font-icon-line-height;
 @outline-node-font-icon-size: 16px;
 @outline-node-padding-left: 37px;
 @outline-node-padding-right: 8px;
@@ -292,9 +293,15 @@
 @tab-item-title-padding-bottom: @group-box-title-padding-bottom;
 @tab-item-title-padding-top: @group-box-title-padding-top;
 @tab-item-title-margin-top: @group-box-header-margin-top;
+@table-aggregate-cell-font-icon-line-height: 14px;
+@table-aggregate-sum-avg-font-icon-size: 13px;
+@table-aggregate-min-max-font-icon-size: 15px;
+@table-aggregate-row-font-size: @font-size-smaller;
 @table-cell-padding-left: 10px;
 @table-cell-padding-right: @table-cell-padding-left;
 @table-cell-padding-right-last: @scrollbar-size;
+@table-cell-font-icon-size: @tree-node-font-icon-size;
+@table-cell-font-icon-line-height: @tree-node-font-icon-line-height;
 @table-control-content-padding: 10px;
 @table-control-container-height: 364px;
 @table-control-container-height-dense: 320px;
@@ -350,9 +357,10 @@
 @tree-node-checkbox-margin-top: -2px;
 @tree-node-control-checkbox-size: 20px + @tree-node-control-size;
 @tree-node-control-size: 16px;
-@tree-node-control-line-height: 14px;
+@tree-node-control-line-height: @font-icon-line-height;
 @tree-node-control-padding-left: 13px;
-@tree-node-font-icon-line-height: 15px;
+@tree-node-font-icon-line-height: @font-icon-line-height;
+@tree-node-font-icon-size: @font-size-icon-small;
 @tree-node-padding-left: 28px;
 @tree-node-padding-right: 7px;
 @tree-node-padding-y: 7px;