@openui5/themelib_sap_horizon 1.132.1 → 1.133.0

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

@@ -6,91 +6,90 @@
 /* IconOnly */
 
 .sapMSlt.sapMSltIconOnly:not(.sapMSltDisabled) {
-	border-color: @sapUiButtonLiteBorderColor;
-	background: @sapUiButtonLiteBackground;
+	border-color: var(--sapButton_Lite_BorderColor);
+	background: var(--sapButton_Lite_Background);
 	border-radius: 0.2rem;
 }
 
 /* IconOnly Hover */
 
 .sapMSlt.sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
-	background: @sapUiFieldHoverBackground;
-    border: none;
+	background: var(--sapField_Hover_Background);
+	border: none;
 
 	&.sapMSltWithIcon {
-        box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth @sapUiFieldActiveBorderColor;
+		box-shadow: inset 0 0 0 var(--sapContent_FocusWidth) var(--sapField_Active_BorderColor);
 	}
 }
 
-/* ------------------------------------------------ */
-/* IconOnly Select in a Bar                                 */
-/* ------------------------------------------------ */
+/* IconOnly Select in a Bar */
+
 .sapMIBar .sapMSltIconOnly:not(.sapMSltDisabled) .sapMSltIcon {
-	color: @sapUiButtonLiteTextColor;
+	color: var(--sapButton_Lite_TextColor);
 }
 
 /*IconOnly Pressed */
 .sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) {
 	background: @sapUiToggleButtonPressedBackground;
-    .sapMSltIcon {
-        color: @sapUiFieldTextColor;;
-    }
+
+	.sapMSltIcon {
+		color: var(--sapField_TextColor);
+	}
 }
 
 .sapMSlt:not(.sapMSltIconOnly) {
-	border-radius: @sapUiFieldBorderCornerRadius;
+	border-radius: var(--sapField_BorderCornerRadius);
 }
 
 .sapMSlt {
-    font-family: @sapFontFamily;
-    font-size: @sapFontSize;
-	height: @sapUiElementHeight;
-    border: none;
-    background-image: linear-gradient(0deg, @sapUiFieldBorderColor 0, @sapUiFieldBorderColor 100%);
-    background-size: 100% @sapUiFieldBorderWidth;
-    background-repeat: repeat-x;
-    background-position: bottom;
-    box-shadow: @sapUiFieldShadow;
+	font-family: var(--sapFontFamily);
+	font-size: @sapFontSize;
+	height: var(--sapElement_Height);
+	border: none;
+	background-image: linear-gradient(0deg, var(--sapField_BorderColor) 0, var(--sapField_BorderColor) 100%);
+	background-size: 100% var(--sapField_BorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+	box-shadow: var(--sapField_Shadow);
 }
 
 .sapUiSizeCompact .sapMSlt {
-	height: @sapUiElementCompactHeight;
+	height: var(--sapElement_Compact_Height);
 }
 
 .sapMSlt > .sapMSltArrow {
 	line-height: 2.313rem;
-    background-color: transparent !important;
+	background-color: transparent !important;
 }
 
 .sapMSlt:not(.sapMSltState).sapMSltPressed > .sapMSltArrow::before {
-	color: @sapUiButtonSelectedTextColor;
+	color: var(--sapButton_Selected_TextColor);
 }
 
 .sapMSlt.sapMSltPressed,
 .sapMSltPressed > .sapMSltArrow {
-	background: @sapUiFieldHoverBackground;
+	background: var(--sapField_Hover_Background);
 }
 
-html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisabled):not(.sapMSltState):before {
+html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisabled):not(.sapMSltState)::before {
 	outline-offset: -2px;
 }
 
-html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisabled).sapMSltState:before {
+html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisabled).sapMSltState::before {
 	outline-offset: -2px;
 }
 
-
 html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabled).sapMSltPressed {
-	outline-color: @sapUiContentContrastFocusColor;
+	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
-	background: @sapUiFieldHoverBackground;
-    border-color: @sapUiFieldHoverBorderColor;
-    box-shadow: @sapUiFieldHoverShadow;
+	background: var(--sapField_Hover_Background);
+	border-color: var(--sapField_Hover_BorderColor);
+	box-shadow: var(--sapField_Hover_Shadow);
 
 	.sapMSltArrow {
-		border-radius: @sapUiFieldBorderCornerRadius;
+		border-radius: var(--sapField_BorderCornerRadius);
 	}
 }
 
