@openui5/themelib_sap_horizon 1.131.1 → 1.132.0

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

@@ -8,11 +8,11 @@
 }
 
 .sapMPanelBGSolid {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapMPanelBGTranslucent {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapMPanelBGTransparent {
@@ -25,12 +25,12 @@
 .sapMPanelWrappingDiv,
 /* do not want border if expanded and if only header text */
 .sapMPanelWrappingDivTb {
-	border-bottom: 0.0625rem solid @sapUiGroupTitleBorderColor;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 }
 
 .sapMPanelWrappingDiv.sapMPanelWrappingDivExpanded,
 .sapMPanelWrappingDivTb.sapMPanelWrappingDivTbExpanded {
-	border-bottom: 0.0625rem solid @sapUiGroupTitleBorderColor;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 }
 
 .sapMPanelWrappingDivTb .sapMTB.sapMTBStandard {
@@ -38,7 +38,7 @@
 }
 
 .sapMPanelContent:not(.sapMPanelBGTransparent) {
-	border-bottom: 0.0625rem solid @sapUiGroupTitleBorderColor;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 }
 
 .sapMPanelContent {
@@ -51,5 +51,5 @@
 }
 
 .sapMPanelWrappingDiv .sapUiIcon {
-	color: @sapButton_Lite_TextColor;
-}
+	color: var(--sapButton_Lite_TextColor);
+}

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

@@ -7,8 +7,8 @@
 .sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMLIB:nth-child(even):not(.sapMListTblSubRow),
 .sapMSize0.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMLIB:nth-child(4n+3),
 .sapMSize1.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMLIB:nth-child(4n+3),
-.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMListTblSubRow:nth-child(4n){
-	background-color:  @sapUiListAlternatingBackground;
+.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMListTblSubRow:nth-child(4n) {
+	background-color: var(--sapList_AlternatingBackground);
 }
 
 .sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(even):not(.sapMListTblSubRow).sapMLIBHoverable:hover,
@@ -16,8 +16,8 @@
 .sapMSize0.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBHoverable:hover + .sapMListTblSubRow,
 .sapMSize1.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBHoverable:hover,
 .sapMSize1.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBHoverable:hover + .sapMListTblSubRow,
-.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMListTblSubRow:nth-child(4n).sapMLIBHoverable:hover{
-	background-color: @sapUiListHoverBackground;
+.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMListTblSubRow:nth-child(4n).sapMLIBHoverable:hover {
+	background-color: var(--sapList_Hover_Background);
 }
 
 .sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(even):not(.sapMListTblSubRow).sapMLIBSelected,
@@ -26,8 +26,8 @@
 .sapMSize0.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBSelected + .sapMListTblSubRow,
 .sapMSize1.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBSelected,
 .sapMSize1.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBSelected + .sapMListTblSubRow,
-.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMListTblSubRow:nth-child(4n).sapMLIBSelected{
-	background-color: @sapUiListSelectionBackgroundColor;
+.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMListTblSubRow:nth-child(4n).sapMLIBSelected {
+	background-color: var(--sapList_SelectionBackgroundColor);
 }
 
 .sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(even):not(.sapMListTblSubRow).sapMLIBSelected.sapMLIBHoverable:hover,
@@ -36,22 +36,22 @@
 .sapMSize0.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBSelected.sapMLIBHoverable:hover + .sapMListTblSubRow,
 .sapMSize1.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBSelected.sapMLIBHoverable:hover,
 .sapMSize1.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr:nth-child(4n+3).sapMLIBSelected.sapMLIBHoverable:hover + .sapMListTblSubRow,
-.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMListTblSubRow:nth-child(4n).sapMLIBSelected.sapMLIBHoverable:hover{
+.sapMPlanCal:not(.sapMPlanCalSuppressAlternatingRowColors) > .sapMList > table > tbody > tr.sapMListTblSubRow:nth-child(4n).sapMLIBSelected.sapMLIBHoverable:hover {
 	background-color: @sapUiListSelectionHoverBackground;
 }
 
 /* Calendar overstyling */
 
 html.sap-desktop .sapMPlanCal .sapUiCalItem:not(.sapUiCalItemSel):hover {
-	background-color:  @sapUiListHoverBackground;
+	background-color: var(--sapList_Hover_Background);
 }
 
 html.sap-desktop .sapMPlanCal .sapUiCalItemWeekEnd:not(.sapUiCalItemSel):hover {
-	background-color: @sapUiListHoverBackground;
+	background-color: var(--sapList_Hover_Background);
 }
 
 html.sap-desktop .sapMPlanCal .sapUiCalItemOtherMonth:not(.sapUiCalItemSel):hover {
-	background-color: @sapUiListAlternatingBackground;
+	background-color: var(--sapList_AlternatingBackground);
 }
 
 .sapMPlanCal .sapMPlanCalRowHead .sapMSLIImg {
@@ -63,9 +63,9 @@ html.sap-desktop .sapMPlanCal .sapUiCalItemOtherMonth:not(.sapUiCalItemSel):hove
 
 .sapMPlanCal .sapMListTbl .sapMSLIImgIcon.sapUiIcon:not(.sapMLIBImgNav):not(.sapMBtnIcon) {
 	border-radius: 0.25rem;
-	background-color: @sapUiAccent7;
-	color: @sapUiContentContrastTextColor;
-	font-size: @sapMFontHeader4Size;
+	background-color: var(--sapAccentColor7);
+	color: var(--sapContent_ContrastTextColor);
+	font-size: var(--sapFontHeader4Size);
 }
 
 .sapMPlanCal .sapUiCalMonthsRow .sapUiCalItemSel:not(.sapUiCalItemSelBetween) > .sapUiCalItemText {

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

@@ -3,33 +3,37 @@
 /* Horizon High Contrast Black theme  */
 /* ================================== */
 
-.sapMPopoverArr:after {
-	background: @sapUiGroupContentBackground;
-	box-shadow: @sapUiContentShadow2;
+.sapMPopoverArr::after {
+	background: var(--sapGroup_ContentBackground);
+	box-shadow: var(--sapContent_Shadow2);
 }
 
 .sapMPopoverWithBar > .sapMPopoverArr {
-	&.sapMPopoverArrUp:after,
-	&.sapMPopoverHeaderAlignArr:after {
-		background-color: @sapUiPageHeaderBackground;
+	&.sapMPopoverArrUp::after,
+	&.sapMPopoverHeaderAlignArr::after {
+		background-color: var(--sapPageHeader_Background);
 	}
 }
 
-.sapMPopoverWithFooter > .sapMPopoverArr.sapMPopoverFooterAlignArr:after {
-	background-color: @sapUiPageFooterBackground;
+.sapMPopoverWithFooter > .sapMPopoverArr.sapMPopoverFooterAlignArr::after {
+	background-color: var(--sapPageFooter_Background);
 }
 
 .sapMPopover .sapMIBar.sapMHeader-CTX {
-	background-color: @sapUiPageHeaderBackground;
+	background-color: var(--sapPageHeader_Background);
 }
 
 .sapMPopover .sapMIBar.sapMSubHeader-CTX {
-	background-color: @sapUiPageHeaderBackground;
+	background-color: var(--sapPageHeader_Background);
 }
 
 .sapUiSizeCompact {
-	.sapMPopoverFooter, .sapMPopoverHeader {
-		.sapMIBar, .sapMBar {
+
+	.sapMPopoverFooter,
+	.sapMPopoverHeader {
+
+		.sapMIBar,
+		.sapMBar {
 			height: 2.5rem;
 
 			& > .sapMBarLeft,
@@ -54,10 +58,17 @@
 	}
 }
 
-.sapMPopoverHeader, .sapMPopoverFooter, .sapMPopoverSubHeader {
-	.sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
-	.sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
+.sapMPopoverHeader,
+.sapMPopoverFooter,
+.sapMPopoverSubHeader {
+
+	.sapUi-Std-PaddingS,
+	.sapUi-Std-PaddingM,
+	.sapUi-Std-PaddingL,
+	.sapUi-Std-PaddingXL {
+
 		&.sapMBar {
+
 			.sapMBarMiddle .sapMBarPH {
 				padding-left: 0;
 				padding-right: 0;
@@ -82,21 +93,26 @@
 	}
 }
 
-.sapMPopoverHeader, .sapMPopoverSubHeader {
+.sapMPopoverHeader,
+.sapMPopoverSubHeader {
 	position: relative;
 	z-index: 2;
 
 	.sapMBar {
+
 		.sapMBarContainer {
 			padding-left: 0;
 			padding-right: 0;
 		}
+
 		.sapMBarLeft {
 			padding-left: 1rem;
 		}
+
 		.sapMBarMiddle .sapMBarContainer {
 			padding: 0 1rem;
 		}
+
 		.sapMBarRight {
 			padding-right: 1rem;
 		}
@@ -104,7 +120,7 @@
 }
 
 .sapMPopover {
-	border-radius: @sapUiPopoverBorderCornerRadius;
+	border-radius: var(--sapPopover_BorderCornerRadius);
 
 	.sapMPopoverCont {
 		padding: 0.0625rem;
@@ -112,37 +128,37 @@
 
 	&.sapMPopoverWithoutBar .sapMPopoverCont,
 	.sapMIBar.sapMHeader-CTX {
-		border-top-right-radius: @sapUiPopoverBorderCornerRadius;
-		border-top-left-radius: @sapUiPopoverBorderCornerRadius;
+		border-top-right-radius: var(--sapPopover_BorderCornerRadius);
+		border-top-left-radius: var(--sapPopover_BorderCornerRadius);
 	}
 
 	&.sapMPopoverWithoutFooter .sapMPopoverCont,
 	.sapMIBar.sapMFooter-CTX {
-		border-bottom-right-radius: @sapUiPopoverBorderCornerRadius;
-		border-bottom-left-radius: @sapUiPopoverBorderCornerRadius;
+		border-bottom-right-radius: var(--sapPopover_BorderCornerRadius);
+		border-bottom-left-radius: var(--sapPopover_BorderCornerRadius);
 	}
 }
 
 /* pointing downward arrow */
-.sapMPopoverArrDown:after {
+.sapMPopoverArrDown::after {
 	margin: -0.5rem 0 0 0.125rem;
 }
 
 /* pointing right arrow */
-.sapMPopoverArrRight:after {
+.sapMPopoverArrRight::after {
 	margin: 0.1875rem 0 0 -0.5rem;
 }
 
 /* pointing upward arrow */
-.sapMPopoverArrUp:after {
+.sapMPopoverArrUp::after {
 	margin: 0.3125rem 0 0 0.1875rem;
 }
 
 /* pointing left arrow */
-.sapMPopoverArrLeft:after {
+.sapMPopoverArrLeft::after {
 	margin: 0.125rem 0 0 0.3125rem;
 }
 
 .sapMPopoverResizeHandle {
-	color: @sapButton_Lite_TextColor;
+	color: var(--sapButton_Lite_TextColor);
 }

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

@@ -45,13 +45,13 @@
 
 .sapMPIBarRemaining {
 	position: absolute;
-    width: ~'calc(100% - 1.25rem)';
-	border: 0.0625rem solid @sapUiProgressBorderColor;
+	width: ~'calc(100% - 1.25rem)';
+	border: 0.0625rem solid var(--sapProgress_BorderColor);
 }
 
 .sapMPIBar {
 	z-index: 1;
-	border: 0.0625rem solid @sapUiProgressValueTextColor;
+	border: 0.0625rem solid var(--sapProgress_Value_TextColor);
 }
 
 .sapMPIValueMin .sapMPIBar {
@@ -59,7 +59,7 @@
 }
 
 .sapMPIBar::before {
-	font-family: 'SAP-icons';
+	font-family: var(--sapContent_IconFontFamily);
 	font-size: 1rem;
 	margin-left: 0.25rem;
 	position: absolute;
@@ -85,116 +85,121 @@
 }
 
 .sapMPIBarPositive {
-	background-color: @sapUiProgressValuePositiveBackground;
-	border-color: @sapUiProgressValuePositiveBorderColor;
+	background-color: var(--sapProgress_Value_PositiveBackground);
+	border-color: var(--sapProgress_Value_PositiveBorderColor);
+
 	.sapMPIText.sapMPITextLeft,
 	.sapMPIText.sapMPITextRight {
-		color: @sapUiProgressPositiveTextColor;
+		color: var(--sapProgress_PositiveTextColor);
 	}
 
 	&::before {
 		content: '\e1c1';
-		color: @sapUiProgressValuePositiveTextColor;
+		color: var(--sapProgress_Value_PositiveTextColor);
 	}
 
 	+ .sapMPIBarRemaining {
-		background-color: @sapUiProgressPositiveBackground;
-		border-color: @sapUiProgressPositiveBorderColor;
+		background-color: var(--sapProgress_PositiveBackground);
+		border-color: var(--sapProgress_PositiveBorderColor);
 
 		&::after,
 		&::before {
-			background-color: @sapUiProgressValuePositiveBackground;
+			background-color: var(--sapProgress_Value_PositiveBackground);
 		}
 	}
 }
 
 .sapMPIBarNegative {
-	background-color: @sapUiProgressValueNegativeBackground;
-	border-color: @sapUiProgressValueNegativeBorderColor;
+	background-color: var(--sapProgress_Value_NegativeBackground);
+	border-color: var(--sapProgress_Value_NegativeBorderColor);
+
 	.sapMPIText.sapMPITextLeft,
 	.sapMPIText.sapMPITextRight {
-		color: @sapUiProgressNegativeTextColor;
+		color: var(--sapProgress_NegativeTextColor);
 	}
 
 	&::before {
 		content: '\e1ec';
-		color: @sapUiProgressValueNegativeTextColor;
+		color: var(--sapProgress_Value_NegativeTextColor);
 	}
 
 	+ .sapMPIBarRemaining {
-		background-color: @sapUiProgressNegativeBackground;
-		border-color: @sapUiProgressNegativeBorderColor;
+		background-color: var(--sapProgress_NegativeBackground);
+		border-color: var(--sapProgress_NegativeBorderColor);
 
 		&::after,
 		&::before {
-			background: @sapUiProgressValueNegativeBackground;
+			background: var(--sapProgress_Value_NegativeBackground);
 		}
 	}
 }
 
 .sapMPIBarCritical {
-	background-color: @sapUiProgressValueCriticalBackground;
-	border-color: @sapUiProgressValueCriticalBorderColor;
+	background-color: var(--sapProgress_Value_CriticalBackground);
+	border-color: var(--sapProgress_Value_CriticalBorderColor);
+
 	.sapMPIText.sapMPITextLeft,
 	.sapMPIText.sapMPITextRight {
-		color: @sapUiProgressCriticalTextColor;
+		color: var(--sapProgress_CriticalTextColor);
 	}
 
 	&::before {
 		content: '\e053';
-		color: @sapUiProgressValueCriticalTextColor;
+		color: var(--sapProgress_Value_CriticalTextColor);
 	}
 
 	+ .sapMPIBarRemaining {
-		background-color: @sapUiProgressCriticalBackground;
-		border-color: @sapUiProgressCriticalBorderColor;
+		background-color: var(--sapProgress_CriticalBackground);
+		border-color: var(--sapProgress_CriticalBorderColor);
 
 		&::after,
 		&::before {
-			background: @sapUiProgressValueCriticalBackground;
+			background: var(--sapProgress_Value_CriticalBackground);
 		}
 	}
 }
 
 .sapMPIBarInformation {
-	background-color: @sapUiProgressValueInformationBackground;
-	border-color: @sapUiProgressValueInformationBorderColor;
+	background-color: var(--sapProgress_Value_InformationBackground);
+	border-color: var(--sapProgress_Value_InformationBorderColor);
+
 	.sapMPIText.sapMPITextLeft,
 	.sapMPIText.sapMPITextRight {
-		color: @sapUiProgressInformationTextColor;
+		color: var(--sapProgress_InformationTextColor);
 	}
 
 	&::before {
 		content: '\e289';
-		color: @sapUiProgressValueInformationTextColor;
+		color: var(--sapProgress_Value_InformationTextColor);
 	}
 
 	+ .sapMPIBarRemaining {
-		background-color: @sapUiProgressInformationBackground;
-		border-color: @sapUiProgressInformationBorderColor;
+		background-color: var(--sapProgress_InformationBackground);
+		border-color: var(--sapProgress_InformationBorderColor);
 
 		&::after,
 		&::before {
-			background: @sapUiProgressValueInformationBackground;
+			background: var(--sapProgress_Value_InformationBackground);
 		}
 	}
 }
 
 .sapMPIDisplayOnly:not(.sapMPIBarDisabled) .sapMPIBarNeutral,
 .sapMPIBarNeutral {
-	background-color: @sapUiProgressValueBackground;
+	background-color: var(--sapProgress_Value_Background);
+
 	.sapMPIText.sapMPITextLeft,
 	.sapMPIText.sapMPITextRight {
-		color: @sapUiProgressTextColor;
+		color: var(--sapProgress_TextColor);
 	}
 
 	+ .sapMPIBarRemaining {
-		background-color: @sapUiProgressBackground;
-		border-color: @sapUiProgressBorderColor;
+		background-color: var(--sapProgress_Background);
+		border-color: var(--sapProgress_BorderColor);
 
 		&::after,
 		&::before {
-			background: @sapUiProgressValueBackground;
+			background: var(--sapProgress_Value_Background);
 		}
 	}
 }
@@ -206,8 +211,8 @@
 	top: 0.125rem;
 	left: 0;
 	margin-bottom: 0.1875rem;
-	font-size: @sapUiProgressFontSize;
-	color: @sapUiProgressTextColor;
+	font-size: var(--sapProgress_FontSize);
+	color: var(--sapProgress_TextColor);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -232,7 +237,6 @@
 .sapUiSizeCondensed .sapUiTableDataCell .sapMPI:not(.sapMPIDisplayOnly) {
 	padding: 0.4375rem 0;
 	margin: 0;
-
 }
 
 .sapUiSizeCondensed .sapUiTableDataCell .sapMPIValueGreaterHalf .sapMPITextLeft {

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

@@ -6,16 +6,15 @@
 @_sap_m_QuickView_HorizontalLayoutMarginBottom: 0.75rem;
 @_sap_m_QuickView_HorizontalLayoutIconFontSize: 1.5rem;
 @_sap_m_QuickView_PagePaddingTop: 2.75rem;
-
 @_sap_m_QuickViewCard_PagePadding: 1rem;
 @_sap_m_QuickView_TitleMarginBottom: 0.25rem;
-@_sap_m_QuickView_TitleFontSize: @sapMFontHeader6Size;
-@_sap_m_QuickView_FormTitleFontSize: @sapMFontHeader6Size;
+@_sap_m_QuickView_TitleFontSize: var(--sapFontHeader6Size);
+@_sap_m_QuickView_FormTitleFontSize: var(--sapFontHeader6Size);
 @_sap_m_QuickView_TitleMaxHeight: 2.125rem;
 
 .sapMQuickViewCard {
 	box-sizing: border-box;
-	background: @sapUiGroupContentBackground;
+	background: var(--sapGroup_ContentBackground);
 	box-shadow: @sapUiShadowLevel0;
 	border-radius: 1rem;
 }