@openui5/themelib_sap_horizon 1.141.2 → 1.143.0

package/src/sap/ui/core/themes/sap_horizon/BusyIndicator.less

@@ -0,0 +1,23 @@
+/* ======================================================================== */
+/* CSS for control BusyIndicator implementation of the sap.ui.core.Control  */
+/* Morning Horizon theme                                                    */
+/* ======================================================================== */
+
+@_sap_ui_core_LocalBusyIndicator_Color: @sapContent_BusyColor;
+
+.sapUiLocalBusyIndicatorSizeSection,
+.sapUiLocalBusyIndicatorSizeBig {
+	font-size: @_sap_ui_core_LocalBusyIndicator_SizeMedium;
+}
+
+.sapUiLocalBusyIndicatorShowContainer > div.sapUiLocalBusyIndicatorAnimation {
+	background-color: var(--sapList_Background);
+	box-shadow: var(--sapContent_Shadow2);
+	border-radius: var(--sapElement_BorderCornerRadius);
+	padding: 1rem 2rem;
+	max-width: 15rem;
+	/* Centers the busy indicator markers considering the size of the white container */
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}

package/src/sap/ui/core/themes/sap_horizon/library.source.less

@@ -9,4 +9,4 @@
 @import "global.less";
 @import "shared.less";
 @import "DatePicker.less";
-@import "LocalBusyIndicator.less";
+@import "BusyIndicator.less";

package/src/sap/ui/core/themes/sap_horizon_dark/.theme

@@ -6,7 +6,7 @@
 	<copyright>OpenUI5
  * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-	<version>1.141.2</version>
+	<version>1.143.0</version>
 
 	<documentation>SAPUI5 Evening Horizon theme library.</documentation>
 

package/src/sap/ui/core/themes/sap_horizon_dark/BusyIndicator.less

@@ -0,0 +1,23 @@
+/* ======================================================================== */
+/* CSS for control BusyIndicator implementation of the sap.ui.core.Control  */
+/* Evening Horizon theme                                                    */
+/* ======================================================================== */
+
+@_sap_ui_core_LocalBusyIndicator_Color: @sapContent_BusyColor;
+
+.sapUiLocalBusyIndicatorSizeSection,
+.sapUiLocalBusyIndicatorSizeBig {
+	font-size: @_sap_ui_core_LocalBusyIndicator_SizeMedium;
+}
+
+.sapUiLocalBusyIndicatorShowContainer > div.sapUiLocalBusyIndicatorAnimation {
+	background-color: var(--sapList_Background);
+	box-shadow: var(--sapContent_Shadow2);
+	border-radius: var(--sapElement_BorderCornerRadius);
+	padding: 1rem 2rem;
+	max-width: 15rem;
+	/* Centers the busy indicator markers considering the size of the white container */
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}

package/src/sap/ui/core/themes/sap_horizon_dark/library.source.less

@@ -9,4 +9,4 @@
 @import "global.less";
 @import "shared.less";
 @import "DatePicker.less";
-@import "LocalBusyIndicator.less";
+@import "BusyIndicator.less";

package/src/sap/ui/core/themes/sap_horizon_hcb/.theme

@@ -6,7 +6,7 @@
 	<copyright>OpenUI5
  * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-	<version>1.141.2</version>
+	<version>1.143.0</version>
 
 	<documentation>SAPUI5 horizon high contrast black theme library.</documentation>
 

package/src/sap/ui/core/themes/sap_horizon_hcb/BusyIndicator.less

@@ -0,0 +1,24 @@
+/* ======================================================================== */
+/* CSS for control BusyIndicator implementation of the sap.ui.core.Control  */
+/* Horizon High Contrast Black theme                                        */
+/* ======================================================================== */
+
+@_sap_ui_core_LocalBusyIndicator_Background: fade(@sapUiHcStandardBackground, 30%);
+@_sap_ui_core_LocalBusyIndicator_Color: @sapContent_BusyColor;
+
+.sapUiLocalBusyIndicatorSizeSection,
+.sapUiLocalBusyIndicatorSizeBig {
+	font-size: @_sap_ui_core_LocalBusyIndicator_SizeMedium;
+}
+
+.sapUiLocalBusyIndicatorShowContainer > div.sapUiLocalBusyIndicatorAnimation {
+	background-color: var(--sapList_Background);
+	box-shadow: var(--sapContent_Shadow2);
+	border-radius: var(--sapElement_BorderCornerRadius);
+	padding: 1rem 2rem;
+	max-width: 15rem;
+	/* Centers the busy indicator markers considering the size of the white container */
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}

