@openui5/themelib_sap_horizon 1.136.2 → 1.138.0

package/src/sap/f/themes/sap_horizon_dark/ShellBar.less

@@ -22,24 +22,25 @@
 
 .sapFShellBar.sapFShellBarFCLFPHeader,
 .sapMPageHeader .sapFShellBar {
-	box-shadow: @sapUiShellShadow;
+	box-shadow: var(--sapShell_Shadow);
 }
 
 .sapFShellBar {
-	background: @sapUiShellColor;
+	background: var(--sapShellColor);
 	height: 3.25rem;
-	box-shadow: inset 0 -0.0625rem 0 0 @sapUiShellBorderColor;
+	box-shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor);
 
 	.sapFShellBarOTB.sapMIBar.sapMTB {
 		height: 3.25rem;
 	}
 
-	// Copilot
+	/* Copilot */
 	.CPImage,
 	& .sapMIBar.sapMTB .CPImage {
-		&:after {
+
+		&::after {
 			position: absolute;
-			content: "";
+			content: '';
 			left: 3px;
 			right: 3px;
 			top: 3px;
@@ -48,87 +49,94 @@
 			pointer-events: none;
 			border-radius: 0.5rem;
 		}
+
 		.color1 {
 			stop-color: #0070F2;
 		}
+
 		.color2 {
 			stop-color: #EBF8FF;
 		}
+
 		.opacity7 {
 			stop-opacity:0.7;
 		}
+
 		.opacity36 {
 			stop-opacity: 0.36;
 		}
+
 		.opacity2 {
 			stop-opacity: 0.2;
 		}
+
 		&:focus {
-			outline: @sapUiContentFocusWidth solid @sapUiContentFocusColor;
+			outline: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
 			border-radius: 0.375rem;
-			background-color: @sapUiShellActiveBackground;
-			color: @sapUiShellActiveTextColor;
-			&:after {
-				box-shadow: @sapUiContentSelectedShadow;
+			background-color: var(--sapShell_Active_Background);
+			color: var(--sapShell_Active_TextColor);
+
+			&::after {
+				box-shadow: var(--sapContent_Selected_Shadow);
 			}
 		}
+
 		&:hover:not(:focus) {
-			background: @sapUiShellHoverBackground;
+			background: var(--sapShell_Hover_Background);
 
-			&:after {
-				box-shadow: @sapUiContentInteractionShadow;
+			&::after {
+				box-shadow: var(--sapContent_Interaction_Shadow);
 			}
 		}
-		html[data-sap-ui-browser^="ie"] &:focus:before {
-			border-color: @sapUiContentContrastFocusColor;
-		}
 	}
 
 	&.sapMPageHeader .sapMIBar,
 	.sapMIBar {
 		height: 3.25rem;
 	}
+
 	.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
-		border-color: @sapUiShellHoverBackground;
+		border-color: var(--sapShell_Hover_Background);
 	}
+
 	.sapMToggleBtnPressed:not(.sapMBtnDisabled),
 	.sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
-		background-color: @sapUiShellActiveBackground;
-		border-color: @sapUiShellActiveBackground;
+		background-color: var(--sapShell_Active_Background);
+		border-color: var(--sapShell_Active_Background);
 	}
 
 	.sapFShellBarProfile:not(:focus):hover {
 		box-shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor, 72);
 	}
 
-	// Mega Menu
+	/* Mega Menu */
 	.sapFSHMegaMenu {
-		color: @sapUiShellTextColor;
+		color: var(--sapShell_TextColor);
 		overflow: visible;
-		font-size: @sapMFontHeader5Size;
+		font-size: var(--sapFontHeader5Size);
 		font-weight: bold;
 
 		.sapMBtn:not(:hover) .sapMBtnInner.sapMBtnTransparent::after,
 		.sapMBtnTransparent {
-			color: @sapUiShellTextColor;
-			background: @sapUiButtonLiteBackground;
+			color: var(--sapShell_TextColor);
+			background: var(--sapButton_Lite_Background);
 		}
 
 		.sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) bdi,
 		&.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner.sapMBtnTransparent:not(.sapMBtnActive)::after {
-			color:  @sapUiShellTextColor;
+			color:  var(--sapShell_TextColor);
 		}
 
 		.sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
