@openui5/themelib_sap_horizon 1.131.1 → 1.132.1

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

@@ -7,14 +7,15 @@
 .sapMOHC.sapMOHBgTranslucent,
 .sapMOH.sapMOHBgSolid,
 .sapMOHC.sapMOHBgSolid {
-	background-color: @sapUiObjectHeaderBackground;
+	background-color: var(--sapObjectHeader_Background);
 }
 
 .sapMOHC.sapMOHBgTranslucent,
 .sapMOHC.sapMOHBgSolid {
-	border-bottom: 0.0625rem solid @sapUiObjectHeaderBorderColor;
+	border-bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
 	box-shadow: none;
 }
+
 .sapMOH.sapMOHBgTransparent,
 .sapMOHC.sapMOHBgTransparent {
 	background: transparent;
@@ -41,13 +42,13 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
 .sapMOHTitle.sapMOHTitleActive:focus > h6 span,
 .sapMOHIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus,
 .sapMOHTitleArrow .sapUiIcon:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	outline-offset: -1px;
 }
 
-/*** styles for responsive object header ***/
+/**styles for responsive object header */
 .sapMOHRTitle h1 {
-	font-size: @sapMFontHeader3Size;
+	font-size: var(--sapFontHeader3Size);
 }
 
 .sapMOHR:not(.sapMOHRNoBorder) {
@@ -56,7 +57,7 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
 
 .sapMOHR.sapMOHRBgSolid,
 .sapMOHR.sapMOHRBgTranslucent {
-	background: @sapUiObjectHeaderBackground;
+	background: var(--sapObjectHeader_Background);
 }
 
 .sapMOHR.sapMOHRBgTransparent {
@@ -64,18 +65,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;
 }
 
@@ -85,22 +87,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/Page.less

@@ -13,32 +13,35 @@
 		position: relative;
 		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 {
@@ -46,7 +49,7 @@
 }
 
 .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) */
@@ -54,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 */
@@ -74,30 +77,36 @@
 	opacity: 1;
 
 	.sapMIBar {
-		border-radius: @sapElement_BorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 	}
 
 	.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;
