@openui5/themelib_sap_horizon 1.127.1 → 1.129.0

package/src/sap/m/themes/sap_horizon_hcb/Popover.less

@@ -103,26 +103,6 @@
 	}
 }
 
-.sapMPopoverWithoutSubHeader .sapMPopoverHeader, .sapMPopoverSubHeader {
-	&:after {
-		content: "";
-		position: absolute;
-		height: 1px;
-		bottom: 0px;
-		width: 100%;
-		box-shadow: @sapUiShadowHeader;
-		z-index: 1;
-	}
-
-	.sapMIBar-CTX {
-		z-index: 2;
-	}
-}
-
-.sapMPopoverWithSubHeader .sapMPopoverHeader .sapMIBar-CTX {
-	box-shadow: none;
-}
-
 .sapMPopover {
 	border-radius: @sapUiPopoverBorderCornerRadius;
 
@@ -164,7 +144,5 @@
 }
 
 .sapMPopoverResizeHandle {
-	top: -8px;
-	right: -3px;
 	color: @sapButton_Lite_TextColor;
 }

package/src/sap/m/themes/sap_horizon_hcb/SinglePlanningCalendarGrid.less

@@ -46,6 +46,7 @@ html.sap-desktop {
 	.sapMSinglePCColumnWeekend,
 	.sapMSinglePCNonWorkingRow,
 	.sapMSinglePCBlockersRow,
+	.sapMSinglePCNonWorkingPeriod,
 	.sapMSinglePCRowHeaders {
 		background-color: @sapUiListAlternatingBackground;
 	}

package/src/sap/m/themes/sap_horizon_hcb/SlideTile.less

@@ -7,8 +7,7 @@
 	border-radius: 0.25rem;
 }
 