package/src/sap/ui/core/themes/sap_horizon_hcb/Icon.less

@@ -1,9 +1,9 @@
-/* ================================= */
-/* CSS for control sap.ui/core/Icon  */
-/* Horizon High Contrast Black theme */
-/* ================================= */
+/* ================================== */
+/* CSS for control sap.ui/core/Icon   */
+/* Horizon High Contrast Black theme  */
+/* ================================== */
 
 .sapUiIconBGColorContrast {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiContentContrastIconColor;
-}
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapContent_ContrastIconColor);
+}

package/src/sap/ui/core/themes/sap_horizon_hcb/library.source.less

@@ -9,5 +9,4 @@
 @import "global.less";
 @import "shared.less";
 @import "Icon.less";
-@import "LocalBusyIndicator.less";
-@import "Shadow.less";
+@import "BusyIndicator.less";

package/src/sap/ui/core/themes/sap_horizon_hcw/.theme

@@ -6,7 +6,7 @@
 	<copyright>OpenUI5
  * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-	<version>1.141.2</version>
+	<version>1.143.0</version>
 
 	<documentation>SAPUI5 horizon high contrast white theme library.</documentation>
 

package/src/sap/ui/core/themes/sap_horizon_hcw/BusyIndicator.less

@@ -0,0 +1,24 @@
+/* ================================================================= */
+/* CSS for BusyIndicator implementation of the sap.ui.core.Control   */
+/* Horizon High Contrast White theme                                 */
+/* ================================================================= */
+
+@_sap_ui_core_LocalBusyIndicator_Background: fade(@sapUiHcStandardBackground, 30%);
+@_sap_ui_core_LocalBusyIndicator_Color: @sapContent_BusyColor;
+
+.sapUiLocalBusyIndicatorSizeSection,
+.sapUiLocalBusyIndicatorSizeBig {
+	font-size: @_sap_ui_core_LocalBusyIndicator_SizeMedium;
+}
+
+.sapUiLocalBusyIndicatorShowContainer > div.sapUiLocalBusyIndicatorAnimation {
+	background-color: var(--sapList_Background);
+	box-shadow: var(--sapContent_Shadow2);
+	border-radius: var(--sapElement_BorderCornerRadius);
+	padding: 1rem 2rem;
+	max-width: 15rem;
+	/* Centers the busy indicator markers considering the size of the white container */
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}

package/src/sap/ui/core/themes/sap_horizon_hcw/Icon.less

@@ -1,9 +1,9 @@
-/* ================================= */
-/* CSS for control sap.ui/core/Icon  */
-/* Horizon High Contrast White theme */
-/* ================================= */
+/* ================================== */
+/* CSS for control sap.ui/core/Icon   */
+/* Horizon High Contrast White theme  */
+/* ================================== */
 
 .sapUiIconBGColorContrast {
-	color: @sapUiGroupContentBackground;
-	background-color: @sapUiContentContrastIconColor;
-}
+	color: var(--sapGroup_ContentBackground);
+	background-color: var(--sapContent_ContrastIconColor);
+}

package/src/sap/ui/core/themes/sap_horizon_hcw/library.source.less

@@ -9,5 +9,4 @@
 @import "global.less";
 @import "shared.less";
 @import "Icon.less";
-@import "LocalBusyIndicator.less";
-@import "Shadow.less";
+@import "BusyIndicator.less";

package/src/sap/ui/core/themes/sap_horizon_hcw/shared.less

@@ -208,4 +208,8 @@
 .sapUi-Std-PaddingXL {
 	padding-left: 3rem !important;
 	padding-right: 3rem !important;
+}
+
+.sapUiShd {
+	box-shadow: none;
 }

