@openui5/themelib_sap_horizon 1.132.0 → 1.133.0

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

@@ -8,19 +8,19 @@
 @_sap_m_Slider_Progress_Border: 0.0625rem;
 
 .sapMSliderInner {
-	background: @sapUiSliderBackground;
-	border: @_sap_m_Slider_Progress_Border solid @sapUiSliderBorderColor;
+	background: var(--sapSlider_Background);
+	border: @_sap_m_Slider_Progress_Border solid var(--sapSlider_BorderColor);
 	box-sizing: border-box;
 }
 
 .sapMSliderProgress {
-	background: @sapUiSliderSelectedBackground;
-	border: @_sap_m_Slider_Progress_Border solid @sapUiSliderSelectedBorderColor;
+	background: var(--sapSlider_Selected_Background);
+	border: @_sap_m_Slider_Progress_Border solid var(--sapSlider_Selected_BorderColor);
 	box-sizing: content-box;
 	margin-top: -1px;
 	margin-left: -1px;
 
-	&:before {
+	&::before {
 		content: none;
 		transform: none;
 	}
@@ -28,24 +28,24 @@
 
 .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderProgress:hover ~ .sapMSliderHandle,
 .sapMSliderHandle:hover {
-	background: @sapUiSliderHoverHandleBackground;
-	border-color: @sapUiSliderHoverHandleBorderColor;
+	background: var(--sapSlider_Hover_HandleBackground);
+	border-color: var(--sapSlider_Hover_HandleBorderColor);
 }
 
 /* slider handle */
 .sapMSliderInner .sapMSliderHandle {
-	background: @sapUiSliderHandleBackground;
-	border: 1px solid @sapUiSliderHandleBorderColor;
+	background: var(--sapSlider_HandleBackground);
+	border: 1px solid var(--sapSlider_HandleBorderColor);
 	border-radius: 0.5rem;
 	width: 2rem;
 	height: 1.5rem;
 	margin-left: -1rem;
 	top: -0.625rem;
 
-	&:focus:before {
+	&:focus::before {
 		content: '';
 		position: absolute;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 		border-radius: 0.75rem;
 		pointer-events: none;
 		top: -0.3125rem;
@@ -55,9 +55,9 @@
 	}
 }
 
-.sapMSliderInner .sapMSliderHandle:not(:focus):not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
-	font-family: SAP-icons;
-	content: "\e29c";
+.sapMSliderInner .sapMSliderHandle:not(:focus):not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus)::after {
+	font-family: var(--sapContent_IconFontFamily);
+	content: '\e29c';
 	position: absolute;
 	top: 0.25rem;
 	right: 0.5rem;
@@ -65,19 +65,20 @@
 	vertical-align: middle;
 	font-size: 0.875rem;
 	line-height: 0.875rem;
-	color: @sapContent_Selected_ForegroundColor;
+	color: var(--sapContent_Selected_ForegroundColor);
 }
 
 .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle {
+
 	&:hover {
-		background: @sapUiSliderHoverHandleBackground;
-		border-color: @sapUiSliderHoverHandleBorderColor;
+		background: var(--sapSlider_Hover_HandleBackground);
+		border-color: var(--sapSlider_Hover_HandleBorderColor);
 	}
 }
 
 .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
-	background: @sapUiSliderActiveRangeHandleBackground;
-	border: @sapUiContentFocusWidth solid @sapUiContentFocusColor;
+	background: var(--sapSlider_Active_RangeHandleBackground);
+	border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
 	outline: none;
 	top: -0.625rem;
 }
@@ -87,8 +88,8 @@
 	height: 1rem;
 	width: 2rem;
 	left: -1rem;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiContentLabelColor;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapContent_LabelColor);
 }
 
 .sapMSliderTickmarks {
@@ -99,7 +100,7 @@
 }
 
 .sapMSliderTick {
-	border-color: @sapUiContentMeasureIndicatorColor;
+	border-color: var(--sapContent_MeasureIndicatorColor);
 	margin: 0;
 	height: .5rem;
 }