-			background: @sapUiShellHoverBackground;
-			border: 1px solid @sapUiButtonLiteHoverBorderColor;
-			color: @sapUiShellTextColor;
+			background: var(--sapShell_Hover_Background);
+			border: 1px solid var(--sapButton_Lite_Hover_BorderColor);
+			color: var(--sapShell_TextColor);
 		}
 
 		.sapMBtn:hover > .sapMBtnHoverable.sapMBtnActive {
-			background: @sapUiShellActiveBackground;
-			border: 1px solid @sapUiButtonLiteActiveBorderColor;
-			color: @sapUiShellActiveTextColor;
+			background: var(--sapShell_Active_Background);
+			border: 1px solid var(--sapButton_Lite_Active_BorderColor);
+			color: var(--sapShell_Active_TextColor);
 		}
 
 		.sapMBtnInner,
@@ -139,19 +147,19 @@
 
 		.sapMBtnInner::after {
 			content: '\e1ef';
-			font-family: 'SAP-icons';
+			font-family: var(--sapContent_IconFontFamily);
 		}
 	}
 
-	// Home Icon
+	/* Home Icon */
 	.sapFShellBarHomeIcon {
 		max-height: 2rem;
 		padding: 0.25rem;
 		overflow-clip-margin: border-box;
 
 		&:hover {
-			background: @sapUiShellHoverBackground;
-			box-shadow: @sapUiContentInteractionShadow;
+			background: var(--sapShell_Hover_Background);
+			box-shadow: var(--sapContent_Interaction_Shadow);
 			border-radius: 0.5rem;
 		}
 
@@ -160,27 +168,27 @@
 		}
 	}
 
-	//Primary Title
+	/* Primary Title */
 	.sapFShellBarPrimaryTitle {
 		color: var(--sapShell_SubBrand_TextColor);
 	}
 
-	//Second Title
+	/* Second Title */
 	.sapFShellBarSecondTitle {
-		font-size: @sapMFontSmallSize;
-		color: @sapUiShellTextColor;
+		font-size: var(--sapFontSmallSize);
+		color: var(--sapShell_TextColor);
 		text-overflow: ellipsis;
 	}
 
-	// Search
+	/* Search */
 	.sapFShellBarSearch {
-		max-width: 35rem; // max width of searchField + button width
+		max-width: 35rem; /* max width of searchField + button width */
 
 		.sapMSF {
 			max-width: 35rem;
 		}
 
-		// Reflection: styles overwritten
+		/* Reflection: styles overwritten */
 		.sapMBtn:not(.sapFShellBarSearchCancelButton) {
 			width: 1.75rem;
 			height: 1.75rem;
@@ -193,10 +201,12 @@
 			right: 0;
 			top: 0;
 			bottom: 0;
+
 			.sapMBtnInner {
 				min-width: 1.75rem;
 				border-radius: 1.125rem;
-				color: @sapUiButtonEmphasizedTextColor;
+				color: var(--sapButton_Emphasized_TextColor);
+
 				.sapMBtnIcon {
 					width: 1.75rem;
 					height: 1.75rem;
@@ -206,10 +216,10 @@
 		}
 
 		.sapMSFVal + .sapMBtn .sapMBtnInner {
-			background-color: @sapUiButtonEmphasizedBackground;
+			background-color: var(--sapButton_Emphasized_Background);
 
 			.sapMBtnIcon {
-				color: @sapUiButtonEmphasizedTextColor;
+				color: var(--sapButton_Emphasized_TextColor);
 			}
 		}
 	}
@@ -232,12 +242,13 @@
 
 	.sapFShellBarSearchWrap {
 		position: relative;
+
 		.sapMSFF {
-			background: @sapUiFieldBackgroundStyle;
-			background-color: @sapUiShellInteractiveBackground;
-			box-shadow: @sapUiFieldShadow;
+			background: var(--sapField_BackgroundStyle);
+			background-color: var(--sapShell_InteractiveBackground);
+			box-shadow: var(--sapField_Shadow);
 			border: none;
-			color: @sapUiShellInteractiveTextColor;
+			color: var(--sapShell_InteractiveTextColor);
 			border-radius: 1.125rem;
 			height: 2.25rem;
 
@@ -255,19 +266,19 @@
 			}
 
 			.sapMSFB:hover {
-				background: @sapUiShellHoverBackground;
-				box-shadow: @sapUiContentInteractionShadow;
+				background: var(--sapShell_Hover_Background);
+				box-shadow: var(--sapContent_Interaction_Shadow);
 				border-radius: 1.125rem;
 				height: 1.75rem;
-				color: @sapUiShellInteractiveTextColor;
+				color: var(--sapShell_InteractiveTextColor);
 			}
 
 			.sapMSFB:active,
 			.sapMSFB.sapMSFBA {
-				background: @sapUiShellActiveBackground;
-				box-shadow: @sapUiContentSelectedShadow;
+				background: var(--sapShell_Active_Background);
+				box-shadow: var(--sapContent_Selected_Shadow);
 				border-radius: 1.125rem;
-				color: @sapUiShellActiveTextColor;
+				color: var(--sapShell_Active_TextColor);
 			}
 		}
 
@@ -281,28 +292,30 @@
 		}
 
 		.sapMSF:not(.sapMSFDisabled):hover .sapMSFF {
-			background-color: @sapUiShellHoverBackground;
-			box-shadow: @sapUiFieldHoverShadow;
+			background-color: var(--sapShell_Hover_Background);
+			box-shadow: var(--sapField_Hover_Shadow);
 		}
 
 		.sapMSFI {
-			color: @sapUiFieldPlaceholderTextColor;
+			color: var(--sapField_PlaceholderTextColor);
 			font-weight: italic;
 		}
 
-		// sap.m.Button
-		// Reflection: styles overwritten
+		/* sap.m.Button
+		Reflection: styles overwritten */
 		.sapMBtn:not(.sapFShellBarSearchCancelButton) {
 			height: 2.25rem;
 			line-height: 2.25rem;
 			width: 1.75rem;
-			padding: 0.250rem 0;
+			padding: 0.25rem 0;
 			margin-right: 0.25rem;
+
 			.sapMBtnInner {
 				height: 1.75rem;
 				min-width: 1.75rem;
 				border-radius: 1.125rem;
 			}
+
 			.sapMBtnInner.sapMBtnText {
 				padding-left: 0.625rem;
 				padding-right: 0.625rem;
@@ -317,22 +330,23 @@
 				padding: 0;
 			}
 		}
+
 		.sapMSF {
 			margin-right: 0;
 		}
 	}
 }
 
