@openui5/themelib_sap_horizon 1.143.1 → 1.144.0

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

@@ -5,20 +5,21 @@
 
 @_sap_tnt_ToolHeader_Height: 3.25rem;
 @_sap_tnt_ToolHeader_IconHeight: 0.75rem;
-@_sap_tnt_ToolHeader_DisabledOpacity: @sapUiContentDisabledOpacity;
+@_sap_tnt_ToolHeader_DisabledOpacity: var(--sapContent_DisabledOpacity);
 @_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;
 
-// ==========================================================================
-// sap.m.Toolbar overriding
-// ==========================================================================
+/* ========================================================================== */
+/* sap.m.Toolbar overriding                                                   */
+/* ========================================================================== */
 
 .sapTntToolHeader:not(.sapUshellShellToolHeader) {
+
 	&.sapMTB {
-		background-color: @sapUiShellColor;
+		background-color: var(--sapShellColor);
 		padding: 0 1rem 0 0.875rem;
 	}
 
@@ -28,80 +29,96 @@
 }
 
 .sapTntToolHeader {
+
 	&.sapMIBar.sapMTB .sapMBarChild.sapMTBSeparator {
 		background: none;
 		width: 0.75rem;
 	}
 }
 
-// ==========================================================================
-// sap.m.Button overriding
-// ==========================================================================
+/* ========================================================================== */
+/* sap.m.Button overriding                                                    */
+/* ========================================================================== */
 
 .sapTntToolHeader {
+
 	.sapMBarChild:not(.sapMMenuBtn) {
+
 		&.sapMBtn {
+
 			.sapMBtnInner:not(.sapMBtnEmphasized)::after,
-            .sapMBtnInner:not(.sapMBtnEmphasized) .sapMBtnIcon {
+			.sapMBtnInner:not(.sapMBtnEmphasized) .sapMBtnIcon {
 				background: transparent;
-				color: @sapUiShellInteractiveTextColor;
+				color: var(--sapShell_InteractiveTextColor);
 			}
+
 			.sapMBtnInner:not(.sapMBtnEmphasized) .sapMBtnContent {
 				background: transparent;
-				color: @sapUiShellTextColor;
+				color: var(--sapShell_TextColor);
 			}
 
 			&:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnActive {
-				background: @sapUiShellActiveBackground;
-				border-color: @sapUiShellActiveBackground;
+				background: var(--sapShell_Active_Background);
+				border-color: var(--sapShell_Active_Background);
 			}
+
 			.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
-				background-color: @sapUiShellHoverBackground;
+				background-color: var(--sapShell_Hover_Background);
+
 				.sapMBtnIcon {
-					color: @sapUiShellActiveTextColor;
+					color: var(--sapShell_Active_TextColor);
 				}
 			}
+
 			&:hover:not(.sapMBtnDisabled) {
+
 				.sapMToggleBtnPressed:not(.sapMBtnActive), .sapMToggleBtnPressed:not(.sapMBtnDisabled):hover  {
-					background-color: @sapUiShellHoverBackground;
+					background-color: var(--sapShell_Hover_Background);
+
 					.sapMBtnIcon {
-						color: @sapUiShellActiveTextColor;
+						color: var(--sapShell_Active_TextColor);
 					}
 				}
-				>span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
+
+				> span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
+
 					&:not(.sapMBtnActive) {
-						background: @sapUiShellHoverBackground;
-						border: 1px solid @sapUiButtonLiteHoverBorderColor;
+						background: var(--sapShell_Hover_Background);
+						border: 1px solid var(--sapButton_Lite_Hover_BorderColor);
 					}
+
 					&.sapMBtnActive {
-						background: @sapUiShellActiveBackground;
-						color: @sapUiShellActiveTextColor;
-						border: 1px solid @sapUiButtonLiteActiveBorderColor;
+						background: var(--sapShell_Active_Background);
+						color: var(--sapShell_Active_TextColor);
+						border: 1px solid var(--sapButton_Lite_Active_BorderColor);
 
 							.sapMBtnContent bdi {
-								color: @sapUiShellActiveTextColor;
+								color: var(--sapShell_Active_TextColor);
 							}
 					}
-					&.sapMBtnActive:after,
-					&.sapMBtnActive >.sapMBtnIcon {
-						color: @sapUiShellActiveTextColor;
+
+					&.sapMBtnActive::after,
+					&.sapMBtnActive > .sapMBtnIcon {
+						color: var(--sapShell_Active_TextColor);
 					}
-					&:after,
-					>.sapMBtnIcon {
-						color: @sapUiShellInteractiveTextColor;
+
+					&::after,
+					> .sapMBtnIcon {
+						color: var(--sapShell_InteractiveTextColor);
 					}
-					>.sapMBtnContent,
-					>.sapMBtnContent bdi
-					{
-						color: @sapUiShellTextColor;
+
+					> .sapMBtnContent,
+					> .sapMBtnContent bdi {
+						color: var(--sapShell_TextColor);
 					}
 				}
 
 				&:active {
-					>.sapMBtnContent,
-					>.sapMBtnInner,
-					>.sapMBtnIcon {
-						color: @sapUiShellTextColor;
+
+					> .sapMBtnContent,
+					> .sapMBtnInner,
+					> .sapMBtnIcon {
+						color: var(--sapShell_TextColor);
 					}
 				}
 			}
@@ -110,8 +127,11 @@
 }
 
 .sapUiSizeCompact {
+
 	.sapTntToolHeader {
+
 		.sapMBarChild:not(.sapMMenuBtn) {
+
 			&.sapMBtn {
 				padding: 0;
 				min-width: 2rem;
@@ -150,53 +170,56 @@
 	}
 }
 
-// ==========================================================================
-// sap.m.Text, sap.m.Title and sap.m.Label overriding
-// ==========================================================================
+/* ========================================================================== */
+/* sap.m.Text, sap.m.Title and sap.m.Label overriding                         */
+/* ========================================================================== */
 
 .sapTntToolHeader {
+
 	.sapMTitle {
 		text-shadow: none;
 		line-height: 1.625rem;
-		font-size: var(-sapFontHeader5Size);
+		font-size: var(--sapFontHeader5Size);
 		font-family: var(--sapFontSemiboldDuplexFamily);
 		color: var(--sapShell_SubBrand_TextColor);
 	}
 
 	.sapMText,
 	.sapMLabel {
-		line-height: @sapUiContentLineHeight;
-		color: @sapUiContentLabelColor;
+		line-height: var(--sapContent_LineHeight);
+		color: var(--sapContent_LabelColor);
 	}
 
 	&.sapMIBar.sapMTB .sapMBarChild.sapMText,
 	&.sapMIBar.sapMTB .sapMBarChild.sapMLabel {
-		margin-top: 2px; // to align the text/label with the title
+		margin-top: 0.125rem; /* to align the text/label with the title */
 		margin-left: 0.5rem;
 	}
 }
 
 .sapUiSizeCompact {
+
 	.sapTntToolHeader {
+
 		&.sapMIBar.sapMTB .sapMBarChild.sapMText,
 		&.sapMIBar.sapMTB .sapMBarChild.sapMLabel {
-			margin-top: 3px; // to align the text/label with the title
+			margin-top: 0.1875rem; /* to align the text/label with the title */
 		}
 	}
 }
 
-// ==========================================================================
-// sap.m.SearchField overriding
-// ==========================================================================
+/* ========================================================================== */
+/* sap.m.SearchField overriding                                               */
+/* ========================================================================== */
 
 .sapTntToolHeader {
 
 	.sapMSFF {
-		background: @sapUiFieldBackgroundStyle;
-		background-color: @sapUiShellInteractiveBackground;
-		box-shadow: @sapUiFieldShadow;
+		background: var(--sapField_BackgroundStyle);
+		background-color: var(--sapShell_InteractiveBackground);
+		box-shadow: var(--sapField_Shadow);
 		border: none;
-		color: @sapUiShellInteractiveTextColor;
+		color: var(--sapShell_InteractiveTextColor);
 		border-radius: 1.125rem;
 		height: 2.25rem;
 
@@ -214,11 +237,11 @@
 		}
 
 		.sapMSFB:hover {
-			background: @sapUiShellHoverBackground;
-			box-shadow: @sapUiButtonLiteHoverBorderColor;
+			background: var(--sapShell_Hover_Background);
+			box-shadow: var(--sapButton_Lite_Hover_BorderColor);
 			border-radius: 1.125rem;
 			height: 1.75rem;
-			color: @sapUiShellInteractiveTextColor;
+			color: var(--sapShell_InteractiveTextColor);
 		}
 
 		.sapMSFR {
@@ -227,16 +250,18 @@
 
 		.sapMSFB:active,
 		.sapMSFB.sapMSFBA {
-			background: @sapUiShellActiveBackground;
-			box-shadow: @sapUiContentSelectedShadow;
+			background: var(--sapShell_Active_Background);
+			box-shadow: var(--sapContent_Selected_Shadow);
 			border-radius: 1.125rem;
-			color: @sapUiShellActiveTextColor;
+			color: var(--sapShell_Active_TextColor);
 		}
 	}
 }
 
 .sapUiSizeCompact {
+
 	.sapTntToolHeader {
+
 		.sapMSF {
 			height: 2rem;
 		}
@@ -257,27 +282,30 @@
 	}
 }
 
-// ==========================================================================
-// sap.m.IconTabHeader overriding
-// ==========================================================================
+/* ========================================================================== */
+/* sap.m.IconTabHeader overriding                                             */
+/* ========================================================================== */
 
 .sapTntToolHeader {
+
 	.sapUshellShellTabBar .sapMITH,
 	.sapUshellShellTabBar.sapMITH {
 		box-shadow: none;
 	}
 }
 
-// ==========================================================================
-// sap.m.Image overriding
-// ==========================================================================
+/* ========================================================================== */
+/* sap.m.Image overriding                                                     */
+/* ========================================================================== */
 
 .sapTntToolHeader {
+
 	.sapMImg {
 		height: 1.625rem;
 	}
 
 	&.sapMIBar.sapMTB {
+
 		.sapMBarChild.sapMImg:first-child,
 		.sapMBarChild.sapMBtn + .sapMBarChild.sapMImg:first-of-type {
 			margin-left: 0.5rem;
@@ -285,7 +313,7 @@
 	}
 
 	.sapMImgFocusable:focus {
-		outline: @sapUiContentFocusStyle @sapUiContentFocusWidth @sapUiContentFocusColor;
+		outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
 		outline-offset: 0.125rem;
 		border-radius: 0.25rem;
 	}

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

@@ -7,8 +7,6 @@
 @_sap_tnt_ToolPage_ContentBackgroundSolid: var(--sapBackgroundColor);
 @_sap_tnt_ToolPage_ContentBackgroundTransparent: transparent;
 @_sap_tnt_ToolPage_ContentBackgroundList: var(--sapGroup_ContentBackground);
-@_sap_tnt_ToolPage_AsideCollapsedPhoneTransform: calc(~"-100% - 0.25rem");
-@_sap_tnt_ToolPage_AsideCollapsedPhoneTransformRtl: calc(~"100% + 0.25rem");
-@_sap_tnt_ToolPage_AsidePhoneTop: -0.4375rem;
-@_sap_tnt_ToolPage_AsidePhoneWidth: 100%;
+@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransform: calc(~"-100% - 0.25rem");
+@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransformRtl: calc(~"100% + 0.25rem");
 @_sap_tnt_ToolHeader_Shadow: var(--sapShell_Shadow);

package/src/sap/tnt/themes/sap_horizon_dark/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

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

@@ -3,9 +3,9 @@
 /* Horizon High Contrast Black theme  */
 /* ================================== */
 
-// ==========================================================================
-// Variables and mixins
-// ==========================================================================
+/* ========================================================================== */
+/* Variables and mixins                                                       */
+/* ========================================================================== */
 
 @_sap_tnt_InfoLabel_LineHeightDisplayOnly: 1rem;
 @_sap_tnt_InfoLabel_DisplayModeBorder: none;
@@ -21,9 +21,9 @@
 @_sap_tnt_InfoLabel_DisplayPadding: 0 0.25rem;
 @_sap_tnt_InfoLabel_IconMargin: 0.25rem;
 @_sap_tnt_InfoLabel_DisplayIconMargin: 0.125rem;
-@_sap_tnt_InfoLabel_FontFamily: @sapUiFontSemiboldDuplexFamily;
+@_sap_tnt_InfoLabel_FontFamily: var(--sapFontSemiboldDuplexFamily);
 @_sap_tnt_InfoLabel_FontSize: @sapMFontMediumSize;
-@_sap_tnt_InfoLabel_DisplayFontSize: @sapMFontSmallSize;
+@_sap_tnt_InfoLabel_DisplayFontSize: var(--sapFontSmallSize);
 @_sap_tnt_InfoLabel_DisplayFontSizeIcon: 0.625rem;
 @_sap_tnt_InfoLabel_NarrowPadding: @_sap_tnt_InfoLabel_Padding;
 @_sap_tnt_InfoLabel_LetterSpacing: normal;
@@ -42,11 +42,13 @@
 
 .create-classes-for-background-and-border-colors(backgroundColor, @_sap_tnt_InfoLabel_ColorsArray);
 
-// Iterate over the InfoLabel ColorsArray and create separate class for each
-// color named with the passed prefix and the number of the color
+/* 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);
 
 		@pair: extract(@list, @i);

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

@@ -7,7 +7,5 @@
 @_sap_tnt_SideNavigation_CollapsedWidth: 4rem;
 @_sap_tnt_SideNavigation_NavigationSeparatorMargin: 0.25rem 0.5rem 0.25rem 0.5rem;
 @_sap_tnt_SideNavigation_NavigationSeparatorHeight: 0.0625rem;
-@_sap_tnt_SideNavigation_PhoneBorderRadius: 0.5rem;
 @_sap_tnt_SideNavigation_BoxShadow: var(--sapContent_Shadow0);
-@_sap_tnt_SideNavigation_TriangleDisplay: none;
-@_sap_tnt_SideNavigation_PhoneWidth: ~"100% !important";
+@_sap_tnt_SideNavigation_TriangleDisplay: none;