-html.sap-desktop .sapMST:focus .sapMSTFocusDiv,
-html.sap-desktop .sapMST:active .sapMGTFocusDiv {
+.sapMST:active .sapMGTFocusDiv {
 	left: 0;
 	top: 0;
 	right: 0;
@@ -16,19 +15,19 @@ html.sap-desktop .sapMST:active .sapMGTFocusDiv {
 	border: 0.125rem dotted @sapUiContentFocusColor;
 }
 
-html.sap-desktop .sapMST:focus:not([tabindex]) {
+.sapMST:focus:not([tabindex]) {
 	border-color: transparent;
 }
 
 /* Bulleted indicator of multiple tiles*/
-.sapMSTBulleted > span {
+.sapMSTBulleted .sapMSTIndicator {
 	border: solid 0.0625rem @sapTile_OverlayForegroundColor;
 	opacity: 0.6;
 	box-shadow : 0 0 0.125rem @sapContent_ShadowColor;
 	margin: 0 0.094rem;
 }
 
-.sapMSTBulleted > span.sapMSTActive {
+.sapMSTBulleted .sapMSTIndicator.sapMSTActive {
 	background: @sapTile_OverlayForegroundColor;
 	box-shadow: 0 0 0.063rem @sapContent_ShadowColor;
 }
@@ -60,12 +59,12 @@ html.sap-desktop .sapMST:focus:not([tabindex]) {
 	border: none;
 }
 
-html.sap-desktop .sapMST.sapMSTIconPressed .sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea {
+.sapMST.sapMSTIconPressed .sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea {
 	border-color: @sapButton_Active_BorderColor;
 	background-color: @sapButton_Active_Background;
 }
 
-html.sap-desktop .sapMST.sapMSTIconPressed{
+.sapMST.sapMSTIconPressed{
 	.sapMSTIconNestedArea{
 		.sapUiIcon{
 			color: @sapButton_Active_TextColor !important;

package/src/sap/m/themes/sap_horizon_hcb/Token.less

@@ -3,17 +3,25 @@
 /* Horizon High Contrast Black theme  */
 /* ================================== */
 
-@_sap_m_Token_TokenPadding: 0.5rem;
-@_sap_m_Token_TokenCompactPadding: 0.25rem;
 @_sap_m_Token_LeftPadding: 0.3125rem;
-@_sap_m_Token_TokenSize: @sapMFontSmallSize + (2 * @_sap_m_Token_TokenPadding) - @_sap_m_Token_LeftPadding;
-@_sap_m_Token_TokenCompactSize: @sapMFontSmallSize  + @_sap_m_Token_TokenCompactPadding;
+@_sap_m_Token_IconWidth: 1.75rem;
+@_sap_m_Token_CompactIconWidth: 1.5rem;
+@_sap_m_Token_DeleteIconHeight: 2.25rem;
+@_sap_m_Token_DeleteIconCompactHeight: 1.625rem;
 
 .sapMToken {
 	padding-left: @_sap_m_Token_LeftPadding;
 	border-radius: 0.25rem;
 	color: @sapTextColor;
 	font-size: @sapFontSize;
+	overflow: visible;
+}
+
+.sapMTokenIcon::before {
+	display: inline-block;
+	width: 0.75rem;
+	height: 0.75rem;
+	line-height: 1;
 }
 
 html.sap-desktop .sapMToken:not(.sapMTokenReadOnly):hover {
@@ -57,4 +65,21 @@ html.sap-desktop .sapMToken {
 	.sapMTokenText {
 		line-height: 0.875rem;
 	}
+}
+
+.sapMTokenIcon {
+	box-sizing: border-box;
+	top: ~"calc((@{_sap_m_Token_TokenHeight} / 2) - (@{_sap_m_Token_DeleteIconHeight} / 2) - @{sapUiButtonBorderWidth})";
+	width: @_sap_m_Token_IconWidth;
+	height: @_sap_m_Token_DeleteIconHeight;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	right: -@sapUiButtonBorderWidth;
+}
+
+.sapUiSizeCompact .sapMTokenIcon {
+	top: ~"calc((@{_sap_m_Token_TokenCompactHeight} / 2) - (@{_sap_m_Token_DeleteIconCompactHeight} / 2) - @{sapUiButtonBorderWidth})";
+	width: @_sap_m_Token_CompactIconWidth;
+	height: @_sap_m_Token_DeleteIconCompactHeight;
 }

package/src/sap/m/themes/sap_horizon_hcb/library.source.less

@@ -27,7 +27,6 @@
 @import "DateTimePicker.less";
 @import "Dialog.less";
 @import "DynamicDateRange.less";
-@import "FeedContent.less";
 @import "FeedInput.less";
 @import "GroupHeaderListItem.less";
 @import "FeedListItem.less";
@@ -37,7 +36,6 @@
 @import "IconTabBar.less";
 @import "IconTabBarSelectList.less";
 @import "Image.less";
-@import "ImageContent.less";
 @import "Input.less";
 @import "InputBase.less";
 
@@ -59,9 +57,7 @@
 @import "MessageStrip.less";
 @import "MessageToast.less";
 @import "MultiComboBox.less";
-@import "NewsContent.less";
 @import "NotificationListGroup.less";
-@import "NumericContent.less";
 @import "ObjectAttribute.less";
 @import "ObjectHeader.less";
 @import "ObjectListItem.less";

package/src/sap/m/themes/sap_horizon_hcw/ActionListItem.less

@@ -35,12 +35,12 @@
 }
 
 .sapMLIBActive.sapMLIB.sapMALI > .sapMLIBContent {
-	background: @sapUiButtonActiveBackground;
+	background: var(--sapButton_Active_Background);
 }
 
 /* focus */
 .sapMList .sapMLIB.sapMALI:focus > .sapMLIBContent {
-	outline: 0.125rem dotted @sapUiContentFocusColor;
+	outline: 0.125rem dotted var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
 	border: none;
 }

package/src/sap/m/themes/sap_horizon_hcw/ActionSelect.less

@@ -8,6 +8,7 @@
 /* ----------------------------- */
 
 html.sap-desktop .sapMActionSelectPicker .sapMBtn {
+
 	.sapMBtnInner {
 		border-top: 1px solid @sapUiButtonActionSelectBorderColor;
 		border-bottom: 0;
@@ -34,7 +35,7 @@ html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent .sapMBtn .
 
 .sapMActionSelectPicker .sapMBtnDefault {
 	background: @sapUiButtonActionSelectBackground;
-	border-color: @sapUiListBorderColor;
+	border-color: var(--sapList_BorderColor);
 
 	/* override the default text-shadow */
 	text-shadow: none;
@@ -42,7 +43,7 @@ html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent .sapMBtn .
 
 .sapMActionSelectPicker .sapMBtn,
 .sapMActionSelectPicker .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
-	border-color: @sapUiListBorderColor;
+	border-color: var(--sapList_BorderColor);
 }
 
 html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled) .sapMBtnDefault:not(.sapMBtnActive):hover {
@@ -67,7 +68,7 @@ html.sap-desktop .sapUiSizeCompact.sapMActionSelectPicker .sapMBtnInner {
 	height: 2rem;
 	border-radius: 0;
 	border: 0;
-	border-top: 1px solid @sapUiListBorderColor;
+	border-top: 1px solid var(--sapList_BorderColor);
 
 	.sapMBtnContent {
 		line-height: 2rem;

package/src/sap/m/themes/sap_horizon_hcw/ActionSheet.less

@@ -4,26 +4,26 @@
 /* ================================== */
 
 .sapMActionSheetPopover.sapMPopover {
-	box-shadow: @sapUiContentShadow2;
+	box-shadow: var(--sapContent_Shadow2);
 }
 
 .sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
-	color: @sapUiPageHeaderTextColor;
-	font-size: @sapMFontHeader5Size;
-	font-family: @sapFontHeaderFamily;
+	color: var(--sapPageHeader_TextColor);
+	font-size: var(--sapFontHeader5Size);
+	font-family: var(--sapFontHeaderFamily);
 }
 
 .sapMDialog.sapMActionSheetDialog {
-	background-color: @sapUiPageHeaderBackground;
-	border-top-left-radius: @sapUiElementBorderCornerRadius;
-	border-top-right-radius: @sapUiElementBorderCornerRadius;
-	box-shadow: @sapUiContentShadow3;
+	background-color: var(--sapPageHeader_Background);
+	border-top-left-radius: var(--sapElement_BorderCornerRadius);
+	border-top-right-radius: var(--sapElement_BorderCornerRadius);
+	box-shadow: var(--sapContent_Shadow3);
 
 	&.sapMDialogPhone .sapMIBar.sapMHeader-CTX {
-		box-shadow: @sapUiContentHeaderShadow;
-		background-color: @sapUiPageHeaderBackground;
-		border-top-left-radius: @sapUiElementBorderCornerRadius;
-		border-top-right-radius: @sapUiElementBorderCornerRadius;
+		box-shadow: var(--sapContent_HeaderShadow);
+		background-color: var(--sapPageHeader_Background);
+		border-top-left-radius: var(--sapElement_BorderCornerRadius);
+		border-top-right-radius: var(--sapElement_BorderCornerRadius);
 	}
 
 	&.sapUiPopupWithPadding:not(.sapUiNoContentPadding) .sapMDialogScrollCont {

package/src/sap/m/themes/sap_horizon_hcw/ActionTile.less

@@ -4,22 +4,25 @@
 /* ================================== */
 
 .sapMAT:hover {
-    outline:solid 0.1875rem @sapTile_Interactive_BorderColor;
-    background-color: @sapTile_Background;
-    box-shadow: none;
+	outline:solid 0.1875rem var(--sapTile_Interactive_BorderColor);
+	background-color: var(--sapTile_Background);
+	box-shadow: none;
 }
 
 .sapMAT:focus {
-    .sapMATFocusDiv {
-        border: 0.125rem dotted @sapUiContentFocusColor !important;
-    }
-    .sapMGTFocusDiv {
-        border: 0.125rem dotted @sapUiContentFocusColor !important;
-    }
+
+	.sapMATFocusDiv {
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor) !important;
+	}
+
+	.sapMGTFocusDiv {
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor) !important;
+	}
 }
 
 .sapMAT:active {
-    .sapMATFocusDiv {
-        border: none;
-    }
+
+	.sapMATFocusDiv {
+		border: none;
+	}
 }

package/src/sap/m/themes/sap_horizon_hcw/Avatar.less

@@ -13,14 +13,14 @@
 .sapFAvatarImageContain,
 .sapFAvatarIcon,
 .sapFAvatarInitials {
-	border: 0.0625rem solid @sapUiFieldBorderColor;
+	border: 0.0625rem solid var(--sapField_BorderColor);
 }
 
 .sapFAvatarSquare {
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: var(--sapElement_BorderCornerRadius);
 
 	.sapFAvatarImageHolder {
-		border-radius: @sapUiElementBorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 	}
 }
 
@@ -33,12 +33,12 @@
 }
 
 .sapFAvatar:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
-	background-color: @sapActiveColor;
+	background-color: var(--sapActiveColor);
 }
 
 .sapFAvatarColorTileIcon {
-	background-color: @sapUiTileBackground;
-	color: @sapUiTileIconColor;
+	background-color: var(--sapTile_Background);
+	color: var(--sapTile_IconColor);
 
 	.sapFAvatarInitialsHolder {
 		color: currentColor;
@@ -46,8 +46,9 @@
 }
 
 .sapFAvatarColorPlaceholder {
-	background-color: @sapUiContentImagePlaceholderBackground;
-	color: @sapUiContentImagePlaceholderForegroundColor;;
+	background-color: var(--sapContent_ImagePlaceholderBackground);
+	color: var(--sapContent_ImagePlaceholderForegroundColor);
+
 	.sapFAvatarInitialsHolder {
 		color: currentColor;
 	}

package/src/sap/m/themes/sap_horizon_hcw/Bar.less

@@ -7,7 +7,7 @@
 	text-shadow: none;
 }
 
-.sapMBarLeft{
+.sapMBarLeft {
 	padding-left: 1rem;
 	padding-right: 0.25rem;
 }
@@ -24,25 +24,25 @@
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:first-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child {
 	margin: 0 0.25rem 0 0;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:last-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:last-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child {
 	margin: 0 0 0 0.25rem;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:not(:first-child):not(:last-child),
 .sapMBar .sapMBarLeft.sapMBarContainer > *:not(:first-child):not(:last-child),
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child){
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child) {
 	margin: 0 0.5rem;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:first-child:last-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child:last-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child {
 	margin: 0;
 }
 
@@ -51,7 +51,9 @@
 	line-height: 2.75rem;
 }
 
-.sapMBarLeft, .sapMBarRight, .sapMBarPH {
+.sapMBarLeft,
+.sapMBarRight,
+.sapMBarPH {
 	height: 2.75rem;
 	line-height: 2.75rem;
 }
@@ -59,17 +61,17 @@
 /* in Master page the bar should have different color */
 .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX,
 .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 /* in Master page the bar should have a different color shadow only if we don't have subHeader (e.g. another bar) */
 .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX:only-of-type {
-	box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
+	box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
 }
 
 /* in Master page the bar should have a different color shadow */
 .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
-	box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
+	box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
 }
 
 /* Bar Title Alignment */
@@ -82,5 +84,5 @@ html[data-sap-ui-browser^="ff"].sap-desktop .sapMBarTitleAlignAuto .sapMBarPH {
 }
 
 .sapMIBar-CTX.sapMFooter-CTX {
-	border-top: 0.0625rem solid @sapUiPageFooterBorderColor;
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
 }

package/src/sap/m/themes/sap_horizon_hcw/Breadcrumbs.less

@@ -24,12 +24,11 @@
 		background: transparent;
 		border: none;
 
-		// Default styles
+		/* Default styles */
 		.sapMSltIcon {
 			display: flex;
 			align-items: center;
 			gap: 0.2rem;
-
 			margin-top: 0.1rem;
 
 			&::before,
@@ -38,15 +37,15 @@
 			}
 
 			&::before {
-				content: "••• ";
-				font-family: @sapUiFontLightFamily;
+				content: '••• ';
+				font-family: var(--sapFontLightFamily);
 			}
 
 			&::after {
-				content: "\e1ef";
-				font-family: @sapUiContentIconFontFamily;
+				content: '\e1ef';
+				font-family: var(--sapContent_IconFontFamily);
 				font-size: @sapMFontMediumSize;
-				color: @sapUiLink;
+				color: var(--sapLinkColor);
 				speak: none;
 			}
 		}
@@ -56,7 +55,7 @@
 			outline: 0.125rem dotted @sapUiHcStandardForeground;
 			outline-offset: -0.125rem;
 
-			.sapMSltIcon:before {
+			.sapMSltIcon::before {
 				border-bottom: none;
 			}
 		}

package/src/sap/m/themes/sap_horizon_hcw/BusyIndicator.less

@@ -5,11 +5,11 @@
 
 /* Background animation element */
 .sapUiLocalBusyIndicatorAnimation > div::before {
-	background: @sapUiContentBusyColor;
+	background: var(--sapContent_BusyColor);
 	animation-duration: 0ms;
 }
 
 /* Shadow animation element */
 .sapUiLocalBusyIndicatorAnimation > div::after {
-	box-shadow: inset 0px 0px 0px 0px @sapUiContentBusyColor;
+	box-shadow: inset 0 0 0 0 var(--sapContent_BusyColor);
 }