package/src/sap/ui/rta/themes/sap_horizon_hcb/ChangeVisualization.less

@@ -11,6 +11,8 @@
 		&:after {
 			box-shadow: none;
 			border-radius: @_sap_ui_rta_ChangeVisualization_BorderRadius;
+			outline-width: 0.125rem; //2px
+			outline-offset: -0.125rem; //2px
 		}
 	}
 

package/src/sap/ui/rta/themes/sap_horizon_hcb/Toolbar.adaptation.less

@@ -22,7 +22,7 @@
 				&.sapMSegBBtnFocusable {
 					&:focus .sapMSegBBtnInner {
 						outline-width: 0.125rem; //2px
-						outline-offset: -0.125rem; //2px
+						outline-offset: -0.25rem; //-4px
 					}
 				}
 

package/src/sap/ui/rta/themes/sap_horizon_hcw/ChangeVisualization.less

@@ -11,6 +11,8 @@
 		&:after {
 			box-shadow: none;
 			border-radius: @_sap_ui_rta_ChangeVisualization_BorderRadius;
+			outline-width: 0.125rem; //2px
+			outline-offset: -0.125rem; //2px
 		}
 	}
 

package/src/sap/ui/rta/themes/sap_horizon_hcw/Toolbar.adaptation.less

@@ -36,7 +36,7 @@
 				&.sapMSegBBtnFocusable {
 					&:focus .sapMSegBBtnInner {
 						outline-width: 0.125rem; //2px
-						outline-offset: -0.125rem; //2px
+						outline-offset: -0.25rem; //-4px
 					}
 				}
 

package/src/sap/ui/unified/themes/sap_horizon/CalendarLegend.less

@@ -1,15 +1,15 @@
 /* ============================================== */
 /* CSS for control sap.ui.unified/CalendarLegend  */
-/* Horizon theme                                  */
+/* Morning Horizon theme                          */
 /* ============================================== */
 
