@openui5/themelib_sap_horizon 1.131.1 → 1.132.0

package/src/sap/m/themes/sap_horizon_hcw/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_hcw/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;
 }

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

@@ -11,7 +11,7 @@
 	}
 
 	&.sapMRbRo .sapMRbBOut {
-		stroke-width: @sapUiElementBorderWidth
+		stroke-width: var(--sapElement_BorderWidth);
 	}
 }
 
@@ -34,15 +34,15 @@
 	margin: 0.6875rem;
 }
 
-.sapMRbHasLabel.sapMRb:focus:before {
-	bottom: .5rem;
+.sapMRbHasLabel.sapMRb:focus::before {
+	bottom: 0.5rem;
 	top: 0.5rem;
 	left: 0.5rem;
 	right: 0;
 }
 
 /* Right to left */
-.sapMRbG[dir=rtl] .sapMRbHasLabel.sapMRb:focus:before  {
+.sapMRbG[dir=rtl] .sapMRbHasLabel.sapMRb:focus::before {
 	left: 0;
 	right: 0.5rem;
 }
@@ -52,7 +52,8 @@
 }
 
 /* Align RadioButton in Form with other controls */
-.sapUiForm.sapUiFormEdit-CTX{
+.sapUiForm.sapUiFormEdit-CTX {
+
 	.sapMRb > .sapMRbB {
 		width: 2.1875rem;
 	}
@@ -71,7 +72,7 @@
 		line-height: 2rem;
 	}
 
-	.sapMRb:focus:before {
+	.sapMRb:focus::before {
 		bottom: 0.325rem;
 		top: 0.325rem;
 		left: 0.325rem;
@@ -80,18 +81,19 @@
 }
 
 .sapMRb:not(.sapMRbErr):not(.sapMRbWarn):not(.sapMRbInfo):not(.sapMRbSucc) .sapMRbB.sapMRbHoverable:hover {
+
 	.sapMRbSvg .sapMRbBOut {
-		fill: @sapUiSelected; // contrast themes specific
+		fill: var(--sapSelectedColor); /* contrast themes specific */
 	}
 }
 
 .sapMRb:not(.sapMRbErr):not(.sapMRbWarn):not(.sapMRbInfo):not(.sapMRbSucc) .sapMRbHoverable:hover .sapMRbBOut {
-	stroke: @sapUiFieldHoverBorderColor;
-	fill: @sapUiSelected; // contrast themes specific
+	stroke: var(--sapField_Hover_BorderColor);
+	fill: var(--sapSelectedColor); /* contrast themes specific */
 }
 
-.sapMRb:focus:before {
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+.sapMRb:focus::before {
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	bottom: 0.5rem;
 	top: 0.5rem;
 	left: 0.5rem;
@@ -99,19 +101,19 @@
 }
 
 .sapMLIBActive .sapMRbB .sapMRbBOut {
-	border: 1px solid @sapUiListActiveTextColor;
+	border: 1px solid var(--sapList_Active_TextColor);
 }
 
 .sapMLIBActive .sapMRbSel .sapMRbBOut {
-	background-color: @sapUiListActiveBackground;
+	background-color: var(--sapList_Active_Background);
 }
 
 .sapMRbDis {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .sapMRbSel .sapMRbBInn {
-	fill: @sapUiContentIconColor; // contrast themes specific
+	fill: var(--sapContent_IconColor); /* contrast themes specific */
 }
 
 .sapMRbB .sapMRbBInn {
@@ -119,83 +121,95 @@
 }
 
 /* Value states */
-.sapMRbErr, .sapMRbWarn, .sapMRbInfo{
+.sapMRbErr,
+.sapMRbWarn,
+.sapMRbInfo {
+
 	.sapMRbB .sapMRbBOut {
-		stroke-dasharray: 4; // contrast themes specific
+		stroke-dasharray: 4; /* contrast themes specific */
 	}
 }
 
 .sapMRbErr.sapMRbSel,
 .sapMRbErr.sapMRbSel.sapMRbRo {
+
 	.sapMRbBInn {
-		fill: @sapUiFieldInvalidColor;
+		fill: var(--sapField_InvalidColor);
 		stroke: none;
 	}
 }
 
 .sapMRbErr,
 .sapMRbErr.sapMRbBTouched {
+
 	.sapMRbB .sapMRbBOut {
-		stroke: @sapUiFieldInvalidColor;
-		fill: @sapUiFieldInvalidBackground;
+		stroke: var(--sapField_InvalidColor);
+		fill: var(--sapField_InvalidBackground);
 	}
 }
 
 .sapMRbWarn.sapMRbSel,
 .sapMRbWarn.sapMRbSel.sapMRbRo {
+
 	.sapMRbBInn {
-		fill: @sapUiFieldWarningColor;
+		fill: var(--sapField_WarningColor);
 		stroke: none;
 	}
 }
 
 .sapMRbWarn,
 .sapMRbWarn.sapMRbBTouched {
+
 	.sapMRbB .sapMRbBOut {
-		stroke: @sapUiFieldWarningColor;
-		fill: @sapUiFieldWarningBackground;
+		stroke: var(--sapField_WarningColor);
+		fill: var(--sapField_WarningBackground);
 	}
 }
 
 .sapMRbSucc.sapMRbSel,
 .sapMRbSucc.sapMRbSel.sapMRbRo {
+
 	.sapMRbBInn {
-		fill: @sapUiFieldSuccessColor;
+		fill: var(--sapField_SuccessColor);
 		stroke: none;
 	}
 }
 
 .sapMRbSucc,
 .sapMRbSucc.sapMRbBTouched {
+
 	.sapMRbB .sapMRbBOut {
-		stroke: @sapUiFieldSuccessColor;
-		fill: @sapUiFieldSuccessBackground;
+		stroke: var(--sapField_SuccessColor);
+		fill: var(--sapField_SuccessBackground);
 	}
 }
 
 .sapMRbInfo.sapMRbSel,
 .sapMRbInfo.sapMRbSel.sapMRbRo {
+
 	.sapMRbBInn {
-		fill: @sapUiFieldInformationColor;
+		fill: var(--sapField_InformationColor);
 		stroke: none;
 	}
 }
 
 .sapMRbInfo,
 .sapMRbInfo.sapMRbBTouched {
+
 	.sapMRbB .sapMRbBOut {
-		stroke: @sapUiFieldInformationColor;
-		fill: @sapUiFieldInformationBackground;
-		stroke-width: @sapUiFieldInformationBorderWidth;
+		stroke: var(--sapField_InformationColor);
+		fill: var(--sapField_InformationBackground);
+		stroke-width: var(--sapField_InformationBorderWidth);
 	}
 }
 
-html[data-sap-ui-browser^="sf"] {
-	// fix for circle width on zoom in Safari
+html[data-sap-ui-browser^='sf'] {
+	/* fix for circle width on zoom in Safari */
 	.sapMRb .sapMRbBOut {
 		stroke-width: 2px;
 	}
-	// fix for circle width on zoom in Safari
+
+	/* fix for circle width on zoom in Safari */
 	.sapMRb.sapMRbRo .sapMRbBOut,
 	.sapMRb.sapMRbInfo .sapMRbBOut {
 		stroke-width: 1px;

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

@@ -14,30 +14,34 @@
 }
 
 .sapMRangeSlider.sapMSlider {
+
 	.sapMSliderLabels {
 		height: 1rem;
 
 		.sapMSliderRangeLabel {
 			width: 2rem;
-			font-size: @sapMFontSmallSize;
-			color: @sapUiContentLabelColor;
+			font-size: var(--sapFontSmallSize);
+			color: var(--sapContent_LabelColor);
 		}
 	}
+
 	.sapMSliderInner .sapMSliderHandle {
-		background: @sapUiSliderRangeHandleBackground;
+		background: var(--sapSlider_RangeHandleBackground);
 		top: -.6875rem;
 	}
 
 	.sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle {
+
 		&:hover {
-			background-color: @sapUiSliderHoverHandleBackground;
-			border-color: @sapUiSliderHoverHandleBorderColor;
+			background-color: var(--sapSlider_Hover_HandleBackground);
+			border-color: var(--sapSlider_Hover_HandleBorderColor);
 		}
 
 		&.sapMSliderHandlePressed {
+
 			&:not(:focus) {
 				background: transparent;
-				border: 0.125rem solid @sapUiContentFocusColor;
+				border: 0.125rem solid var(--sapContent_FocusColor);
 				outline: none;
 				box-shadow: none;
 				top: -.6875rem;
@@ -45,29 +49,31 @@
 		}
 
 		&:focus {
-			background: @sapUiSliderActiveRangeHandleBackground;
-			border: 0.125rem solid @sapUiContentFocusColor;
+			background: var(--sapSlider_Active_RangeHandleBackground);
+			border: 0.125rem solid var(--sapContent_FocusColor);
 			outline: none;
 			box-shadow: none;
 			top: -.6875rem;
 		}
 	}
 
-	.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+	.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus)::after {
 		top: 4px;
 	}
 }
 
 .sapMRangeSlider .sapMSliderInner::before {
-	border: 0.0625rem solid @sapUiContentMeasureIndicatorColor;
-	background-color: @sapUiContentMeasureIndicatorColor;
+	border: 0.0625rem solid var(--sapContent_MeasureIndicatorColor);
+	background-color: var(--sapContent_MeasureIndicatorColor);
 }
 
 .sapUiSizeCompact {
+
 	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
+
 		&:not(:focus) {
 			background: transparent;
-			border: 0.125rem solid @sapUiContentFocusColor;
+			border: 0.125rem solid var(--sapContent_FocusColor);
 			outline: none;
 			box-shadow: none;
 			top: -0.5rem;
@@ -75,8 +81,8 @@
 	}
 
 	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
-		background: @sapUiSliderActiveRangeHandleBackground;
-		border: 0.125rem solid @sapUiContentFocusColor;
+		background: var(--sapSlider_Active_RangeHandleBackground);
+		border: 0.125rem solid var(--sapContent_FocusColor);
 		outline: none;
 		box-shadow: none;
 		top: -0.5rem;
@@ -86,7 +92,7 @@
 		top: -0.5rem;
 	}
 
-	.sapMRangeSlider.sapMSlider .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+	.sapMRangeSlider.sapMSlider .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus)::after {
 		top: 2px;
 		right: 0.25rem;
 	}
@@ -96,10 +102,10 @@
 	}
 }
 
-html.sap-desktop .sapMSliderProgress:focus:before {
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+html.sap-desktop .sapMSliderProgress:focus::before {
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: 0.5rem;
-	content: "";
+	content: '';
 	display: block;
 	position: absolute;
 	height: ~"calc(@{_sap_m_RangeSlider_Handle_Height} + 0.375rem)";

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

@@ -4,6 +4,7 @@
 /* ====================================== */
 
 .sapMRI {
+
 	& {
 		margin: 0.75rem 0;
 	}
@@ -13,21 +14,22 @@
 	}
 
 	.sapMRIUnsel {
-		color: @sapContent_UnratedColor;
+		color: var(--sapContent_UnratedColor);
 	}
 
 	.sapMRISel {
-		color: @sapContent_RatedColor;
+		color: var(--sapContent_RatedColor);
 	}
 }
 
 .sapMRI.sapMRIDisplayOnly,
 .sapMRI.sapMRIReadOnly {
+
 	.sapMRIIconSel {
-		color: @sapContent_RatedColor;
+		color: var(--sapContent_RatedColor);
 	}
 	.sapMRIUnsel {
-		color: @sapContent_UnratedColor;
+		color: var(--sapContent_UnratedColor);
 	}
 }
 
@@ -37,16 +39,20 @@
 
 /* Custom focus outline */
 html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly) {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 0.0625rem;
 }
 
-.sapMRIIconSel, .sapMRIIconUnsel, .sapMRIIconHov, .sapMRIIconReadOnly {
+.sapMRIIconSel,
+.sapMRIIconUnsel,
+.sapMRIIconHov,
+.sapMRIIconReadOnly {
 	font-size: 1.5rem;
 }
 
-.sapMRIIconSel, .sapMRIIconUnsel {
-	text-shadow: @sapContent_TextShadow;
+.sapMRIIconSel,
+.sapMRIIconUnsel {
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 /* As font-size is set as an inline style, we need to override it for horizon only using important */
@@ -58,6 +64,7 @@ html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly) {
 }
 
 .sapUiSizeCompact {
+
 	&.sapMRIReadOnly .sapMRIUnsel .sapMRIunratedIcon,
 	&.sapMRIReadOnly .sapMRIIconSel .sapMRIunratedIcon,
 	&.sapMRIDisplayOnly .sapMRIUnsel .sapMRIunratedIcon,

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

@@ -11,22 +11,22 @@
 @_sap_m_SearchField_ButtonSize: 2.25rem;
 @_sap_m_SearchField_ButtonFontSize: 1rem;
 @_sap_m_SearchField_Compact_FormPaddingLeft: 0.5rem;
-@_sap_m_SearchField_ResetIcon: "\e03e";
+@_sap_m_SearchField_ResetIcon: '\e03e';
 @_sap_m_SearchField_PlaceholderFontStyle: normal;
-@_sap_m_SearchField_ActiveBackgroundStyle: @sapUiFieldBackgroundStyle;
+@_sap_m_SearchField_ActiveBackgroundStyle: var(--sapField_BackgroundStyle);
 
 .sapMSFF {
-	border-radius: @sapUiFieldBorderCornerRadius;
+	border-radius: var(--sapField_BorderCornerRadius);
 }
 
 .sapMSFDisabled {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .sapMSFB {
-	border-radius: @sapUiFieldBorderCornerRadius;
-	color: @sapUiButtonTextColor;
-	line-height: @_sap_m_SearchField_ButtonSize - @sapUiFieldBorderWidth * 2; // center the icon vertically
+	border-radius: var(--sapField_BorderCornerRadius);
+	color: var(--sapButton_TextColor);
+	line-height: @_sap_m_SearchField_ButtonSize - @sapUiFieldBorderWidth * 2; /* center the icon vertically */
 
 	&:first-of-type {
 		margin-left: 0.25rem;
@@ -37,35 +37,35 @@
 	}
 
 	&:hover {
-		box-shadow: @sapUiFieldHoverShadow;
-		background-color: @sapUiButtonHoverBackground;
-		border-left: 2px solid @sapUiButtonHoverBorderColor; // contrast themes specific
+		box-shadow: var(--sapField_Hover_Shadow);
+		background-color: var(--sapButton_Hover_Background);
+		border-left: 2px solid var(--sapButton_Hover_BorderColor); /* contrast themes specific */
 		border-right: 2px solid transparent;
 	}
 
-	&.sapMSFR:not(:last-child):hover { // if there is no search button the right border is not needed
-		border-right: 2px solid @sapUiButtonHoverBorderColor; // contrast themes specific
+	&.sapMSFR:not(:last-child):hover { /* if there is no search button the right border is not needed */
+		border-right: 2px solid var(--sapButton_Hover_BorderColor); /* contrast themes specific */
 	}
 
 	&:active,
-	&.sapMSFBA // Firefox specific
-	{
-		box-shadow: @sapUiFieldHoverShadow;
-		color: @sapUiButtonSelectedTextColor;
-		background-color: @sapUiButtonHoverBackground;
+	&.sapMSFBA { /* Firefox specific */
+		box-shadow: var(--sapField_Hover_Shadow);
+		color: var(--sapButton_Selected_TextColor);
+		background-color: var(--sapButton_Hover_Background);
 	}
 }
 
 .sapMSF:not(.sapMSFDisabled):hover .sapMSFF {
-	background-color: @sapUiFieldHoverBackground;
+	background-color: var(--sapField_Hover_Background);
 }
 
 .sapMSF.sapMFocus {
+
 	.sapMSFF {
-		background-color: @sapUiFieldFocusBackground;
+		background-color: var(--sapField_Focus_Background);
 	}
 
 	&:hover .sapMSFF {
 		box-shadow: none;
 	}
-}
+}