@@ -106,6 +115,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage.sapF2CollapsedHeader > .sapMPageHeader {
+
 	& + section,
 	& + .sapUiHiddenPlaceholder + section {
 		top: 0;
@@ -117,6 +127,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage.sapF2CollapsedHeader > .sapMPageHeader {
+
 	& + section,
 	& + .sapUiHiddenPlaceholder + section {
 		top: 0;
@@ -133,6 +144,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage {
+
 	> .sapMPageHeader + section,
 	> .sapMPageSubHeader + section,
 	> .sapMPageHeader + .sapUiHiddenPlaceholder + section {
@@ -149,6 +161,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapUiSizeCompact .sapF2CollapsedHeader.sapMPageWithHeader {
+
 	> section {
 		top: 0;
 	}
@@ -158,6 +171,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPageWithHeader {
+
 	&.sapFShellBar-CTX > section {
 		top: 3.25rem;
 	}
@@ -166,24 +180,34 @@ 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;
+
 			.sapMBarLeft {
 				padding-left: inherit;
 			}
+
 			.sapMBarRight {
 				padding-right: inherit;
 			}
 		}
 	}
 }
+
 .sapUi-Std-PaddingS,
 .sapUi-Std-PaddingM,
 .sapUi-Std-PaddingL,
 .sapUi-Std-PaddingXL {
+
 	&.sapMPageFloatingFooter.sapMPageFooter {
 		margin: 0.5rem 0;
 		width: auto;
@@ -207,9 +231,11 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 	}
 
 	.sapMPageWithHeader {
+
 		&.sapFShellBar-CTX > section {
 			top: 3.25rem;
 		}
+
 		&.sapMPageWithSubHeader.sapFShellBar-CTX > section {
 			top: 5.75rem;
 		}

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

@@ -5,11 +5,11 @@
 
 .sapMPanel {
 	min-height: 2.75rem;
-	border-radius: @sapElement_BorderCornerRadius;
+	border-radius: var(--sapElement_BorderCornerRadius);
 
 	.sapMPanelWrappingDiv:not(.sapMPanelWrappingDivExpanded),
 	.sapMPanelWrappingDivTb:not(.sapMPanelWrappingDivTbExpanded) {
-		border-radius: @sapElement_BorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 		overflow: hidden;
 	}
 }
@@ -21,11 +21,11 @@
 }
 
 .sapMPanelBGSolid {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapMPanelBGTranslucent {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapMPanelBGTransparent {
@@ -38,13 +38,13 @@
 .sapMPanelWrappingDiv,
 /* do not want border if expanded and if only header text */
 .sapMPanelWrappingDivTb {
-	border-bottom: 0.0625rem solid @sapUiGroupTitleBorderColor;
-	background: @sapGroup_ContentBackground;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	background: var(--sapGroup_ContentBackground);
 }
 
 .sapMPanelWrappingDiv.sapMPanelWrappingDivExpanded,
 .sapMPanelWrappingDivTb.sapMPanelWrappingDivTbExpanded {
-	border-bottom: 0.0625rem solid @sapUiGroupTitleBorderColor;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 }
 
 .sapMPanelWrappingDivTb .sapMTB.sapMTBStandard {
@@ -52,14 +52,15 @@
 }
 
 .sapMPanelExpandable .sapMPanelWrappingDiv {
+
 	&.sapMPanelWrappingDivExpanded:focus {
-		border-top-left-radius: @sapElement_BorderCornerRadius;
-		border-top-right-radius: @sapElement_BorderCornerRadius;
+		border-top-left-radius: var(--sapElement_BorderCornerRadius);
+		border-top-right-radius: var(--sapElement_BorderCornerRadius);
 		outline-offset: -0.125rem;
 	}
 
 	&:not(.sapMPanelWrappingDivExpanded):focus {
-		border-radius: @sapElement_BorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 		outline-offset: -0.125rem;
 	}
 }
@@ -88,22 +89,22 @@
 }
 
 .sapMPanel.sapMPanelExpandable .sapMPanelWrappingDivTb {
+
 	& .sapMPanelHeaderTB {
 		border-top-left-radius: 0;
 		margin-left: 2.75rem;
 	}
 
 	&:not(.sapMPanelWrappingDivTbExpanded) .sapMPanelHeaderTB {
-		border-bottom-right-radius: @sapElement_BorderCornerRadius;
-		border-top-right-radius: @sapElement_BorderCornerRadius;
+		border-bottom-right-radius: var(--sapElement_BorderCornerRadius);
+		border-top-right-radius: var(--sapElement_BorderCornerRadius);
 	}
 
 	&.sapMPanelWrappingDivTbExpanded .sapMPanelHeaderTB {
-		border-top-right-radius: @sapElement_BorderCornerRadius;
+		border-top-right-radius: var(--sapElement_BorderCornerRadius);
 	}
-
 }
 
 .sapMPanelWrappingDiv .sapUiIcon {
-	color: @sapButton_Lite_TextColor;
+	color: var(--sapButton_Lite_TextColor);
 }

package/src/sap/m/themes/sap_horizon/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);
 }
 
 .sapMPlanCalRowHead .sapMSLI,
@@ -75,23 +75,30 @@ html.sap-desktop .sapMPlanCal .sapUiCalItemOtherMonth:not(.sapUiCalItemSel):hove
 
 .sapMPlanCal {
 	border-radius: 0.5rem;
+
 	.sapUiCalDatesRow {
-		.sapUiCalItemSel:focus > .sapUiCalItemText:after {
+
+		.sapUiCalItemSel:focus > .sapUiCalItemText::after {
 			left: 0.015rem;
 			right: 0.015rem;
 		}
 	}
+
 	.sapUiCalTimesRow {
-		.sapUiCalItemSel:focus > .sapUiCalItemText:after {
+
+		.sapUiCalItemSel:focus > .sapUiCalItemText::after {
 			left: 0.0rem;
 			right: 0.0rem;
 		}
 	}
+
 	.sapUiCalMonthsRow {
+
 		.sapUiCalItemSel:not(.sapUiCalItemSelBetween) > .sapUiCalItemText {
 			position: initial;
 		}
-		.sapUiCalItemSel:focus > .sapUiCalItemText:after {
+
+		.sapUiCalItemSel:focus > .sapUiCalItemText::after {
 			left: 0;
 		}
 	}
@@ -102,19 +109,23 @@ html.sap-desktop .sapMPlanCal .sapUiCalItemOtherMonth:not(.sapUiCalItemSel):hove
 }
 
 .sapMPlanCal .sapMListTbl {
+
 	.sapMSLIImgIcon.sapUiIcon:not(.sapMLIBImgNav):not(.sapMBtnIcon) {
-		border-radius: @sapGroup_BorderCornerRadius;
-		background-color: @sapAccentBackgroundColor5;
-		color: @sapAccentColor5;
-		font-size: @sapMFontHeader4Size;
+		border-radius: var(--sapGroup_BorderCornerRadius);
+		background-color: var(--sapAccentBackgroundColor5);
+		color: var(--sapAccentColor5);
+		font-size: var(--sapFontHeader4Size);
 	}
+
 	.sapUiIcon {
 		line-height: 1rem;
 	}
+
 	.sapUiCalendarAppArrowIconLeft.sapUiIcon,
 	.sapUiCalendarAppArrowIconRight.sapUiIcon {
 		line-height: 1;
 	}
+
 	.sapMFlexItem .sapMText {
 		line-height: inherit;
 	}

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

@@ -3,33 +3,38 @@
 /* Horizon 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,31 +59,43 @@
 	}
 }
 
-.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;
 		}
 	}
 }
 
-.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;
@@ -104,7 +121,7 @@
 }
 
 .sapMPopover {
-	border-radius: @sapUiPopoverBorderCornerRadius;
+	border-radius: var(--sapPopover_BorderCornerRadius);
 
 	.sapMPopoverCont {
 		padding: 0.0625rem;
@@ -112,17 +129,17 @@
 
 	&.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);
 	}
 }
 
 .sapMPopoverResizeHandle {
-	color: @sapButton_Lite_TextColor;
+	color: var(--sapButton_Lite_TextColor);
 }