@openui5/themelib_sap_horizon 1.131.1 → 1.132.0

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

@@ -7,20 +7,20 @@
 .sapMOHC.sapMOHBgTranslucent,
 .sapMOH.sapMOHBgSolid,
 .sapMOHC.sapMOHBgSolid {
-	background-color: @sapUiObjectHeaderBackground;
-	border-bottom: 0.125rem solid @sapUiObjectHeaderBorderColor;
+	background-color: var(--sapObjectHeader_Background);
+	border-bottom: 0.125rem solid var(--sapObjectHeader_BorderColor);
 }
 
 .sapMOHC.sapMOHBgTranslucent,
 .sapMOHC.sapMOHBgSolid {
-	border-bottom: 0.125rem solid @sapUiObjectHeaderBorderColor;
+	border-bottom: 0.125rem solid var(--sapObjectHeader_BorderColor);
 	box-shadow: none;
 }
 
 .sapMOH.sapMOHBgTransparent,
 .sapMOHC.sapMOHBgTransparent {
 	background: transparent;
-	border-bottom: 0.125rem solid @sapUiObjectHeaderBorderColor;
+	border-bottom: 0.125rem solid var(--sapObjectHeader_BorderColor);
 }
 
 a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
@@ -43,18 +43,18 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
 .sapMOHTitle.sapMOHTitleActive:focus > h6 span,
 .sapMOHIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus,
 .sapMOHTitleArrow .sapUiIcon:focus {
-	outline: 0.125rem dotted @sapUiContentFocusColor;
+	outline: 0.125rem dotted var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
 }
 
-/*** styles for responsive object header ***/
+/* styles for responsive object header */
 .sapMOHR:not(.sapMOHRNoBorder) {
 	box-shadow: @sapUiShadowHeader;
 }
 
 .sapMOHR.sapMOHRBgSolid,
 .sapMOHR.sapMOHRBgTranslucent {
-	background: @sapUiObjectHeaderBackground;
+	background: var(--sapObjectHeader_Background);
 }
 
 .sapMOHR.sapMOHRBgTransparent {
@@ -62,18 +62,19 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
 }
 
 .sapMOHRTitleArrow .sapUiIcon:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	outline-offset: -1px;
 }
 
 .sapMOHRIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus {
-	&:before {
-		outline: 1px dotted @sapUiContentFocusColor;
+
+	&::before {
+		outline: 1px dotted var(--sapContent_FocusColor);
 	}
 }
 
 .sapMOHRTitleActive .sapMOHRTitleText:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	outline-offset: -1px;
 }
 
@@ -87,22 +88,23 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
 .sapMOHTitle h3 .sapMText,
 .sapMOHTitle h2 .sapMText,
 .sapMOHTitle h1 .sapMText {
-	font-family: @sapUiObjectHeaderTitleFontFamily;
-	font-size: @sapUiObjectHeaderTitleFontSize;
-	color: @sapUiObjectHeaderTitleTextColor;
+	font-family: var(--sapObjectHeader_Title_FontFamily);
+	font-size: var(--sapObjectHeader_Title_FontSize);
+	color: var(--sapObjectHeader_Title_TextColor);
 }
 
 html.sap-phone {
+
 	.sapMOHTitle h6 .sapMText,
 	.sapMOHTitle h5 .sapMText,
 	.sapMOHTitle h4 .sapMText,
 	.sapMOHTitle h3 .sapMText,
 	.sapMOHTitle h2 .sapMText,
 	.sapMOHTitle h1 .sapMText {
-		font-size: @sapUiObjectHeaderTitleSnappedFontSize;
+		font-size: var(--sapObjectHeader_Title_SnappedFontSize);
 	}
 }
 
 .sapMOHIntro .sapMText {
-	color: @sapUiObjectHeaderSubtitleTextColor;
+	color: var(--sapObjectHeader_Subtitle_TextColor);
 }

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

@@ -14,41 +14,42 @@
 		z-index: 2;
 	}
 