-// Overriding styles comming from other controls
-html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
+/* Overriding styles comming from other controls */
+html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator)::before {
 	border-radius: 1.125rem;
 }
 
-html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
+html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator)::before {
 	border-radius: 0.375rem;
 }
 
-// Resets of sizes for "Compact" mode - controls should remain in cozy mode
+/* Resets of sizes for "Compact" mode - controls should remain in cozy mode */
 .alwaysCozyOverrideByParent(@controlClass) {
 	.sapUiSizeCompact {
 		.@{controlClass} {
@@ -343,17 +357,17 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 				height: 3.25rem;
 			}
 
-			// Reflection: styles overwritten
-			// sap.m.MegaMenu
+			/* Reflection: styles overwritten
+			sap.m.MegaMenu */
 			.sapFSHMegaMenu {
 				height: 2.75rem;
 			}
 
-			// Reflection: styles overwritten
-			// sap.m.Button
+			/* Reflection: styles overwritten
+			sap.m.Button */
 			.sapMBtn {
 				height: 2.75rem;
-				padding: 0.250rem 0;
+				padding: 0.25rem 0;
 			}
 
 			.sapMBtnInner {
@@ -378,14 +392,17 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 				margin: 0;
 				padding: 0;
 			}
+
 			.sapMBtnIconLeft + .sapMBtnIconLeft {
 				left: 0;
 			}
+
 			.sapMBtnText {
 				.sapMBtnIconLeft + .sapMBtnIconLeft {
 					left: 2.875rem;
 				}
 			}
+
 			.sapMBtnInner > img {
 				width: 2.5rem;
 				margin-top: 0.2rem;
@@ -393,31 +410,35 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 			}
 
 		  	html.sap-desktop & .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed, .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
-				background-color: @sapUiShellActiveBackground;
+				background-color: var(--sapShell_Active_Background);
 			}
 
-			// sap.m.MenuButton
-			// Reflection: styles overwritten
+			/* sap.m.MenuButton
+			Reflection: styles overwritten */
 			.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
-				height: 38px; //ie does not accept rem for height in pseudo elements, but it works with px when you zoom
+				height: 2.375rem;
 				line-height: 2.2rem;
 				padding-right: 0.75rem;
 				padding-left: 0.5625rem;
 			}
+
 			.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner:not(.sapMBtnText) {
 				padding-right: 1.625rem;
 			}
+
 			.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner {
 				padding-right: 2rem;
 			}
+
 			.sapMMenuBtn .sapMBtnIconFirst .sapMBtnIcon {
 				padding-right: 0.75rem;
 			}
 