@@ -109,8 +110,8 @@
 
 	.sapMSliderRangeLabel {
 		width: 2rem;
-		font-size: @sapMFontSmallSize;
-		color: @sapUiContentLabelColor;
+		font-size: var(--sapFontSmallSize);
+		color: var(--sapContent_LabelColor);
 	}
 }
 
@@ -120,11 +121,11 @@
 }
 
 .sapMSliderInner::before {
-	content: "";
+	content: '';
 	position: absolute;
 	box-sizing: border-box;
-	border: 0.0625rem solid @sapUiContentSelectedMeasureIndicatorColor;
-	background-color: @sapUiSliderSelectedBackground;
+	border: 0.0625rem solid var(--sapContent_Selected_MeasureIndicatorColor);
+	background-color: var(--sapSlider_Selected_Background);
 	border-radius: 50%;
 	width: 0.5rem;
 	height: 0.5rem;
@@ -133,11 +134,11 @@
 }
 
 .sapMSlider::after {
-	content: "";
+	content: '';
 	position: absolute;
 	box-sizing: border-box;
-	border: 0.0625rem solid @sapUiContentMeasureIndicatorColor;
-	background-color: @sapUiContentMeasureIndicatorColor;
+	border: 0.0625rem solid var(--sapContent_MeasureIndicatorColor);
+	background-color: var(--sapContent_MeasureIndicatorColor);
 	border-radius: 50%;
 	width: 0.5rem;
 	height: 0.5rem;
@@ -148,8 +149,8 @@
 /* pressed */
 .sapMSliderPressed:not(.sapMSliderInnerDisabled) > .sapMSliderHandle,
 .sapMSlider .sapMSliderInner > .sapMSliderHandle.sapMSliderHandlePressed {
-	background-color: @sapUiButtonActiveBackground;
-	border-color: @sapUiButtonActiveBorderColor;
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
 }
 
 .sapUiSizeCompact {
@@ -186,12 +187,12 @@
 		padding-top: 0.375rem;
 	}
 
-	.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover>.sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+	.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled):hover > .sapMSliderHandle):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus)::after {
 		top: 0.125rem;
 		right: 0.25rem;
 	}
 }
 