@@ -102,7 +101,7 @@ html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabl
 
 .sapMSltIconOnly.sapMSltPressed.sapMSltHoverable:not(.sapMSltState):hover {
 	background: @sapUiToggleButtonPressedHoverBackground;
-	border-color: @sapUiFieldActiveBorderColor;
+	border-color: var(--sapField_Active_BorderColor);
 }
 
 /* value state */
@@ -114,14 +113,14 @@ html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabl
 /* disabled */
 
 .sapMSltDisabled {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .sapMSlt.sapMSltReadonly {
-    border-color: @sapUiFieldReadOnlyBorderColor;
-    background:@sapUiFieldReadOnlyBackgroundStyle;
-    background-color: @sapUiFieldReadOnlyBackground;
-    box-shadow: none;
+	border-color: var(--sapField_ReadOnly_BorderColor);
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--sapField_ReadOnly_Background);
+	box-shadow: none;
 }
 
 div.sapMSltPicker .sapMSltPickerValueState {
@@ -133,228 +132,231 @@ div.sapMSltPicker .sapMSltPickerValueState {
 }
 
 .sapMSltMinWidth {
-    min-width: 2.75rem;
+	min-width: 2.75rem;
 }
 
 .sapUiSizeCompact .sapMSltMinWidth {
-    min-width: 2rem;
+	min-width: 2rem;
 }
 
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):hover {
-    border:none;
-    box-shadow: @sapUiFieldHoverShadow;
+	border:none;
+	box-shadow: var(--sapField_Hover_Shadow);
 	border: none;
-    background-image: linear-gradient(0deg, @sapUiFieldBorderColor 0, @sapUiFieldBorderColor 100%);
-    background-size: 100% @sapUiFieldBorderWidth;
-    background-repeat: repeat-x;
-    background-position: bottom;
+	background-image: linear-gradient(0deg, var(--sapField_BorderColor) 0, var(--sapField_BorderColor) 100%);
+	background-size: 100% var(--sapField_BorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
 }
 
 .sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState),
 .sapMSlt.sapMSltFocused:not(.sapMSltDisabled):not(.sapMSltState) {
-	background: @sapUiFieldBackground;
-    border: none;
-    &:not(.sapMSltExpanded) {
-        box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth @sapUiFieldActiveBorderColor;
-    }
+	&:not(.sapMSltReadonly) {
+		background: var(--sapField_Background);
+	}
+	border: none;
+
+	&:not(.sapMSltExpanded) {
+		box-shadow: inset 0 0 0 var(--sapContent_FocusWidth) var(--sapField_Active_BorderColor);
+	}
 }
 
 .sapMSltHoverable:not(.sapMSltState):not(.sapMSltIconOnly):active {
-    border:none;
+	border:none;
 }
 
 .sapMSltArrow {
-    width: 2.25rem;
-    height: 2.25rem;
+	width: 2.25rem;
+	height: 2.25rem;
 
 	&:hover {
-		box-shadow: @sapUiFieldHoverShadow;
+		box-shadow: var(--sapField_Hover_Shadow);
 	}
 }
 
 .sapUiSizeCompact .sapMSltArrow {
-    width: 2rem;
-    height: 1.625rem;
+	width: 2rem;
+	height: 1.625rem;
 }
 
 .sapMSltPressed >.sapMSltArrow,
 .sapMSlt:hover > .sapMSltArrow {
-    background-color: @sapUiButtonActiveBackground;
-    overflow: none;
-    border-radius: 0.125rem;
+	background-color: var(--sapButton_Active_Background);
+	overflow: none;
+	border-radius: 0.125rem;
 }
 
 
 /* focus */
 html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisabled) {
-    &:before {
-        box-shadow: inset 0px 0px 0px 2px @sapUiFieldFocusBorderColor;
-    }
+
+	&:before {
+		box-shadow: inset 0 0 0 2px var(--sapField_Focus_BorderColor);
+	}
 }
 
