@openui5/sap.tnt 1.114.2 → 1.114.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.tnt",
-  "version": "1.114.2",
+  "version": "1.114.3",
   "description": "OpenUI5 UI Library sap.tnt",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,7 +14,7 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.m": "1.114.2",
-    "@openui5/sap.ui.core": "1.114.2"
+    "@openui5/sap.m": "1.114.3",
+    "@openui5/sap.ui.core": "1.114.3"
   }
 }

package/src/sap/tnt/.library

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.114.2</version>
+  <version>1.114.3</version>
 
   <documentation>SAPUI5 library with responsive controls.</documentation>
 

package/src/sap/tnt/InfoLabel.js

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.114.2
+	 * @version 1.114.3
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/NavigationList.js

@@ -41,7 +41,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.114.2
+		 * @version 1.114.3
 		 *
 		 * @constructor
 		 * @public

package/src/sap/tnt/NavigationListItem.js

@@ -32,7 +32,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 		 * @extends sap.ui.core.Item
 		 *
 		 * @author SAP SE
-		 * @version 1.114.2
+		 * @version 1.114.3
 		 *
 		 * @constructor
 		 * @public
@@ -108,7 +108,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 		NavigationListItem.expandIcon = 'sap-icon://navigation-right-arrow';
 		NavigationListItem.collapseIcon = 'sap-icon://navigation-down-arrow';
-
+		NavigationListItem.selectionIndicatorIcon = 'sap-icon://circle-task-2';
 
 		NavigationListItem._getInvisibleText = function() {
 			if (!this._invisibleText) {
@@ -523,7 +523,8 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 					role: 'treeitem',
 					selected: false,
 					roledescription: this._resourceBundleTNTLib.getText("NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE_ITEM")
-				};
+				},
+				expanderVisible = this.getItems().length > 0 && this.getHasExpander();
 
 			rm.openStart("div");
 
@@ -544,6 +545,10 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 				rm.class("sapTntNavLIItemSelected");
 			}
 