-.sapMSliderTick[data-ui5-active-tickmark="true"] {
-	border-left: 0.0625rem solid @sapSlider_Selected_BorderColor;
+.sapMSliderTick[data-ui5-active-tickmark='true'] {
+	border-left: 0.0625rem solid var(--sapSlider_Selected_BorderColor);
 }

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

@@ -3,40 +3,38 @@
 /* Horizon High Contrast Black theme    */
 /* ==================================== */
 
-/* ------------------------------ */
 /* Slider Tooltip styles          */
-/* ------------------------------ */
 
 .sapMSliderTooltip {
-	background: @sapUiFieldBackground;
-	border-radius: @sapUiElementBorderCornerRadius;
-	border: 1px solid @sapUiFieldBorderColor;
+	background: var(--sapField_Background);
+	border-radius: var(--sapElement_BorderCornerRadius);
+	border: 1px solid var(--sapField_BorderColor);
 	box-shadow: none;
 	height: 1.375rem;
 	min-width: 2rem;
 	padding: 0.25rem;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
 
 .sapMSliderTooltipInput {
-	background-color: @sapUiFieldBackground;
+	background-color: var(--sapField_Background);
 	font-size: @sapMFontMediumSize;
-	color: @sapUiFieldTextColor;
+	color: var(--sapField_TextColor);
 }
 
 .sapMSliderTooltipErrorState {
-	background: @sapUiFieldInvalidBackground;
-	border-color: @sapUiFieldInvalidColor
+	background: var(--sapField_InvalidBackground);
+	border-color: var(--sapField_InvalidColor);
 }
 
 .sapMSliderTooltipErrorState .sapMSliderTooltipInput {
-	background: @sapUiFieldInvalidBackground;
+	background: var(--sapField_InvalidBackground);
 }
 
 .sapMSliderTooltip.sapMSliderTooltipNonEditableWrapper {
 	border-radius: 0.25rem;
 	height: 0.875rem;
 	padding: 0.25rem;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiContentLabelColor;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapContent_LabelColor);
 }

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

@@ -9,7 +9,7 @@
 	left: 0.125rem;
 	right: 0.125rem;
 	border: 0.125rem dotted @sapUiContentFocusColor;
-	border-radius: 0.35rem
+	border-radius: 0.375rem
 }
 
 .sapUiSizeCompact {

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

@@ -4,41 +4,44 @@
 /* ===================================== */
 
 /* 4px border for the branding bar */
-.sapMSplitContainerMaster:before {
-	content: "";
+.sapMSplitContainerMaster::before {
+	content: '';
 	position: absolute;
 	width: 0px;
 	right: 0px;
 	height: 0.25rem;
 	top: 0;
-	border-right: 1px solid @sapUiGroupContentBorderColor;
+	border-right: 1px solid var(--sapGroup_ContentBorderColor);
 	z-index: 6;
 }
 
 /* reset the separator and branding bar when master is shown in an overlay */
 .sapMSplitContainerShowHide.sapMSplitContainerPortrait,
 .sapMSplitContainerHideMode {
-	> .sapMSplitContainerMaster:after,
-	> .sapMSplitcontainerMaster:before {
+
+	> .sapMSplitContainerMaster::after,
+	> .sapMSplitcontainerMaster::before {
 		display: none;
 	}
 }
 
 .sapUiUfdShell,
 .sapMPopoverCont {
+
 	.sapMSplitContainerMaster:before {
 		display: none; /* do not show in a popover */
 	}
 }
 
 @media (min-height: @_sap_m_SplitContainer_MinHeightForHeader) {
+
 	/* Shell draws its own branding bar */
-	.sap-desktop .sapMShell .sapMSplitContainerMaster:before{
+	.sap-desktop .sapMShell .sapMSplitContainerMaster::before {
 		display: none;
 	}
 }
 
 /* HCB Additional Styles */
 .sapMSplitContainerDetail {
-	background-color: @sapUiBaseBG;
+	background-color: var(--sapBackgroundColor);
 }

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

@@ -7,8 +7,8 @@
 	padding-top: 0.75rem;
 }
 
-// This change and the usage of sapList_Background for the text color is just temporary.
-// Refer to DINC0336686 for more information
+/* This change and the usage of sapList_Background for the text color is just temporary. */
+/* Refer to DINC0336686 for more information */
 .sapMSLIInfo.sapMSLIInfoStateInverted {
 	color: var(--sapList_Background);
 }

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

@@ -18,7 +18,7 @@
 					.sapFDynamicPageTitleMainHeadingInner {
 						margin-top: 0.6875rem;
 
-						.sapMTitle:not(.sapUICompVarMngmtTitle) {
+						.sapMTitle:not(.sapUICompVarMngmtTitle):not(.sapMVarMngmtTitle) {
 							font-size: @sapUiObjectHeaderTitleSnappedFontSize;
 							font-family: @sapUiObjectHeaderTitleFontFamily;
 						}

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

@@ -57,4 +57,8 @@ html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
 
 .sapMListTblRow.sapMLIBSelected .sapMLnk:not(.sapMLnkDsbl) {
 	text-shadow: var(--sapContent_TextShadow);
+}
+
+.sapMLnk.sapMLnkLargeReactiveArea {
+	line-height: 1.5rem;
 }

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

@@ -5,6 +5,6 @@
 
 html.sap-phone .sapMRespMenuDialog .sapMPage {
   .sapMBar-CTX.sapMHeader-CTX,.sapMBarPH {
-	.sapMBarShadow(@sapUiPageHeaderBorderColor);
+    box-shadow: var(--sapContent_HeaderShadow);
   }
 }

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

@@ -5,6 +5,15 @@
 
 @_sap_m_ObjectAttribute_ListTextShadowColor: none;
 
+.sapMObjectAttributeActive.sapMLnkLargeReactiveArea {
+	.sapMObjectAttributeTitle,
+	.sapMObjectAttributeColon,
+	.sapMObjectAttributeText,
+	.sapMObjectAttributeText > .sapMLnk {
+		line-height: 1.5rem;
+	}
+}
+
 .sapMListTbl .sapMObjectAttributeActive .sapMText,
 .sapMObjectAttributeActive .sapMText,
 .sapMObjectAttributeActive .sapMObjectAttributeText {

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

@@ -7,4 +7,8 @@
 
 .sapMObjectMarker .sapMLnk {
 	text-shadow: @_sap_m_ObjectMarker_LinkShadowColor;
+}
+
+.sapMObjectMarker.sapMLnkLargeReactiveArea > .sapUiIcon {
+	line-height: 1.5rem;
 }

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

@@ -3,6 +3,12 @@
 /* Horizon High Contrast White theme   */
 /* =================================== */
 
+.sapMObjectNumber.sapMLnkLargeReactiveArea:not(.sapMObjectNumberLarge):not(.sapMObjectNumberInverted) {
+	.sapMObjectNumberInner {
+		line-height: 1.5rem;
+	}
+}
+
 @sapMONInformativeElement: var(--sapInformationBackground);
 
 .sapMObjectNumberInverted {

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

@@ -91,6 +91,17 @@
 	line-height: 0.875rem;
 }
 
+.sapMObjStatus.sapMLnkLargeReactiveArea:not(.sapMObjectStatusLarge):not(.sapMObjStatusInverted) {
+	.sapMObjStatusTitle,
+	.sapMObjStatusIcon .sapUiIcon,
+	.sapMObjStatusText {
+		line-height: 1.5rem;
+	}
+	.sapMObjStatusIcon {
+		height: 1.5rem;
+	}
+}
+
 .sapMObjectStatusLarge:not(.sapMObjStatusInverted) {
 
 	.sapMObjStatusTitle,

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

@@ -25,12 +25,12 @@
 .sapMPanelWrappingDiv,
 /* do not want border if expanded and if only header text */
 .sapMPanelWrappingDivTb {
-	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
 }
 
 .sapMPanelWrappingDiv.sapMPanelWrappingDivExpanded,
 .sapMPanelWrappingDivTb.sapMPanelWrappingDivTbExpanded {
-	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
 }
 
 .sapMPanelWrappingDivTb .sapMTB.sapMTBStandard {
@@ -38,7 +38,7 @@
 }
 
 .sapMPanelContent:not(.sapMPanelBGTransparent) {
-	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	border-bottom: @sapGroup_TitleBorderWidth solid @sapUiGroupTitleBorderColor;
 }
 
 .sapMPanelContent {

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

@@ -3,6 +3,8 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
+@_sap_m_Popover_ThickShadowSize: 0.125rem;
+
 .sapMPopoverArr::after {
 	background: var(--sapGroup_ContentBackground);
 	box-shadow: var(--sapContent_Shadow2);

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

@@ -3,20 +3,18 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
-/* ------------------------------ */
 /* field                          */
-/* ------------------------------ */
 
 .sapMSlt.sapMSltIconOnly {
 	border-radius: 0.365rem;
 }
 
 .sapMSlt {
-	height: @sapUiElementHeight;
+	height: var(--sapElement_Height);
 }
 
 .sapUiSizeCompact .sapMSlt {
-	height: @sapUiElementCompactHeight;
+	height: var(--sapElement_Compact_Height);
 }
 
 /* arrow styles */
@@ -26,13 +24,13 @@
 }
 
 .sapMSltArrow {
-    width: 2.25rem;
-    height: 2.25rem;
+	width: 2.25rem;
+	height: 2.25rem;
 }
 
 .sapUiSizeCompact .sapMSltArrow {
-    width: 2rem;
-    height: 1.625rem;
+	width: 2rem;
+	height: 1.625rem;
 }
 
 
@@ -43,25 +41,25 @@
 }
 
 .sapMSlt.sapMSltDefault.sapMSltFocused:not(.sapMSltIconOnly):not(.sapMSltPressed) {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentContrastFocusColor;
-	outline-offset:  calc(-2.5 * @sapUiContentFocusWidth);
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
+	outline-offset: ~"calc(-2.5 * var(--sapContent_FocusWidth))";
 }
 
 html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltInformation),
 .sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltInformation):hover {
-	border-color: @sapUiFieldHoverBorderColor;
+	border-color: var(--sapField_Hover_BorderColor);
 }
 
 /* FIX: In FF bottom outline-offset is not working as expected when Select is in sap.m.Bar and is left-aligned */
 
-html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
+html[data-sap-ui-browser^='ff'] .sapMBar .sapMSlt.sapMSltFocused {
 	line-height: 0;
 }
 
 /* icon only hover and focus */
 
 .sapMSlt.sapMSltIconOnly.sapMSltHoverable:hover {
-	background: @sapUiButtonLiteHoverBackground;
+	background: var(--sapButton_Lite_Hover_Background);
 
 	&.sapMSltFocused:not(.sapMSltPressed) {
 		border-color: transparent;
@@ -92,11 +90,11 @@ html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
 }
 
 .sapMSltInformation {
-	border-color: @sapUiFieldWarningColor;
+	border-color: var(--sapField_WarningColor);
 }
 
 .sapMSltLabelState, .sapMSltArrowState {
-    line-height: initial;
+	line-height: initial;
 }
 
 .sapUiSizeCompact .sapMSltLabelState,
@@ -110,26 +108,26 @@ html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
 	opacity: 0.5;
 }
 
-/* ------------------------------ */
 /* picker                         */
-/* ------------------------------ */
+
 @_sap_m_SltPicker_SubHeader_BoxShadow_Bottom: 0.125rem;
+
 div.sapMSltPicker {
 	border-radius: 0.125rem;
 
 	.sapMBar {
-		box-shadow: inset 0 -@_sap_m_SltPicker_SubHeader_BoxShadow_Bottom @sapUiPageHeaderBorderColor;
+		box-shadow: inset 0 -@_sap_m_SltPicker_SubHeader_BoxShadow_Bottom var(--sapPageHeader_BorderColor);
 	}
 
 	.sapMSltPickerValueState {
 		padding-left: 1.5rem;
-		box-shadow:inset 0 -0.125rem @sapUiPageHeaderBorderColor;
+		box-shadow:inset 0 -0.125rem var(--sapPageHeader_BorderColor);
 		line-height: 1rem;
 		padding-right: 0.5rem;
 		padding-left: 2rem;
 
 		&::before {
-			font-family: "SAP-icons";
+			font-family: var(--sapContent_IconFontFamily);
 			vertical-align: middle;
 			font-size: 1rem;
 			position: absolute;
@@ -156,23 +154,21 @@ div.sapMSltPicker {
 }
 
 .sapMSlt > .sapMSltArrow {
-	border-left: 0.0625rem solid @sapUiListSelectionBorderColor;
+	border-left: 0.0625rem solid var(--sapList_SelectionBorderColor);
 }
 
 /* pressed */
 
 .sapMSltPressed > .sapMSltArrow:hover {
-	background: @sapUiButtonLiteHoverBackground;
+	background: var(--sapButton_Lite_Hover_Background);
 }
 
-/* ====================================================== */
 /* Select inside a Bar: all contexts                      */
-/* ====================================================== */
 
 /* focus: Select IconOnly in all contexts get dotted outline */
 
 html.sap-desktop .sapMSltIconOnly.sapMSltFocused:not(.sapMSltExpanded) {
-	outline: 0.125rem dotted @sapUiContentFocusColor;
+	outline: 0.125rem dotted var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
 	border-color: transparent;
 }
@@ -183,15 +179,15 @@ html.sap-desktop .sapMHeader-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not
 html.sap-desktop .sapMSubHeader-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt),
 html.sap-desktop .sapMFooter-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt),
 html.sap-desktop .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt) {
-	color: @sapUiContentIconColor;
-	background-color: @sapUiButtonLiteHoverBackground;
+	color: var(--sapContent_IconColor);
+	background-color: var(--sapButton_Lite_Hover_Background);
 }
 
 .sapMSltHoverable:not(.sapMSltError):not(.sapMSltPressed):hover > .sapMSltArrow,
 .sapMSltPressed.sapMSltError > .sapMSltArrow {
-	background-color: @sapUiButtonLiteHoverBackground;
+	background-color: var(--sapButton_Lite_Hover_Background);
 }
 
 .sapMSltPressed:not(.sapMSltError) > .sapMSltArrow {
-	background: @sapUiListSelectionBackgroundColor;
+	background: var(--sapList_SelectionBackgroundColor);
 }