-.sapUiUnifiedLegend  {
+.sapUiUnifiedLegend {
 	border-radius: 0.5rem;
 }
 
 .sapUiCalLegDayTypeNonWorking .sapUiUnifiedLegendSquare .sapUiUnifiedLegendSquareColor,
 .sapUiUnifiedLegendNonWorkingDay .sapUiUnifiedLegendSquare .sapUiUnifiedLegendSquareColor {
-	background: @sapUiLegendNonWorkingBackground;
+	background: var(--sapLegend_NonWorkingBackground);
 }
 
 .sapUiUnifiedLegendSelected .sapUiUnifiedLegendSquare .sapUiUnifiedLegendSquareColor {
@@ -17,7 +17,7 @@
 	border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 
 	&::after {
-		content: "";
+		content: '';
 		display: block;
 		width: 0.25rem;
 		height: 0.25rem;
@@ -34,15 +34,16 @@
 
 	&:focus {
 		outline: none;
+
 		&::after {
-			content: "";
+			content: '';
 			position: absolute;
 			box-sizing: border-box;
 			left: 0.125rem;
 			top: 0.125rem;
 			right: 0.125rem;
 			bottom: 0.125rem;
-			border: @sapContent_FocusWidth @sapContent_FocusStyle @sapUiContentFocusColor;
+			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 			border-radius: 0.25rem;
 			pointer-events: none;
 		}
@@ -55,11 +56,12 @@
 
 	&:focus {
 		outline: none;
+
 		&::after {
-			content: "";
+			content: '';
 			position: absolute;
 			box-sizing: border-box;
-			border: @sapContent_FocusWidth @sapContent_FocusStyle @sapUiContentFocusColor;
+			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 			border-radius: 0.25rem;
 			pointer-events: none;
 			inset: 0;
@@ -70,4 +72,4 @@
 .sapUiSizeCompact .sapUiUnifiedLegendSelected .sapUiUnifiedLegendSquare .sapUiUnifiedLegendSquareColor::after {
 	inset-block-start: 0.625rem;
 	inset-inline-start: 0.625rem;
-}
+}

package/src/sap/ui/unified/themes/sap_horizon/CalendarRow.less

@@ -1,39 +1,39 @@
 /* =========================================== */
 /* CSS for control sap.ui.unified/CalendarRow  */
-/* Horizon theme                               */
+/* Morning Horizon theme                       */
 /* =========================================== */
 
 /* intervals */
 .sapUiCalendarRowAppsInt,
-.sapUiCalendarRowAppsSubInt{
+.sapUiCalendarRowAppsSubInt {
 	border-color: @sapUiListVerticalBorderColor;
 }
 
-.sapUiCalendarRowAppsIntHead{
-	font-size: @sapMFontSmallSize;
-	color: @sapUiBaseText;
+.sapUiCalendarRowAppsIntHead {
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .sapMListTblRow:not(.sapMLIBSelected) .sapUiCalendarRowAppsNoWork,
 .sapMListTblSubRow:not(.sapMLIBSelected) .sapUiCalendarRowAppsNoWork {
-	background-color: @sapUiLegendNonWorkingBackground;
+	background-color: var(--sapLegend_NonWorkingBackground);
 }
 
 /* Appointments */
 /* as outlines can't have different offsets on one side (no left border) and don't work in IE just use a inner border */
-html.sap-desktop .sapUiCalendarApp:focus > .sapUiCalendarAppCont:after {
+html.sap-desktop .sapUiCalendarApp:focus > .sapUiCalendarAppCont::after {
 	position: absolute;
 	top: 0.0625rem;
 	left: 0.0625rem;
 	right: 0.0625rem;
 	bottom: 0.0625rem;
-	content: "";
-	border: 0.125rem solid @sapUiContentFocusColor;
+	content: '';
+	border: 0.125rem solid var(--sapContent_FocusColor);
 	pointer-events: none;
 	border-radius: 0.125rem;
 }
 
-html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:hover > .sapUiCalendarAppCont:after {
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:hover > .sapUiCalendarAppCont::after {
 	top: 0.125rem;
 	left: 0.125rem;
 	right: 0.125rem;
@@ -51,46 +51,40 @@ html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:hover > .sapUiCalen
 }
 
 html.sap-desktop .sapUiCalendarApp:hover:not(:active),
-html.sap-desktop .sapUiCalendarApp:focus:not(:active) > .sapUiCalendarAppCont{
-	background-color: @sapUiListBackground;
+html.sap-desktop .sapUiCalendarApp:focus:not(:active) > .sapUiCalendarAppCont {
+	background-color: var(--sapList_Background);
 }
 
 html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active),
-html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active) > .sapUiCalendarAppCont{
-	background-color: @sapUiContentSelectedBackground;
-}
-
-html[data-sap-ui-browser ^= "ie"], html[data-sap-ui-browser^="ed"] {
-	.sapUiCalendarApp:focus > .sapUiCalendarAppCont:after{
-		border-style: dashed;
-	}
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active) > .sapUiCalendarAppCont {
+	background-color: var(--sapContent_Selected_Background);
 }
 
 .sapUiCalendarApp.sapUiCalendarAppSel,
 .sapUiCalendarApp:active,
-.sapUiCalendarApp.sapUiCalendarAppSel:active{
-	color: @sapUiContentSelectedTextColor;
-	background-color:@sapUiContentSelectedBackground
+.sapUiCalendarApp.sapUiCalendarAppSel:active {
+	color: var(--sapContent_Selected_TextColor);
+	background-color: var(--sapContent_Selected_Background)
 }
 
 html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active),
-html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active){
-	color: @sapUiContentSelectedTextColor;
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active) {
+	color: var(--sapContent_Selected_TextColor);
 }
 
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont,
 .sapUiCalendarApp:active > .sapUiCalendarAppCont,
-.sapUiCalendarApp.sapUiCalendarAppSel:active > .sapUiCalendarAppCont{
-	border-color: @sapUiListSelectionBorderColor;
+.sapUiCalendarApp.sapUiCalendarAppSel:active > .sapUiCalendarAppCont {
+	border-color: var(--sapList_SelectionBorderColor);
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
 }
 
 
-html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active)  > .sapUiCalendarAppCont,
-html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active)  > .sapUiCalendarAppCont{
-	border-color: @sapUiListSelectionBorderColor;
-	border-left-color: @sapUiListBackground;
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active) > .sapUiCalendarAppCont,
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active) > .sapUiCalendarAppCont {
+	border-color: var(--sapList_SelectionBorderColor);
+	border-left-color: var(--sapList_Background);
 }
 
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont > .sapUiCalendarAppIcon,
@@ -99,19 +93,19 @@ html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active)  > .sa
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont .sapUiCalendarAppTitle,
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont .sapUiCalendarAppText,
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont .sapUiCalendarAppDescription {
-	color: @sapUiContentSelectedTextColor;
+	color: var(--sapContent_Selected_TextColor);
 }
 
-.sapUiCalendarAppTitle{
+.sapUiCalendarAppTitle {
 	font-size: @sapMFontMediumSize;
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
-.sapUiCalendarAppText{
-	font-size: @sapMFontSmallSize;
+.sapUiCalendarAppText {
+	font-size: var(--sapFontSmallSize);
 }
 
-.sapUiCalendarRowNow{
+.sapUiCalendarRowNow {
 	border-color: @sapUiCalendarColorToday;
 }
 
@@ -120,7 +114,7 @@ html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active)  > .sa
 	border-right-color: darken(@sapUiListBorderColor, 15);
 	border-bottom-color: darken(@sapUiListBorderColor, 15);
 	background-color: lighten(@sapUiAccent1, 50);
-	color: @sapUiListTextColor;
+	color: var(--sapList_TextColor);
 }
 
 .sapUiCalendarApp.sapUiCalendarAppTent > .sapUiCalendarAppCont {
@@ -135,12 +129,12 @@ html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active)  > .sa
 }
 
 .sapUiCalendarAppCont:hover {
-	border-color: @sapUiListSelectionBorderColor;
+	border-color: var(--sapList_SelectionBorderColor);
 }
 
-// SPC
+/* SPC */
 .sapUiCalendarAppSel:hover .sapUiCalendarAppCont,
-// PC
+/* PC */
 .sapUiCalendarAppSel .sapUiCalendarAppCont:hover {
-	box-shadow: inset 0 0 0 0.0625rem @sapUiListSelectionBorderColor;
+	box-shadow: inset 0 0 0 0.0625rem var(--sapList_SelectionBorderColor);
 }

package/src/sap/ui/unified/themes/sap_horizon/FileUploader.less

@@ -1,6 +1,6 @@
 /* ============================================ */
 /* CSS for control sap.ui.unified/FileUploader  */
-/* Horizon theme                                */
+/* Morning Horizon theme                        */
 /* ============================================ */
 
 .sapUiFup,
@@ -8,7 +8,8 @@
 	height: 2.75rem;
 }
 
-.sapUiSizeCompact{
+.sapUiSizeCompact {
+
 	.sapUiFup,
 	.sapUiFup.sapMBarChild {
 		height: 2rem;
@@ -26,7 +27,7 @@
 
 html.sap-desktop .sapUiFup .sapMFocusable:focus,
 html.sap-desktop .sapUiFup .sapMFocusable:active {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	outline-offset: -1px;
 }
 
@@ -38,36 +39,10 @@ html.sap-desktop .sapUiFup .sapMBtnInner:active.sapMBtnAccept,
 html.sap-desktop .sapUiFup .sapMBtnInner:active.sapMBtnReject,
 .sapUiFup .sapMBtnInner:active.sapMBtnEmphasized,
 html.sap-desktop .sapUiFup .sapMBtnInner:active.sapMBtnEmphasized {
-	outline-color: @sapUiContentContrastFocusColor;
+	outline-color: var(--sapContent_ContrastFocusColor);
 	outline-offset: -.125rem;
 }
 
 .sapMFooter-CTX .sapUiFup .sapMBtnInner:active.sapMFocusable {
-	background-color: @sapUiButtonActiveBackground;
-}
-
-/* IE ignores outline-offset. Use an overlay: */
-
-html[data-sap-ui-browser^="ie"] {
-
-	.sapUiFup .sapMBtnInner:focus.sapMFocusable {
-		outline: none;
-		position: relative;
-	}
-
-	.sapUiFup .sapMBtnInner:focus.sapMFocusable:before {
-		content: " ";
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0;
-		top: 0;
-		border: 1px dotted @sapUiContentFocusColor;
-	}
-
-	.sapMFooter-CTX .sapUiFup .sapMBtnInner:focus.sapMFocusable:before {
-		border-color: @sapUiContentContrastFocusColor;
-	}
-
+	background-color: var(--sapButton_Active_Background);
 }

package/src/sap/ui/unified/themes/sap_horizon/Menu.less

@@ -1,29 +1,29 @@
 /* ==================================== */
 /* CSS for control sap.ui.unified/Menu  */
-/* Horizon theme                        */
+/* Morning Horizon theme                */
 /* ==================================== */
 
 .sapUiMnu {
-	border-radius: @sapUiPopoverBorderCornerRadius;
+	border-radius: var(--sapPopover_BorderCornerRadius);
 }
 
-.sapUiMnuItmSbMnu > div:after {
+.sapUiMnuItmSbMnu > div::after {
 	font-size: 1rem;
 }
 
 .sapUiMnuItm.sapUiMnuTfItm .sapUiMnuTfItemTf.sapUiMnuTfItemTfDsbl {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov:hover {
 	background-color: @sapUiListSelectionHoverBackground;
 }
 
-.sapUiMnu  .sapUiMnuDiv>hr,
-.sapMList .sapMListItems .sapUiMnuDiv>hr{
-	border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
-	left: 0rem;
-	right: 0rem;
+.sapUiMnu .sapUiMnuDiv > hr,
+.sapMList .sapMListItems .sapUiMnuDiv > hr {
+	border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+	left: 0;
+	right: 0;
 }
 
 .sapUiMnu.sapUiMnuCozySupport.sapUiSizeCozy .sapUiMnuItm {
@@ -40,7 +40,8 @@
 	width: 2.25rem;
 	height: 2.75rem;
 	font-size: 0.75rem;
-	&.sapUiIconMirrorInRTL{
+
+	&.sapUiIconMirrorInRTL {
 		height: 2.75rem;
 	}
 }
@@ -53,35 +54,37 @@
 	line-height: 2.75rem;
 }
 
-.sapUiSizeCompact .sapUiMnuItmR, .sapUiSizeCompact .sapUiMnuNoIco .sapUiMnuItmL {
+.sapUiSizeCompact .sapUiMnuItmR,
+.sapUiSizeCompact .sapUiMnuNoIco .sapUiMnuItmL {
 	width: 0.5rem;
 }
 
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen,
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov {
-	border-bottom: 1px solid @sapUiListSelectionBorderColor;
+	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
 }
 
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm {
 	border-bottom: 1px solid transparent;
 }
 
-.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmHov:active{
+.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmHov:active {
 	border-bottom: 1px solid transparent;
 }
 
-.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov:active{
+.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov:active {
 	border-bottom: 1px solid transparent;
-	background-color: @sapUiListActiveBackground;
+	background-color: var(--sapList_Active_Background);
 }
 
 .sapUiMnuItm:focus {
-	outline: 0.125rem solid @sapUiContentFocusColor;
+	outline: 0.125rem solid var(--sapContent_FocusColor);
 	outline-offset: -0.1875rem;
 }
 
 html.sap-desktop,
 html.sap-tablet {
+
 	.sapUiMnuLst > .sapUiMnuItm > .sapUiMnuItmIco + .sapUiMnuItmTxt {
 		padding-inline-start: 0;
 	}
@@ -89,11 +92,14 @@ html.sap-tablet {
 
 html.sap-desktop,
 html.sap-tablet {
+
 	.sapUiSizeCompact {
+
 		.sapUiMnuLst > .sapUiMnuItm > .sapUiMnuItmIco + .sapUiMnuItmTxt {
 			padding-inline-start: 0;
 		}
 	}
+
 	.sapUiMnuLst > .sapUiMnuItm > .sapUiMnuItmIco + .sapUiMnuItmTxt {
 		padding-inline-start: 0;
 	}