@openui5/themelib_sap_horizon 1.101.0 → 1.103.0

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

@@ -3,14 +3,18 @@
 /* Horizon theme                       */
 /* =================================== */
 
-@_sap_tnt_ToolHeader_Height: 2.75rem;
-@_sap_tnt_ToolHeader_Icon_Height: 0.75rem;
+@_sap_tnt_ToolHeader_Height: 3.5rem;
+@_sap_tnt_ToolHeader_IconHeight: 0.75rem;
 @_sap_tnt_ToolHeader_DisabledOpacity: @sapUiContentDisabledOpacity;
+@_sap_tnt_ToolHeader_ArrowHeight: 0.125rem;
+@_sap_tnt_ToolHeader_ArrowMargin: 0 -0.25rem;
+@_sap_tnt_ToolHeader_Padding: 0 0.75rem;
+@_sap_tnt_ToolHeader_ArrowMarginBottom: 0.25rem;
+@_sap_tnt_ToolHeader_IconTabHeader_Height: auto;
 
 .sapTntToolHeader {
 	&.sapMTB {
 		background-color: @sapUiShellColor;
-		box-shadow: inset 0 -0.0625rem 0 0 @sapUiShellBorderColor;
 	}
 
 	&.sapMTBStandard {
@@ -51,7 +55,10 @@
 	.sapMBtn:focus .sapMBtnDefault.sapMFocusable,
 	.sapMBtn:focus .sapMBtnBack.sapMFocusable,
 	.sapMBtn:focus .sapMBtnUp.sapMFocusable {
-		outline-color: @_sap_tnt_ToolHeader_BorderColor;
+		&::before {
+			outline-color: @_sap_tnt_ToolHeader_BorderColor;
+			border-color: @_sap_tnt_ToolHeader_BorderColor !important;
+		}
 	}
 
 	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent,
@@ -177,7 +184,7 @@ html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus > .sapMBtnEmph
 // sap.m.MenuButton overriding
 // ==========================================================================
 
-.sapTntToolHeader {
+.sapTntToolHeader.sapMIBar {
 	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
 		color: @sapUiShellInteractiveTextColor;
 	}
@@ -220,68 +227,6 @@ html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus > .sapMBtnEmph
 	}
 }
 
-// ==========================================================================
-// sap.ui.core.Icon overriding
-// ==========================================================================
-
-.sapTntToolHeader {
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		color: @sapUiShellTextColor;
-		outline-color: transparent;
-
-		&.sapUiIconPointer:focus {
-			outline-color: @sapUiContentContrastFocusColor;
-		}
-	}
-
-	// no backgrounds
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		&.sapUiIconColorCritical {
-			color: lighten(saturate(spin(@sapUiCriticalText, 8), 4), 21);
-		}
-
-		&.sapUiIconColorNegative {
-			color: lighten(@sapUiNegativeText, 40);
-		}
-
-		&.sapUiIconColorPositive {
-			color: lighten(desaturate(spin(@sapUiPositiveText, 335), 28), 50);
-		}
-
-		&.sapUiIconColorNeutral {
-			color: lighten(saturate(spin(@sapUiNeutralText, 350), 4), 41);
-		}
-	}
-
-	// backgrounds
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		&.sapUiIconBGColorContrast {
-			color: @sapUiShellTextColor;
-			background: transparent;
-		}
-
-		&.sapUiIconBGColorCritical {
-			color: @sapUiBaseText;
-			background: lighten(saturate(spin(@sapUiCriticalElement, 8), 4), 21);
-		}
-
-		&.sapUiIconBGColorNegative {
-			color: @sapUiBaseText;
-			background: lighten(@sapUiNegativeElement, 40);
-		}
-
-		&.sapUiIconBGColorNeutral {
-			color: @sapUiBaseText;
-			background: lighten(saturate(spin(@sapUiNeutralElement, 350), 4), 41);
-		}
-
-		&.sapUiIconBGColorPositive {
-			color: @sapUiBaseText;
-			background: lighten(desaturate(spin(@sapUiPositiveElement, 335), 28), 50);
-		}
-	}
-}
-
 // ==========================================================================
 // sap.m.Select overriding
 // ==========================================================================