-	&:after {
-		content: "";
+	&::after {
+		content: '';
 		position: absolute;
 		height: 1px;
 		bottom: 0;
 		width: 100%;
-		box-shadow: inset 0 -0.0625rem @sapUiPageHeaderBorderColor, 0 0 0.25rem 0 fade(@sapUiContentShadowColor, 15);
+		box-shadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor), 0 0 0.25rem 0 fade(@sapUiContentShadowColor, 15);
 		z-index: 1;
 	}
 }
 
 .sapMPageWithHeader.sapMPageWithSubHeader {
+
 	.sapMPageHeader {
 		box-shadow: none;
 
-		&:after {
+		&::after {
 			box-shadow: none;
 		}
 	}
 }
 
 .sapMPageBgStandard {
-	background-color: @sapUiBaseBG;
+	background-color: var(--sapBackgroundColor);
 }
 
 .sapMPageBgSolid {
-	background-color: @sapUiBaseBG;
+	background-color: var(--sapBackgroundColor);
 }
 
 .sapMPageBgTransperant {
-	background-color: @sapUiBaseBG;
+	background-color: var(--sapBackgroundColor);
 }
 
 .sapMPageBgList {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 /* The following overrides for sap_belize/sap_belize_plus are only intended for apps inside FLP (Ushell) */
@@ -56,7 +57,7 @@
 
 	/* In sap_belize_plus backgroundDesign=Standard maps to Solid */
 	.sapMPageBgStandard {
-		background-color: @sapUiBaseBG;
+		background-color: var(--sapBackgroundColor);
 	}
 
 	/* For the pages in the master part of sap.m.SplitApp backgroundDesign=Standard maps to Transparent */
@@ -76,26 +77,32 @@
 	opacity: 1;
 
 	.sapMIBar-CTX.sapMFooter-CTX {
-		box-shadow: @sapUiContentShadow1;
+		box-shadow: var(--sapContent_Shadow1);
 		border: none;
 	}
 }
 
 html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
+
 	@keyframes bounceShow {
+
 		0% {
 			transform: translateY(100%);
 			opacity: 0;
 		}
+
 		100% {
 			opacity: 1;
 		}
 	}
+
 	@keyframes bounceHide {
+
 		0% {
 			transform: translateY(-5%);
 			opacity: 1;
 		}
+
 		100% {
 			transform: translateY(100%);
 			opacity: 0;
@@ -104,6 +111,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage.sapF2CollapsedHeader > .sapMPageHeader {
+
 	& + section,
 	& + .sapUiHiddenPlaceholder + section {
 		top: 0;
@@ -115,6 +123,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage.sapF2CollapsedHeader > .sapMPageHeader {
+
 	& + section,
 	& + .sapUiHiddenPlaceholder + section {
 		top: 0;
@@ -131,6 +140,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage {
+
 	> .sapMPageHeader + section,
 	> .sapMPageSubHeader + section,
 	> .sapMPageHeader + .sapUiHiddenPlaceholder + section {
@@ -147,6 +157,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapUiSizeCompact .sapF2CollapsedHeader.sapMPageWithHeader {
+
 	> section {
 		top: 0;
 	}
@@ -157,6 +168,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPageWithHeader {
+
 	&.sapFShellBar-CTX > section {
 		top: 3.25rem;
 	}
@@ -166,9 +178,15 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 	}
 }
 
-.sapMPageHeader, .sapMPageSubHeader, .sapMPageFooter {
-	.sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
-	.sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
+.sapMPageHeader,
+.sapMPageSubHeader,
+.sapMPageFooter {
+
+	.sapUi-Std-PaddingS,
+	.sapUi-Std-PaddingM,
+	.sapUi-Std-PaddingL,
+	.sapUi-Std-PaddingXL {
+
 		&.sapMBar {
 			box-sizing: border-box;
 
@@ -182,10 +200,12 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 		}
 	}
 }
+
 .sapUi-Std-PaddingS,
 .sapUi-Std-PaddingM,
 .sapUi-Std-PaddingL,
 .sapUi-Std-PaddingXL {
+
 	&.sapMPageFloatingFooter.sapMPageFooter {
 		margin: 0.5rem 0;
 		width: auto;
@@ -209,6 +229,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 	}
 
 	.sapMPageWithHeader {
+
 		&.sapFShellBar-CTX > section {
 			top: 3.25rem;
 		}

package/src/sap/m/themes/sap_horizon_hcw/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_hcw/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_hcw/Popover.less

@@ -3,33 +3,38 @@
 /* Horizon High Contrast White 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 +59,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 +94,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 +121,7 @@
 }
 
 .sapMPopover {
-	border-radius: @sapUiPopoverBorderCornerRadius;
+	border-radius: var(--sapPopover_BorderCornerRadius);
 
 	.sapMPopoverCont {
 		padding: 0.0625rem;
@@ -112,37 +129,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);
 }