-// =====================================
-// Input Information state
-// =====================================
+/* Input Information state */
+
 .sapMSltInformation {
-    border: none;
-    background-image: linear-gradient(0deg, @sapUiFieldInformationColor 0, @sapUiFieldInformationColor 100%);
-    background-size: 100% @sapUiFieldInformationBorderWidth;
-    background-repeat: repeat-x;
-    background-position: bottom;
-    background-color: @sapUiFieldInformationBackground;
-    box-shadow: @sapUiFieldInformationShadow;
+	border: none;
+	background-image: linear-gradient(0deg, var(--sapField_InformationColor) 0, var(--sapField_InformationColor) 100%);
+	background-size: 100% var(--sapField_InformationBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+	background-color: var(--sapField_InformationBackground);
+	box-shadow: var(--sapField_InformationShadow);
 }
 
 .sapMSltInformation.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
-    border-color: @sapUiFieldInformationColor;
-    box-shadow: @sapUiFieldHoverInformationShadow;
-    background-color: @sapUiFieldHoverBackground;
+	border-color: var(--sapField_InformationColor);
+	box-shadow: var(--sapField_Hover_InformationShadow);
+	background-color: var(--sapField_Hover_Background);
 
-    &:not(.sapMSltFocused) {
-        box-shadow: @sapUiFieldHoverInformationShadow; // NEW Parameter
-    }
+	&:not(.sapMSltFocused) {
+		box-shadow: var(--sapField_Hover_InformationShadow); /* NEW Parameter */
+	}
 }
 
 .sapMSltHoverable.sapMSltInformation:not(.sapMSltIconOnly):active,
 .sapMSltFocused.sapMSltInformation {
-    border-bottom: none;
-    box-shadow: inset 0px 0px 0px 2px @sapUiFieldInformationColor;
-    background-color: @sapUiFieldFocusBackground;
+	border-bottom: none;
+	box-shadow: inset 0 0 0 2px var(--sapField_InformationColor);
+	background-color: var(--sapField_Focus_Background);
 }
 
 .sapMSltInformation.sapMSltPressed {
-    .sapMSltArrow {
-        color: @sapUiButtonSelectedTextColor;
-        box-shadow: @sapUiFieldHoverInformationShadow;
-    }
-    > .sapMSltArrow::before {
-        color: inherit;
-    }
+	.sapMSltArrow {
+		color: var(--sapButton_Selected_TextColor);
+		box-shadow: var(--sapField_Hover_InformationShadow);
+	}
+	> .sapMSltArrow::before {
+		color: inherit;
+	}
 }
 