@@ -438,15 +383,11 @@ html.sap-desktop .sapTntToolHeader .sapMFocus > .sapMSFF::before {
 // ==========================================================================
 
 .sapTntToolHeader {
-	.sapMITH {
-		height: 2.75rem;
-		background-color: transparent;
+	.sapMITH .sapMITBText {
+		color: @sapUiShellInteractiveTextColor;
+		text-shadow: none;
 	}
 
-    .sapMITH .sapMITBText {
-      color: @sapUiShellInteractiveTextColor;
-      text-shadow: none;
-    }
 	.sapMITH .sapMITBDisabled {
 		opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
 	}
@@ -484,6 +425,7 @@ html.sap-desktop .sapTntToolHeader .sapMFocus > .sapMSFF::before {
 
 	.sapMITBHead .sapMITBFilter .sapMITBText + .sapMITBContentArrow {
 		height: 0.875rem;
+		margin: 0 -0.1875rem;
 	}
 }
 
@@ -509,116 +451,6 @@ html.sap-desktop .sapTntToolHeader {
 	}
 }
 
-// ==========================================================================
-// sap.m.ObjectStatus overriding
-// ==========================================================================
-
-.sapTntToolHeader {
-	.sapMObjStatus {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon {
-			text-shadow: none;
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusError {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(@sapUiNegativeText, 40);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInformation {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(desaturate(spin(@sapUiInformativeElement, 357), 6), 34);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusNone {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(saturate(spin(@sapUiNeutralText, 350), 4), 41);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusSuccess {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(desaturate(spin(@sapUiPositiveText, 335), 28), 50);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusWarning {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(saturate(spin(@sapUiCriticalText, 8), 4), 21);
-		}
-	}
-
-	//Inverted
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusError {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(@sapUiNegativeElement, 40);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusInformation {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(desaturate(spin(@sapUiInformativeElement, 357), 6), 34);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusNone {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(saturate(spin(@sapUiNeutralElement, 350), 4), 41);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusSuccess {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(desaturate(spin(@sapUiPositiveElement, 335), 28), 50);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusWarning {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(saturate(spin(@sapUiCriticalElement, 8), 4), 21);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted {
-		.sapMObjStatusIcon .sapUiIcon {
-			height: @_sap_tnt_ToolHeader_Icon_Height;
-			vertical-align: text-top;
-		}
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon{
-
-			color: @sapUiBaseText;
-		}
-	}
-
-	.sapMObjStatus .sapMObjStatusTitle {
-		color: @sapUiShellActiveTextColor;
-	}
-}
-
-html.sap-desktop .sapTntToolHeader .sapMObjStatusActive:focus .sapMObjStatusLink::after {
-	outline-color: @_sap_tnt_ToolHeader_BorderColor;
-}
-
 // ==========================================================================
 // sap.m.Avatar / sap.f.Avatar overriding
 // ==========================================================================

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

@@ -3,5 +3,6 @@
 /* Horizon theme                       */
 /* =================================== */
 
-@_sap_tnt_ToolPage_HeaderHeight : 2.75rem;
-@_sap_tnt_ToolPage_CompactHeaderHeight : 2.75rem;
+@_sap_tnt_ToolPage_AsideWidthOnTablet: 3.5rem;
+@_sap_tnt_ToolPage_HeaderHeight: 3.5rem;
+@_sap_tnt_ToolPage_HeaderShadow: @sapUiContentShadow0;

package/src/sap/tnt/themes/sap_horizon_dark/InfoLabel.less

@@ -7,17 +7,22 @@
 // Variables and mixins
 // ==========================================================================
 
+@_sap_tnt_InfoLabel_LineHeightDisplayOnly: 0.875rem;
+@_sap_tnt_InfoLabel_DisplayModeBorder: 0.0625rem solid #B3BDC6;
+@_sap_tnt_InfoLabel_DisplayModeBackground: #29394B;
+@_sap_tnt_InfoLabel_DisplayModeColor: #B3BDC6;
+
 @_sap_tnt_InfoLabel_ColorsArray:
-	@sapUiLegendBackgroundColor1 @sapUiAccent1,
-	@sapUiLegendBackgroundColor2 @sapUiAccent2,
-	@sapUiLegendBackgroundColor3 @sapUiAccent3,
-	@sapUiLegendBackgroundColor5 @sapUiAccent4,
-	@sapUiLegendBackgroundColor20 @sapUiAccent5,
-	@sapUiLegendBackgroundColor6 @sapUiAccent6,
-	@sapUiLegendBackgroundColor7 @sapUiAccent7,
-	@sapUiLegendBackgroundColor18 @sapUiLegend18,
-	@sapUiLegendBackgroundColor10 @sapUiAccent10,
-	@sapUiLegendBackgroundColor9 @sapUiAccent9;
+#4A3502 #EFAB01,
+#770606 #FFA0BF,
+#6E064B #FF98B6,
+#580787 #FF8FF1,
+#331C9F #C6A8FF,
+#0E3382 #5CC0FF,
+#054039 #1ECDAF,
+#164120 #81CB24,
+#063D5B #08C8E4,
+#29394B #B3BDC6;
 
 .create-classes-for-background-and-border-colors(backgroundColor, @_sap_tnt_InfoLabel_ColorsArray);
 
@@ -31,13 +36,14 @@
 		@pair: extract(@list, @i);
 		@backgroundColor: extract(@pair, 1);
 		@borderColor: extract(@pair, 2);
+		@textColor: extract(@pair, 2);
 
 		.@{prefix}@{i} {
 			border: 0.0625rem solid @borderColor;
 			background-color: @backgroundColor;
 
 			.sapTntInfoLabelInner {
-				color: @sapUiBaseText;
+				color: @textColor;
 			}
 		}
 	}

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

@@ -3,14 +3,9 @@
 /* Evening Horizon theme                   */
 /* ======================================= */
 
+@_sap_tnt_NavigationList_CollapsedWidth: 3.5rem;
+@_sap_tnt_NavigationList_IconColor: @sapHighlightColor;
+@_sap_tnt_NavigationList_IconFontSize: 1.125rem;
+@_sap_tnt_NavigationList_ExpandIconColor: @sapUiContentNonInteractiveIconColor;
 @_sap_tnt_NavigationList_ItemHeight: 2.75rem;
-@_sap_tnt_NavigationList_NoIconsNestedItemPadding: 2rem;
-@_sap_tnt_NavigationList_GroupBottomBorderColor: transparent;
-@_sap_tnt_NavigationList_Collapsed_GroupBorderColor: transparent;
-
-.sapTntNavLIPopup {
-  .sapTntNavLI li:focus .sapTntNavLIItem::before,
-  .sapTntNavLIItem:focus::before {
-	border-radius: 0.5rem;
-  }
-}
+@_sap_tnt_NavigationList_NoIconsNestedItemPadding: 2rem;

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

@@ -3,5 +3,7 @@
 /* Evening Horizon theme                   */
 /* ======================================= */
 
-@_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor: @sapUiListGroupHeaderBorderColor;
-@_sap_tnt_SideNavigation_NavigationSeparatorHeight: 2 * @sapUiListBorderWidth;
+@_sap_tnt_SideNavigation_CollapsedWidth: 3.5rem;
+@_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor: @sapAccentColor6;
+@_sap_tnt_SideNavigation_NavigationSeparatorHeight: 0.0625rem;
+@_sap_tnt_SideNavigation_TriangleColor: @sapContent_NonInteractiveIconColor;

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

@@ -3,14 +3,18 @@
 /* Evening Horizon theme               */
 /* =================================== */
 
-@_sap_tnt_ToolHeader_Height: 2.75rem;
-@_sap_tnt_ToolHeader_Icon_Height: 0.75rem;
+@_sap_tnt_ToolHeader_Height: 3.5rem;
+@_sap_tnt_ToolHeader_IconHeight: 0.75rem;
 @_sap_tnt_ToolHeader_DisabledOpacity: @sapUiContentDisabledOpacity;
+@_sap_tnt_ToolHeader_ArrowHeight: 0.125rem;
+@_sap_tnt_ToolHeader_ArrowMargin: 0 -0.25rem;
+@_sap_tnt_ToolHeader_Padding: 0 0.75rem;
+@_sap_tnt_ToolHeader_ArrowMarginBottom: 0.25rem;
+@_sap_tnt_ToolHeader_IconTabHeader_Height: auto;
 
 .sapTntToolHeader {
 	&.sapMTB {
 		background-color: @sapUiShellColor;
-		box-shadow: inset 0 -0.0625rem 0 0 @sapUiShellBorderColor;
 	}
 
 	&.sapMTBStandard {
@@ -51,7 +55,10 @@
 	.sapMBtn:focus .sapMBtnDefault.sapMFocusable,
 	.sapMBtn:focus .sapMBtnBack.sapMFocusable,
 	.sapMBtn:focus .sapMBtnUp.sapMFocusable {
-		outline-color: @_sap_tnt_ToolHeader_BorderColor;
+		&::before {
+			outline-color: @_sap_tnt_ToolHeader_BorderColor;
+			border-color: @_sap_tnt_ToolHeader_BorderColor !important;
+		}
 	}
 
 	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent,
@@ -177,7 +184,7 @@ html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus > .sapMBtnEmph
 // sap.m.MenuButton overriding
 // ==========================================================================
 
-.sapTntToolHeader {
+.sapTntToolHeader.sapMIBar {
 	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
 		color: @sapUiShellInteractiveTextColor;
 	}
@@ -220,68 +227,6 @@ html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus > .sapMBtnEmph
 	}
 }
 
-// ==========================================================================
-// sap.ui.core.Icon overriding
-// ==========================================================================
-
-.sapTntToolHeader {
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		color: @sapUiShellTextColor;
-		outline-color: transparent;
-
-		&.sapUiIconPointer:focus {
-			outline-color: @sapUiContentContrastFocusColor;
-		}
-	}
-
-	// no backgrounds
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		&.sapUiIconColorCritical {
-			color: lighten(saturate(spin(@sapUiCriticalText, 8), 4), 21);
-		}
-
-		&.sapUiIconColorNegative {
-			color: lighten(@sapUiNegativeText, 40);
-		}
-
-		&.sapUiIconColorPositive {
-			color: lighten(desaturate(spin(@sapUiPositiveText, 335), 28), 50);
-		}
-
-		&.sapUiIconColorNeutral {
-			color: lighten(saturate(spin(@sapUiNeutralText, 350), 4), 41);
-		}
-	}
-
-	// backgrounds
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		&.sapUiIconBGColorContrast {
-			color: @sapUiShellTextColor;
-			background: transparent;
-		}
-
-		&.sapUiIconBGColorCritical {
-			color: @sapUiBaseText;
-			background: lighten(saturate(spin(@sapUiCriticalElement, 8), 4), 21);
-		}
-
-		&.sapUiIconBGColorNegative {
-			color: @sapUiBaseText;
-			background: lighten(@sapUiNegativeElement, 40);
-		}
-
-		&.sapUiIconBGColorNeutral {
-			color: @sapUiBaseText;
-			background: lighten(saturate(spin(@sapUiNeutralElement, 350), 4), 41);
-		}
-
-		&.sapUiIconBGColorPositive {
-			color: @sapUiBaseText;
-			background: lighten(desaturate(spin(@sapUiPositiveElement, 335), 28), 50);
-		}
-	}
-}
-
 // ==========================================================================
 // sap.m.Select overriding
 // ==========================================================================
@@ -438,15 +383,11 @@ html.sap-desktop .sapTntToolHeader .sapMFocus > .sapMSFF::before {
 // ==========================================================================
 
 .sapTntToolHeader {
-	.sapMITH {
-		height: 2.75rem;
-		background-color: transparent;
+	.sapMITH .sapMITBText {
+		color: @sapUiShellInteractiveTextColor;
+		text-shadow: none;
 	}
 
-    .sapMITH .sapMITBText {
-      color: @sapUiShellInteractiveTextColor;
-      text-shadow: none;
-    }
 	.sapMITH .sapMITBDisabled {
 		opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
 	}
@@ -484,6 +425,7 @@ html.sap-desktop .sapTntToolHeader .sapMFocus > .sapMSFF::before {
 
 	.sapMITBHead .sapMITBFilter .sapMITBText + .sapMITBContentArrow {
 		height: 0.875rem;
+		margin: 0 -0.1875rem;
 	}
 }
 
@@ -509,116 +451,6 @@ html.sap-desktop .sapTntToolHeader {
 	}
 }
 
-// ==========================================================================
-// sap.m.ObjectStatus overriding
-// ==========================================================================
-
-.sapTntToolHeader {
-	.sapMObjStatus {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon {
-			text-shadow: none;
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusError {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(@sapUiNegativeText, 40);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInformation {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(desaturate(spin(@sapUiInformativeElement, 357), 6), 34);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusNone {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(saturate(spin(@sapUiNeutralText, 350), 4), 41);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusSuccess {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(desaturate(spin(@sapUiPositiveText, 335), 28), 50);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusWarning {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(saturate(spin(@sapUiCriticalText, 8), 4), 21);
-		}
-	}
-
-	//Inverted
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusError {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(@sapUiNegativeElement, 40);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusInformation {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(desaturate(spin(@sapUiInformativeElement, 357), 6), 34);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusNone {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(saturate(spin(@sapUiNeutralElement, 350), 4), 41);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusSuccess {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(desaturate(spin(@sapUiPositiveElement, 335), 28), 50);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusWarning {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(saturate(spin(@sapUiCriticalElement, 8), 4), 21);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted {
-		.sapMObjStatusIcon .sapUiIcon {
-			height: @_sap_tnt_ToolHeader_Icon_Height;
-			vertical-align: text-top;
-		}
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon{
-
-			color: @sapUiBaseText;
-		}
-	}
-
-	.sapMObjStatus .sapMObjStatusTitle {
-		color: @sapUiShellActiveTextColor;
-	}
-}
-
-html.sap-desktop .sapTntToolHeader .sapMObjStatusActive:focus .sapMObjStatusLink::after {
-	outline-color: @_sap_tnt_ToolHeader_BorderColor;
-}
-
 // ==========================================================================
 // sap.m.Avatar / sap.f.Avatar overriding
 // ==========================================================================

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

@@ -3,5 +3,6 @@
 /* Evening Horizon theme             */
 /* ================================= */
 
-@_sap_tnt_ToolPage_HeaderHeight : 2.75rem;
-@_sap_tnt_ToolPage_CompactHeaderHeight : 2.75rem;
+@_sap_tnt_ToolPage_AsideWidthOnTablet: 3.5rem;
+@_sap_tnt_ToolPage_HeaderHeight: 3.5rem;
+@_sap_tnt_ToolPage_HeaderShadow: @sapUiContentShadow0;

package/src/sap/tnt/themes/sap_horizon_hcb/InfoLabel.less

@@ -4,30 +4,46 @@
 /* ================================== */
 
 // ==========================================================================
-// Variables overriding
+// Variables and mixins
 // ==========================================================================
 
 @_sap_tnt_InfoLabel_LineHeightDisplayOnly: 0.875rem;
+@_sap_tnt_InfoLabel_DisplayModeBorder: 0.0625rem solid #A9BACB;
+@_sap_tnt_InfoLabel_DisplayModeBackground: #1C2834;
+@_sap_tnt_InfoLabel_DisplayModeColor: #A9BACB;
 
-.sapTntInfoLabel {
-	background: @sapUiGroupContentBackground;
-	border: solid 0.0625rem @sapUiGroupContentBorderColor;
+@_sap_tnt_InfoLabel_ColorsArray:
+#362401 #FDA503,
+#550404 #FC9F9F,
+#520230 #F79DCA,
+#480057 #F794FF,
+#240381 #BDADFF,
+#002559 #83BCFF,
+#012D28 #06CFAF,
+#0F2D17 #26D526,
+#032B37 #1BC8F2,
+#1C2834 #A9BACB;
 
-	.sapTntInfoLabelInner {
-		color: @sapUiBaseText;
-	}
+.create-classes-for-background-and-border-colors(backgroundColor, @_sap_tnt_InfoLabel_ColorsArray);
 
-	&.sapTntInfoLabelDisplayOnly {
-		background: @sapUiGroupContentBackground;
-		border: solid 1px @sapUiGroupContentBorderColor;
+// Iterate over the InfoLabel ColorsArray and create separate class for each
+// color named with the passed prefix and the number of the color
+.create-classes-for-background-and-border-colors(@prefix, @list) {
+	.iter(length(@list));
+	.iter(@i) when (@i > 0) {
+		.iter(@i - 1);
 
-		.sapTntInfoLabelInner {
-			color: @sapUiBaseText;
-			line-height: 0.875rem;
-		}
+		@pair: extract(@list, @i);
+		@backgroundColor: extract(@pair, 1);
+		@borderColor: extract(@pair, 2);
+
+		.@{prefix}@{i} {
+			border: 0.0625rem solid @borderColor;
+			background-color: @backgroundColor;
 
-		&.sapTntInfoLabelWithIcon .sapUiIcon {
-			line-height: 0.875rem;
+			.sapTntInfoLabelInner {
+				color: @borderColor;
+			}
 		}
 	}
 }

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

@@ -3,8 +3,8 @@
 /* Horizon High Contrast Black theme       */
 /* ======================================= */
 
+@_sap_tnt_NavigationList_CollapsedWidth: 3.5rem;
+@_sap_tnt_NavigationList_IconFontSize: 1.125rem;
+@_sap_tnt_NavigationList_ExpandIconColor: @sapUiContentNonInteractiveIconColor;
 @_sap_tnt_NavigationList_ItemHeight: 2.75rem;
-@_sap_tnt_NavigationList_NoIconsNestedItemPadding: 2rem;
-@_sap_tnt_NavigationList_ItemFocusBorder: 0.125rem dotted @sapUiContentFocusColor;
-@_sap_tnt_NavigationList_GroupBottomBorderColor: transparent;
-@_sap_tnt_NavigationList_Collapsed_GroupBorderColor: transparent;
+@_sap_tnt_NavigationList_NoIconsNestedItemPadding: 2rem;

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

@@ -3,5 +3,5 @@
 /* Horizon High Contrast Black theme       */
 /* ======================================= */
 
-@_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor: @sapUiListGroupHeaderBorderColor;
-@_sap_tnt_SideNavigation_NavigationSeparatorHeight: 2 * @sapUiListBorderWidth;
+@_sap_tnt_SideNavigation_CollapsedWidth: 3.5rem;
+@_sap_tnt_SideNavigation_NavigationSeparatorHeight: 0.0625rem;