+			if (expanderVisible) {
+				rm.class("sapTntNavLIItemWithExpander");
+			}
+
 			// checking if there are items level 2 in the NavigationListItem
 			// if yes - there is need of aria-expanded property
 			if (isListExpanded) {
@@ -590,10 +595,11 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 			if (control.getExpanded()) {
 				var expandIconControl = this._getExpandIconControl();
-				expandIconControl.setVisible(this.getItems().length > 0 && this.getHasExpander());
+				expandIconControl.setVisible(expanderVisible);
 				expandIconControl.setSrc(this.getExpanded() ? NavigationListItem.collapseIcon : NavigationListItem.expandIcon);
 				expandIconControl.setTooltip(this._getExpandIconTooltip(!this.getExpanded()));
 				this._renderText(rm);
+				rm.icon(NavigationListItem.selectionIndicatorIcon, ["sapTntNavLISelectionIndicator"]);
 				rm.renderControl(expandIconControl);
 			}
 
@@ -738,8 +744,8 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 			rm.openEnd();
 
-
 			this._renderText(rm);
+			rm.icon("sap-icon://circle-task-2", ["sapTntNavLISelectionIndicator"]);
 
 			rm.close('a');
 

package/src/sap/tnt/SideNavigation.js

@@ -42,13 +42,12 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.114.2
+		 * @version 1.114.3
 		 *
 		 * @constructor
 		 * @public
 		 * @since 1.34
 		 * @alias sap.tnt.SideNavigation
-		 * @see {@link fiori:https://experience.sap.com/fiori-design-web/side-navigation/ Side Navigation}
 		 */
 		var SideNavigation = Control.extend('sap.tnt.SideNavigation', /** @lends sap.t.SideNavigation.prototype */ {
 			metadata: {

package/src/sap/tnt/ToolHeader.js

@@ -34,14 +34,17 @@ sap.ui.define([
 	 * @class
 	 *
 	 * The ToolHeader control is a horizontal container that is most
-	 * commonly used to display buttons, labels, and other various input controls.
+	 * commonly used to display buttons, texts, and other various input controls.
 	 * <h3>Overview</h3>
 	 * The ToolHeader control is based on {@link sap.m.OverflowToolbar}. It contains clearly structured menus of commands that are available across the various apps within the same tool layout.
 	 * <h3>Usage</h3>
 	 * <ul>
+	 * <li>This control is specialized for administrative applications. For other types of applications use: {@link sap.m.Shell}</li>
 	 * <li>If an app implements side navigation in addition to the tool header menu, the menu icon must be the first item on the left-hand side of the tool header.</li>
 	 * <li>The app menu and the side navigation must not have any dependencies and must work independently.</li>
 	 * </ul>
+	 * <h4>Horizon theme specifics</h4>
+	 * Only the following controls are supported: sap.m.Button, sap.m.Image, sap.m.Title, sap.m.Text, sap.m.SearchField, sap.m.Avatar.
 	 * <h4>Fiori 3 theme specifics</h4>
 	 * In Fiori 3 Default theme the ToolHeader is with dark design unlike most of the other controls. This defines the usage of limited controls inside it, which will result in good design combination.<br/>
 	 * The ToolHeader stylizes the contained controls with the Shell color parameters, to match the dark design requirement. However, that's not a dark theme.<br/><br/>
@@ -120,13 +123,12 @@ sap.ui.define([
 	* @implements sap.tnt.IToolHeader
 	*
 	* @author SAP SE
-	* @version 1.114.2
+	* @version 1.114.3
 	*
 	* @constructor
 	* @public
 	* @since 1.34
 	* @alias sap.tnt.ToolHeader
-	* @see {@link fiori:https://experience.sap.com/fiori-design-web/tool-header/ Tool Header}
 	*/
 	var ToolHeader = OverflowToolbar.extend("sap.tnt.ToolHeader", /** @lends sap.tnt.ToolHeader.prototype */ {
 		metadata: {

package/src/sap/tnt/ToolHeaderUtilitySeparator.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.114.2
+	 * @version 1.114.3
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/ToolPage.js

@@ -7,12 +7,14 @@
 // Provides control sap.t.ToolPage.
 sap.ui.define([
 	"./library",
+	"sap/m/library",
 	"sap/ui/base/ManagedObjectObserver",
 	"sap/ui/core/Control",
 	"sap/ui/Device",
 	"sap/ui/core/ResizeHandler",
 	"./ToolPageRenderer"
 ], function (library,
+			 mLibrary,
 			 ManagedObjectObserver,
 			 Control,
 			 Device,
@@ -20,11 +22,14 @@ sap.ui.define([
 			 ToolPageRenderer) {
 	"use strict";
 
+	// shortcut for sap.m.PageBackgroundDesign
+	var PageBackgroundDesign = mLibrary.PageBackgroundDesign;
+
 	/**
 	 * Constructor for a new ToolPage.
 	 *
 	 * @param {string} [sId] ID for the new control, generated automatically if no id is given
- * @param {object} [mSettings] Initial settings for the new control
+	 * @param {object} [mSettings] Initial settings for the new control
 	 *
 	 * @class
 	 * The ToolPage is a layout control, used to create a basic tools app that has a header, side navigation and contents area.
@@ -36,7 +41,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.114.2
+	 * @version 1.114.3
 	 *
 	 * @constructor
 	 * @public
@@ -51,7 +56,18 @@ sap.ui.define([
 				 * Indicates if the side menu is expanded.
 				 * Overrides the <code>expanded</code> property of the <code>sideContent</code> aggregation.
 				 */
-				sideExpanded: {type: "boolean", group: "Misc", defaultValue: true}
+				sideExpanded: {type: "boolean", group: "Misc", defaultValue: true},
+
+				/**
+				 * Specifies the content background design.
+				 * @public
+				 * @since 1.115
+				 */
+				contentBackgroundDesign: {
+					type: "sap.m.PageBackgroundDesign",
+					group: "Appearance",
+					defaultValue: PageBackgroundDesign.Standard
+				}
 			},
 			aggregations: {
 				/**

package/src/sap/tnt/ToolPageRenderer.js

@@ -41,9 +41,13 @@ sap.ui.define([
 
 		if (oHeader || oSubHeader) {
 			oRM.openStart("div")
-				.class("sapTntToolPageHeaderWrapper")
-				.openEnd();
+				.class("sapTntToolPageHeaderWrapper");
+
+			if (oHeader && oSubHeader) {
+				oRM.class("sapTntToolPageHeaderWithSubHeaderWrapper");
+			}
 
+			oRM.openEnd();
 			oRM.openStart("header").openEnd();
 		}
 
@@ -123,7 +127,10 @@ sap.ui.define([
 			return;
 		}
 
-		oRM.openStart("div", oControl.getId() + "-main").class("sapTntToolPageMain").openEnd();
+		oRM.openStart("div", oControl.getId() + "-main")
+			.class("sapTntToolPageMain")
+			.class("sapTntToolPageMainBackground-" + oControl.getContentBackgroundDesign())
+			.openEnd();
 
 			oRM.openStart("div").class("sapTntToolPageMainContent").openEnd();
 

package/src/sap/tnt/library.js

@@ -17,13 +17,13 @@ sap.ui.define(["sap/ui/core/library", "sap/m/library"],
 	 * @namespace
 	 * @alias sap.tnt
 	 * @author SAP SE
-	 * @version 1.114.2
+	 * @version 1.114.3
 	 * @since 1.36
 	 * @public
 	 */
 	var thisLib = sap.ui.getCore().initLibrary({
 		name : "sap.tnt",
-		version: "1.114.2",
+		version: "1.114.3",
 		dependencies : ["sap.ui.core", "sap.m"],
 		designtime: "sap/tnt/designtime/library.designtime",
 		types: [

package/src/sap/tnt/themes/base/NavigationList.less

@@ -8,18 +8,32 @@
 @_sap_tnt_NavigationList_IconFontSize: 1rem;
 @_sap_tnt_NavigationList_ExpandIconColor: @sapUiContentIconColor;
 @_sap_tnt_NavigationList_ItemHeight: 3rem;
+@_sap_tnt_NavigationList_ItemBorderRadius: 0;
+@_sap_tnt_NavigationList_ItemBottomMargin: 0;
+@_sap_tnt_NavigationList_ItemBottomMarginCompact: 0;
 @_sap_tnt_NavigationList_NoIconsGroupPadding: 1rem;
 @_sap_tnt_NavigationList_NoIconsNestedItemPadding: 1rem;
-@_sap_tnt_NavigationList_ItemFocusBorder: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+@_sap_tnt_NavigationList_ItemFocusBorderOffset: 1px;
 @_sap_tnt_NavigationList_SelectedItemBorderColor: @sapUiListSelectionBorderColor;
+@_sap_tnt_NavigationList_SelectedItemBorder: 1px solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
+@_sap_tnt_NavigationList_Collapsed_SelectedItemBorder: 1px solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
 @_sap_tnt_NavigationList_Collapsed_SelectedGroupBorderColor: @_sap_tnt_NavigationList_SelectedItemBorderColor;
 @_sap_tnt_NavigationList_Collapsed_GroupBorderColor: @sapUiListBorderColor;
+@_sap_tnt_NavigationList_GroupIconWidth: @_sap_tnt_NavigationList_CollapsedWidth;
+@_sap_tnt_NavigationList_GroupBorder: 1px solid @sapUiListBorderColor;
 @_sap_tnt_NavigationList_GroupBottomBorderColor: @sapUiListBorderColor;
+@_sap_tnt_NavigationList_GroupTextWeight: unset;
+@_sap_tnt_NavigationList_GroupBottomMarginInPopup: 0;
+@_sap_tnt_NavigationList_Padding: 0;
+@_sap_tnt_NavigationList_PaddingCompact: 0;
+@_sap_tnt_NavigationList_PopupPadding: 0;
+@_sap_tnt_NavigationList_SelectionIndicatorDisplay: none;
 
 .sapTntNavLI {
 	margin: 0;
-	padding: 0;
+	padding: @_sap_tnt_NavigationList_Padding;
 	list-style: none;
+	box-sizing: border-box;
 }
 
 .sapTntNavLI ul {
@@ -31,10 +45,10 @@
 .sapTntNavLIItem {
 	width : 100%;
 	height: @_sap_tnt_NavigationList_ItemHeight;
-
 	box-sizing: border-box;
 	cursor: pointer;
 	background-color: @sapUiListBackground;
+	border-radius: @_sap_tnt_NavigationList_ItemBorderRadius;
 
 	span {
 		cursor: pointer;
@@ -78,6 +92,14 @@
 	min-width: 0;
 }
 
+.sapTntNavLIPopup {
+	padding: @_sap_tnt_NavigationList_PopupPadding;
+
+	.sapTntNavLIItem.sapTntNavLIGroup {
+		margin-bottom: @_sap_tnt_NavigationList_GroupBottomMarginInPopup;
+	}
+}
+
 .sapTntNavLIPopup .sapTntNavLIGroupItem .sapMText {
 	padding: 0 1rem;
 }
@@ -118,7 +140,7 @@
 
 .sapTntNavLI .sapTntNavLIExpandIcon {
 	min-width: 2rem;
-	padding: 0.75rem 0;
+	// padding: 0.75rem 0;
 	font-size: 0.875rem;
 
 	pointer-events: all;
@@ -143,7 +165,11 @@
 }
 
 .sapTntNavLIGroup {
-	border-bottom: 1px solid @sapUiListBorderColor;
+	border-bottom: @_sap_tnt_NavigationList_GroupBorder;
+
+	.sapTntNavLIText {
+		font-weight: @_sap_tnt_NavigationList_GroupTextWeight;
+	}
 }
 
 .sapTntNavLI:not(.sapTntNavLIPopup) .sapTntNavLIGroup[aria-expanded="true"] {
@@ -172,11 +198,38 @@
 }
 
 
+.sapTntNavLISelectionIndicator {
+	display: @_sap_tnt_NavigationList_SelectionIndicatorDisplay;
+	opacity: 0;
+	font-size: 0.5rem;
+	color: @sapUiListSelectionBorderColor;
+}
+
 .sapTntNavLIItemSelected.sapTntNavLIItem,
 .sapTntNavLIItemSelected .sapTntNavLIGroup,
 .sapTntNavLIItemSelected.sapTntNavLIGroupItem,
 .sapTntNavLIItemSelected.sapTntNavLIGroupItem.sapTntNavLIItem {
 	background-color: @sapUiListSelectionBackgroundColor;
+
+	.sapTntNavLISelectionIndicator {
+		opacity: 1;
+	}
+}
+
+.sapTntNavLIGroup.sapTntNavLIItemWithExpander {
+	.sapTntNavLISelectionIndicator {
+		margin: 0 0 0 0.5rem;
+	}
+}
+
+.sapTntNavLIGroup:not(.sapTntNavLIItemWithExpander) {
+	.sapTntNavLISelectionIndicator {
+		margin: 0 0.5rem;
+	}
+}
+
+.sapTntNavLIGroupItem .sapTntNavLISelectionIndicator {
+	margin: 0 0.5rem;
 }
 
 .sapTntNavLIItemSelected .sapTntNavLIItem:hover,
@@ -185,16 +238,37 @@
 	background-color: @sapUiListSelectionHoverBackground;
 }
 
-.sapTntNavLI:not(.sapTntNavLIPopup) .sapTntNavLIGroupItem.sapTntNavLIItem:last-child {
-	border-bottom: 1px solid @sapUiListBorderColor;
+.sapTntNavLI:not(.sapTntNavLIPopup) {
+	.sapTntNavLIGroupItem.sapTntNavLIItem:last-child {
+		border-bottom: @_sap_tnt_NavigationList_GroupBorder;
+
+		&.sapTntNavLIItemSelected {
+			border-color: @sapUiListSelectionBorderColor;
+		}
+	}
 
-	&.sapTntNavLIItemSelected {
-		border-color: @sapUiListSelectionBorderColor;
+	li:not(:last-of-type) .sapTntNavLIItem {
+		margin-bottom: @_sap_tnt_NavigationList_ItemBottomMargin;
 	}
 }
 
-.sapTntNavLIItemSelected:not(.sapTntNavLIItemDisabled) {
-	border-bottom: 1px solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
+.sapTntNavLI:not(.sapTntNavLICollapsed) .sapTntNavLIItemSelected:not(.sapTntNavLIItemDisabled) {
+	border-bottom: @_sap_tnt_NavigationList_SelectedItemBorder;
+}
+
+.sapTntNavLICollapsed .sapTntNavLIItemSelected:not(.sapTntNavLIItemDisabled) {
+	overflow: hidden;
+	border-bottom: none;
+
+	// create the selection indicator with pseudo element, in order to avoid it having border-radius
+	&::after {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		border-bottom: @_sap_tnt_NavigationList_Collapsed_SelectedItemBorder;
+	}
 }
 
 .sapTntNavLICollapsed,
@@ -211,26 +285,27 @@
 
 .sapTntNavLI li:focus .sapTntNavLIItem::before,
 .sapTntNavLIItem:focus::before {
-	border: @_sap_tnt_NavigationList_ItemFocusBorder;
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	position: absolute;
 	content: " ";
-	top: 1px;
-	right: 1px;
-	bottom: 1px;
-	left: 1px;
+	top: @_sap_tnt_NavigationList_ItemFocusBorderOffset;
+	right: @_sap_tnt_NavigationList_ItemFocusBorderOffset;
+	bottom: @_sap_tnt_NavigationList_ItemFocusBorderOffset;
+	left: @_sap_tnt_NavigationList_ItemFocusBorderOffset;
 	z-index: 2;
 	pointer-events: none;
+	border-radius: @_sap_tnt_NavigationList_ItemBorderRadius;
 }
 
 // NavigationList with icons
 .sapTntNavLI:not(.sapTntNavLINoIcons) {
 
 	span.sapTntNavLIGroupIcon {
-		width: @_sap_tnt_NavigationList_CollapsedWidth;
+		width: @_sap_tnt_NavigationList_GroupIconWidth;
 	}
 
 	.sapTntNavLIGroupItem .sapMText {
-		padding-left: @_sap_tnt_NavigationList_CollapsedWidth;
+		padding-left: @_sap_tnt_NavigationList_GroupIconWidth;
 	}
 }
 
@@ -250,6 +325,10 @@
 /* Compact size */
 .sapUiSizeCompact {
 
+	.sapTntNavLI {
+		padding: @_sap_tnt_NavigationList_PaddingCompact;
+	}
+
 	.sapTntNavLIItem {
 		height: 2rem;
 	}
@@ -279,7 +358,13 @@
 	.sapTntNavLI:not(.sapTntNavLINoIcons) {
 
 		span.sapTntNavLIGroupIcon {
-			width: @_sap_tnt_NavigationList_CollapsedWidth;
+			width: @_sap_tnt_NavigationList_GroupIconWidth;
+		}
+	}
+
+	.sapTntNavLI:not(.sapTntNavLIPopup) {
+		li:not(:last-of-type) .sapTntNavLIItem {
+			margin-bottom: @_sap_tnt_NavigationList_ItemBottomMarginCompact;
 		}
 	}
 }

package/src/sap/tnt/themes/base/SideNavigation.less

@@ -5,9 +5,15 @@
 
 @_sap_tnt_SideNavigation_Width: 15rem;
 @_sap_tnt_SideNavigation_CollapsedWidth: 3rem;
+@_sap_tnt_SideNavigation_NavigationSeparatorMargin: 0.25rem 0.875rem 0.25rem 0.875rem;
+@_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed: 0.25rem 0.5rem 0.25rem 0.5rem;
 @_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor: @sapUiGroupContentBorderColor;
+@_sap_tnt_SideNavigation_NavigationSeparatorRadius: unset;
 @_sap_tnt_SideNavigation_NavigationSeparatorHeight: 1px;
 @_sap_tnt_SideNavigation_TriangleColor: @sapUiContentIconColor;
+@_sap_tnt_SideNavigation_BorderRadius: 0;
+@_sap_tnt_SideNavigation_PhoneBorderRadius: 0;
+@_sap_tnt_SideNavigation_BoxShadow: none;
 
 .sapTntSideNavigation {
   display: flex;
@@ -17,10 +23,16 @@
   overflow: hidden;
   background: @sapUiListBackground;
   border-right: 1px solid @sapUiGroupContentBorderColor;
+	box-shadow: @_sap_tnt_SideNavigation_BoxShadow;
+	border-radius: @_sap_tnt_SideNavigation_BorderRadius;
+	width: @_sap_tnt_SideNavigation_Width;
 }
 
-.sapTntSideNavigation {
-  width: @_sap_tnt_SideNavigation_Width;
+html.sap-phone,
+html.sap-tablet:not(html.sap-combi) {
+	.sapTntSideNavigation {
+		border-radius: @_sap_tnt_SideNavigation_PhoneBorderRadius;
+	}
 }
 
 .sapTntSideNavigation.sapTntSideNavigationNotExpandedWidth {
@@ -33,12 +45,7 @@
 		display: none;
 	}
 	.sapTntSideNavigationSeparator {
-		margin: 0.25rem 0.5rem 0.25rem 0.5rem;
-	}
-
-	.sapTntSideNavigationFlexible {
-		padding-right: @_sap_tnt_SideNavigation_CollapsedWidth;
-		width: 6rem;
+		margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
 	}
 
 	.sapTnTNavLINotExpandedTriangle:not(.sapTntNavLIItemDisabled):after {
@@ -66,10 +73,11 @@
 }
 
 .sapTntSideNavigationSeparator {
-	margin: 0.25rem 0.875rem 0.25rem 0.875rem;
+	margin: @_sap_tnt_SideNavigation_NavigationSeparatorMargin;
 	height: @_sap_tnt_SideNavigation_NavigationSeparatorHeight;
 	min-height: @_sap_tnt_SideNavigation_NavigationSeparatorHeight;
 	background-color: @_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor;
+	border-radius: @_sap_tnt_SideNavigation_NavigationSeparatorRadius;
 }
 
 .sapTntSideNavigationFixed {
@@ -125,18 +133,18 @@
 
 .sapUiSizeCompact {
 
-  .sapTntSideNavigationNotExpanded {
+	.sapTntSideNavigationNotExpanded {
 
-    .sapTntSideNavigationSeparator {
-     	margin: 0.25rem 0.5rem 0.25rem 0.5rem;
-    }
-  }
+		.sapTntSideNavigationSeparator {
+			margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
+		}
+	}
 
-  .sapTntSideNavigationSeparator {
-	margin: 0.25rem 0.5rem 0.25rem 0.5rem;
-  }
+	.sapTntSideNavigationSeparator {
+		margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
+	}
 
-  .sapTntSideNavigationScrollIcon {
-    padding: 0.5rem 0;
-  }
+	.sapTntSideNavigationScrollIcon {
+		padding: 0.5rem 0;
+	}
 }

package/src/sap/tnt/themes/base/ToolHeader.less

@@ -2,7 +2,10 @@
 /* CSS for control sap.tnt/ToolHeader  */
 /* Base theme                          */
 /* =================================== */
+
 @_sap_tnt_ToolHeader_Height: 3rem;
+@_sap_tnt_ToolHeader_BorderRadius: 0;
+@_sap_tnt_ToolHeader_BoxShadow: none;
 @_sap_tnt_ToolHeader_AvatarBackground: lighten(saturate(spin(@sapUiAccent6, 348), 36), 28);
 @_sap_tnt_ToolHeader_AvatarColor: @sapUiBaseText;
 @_sap_tnt_ToolHeader_BorderColor: contrast(@sapShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapContent_ContrastTextThreshold);
@@ -19,6 +22,8 @@
 
 .sapTntToolHeader.sapMTB {
 	height: @_sap_tnt_ToolHeader_Height;
+	border-radius: @_sap_tnt_ToolHeader_BorderRadius;
+	box-shadow: @_sap_tnt_ToolHeader_BoxShadow;
 }
 
 // ==========================================================================

package/src/sap/tnt/themes/base/ToolPage.less

@@ -6,12 +6,24 @@
 /* ==========================================================================
    Variables
    ========================================================================== */
-
-@_sap_tnt_ToolPage_AsideWidth : 15rem;
-@_sap_tnt_ToolPage_AsideWidthOnTablet : 3rem;
-@_sap_tnt_ToolPage_HeaderHeight : 3rem;
 @_sap_tnt_ToolPage_AnimationDuration : 0.3s;
-@_sap_tnt_ToolPage_HeaderShadow: none;
+@_sap_tnt_ToolPage_Paddings: 0;
+@_sap_tnt_ToolPage_PaddingsTablet: 0;
+@_sap_tnt_ToolPage_PaddingsPhone: 0;
+@_sap_tnt_ToolPage_Background: darken(@sapUiBaseBG, 4);
+@_sap_tnt_ToolPage_AsideMargins: 0;
+@_sap_tnt_ToolPage_AsideMarginsPhone: 0;
+@_sap_tnt_ToolPage_ContentMargins: 0;
+@_sap_tnt_ToolPage_ContentMarginsPhone: 0;
+@_sap_tnt_ToolPage_ContentShadow: none;
+@_sap_tnt_ToolPage_ContentBackgroundStandard: none;
+@_sap_tnt_ToolPage_ContentBackgroundSolid: none;
+@_sap_tnt_ToolPage_ContentBackgroundTransparent: none;
+@_sap_tnt_ToolPage_ContentBackgroundList: none;
+@_sap_tnt_ToolPage_ContentBorderRadius: 0;
+@_sap_tnt_ToolPage_ContentBorderRadiusTabletPhone: 0;
+@_sap_tnt_ToolPage_AsideCollapsedPhoneTransform: -100%;
+@_sap_tnt_ToolPage_AsideCollapsedPhoneTransformRtl: 100%;
 
 /* ==========================================================================
    Root element
@@ -28,37 +40,24 @@
 
   box-sizing: border-box;
   overflow: hidden;
+  padding: @_sap_tnt_ToolPage_Paddings;
+  background: @_sap_tnt_ToolPage_Background;
 }
 
 /* ==========================================================================
    Header
    ========================================================================== */
-.sapTntToolPageHeader {
-  height: @_sap_tnt_ToolPage_HeaderHeight;
-}
 
 .sapTntToolPageHeaderWrapper {
-  box-shadow: @_sap_tnt_ToolPage_HeaderShadow;
   z-index: 2; // bring header above content wrapper to draw drop shadow over the content
 }
 
-/* ==========================================================================
-   Subheader
-   ========================================================================== */
-.sapTntToolPage .sapTntToolPageHeader + .sapTntToolPageHeader {
-  height: auto;
-
-  .sapTntToolHeader {
-    height: auto;
-  }
-}
-
 /* ==========================================================================
    Content wrapper
    ========================================================================== */
 .sapTntToolPageContentWrapper {
   display: flex;
-  flex-grow: 1;
+  flex: 1;
   min-height: 0; // fixes flex chrome issue
   position: relative;
 }
@@ -71,6 +70,8 @@
   flex-direction: column;
 
   will-change: transform;
+  margin: @_sap_tnt_ToolPage_AsideMargins;
+  z-index: 2;
 }
 
 .sapTntToolPageAsideContent {
@@ -80,65 +81,45 @@
   height: 100%;
 }
 
-html:not([data-sap-ui-animation='off']) .sapTntToolPageMain {
-  transition: padding-left @_sap_tnt_ToolPage_AnimationDuration, transform @_sap_tnt_ToolPage_AnimationDuration;
-}
-
 html:not([data-sap-ui-animation='off']) .sapTntToolPageAside {
   transition: transform @_sap_tnt_ToolPage_AnimationDuration;
 }
 
-.sap-desktop,
-.sap-tablet {
-  .sapTntToolPageAside {
-    width: @_sap_tnt_ToolPage_AsideWidth;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    top: 0;
-    z-index: 1;
+html.sap-tablet:not(html.sap-combi) {
+  .sapTntToolPage {
+    padding: @_sap_tnt_ToolPage_PaddingsTablet;
   }
 
-  .sapTntToolPageAside + .sapTntToolPageMain {
-    padding-left: @_sap_tnt_ToolPage_AsideWidth;
+  .sapTntToolPageMain {
+    border-radius: @_sap_tnt_ToolPage_ContentBorderRadiusTabletPhone;
   }
 }
 
-.sap-desktop,
-.sap-tablet {
-  .sapTntToolPageAsideCollapsed {
-    & > .sapTntToolPageAside {
-      width: @_sap_tnt_ToolPage_AsideWidthOnTablet;
-    }
-
-    & > .sapTntToolPageAside + .sapTntToolPageMain {
-      padding-left: @_sap_tnt_ToolPage_AsideWidthOnTablet;
-    }
+html.sap-phone {
+  .sapTntToolPage {
+    padding: @_sap_tnt_ToolPage_PaddingsPhone;
   }
-}
 
-.sap-phone {
   .sapTntToolPageAside {
-    width: @_sap_tnt_ToolPage_AsideWidth;
     position: absolute;
     left: 0;
     bottom: 0;
     top: 0;
-    z-index: 1;
-  }
+    z-index: 4;
 
-  .sapTntToolPageMain {
-    transform: translateX(@_sap_tnt_ToolPage_AsideWidth);
+    margin: @_sap_tnt_ToolPage_AsideMarginsPhone;
   }
 
   .sapTntToolPageAsideCollapsed {
     .sapTntToolPageAside {
-      transform: translateX(-@_sap_tnt_ToolPage_AsideWidth);
-    }
-    .sapTntToolPageMain {
-      transform: translateX(0);
+      transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedPhoneTransform);
     }
   }
+
+  .sapTntToolPageMain {
+    border-radius: @_sap_tnt_ToolPage_ContentBorderRadiusTabletPhone;
+    margin: @_sap_tnt_ToolPage_ContentMarginsPhone;
+  }
 }
 
 /* Main container
@@ -149,8 +130,27 @@ html:not([data-sap-ui-animation='off']) .sapTntToolPageAside {
   flex-direction: column;
   flex: 1;
   min-width: 0; // fixes flex chrome issue
+  overflow: hidden;
+  z-index: 3;
 
   will-change: transform;
+  margin: @_sap_tnt_ToolPage_ContentMargins;
+  box-shadow: @_sap_tnt_ToolPage_ContentShadow;
+  border-radius: @_sap_tnt_ToolPage_ContentBorderRadius;
+  background: @_sap_tnt_ToolPage_ContentBackgroundStandard;
+}
+
+.sapTntToolPageMain.sapTntToolPageMainBackground-Solid {
+  background: @_sap_tnt_ToolPage_ContentBackgroundSolid;
+}
+
+.sapTntToolPageMain.sapTntToolPageMainBackground-Transparent {
+  background: @_sap_tnt_ToolPage_ContentBackgroundTransparent;
+  box-shadow: none;
+}
+
+.sapTntToolPageMain.sapTntToolPageMainBackground-List {
+  background: @_sap_tnt_ToolPage_ContentBackgroundList;
 }
 
 .sapTntToolPageMainContent {
@@ -170,16 +170,9 @@ html:not([data-sap-ui-animation='off']) .sapTntToolPageAside {
 
 html[dir=rtl] {
   &.sap-phone {
-    .sapTntToolPageMain {
-      transform: translateX(-@_sap_tnt_ToolPage_AsideWidth);
-    }
-
     .sapTntToolPageAsideCollapsed {
       .sapTntToolPageAside {
-        transform: translateX(@_sap_tnt_ToolPage_AsideWidth);
-      }
-      .sapTntToolPageMain {
-        transform: translateX(0);
+        transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedPhoneTransformRtl);
       }
     }
   }