-// =====================================
-// Input Success state
-// =====================================
+/* Input Success state */
 
 .sapMSltSuccess {
-    border: none;
-    background-image: linear-gradient(0deg, @sapUiFieldSuccessColor 0, @sapUiFieldSuccessColor 100%);
-    background-size: 100% @sapUiFieldSuccessBorderWidth;
-    background-repeat: repeat-x;
-    background-position: bottom;
-    background-color: @sapUiFieldSuccessBackground;
-    box-shadow: @sapUiFieldSuccessShadow;
+	border: none;
+	background-image: linear-gradient(0deg, var(--sapField_SuccessColor) 0, var(--sapField_SuccessColor) 100%);
+	background-size: 100% var(--sapField_SuccessBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+	background-color: var(--sapField_SuccessBackground);
+	box-shadow: var(--sapField_SuccessShadow);
 }
 
-.sapMSltSuccess.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover  {
-    border-color: @sapUiFieldSuccessColor;
-    box-shadow: @sapUiFieldHoverSuccessShadow;
-    background-color: @sapUiFieldHoverBackground;
+.sapMSltSuccess.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
+	border-color: var(--sapField_SuccessColor);
+	box-shadow: var(--sapField_Hover_SuccessShadow);
+	background-color: var(--sapField_Hover_Background);
 
-    &:not(.sapMSltFocused) {
-        box-shadow: @sapUiFieldHoverSuccessShadow; // New Parameter
-    }
+	&:not(.sapMSltFocused) {
+		box-shadow: var(--sapField_Hover_SuccessShadow); /* New Parameter */
+	}
 }
 
-// Field Success Focus - Experimental
+/* Field Success Focus - Experimental */
 .sapMSltHoverable.sapMSltSuccess:not(.sapMSltIconOnly):active,
 .sapMSltFocused.sapMSltSuccess {
-    border-bottom: none;
-    box-shadow: inset 0px 0px 0px 2px @sapUiFieldSuccessColor;
-    border-radius: @sapUiFieldBorderCornerRadius;
-    background-color: @sapUiFieldFocusBackground;
+	border-bottom: none;
+	box-shadow: inset 0px 0px 0px 2px var(--sapField_SuccessColor);
+	border-radius: var(--sapField_BorderCornerRadius);
+	background-color: var(--sapField_Focus_Background);
 }
 
 .sapMSltSuccess.sapMSltPressed {
-    .sapMSltArrow {
-        color: @sapUiButtonAcceptSelectedTextColor;
-        box-shadow: @sapUiFieldHoverSuccessShadow;
-    }
-    > .sapMSltArrow::before {
-        color: inherit;
-    }
+
+	.sapMSltArrow {
+		color: var(--sapButton_Accept_Selected_TextColor);
+		box-shadow: var(--sapField_Hover_SuccessShadow);
+	}
+
+	> .sapMSltArrow::before {
+		color: inherit;
+	}
 }
 
-// =====================================
-// Input Warning state
-// =====================================
+/* Input Warning state */
 
 .sapMSltWarning {
-    border: none;
-    background-image: linear-gradient(0deg, @sapUiFieldWarningColor 0, @sapUiFieldWarningColor 100%);
-    background-size: 100% @sapUiFieldWarningBorderWidth;
-    background-repeat: repeat-x;
-    background-position: bottom;
-    background-color: @sapUiFieldWarningBackground;
-    box-shadow: @sapUiFieldWarningShadow;
+	border: none;
+	background-image: linear-gradient(0deg, var(--sapField_WarningColor) 0, var(--sapField_WarningColor) 100%);
+	background-size: 100% var(--sapField_WarningBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+	background-color: var(--sapField_WarningBackground);
+	box-shadow: var(--sapField_WarningShadow);
 }
 
 .sapMSltWarning.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
-    border-color: @sapUiFieldWarningColor;
-    box-shadow: @sapUiFieldHoverWarningShadow;
-    background-color: @sapUiFieldHoverBackground;
+	border-color: var(--sapField_WarningColor);
+	box-shadow: var(--sapField_Hover_WarningShadow);
+	background-color: var(--sapField_Hover_Background);
 
-    &:not(.sapMSltFocused) {
-        box-shadow: @sapUiFieldHoverWarningShadow; // NEW Parameter
-    }
+	&:not(.sapMSltFocused) {
+		box-shadow: var(--sapField_Hover_WarningShadow); /* NEW Parameter */
+	}
 }
 
-// Field Warning Focus - Experimental
+/* Field Warning Focus - Experimental */
 .sapMSltHoverable.sapMSltWarning:not(.sapMSltIconOnly):active,
 .sapMSltFocused.sapMSltWarning {
-    border-bottom: none;
-    box-shadow: inset 0px 0px 0px 2px @sapUiFieldWarningColor; // Experimental
-    background-color: @sapUiFieldFocusBackground;
+	border-bottom: none;
+	box-shadow: inset 0 0 0 2px var(--sapField_WarningColor); /* Experimental */
+	background-color: var(--sapField_Focus_Background);
 }
 
 .sapMSltWarning.sapMSltPressed {
-    .sapMSltArrow {
-        color: @sapUiButtonAttentionSelectedTextColor;
-        box-shadow: @sapUiFieldHoverWarningShadow;
-    }
-    > .sapMSltArrow::before {
-        color: inherit;
-    }
+
+	.sapMSltArrow {
+		color: var(--sapButton_Attention_Selected_TextColor);
+		box-shadow: var(--sapField_Hover_WarningShadow);
+	}
+
+	> .sapMSltArrow::before {
+		color: inherit;
+	}
 }
 
-// =====================================
 // Input Error state
-// =====================================
 
 .sapMSltError {
-    border: none;
-    background-image: linear-gradient(0deg, @sapUiFieldInvalidColor 0, @sapUiFieldInvalidColor 100%);
-    background-size: 100% @sapField_InvalidBorderWidth;
-    background-repeat: repeat-x;
-    background-position: bottom;
-    background-color: @sapUiFieldInvalidBackgroundStyle;
-    box-shadow: @sapUiFieldInvalidShadow;
+	border: none;
+	background-image: linear-gradient(0deg, var(--sapField_InvalidColor) 0, var(--sapField_InvalidColor) 100%);
+	background-size: 100% var(--sapField_InvalidBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+	background-color: var(--sapField_InvalidBackgroundStyle);
+	box-shadow: var(--sapField_InvalidShadow);
 }
 
 .sapMSltError.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
-    border-color: @sapUiFieldInvalidColor;
-    box-shadow: @sapUiFieldHoverInvalidShadow;
-    background-color: @sapUiFieldHoverBackground;
+	border-color: var(--sapField_InvalidColor);
+	box-shadow: var(--sapField_Hover_InvalidShadow);
+	background-color: var(--sapField_Hover_Background);
 
-    &:not(.sapMSltFocused) {
-        box-shadow: @sapUiFieldHoverInvalidShadow; // NEW Parameter
-    }
+	&:not(.sapMSltFocused) {
+		box-shadow: var(--sapField_Hover_InvalidShadow); /* NEW Parameter */
+	}
 }
 
-// Field Error Focus - Experimental
+/* Field Error Focus - Experimental */
 .sapMSltHoverable.sapMSltError:not(.sapMSltIconOnly):active,
 .sapMSltFocused.sapMSltError {
-    border-bottom: none;
-    box-shadow: inset 0px 0px 0px 2px @sapUiFieldInvalidColor;
-    background-color: @sapUiFieldFocusBackground;
+	border-bottom: none;
+	box-shadow: inset 0 0 0 2px var(--sapField_InvalidColor);
+	background-color: var(--sapField_Focus_Background);
 }
 
 .sapMSltError.sapMSltPressed {
-    .sapMSltArrow {
-        color: @sapUiFieldInvalidColor;
-        box-shadow: @sapUiFieldHoverInvalidShadow;
-    }
-    > .sapMSltArrow::before {
-        color: inherit;
-    }
+
+	.sapMSltArrow {
+		color: var(--sapField_InvalidColor);
+		box-shadow: var(--sapField_Hover_InvalidShadow);
+	}
+
+	> .sapMSltArrow::before {
+		color: inherit;
+	}
 }

package/src/sap/m/themes/sap_horizon_dark/SlideTile.less

@@ -3,23 +3,24 @@
 /* Evening Horizon theme            */
 /* ================================ */
 
-.sapMST:active{
-	background-color: @sapTile_Active_Background;
-	.sapMSTFocusDiv{
-		border: 1px solid @sapTile_Interactive_BorderColor;
-		border-radius:  @sapTile_BorderCornerRadius;
+.sapMST:active {
+	background-color: var(--sapTile_Active_Background);
+
+	.sapMSTFocusDiv {
+		border: 1px solid var(--sapTile_Interactive_BorderColor);
+		border-radius: var(--sapTile_BorderCornerRadius);
 		inset: 0;
 	}
 }
 
 .sapMST.sapMSTScopeActions.sapMSTDarkBackground .sapMSTMoreIcon {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 }
 
-/* This part is used to achieve dotted white black interlace border*/
-.sapMST:focus .sapMSTFocusDiv:after,
-.sapMST:active .sapMSTFocusDiv:after {
-	content: "";
+/* This part is used to achieve dotted white black interlace border */
+.sapMST:focus .sapMSTFocusDiv::after,
+.sapMST:active .sapMSTFocusDiv::after {
+	content: '';
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -27,27 +28,27 @@
 	right: 0;
 	border-radius: 0.25rem;
 	margin: -1px;
-	border: 1px dotted @sapUiContentFocusColor;
+	border: 1px dotted var(--sapContent_FocusColor);
 }
 
-/* Bulleted indicator of multiple tiles*/
+/* Bulleted indicator of multiple tiles */
 .sapMSTBulleted .sapMSTIndicator {
-	border: solid 0.0625rem @sapTile_OverlayForegroundColor;
+	border: solid 0.0625rem var(--sapTile_OverlayForegroundColor);
 	opacity: 0.6;
-	box-shadow : 0 0 0.125rem @sapContent_ShadowColor;
+	box-shadow: 0 0 0.125rem var(--sapContent_ShadowColor);
 	margin: 0 0.094rem;
 }
 
 .sapMSTBulleted .sapMSTIndicator.sapMSTActive {
-	background: @sapTile_OverlayForegroundColor;
-	box-shadow: 0 0 0.063rem @sapContent_ShadowColor;
+	background: var(--sapTile_OverlayForegroundColor);
+	box-shadow: 0 0 0.063rem var(--sapContent_ShadowColor);
 }
 
 .sapMST {
-	border-radius: @sapTile_BorderCornerRadius;
-	border-color: @sapTile_BorderColor;
-	box-shadow: @sapContent_Shadow0;
-	background: @sapTile_Background;
+	border-radius: var(--sapTile_BorderCornerRadius);
+	border-color: var(--sapTile_BorderColor);
+	box-shadow: var(--sapContent_Shadow0);
+	background: var(--sapTile_Background);
 	overflow: hidden;
 }
 
@@ -60,50 +61,54 @@
 }
 
 .sapMST .sapMSTIconDisplayArea {
-	background-color: @sapBlockLayer_Background;
+	background-color: var(--sapBlockLayer_Background);
 }
-.sapMST.sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea{
+
+.sapMST.sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea {
 	opacity: 0.8;
 }
 
 .sapMST.sapMSTIconPressed .sapMSTIconClickTapArea:hover ~.sapMSTIconDisplayArea {
-	background-color: @sapUiBrand;
+	background-color: var(--sapBrandColor);
 }
 
 .sapMST .sapMSTIconNestedArea {
-	text-shadow: 0px 1px @sapUiButtonEmphasizedTextShadow;
+	text-shadow: 0 1px var(--sapButton_Emphasized_TextShadow);
 }
 
 .sapMST:focus .sapMSTFocusDiv {
-	border-radius: @sapTile_BorderCornerRadius;
+	border-radius: var(--sapTile_BorderCornerRadius);
 	box-shadow: none;
 	inset: 0;
 }
 
-.sapMST:focus .sapMSTFocusDiv:after,
-.sapMST:active .sapMSTFocusDiv:after {
+.sapMST:focus .sapMSTFocusDiv::after,
+.sapMST:active .sapMSTFocusDiv::after {
 	border: none;
-	border-radius: @sapElement_BorderCornerRadius;
+	border-radius: var(--sapElement_BorderCornerRadius);
 }
 
 .sapMST:hover {
-	box-shadow: @sapContent_Shadow2 !important;
+	box-shadow: var(--sapContent_Shadow2) !important;
 
 	.sapMGT:hover {
 		box-shadow: none !important;
 		opacity: 0.9;
 	}
-
 }
 
-.sapMST:active{
-	.sapMGT{
+.sapMST:active {
+
+	.sapMGT {
 		opacity: 0.8;
 	}
 }
 
-.sapMST{
-	.sapMGT.OneByOne,.sapMGT.TwoByOne{
+.sapMST {
+
+	.sapMGT.OneByOne,
+	.sapMGT.TwoByOne {
+
 		.sapMTileCnt.News {
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
@@ -111,9 +116,10 @@
 	}
 }
 
-.sapMST:not(.sapMSTPauseIcon) .sapMSTIconNestedArea{
+.sapMST:not(.sapMSTPauseIcon) .sapMSTIconNestedArea {
+
 	.sapUiIcon {
-		top: 0rem;
+		top: 0;
 		left: 0.15rem;
 	}
 }