-			// Reflection: styles overwritten
-			// sap.m.SearchField
+			/* Reflection: styles overwritten
+			sap.m.SearchField */
 			.sapFShellBarSearch {
 				max-width: 35rem;
+
 				.sapMSF {
 					max-width: 35rem;
 				}
@@ -433,9 +454,11 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 					position: absolute;
 					top: 0;
 					bottom: 0;
+
 					.sapMBtnInner {
 						min-width: 1.75rem;
 						border-radius: 1.125rem;
+
 						.sapMBtnIcon {
 							width: 1.75rem;
 							height: 1.75rem;
@@ -458,19 +481,22 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 			}
 
 			.sapFShellBarSearchWrap {
-				// sap.m.Button
-				// Reflection: styles overwritten
+
+				/* sap.m.Button
+				Reflection: styles overwritten */
 				.sapMBtn:not(.sapFShellBarSearchCancelButton) {
 					height: 2.25rem;
 					line-height: 2.25rem;
 					width: 1.75rem;
-					padding: 0.250rem 0;
+					padding: 0.25rem 0;
 					margin-right: 0.25rem;
+
 					.sapMBtnInner {
 						height: 1.75rem;
 						min-width: 1.75rem;
 						border-radius: 1.125rem;
 					}
+
 					.sapMBtnInner.sapMBtnText {
 						padding-left: 0.625rem;
 						padding-right: 0.625rem;
@@ -485,25 +511,31 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 						padding: 0;
 					}
 				}
+
 				.sapMSF {
 					margin-right: 0;
 				}
 			}
+
 			.sapMSF {
 				min-width: 7rem;
 				height: 2.75rem;
 				padding: 0.25rem 0;
+
 				.sapMSFI {
 					height: 2.125rem
 				}
+
 				.sapMSFF {
 					height: 2.25rem;
 					line-height: 2.125rem;
 					padding-left: 0.625rem;
 				}
+
 				.sapMSFR:not(.sapMSFNS) {
 					right: 2.375rem;
 				}
+
 				.sapMSFB {
 					width: 1.75rem;
 					height: 1.75rem;
@@ -515,25 +547,31 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 					right: 0;
 					top: 0;
 				}
+
 				.sapMSFB:hover {
 					height: 1.75rem;
 				}
 			}
-			// sap.m.Select
-			// Reflection: styles overwritten
+
+			/* sap.m.Select
+			Reflection: styles overwritten */
 			.sapMSlt {
 				height: 2.5rem;
+
 				.sapMSltArrow {
 					line-height: 2.5rem;
 					width: 2.5rem;
 				}
+
 				.sapMSltLabel {
 					line-height: 2.375rem;
 					padding: 0 3rem 0 0.625rem;
 				}
+
 				.sapMSelectListItem {
 					line-height: 2.5rem;
 				}
+
 				.sapMSelectListItemBase {
 					height: 2.5rem;
 				}
@@ -551,62 +589,75 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 		.sapFShellBarItem:not(.sapFSHMegaMenu ) .sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem.sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem .sapMBtn {
+
 			.sapMBtnInner::after,
 			.sapMBtnIcon {
 				background: transparent;
-				color: @sapUiShellInteractiveTextColor;
+				color: var(--sapShell_InteractiveTextColor);
 			}
-			.sapMBtnContent
-			{
+
+			.sapMBtnContent {
 				background: transparent;
-				color: @sapUiShellTextColor;
+				color: var(--sapShell_TextColor);
 			}
+
 			&:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnActive {
-				background: @sapUiShellActiveBackground;
-				border-color: @sapUiShellActiveBackground;
+				background: var(--sapShell_Active_Background);
+				border-color: var(--sapShell_Active_Background);
 			}
+
 			&:hover:not(.sapMBtnDisabled) {
-				>span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
+
+				> span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
+
 					&:not(.sapMBtnActive) {
-						background: @sapUiShellHoverBackground;
+						background: var(--sapShell_Hover_Background);
 					}
+
 					&.sapMBtnActive,
 					&.sapMBtnActive .sapMBtnContent,
 					&.sapMBtnActive .sapMBtnContent bdi {
-						background: @sapUiShellActiveBackground;
-						color: @sapUiShellActiveTextColor;
-						border: 1px solid @sapUiButtonLiteActiveBorderColor;
+						background: var(--sapShell_Active_Background);
+						color: var(--sapShell_Active_TextColor);
+						border: 1px solid var(--sapButton_Lite_Active_BorderColor);
 					}
-					&.sapMBtnActive:after,
-					&.sapMBtnActive >.sapMBtnIcon {
-						color: @sapUiShellActiveTextColor;
+
+					&.sapMBtnActive::after,
+					&.sapMBtnActive > .sapMBtnIcon {
+						color: var(--sapShell_Active_TextColor);
 					}
-					&:after,
-					>.sapMBtnIcon {
-						color: @sapUiShellInteractiveTextColor;
+
+					&::after,
+					> .sapMBtnIcon {
+						color: var(--sapShell_InteractiveTextColor);
 					}
-					>.sapMBtnContent,
-					>.sapMBtnContent bdi
+
+					> .sapMBtnContent,
+					> .sapMBtnContent bdi
 					{
-						color: @sapUiShellTextColor;
+						color: var(--sapShell_TextColor);
 					}
-
 				}
+
 				&.sapFShellBarSearchCancelButton:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
+
 					&.sapMBtnActive .sapMBtnContent,
 					&.sapMBtnActive .sapMBtnContent bdi {
 						border: none;
 					}
 				}
+
 				&.sapMToggleBtnPressed {
-					background: @sapUiShellActiveBackground;
-					border-color: @sapUiShellActiveBackground;
+					background: var(--sapShell_Active_Background);
+					border-color: var(--sapShell_Active_Background);
 				}
+
 				&:active {
-					>.sapMBtnContent,
-					>.sapMBtnInner,
-					>.sapMBtnIcon {
-						color: @sapUiShellTextColor;
+
+					> .sapMBtnContent,
+					> .sapMBtnInner,
+					> .sapMBtnIcon {
+						color: var(--sapShell_TextColor);
 					}
 				}
 			}
@@ -617,67 +668,78 @@ html.sap-desktop .sapMOverflowToolbarMenu-CTX .sapFShellBarSearchWrap .sapMBtn:n
 		}
 
 		.sapMBtnBase.sapMBtn.sapFShellBarItem.sapMBarChild:hover {
+
 			.sapMBtnInner.sapMBtnHoverable.sapMFocusable.sapMBtnIconFirst{
-				background: @sapUiShellHoverBackground;
+				background: var(--sapShell_Hover_Background);
 			}
 		}
 
-		//sap.m.Label
+		/* sap.m.Label */
 		.sapMTB > .sapMLabel {
-			color: @sapUiShellTextColor;
+			color: var(--sapShell_TextColor);
 		}
 
-		//sap.m.SearchField
+		/* sap.m.SearchField */
 		.sapMSF {
 
 			&.sapMSFDisabled {
 				opacity: 0.4;
 			}
-
 		}
 
-		// sap.m.Select
+		/* sap.m.Select */
 		.sapMSlt {
 			background-color: transparent;
-			border-color: lighten(@sapUiShellBorderColor,  30);
-			color: @sapUiShellTextColor;
+			border-color: lighten(@sapUiShellBorderColor, 30);
+			color: var(--sapShell_TextColor);
+
 			&.sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
 				background-color: transparent;
-				border-color: lighten(@sapUiShellBorderColor,  30);
-				color: @sapUiShellTextColor;
+				border-color: lighten(@sapUiShellBorderColor, 30);
+				color: var(--sapShell_TextColor);
+
 				.sapMSltArrow {
 					background-color: transparent;
+
 					&:hover {
-						background: @sapUiShellHoverBackground;
+						background: var(--sapShell_Hover_Background);
 					}
 				}
 			}
+
 			&.sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState) {
-				border-color:lighten(@sapUiShellBorderColor,  30);
+				border-color:lighten(@sapUiShellBorderColor, 30);
 			}
+
 			.sapMSltLabel {
-				color: @sapUiShellTextColor;
+				color: var(--sapShell_TextColor);
+
 				&:hover {
-					background-color: @sapUiShellHoverBackground;
-					&>.sapMSltArrow {
-						background: @sapUiShellHoverBackground;
+					background-color: var(--sapShell_Hover_Background);
+
+					& > .sapMSltArrow {
+						background: var(--sapShell_Hover_Background);
 					}
 				}
 			}
+
 			.sapMSltArrow {
 				background-color: transparent;
-				color: @sapUiShellInteractiveTextColor;
+				color: var(--sapShell_InteractiveTextColor);
+
 				&:hover {
-					background: @sapUiShellHoverBackground;
+					background: var(--sapShell_Hover_Background);
 				}
+
 				&:active {
-					background: @sapUiShellActiveBackground;
-					color: @sapUiShellActiveTextColor;
+					background: var(--sapShell_Active_Background);
+					color: var(--sapShell_Active_TextColor);
 				}
 			}
+
 			&.sapMSltDisabled {
 				opacity: 0.4;
 			}
 		}
 	}
-}
+}