@openui5/sap.m 1.130.0 → 1.131.0

package/src/sap/m/themes/base/GenericTile.less

@@ -10,55 +10,57 @@
 	position: relative;
 	outline: none;
 	box-sizing: border-box;
-	background-position: 0px;
-	background: @sapUiTileBackground;
-	border: 1px solid @sapUiTileBorderColor;
+	background-position: 0;
+	background: var(--sapTile_Background);
+	border: 1px solid var(--sapTile_BorderColor);
 	box-shadow: @sapUiShadowLevel0;
 	vertical-align: top;
+
 		& .sapMNCValue {
 				justify-content: flex-start;
 		}
+
 		& .sapMNCValue.WithoutMargin {
 			justify-content: flex-start;
-		}	
+		}
 	}
 
 .sapMGTCriticalBorder {
-    height: 100%;
-    width: 0.25rem;
-    position: absolute;
-    left: -1px;
-    top: -1px;
-    border-radius: 0.25rem 0 0 0.25rem;
-    border: 1px solid;
+	height: 100%;
+	width: 0.25rem;
+	position: absolute;
+	left: -1px;
+	top: -1px;
+	border-radius: 0.25rem 0 0 0.25rem;
+	border: 1px solid;
 }
 
 .sapMGTCriticalBorder.Neutral {
-	background-color: @sapUiNeutralText;
-	border-color:  @sapUiNeutralText;
+	background-color: var(--sapNeutralTextColor);
+	border-color: var(--sapNeutralTextColor);
 }
 
 .sapMGTCriticalBorder.Good {
-	background-color: @sapUiPositiveText;
-	border-color:  @sapUiPositiveText;
+	background-color: var(--sapPositiveTextColor);
+	border-color: var(--sapPositiveTextColor);
 }
 
 .sapMGTCriticalBorder.Critical {
-	background-color: @sapUiCriticalText;
-	border-color:  @sapUiCriticalText;
+	background-color: var(--sapCriticalTextColor);
+	border-color: var(--sapCriticalTextColor);
 }
 
 .sapMGTCriticalBorder.Error {
-	background-color: @sapUiNegativeText;
-	border-color:  @sapUiNegativeText;
+	background-color: var(--sapNegativeTextColor);
+	border-color: var(--sapNegativeTextColor);
 }
 
 .sapMGTContentPlaceholder {
 	outline: none;
 	width: 300px;
-    height: 100px;
-    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.10);
-    border-radius: 4px;
+	height: 100px;
+	box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.10);
+	border-radius: 4px;
 }
 
 .sapMGTContentPlaceholder:focus::before {
@@ -69,12 +71,12 @@
 	bottom: 1px;
 	right: 1px;
 	top: 1px;
-	border: 1px dotted @sapUiContentFocusColor;
+	border: 1px dotted var(--sapContent_FocusColor);
 	pointer-events: none;
 }
 
-
-.sapMGTContentShimmerPlaceholderItem, .sapMTileCntContentShimmerPlaceholderItem{
+.sapMGTContentShimmerPlaceholderItem,
+.sapMTileCntContentShimmerPlaceholderItem {
 	padding: 1rem 1rem 0 1rem;
 	box-sizing: border-box;
 	display: flex;
@@ -82,18 +84,20 @@
 	align-items: center;
 	flex: 1 1 auto;
 
-	&.sapMGTContentShimmerPlaceholderWithChart.sapMGTContentShimmerPlaceholderWithDescription, .sapMTileCntContentShimmerPlaceholderWithDescription {
+	&.sapMGTContentShimmerPlaceholderWithChart.sapMGTContentShimmerPlaceholderWithDescription,
+	.sapMTileCntContentShimmerPlaceholderWithDescription {
 		height: 6rem;
 	}
 
 	.sapMGTContentShimmerPlaceholderImg {
-		margin: 0rem 0.75rem 0rem 0rem;
+		margin: 0 0.75rem 0 0;
 		height: 2rem;
 		width: 2rem;
 		display: inline-block;
 	}
 
-	.sapMGTContentShimmerPlaceholderRows, .sapMTileCntContentShimmerPlaceholderRows {
+	.sapMGTContentShimmerPlaceholderRows,
+	.sapMTileCntContentShimmerPlaceholderRows {
 		flex-grow: 1;
 
 		.sapMGTContentShimmerPlaceholderItemText {
@@ -101,25 +105,31 @@
 			margin-bottom: 0.5rem;
 			width: 80%;
 		}
-		.sapMGTContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemTextFooter {
+
+		.sapMGTContentShimmerPlaceholderItemTextFooter,
+		.sapMTileCntContentShimmerPlaceholderItemTextFooter {
 			height: 0.5rem;
 			margin-bottom: 0.5rem;
 			margin-top: 0.5rem;
 			width: 80%;
 			top: 3rem;
 		}
-		.sapMGTContentShimmerPlaceholderItemBox, .sapMTileCntContentShimmerPlaceholderItemBox{
+
+		.sapMGTContentShimmerPlaceholderItemBox,
+		.sapMTileCntContentShimmerPlaceholderItemBox {
 			height: 2rem;
 			margin-bottom: 0.5rem;
 			margin-top: 0.5rem;
 			width: 20%;
 			top: 3rem;
 		}
+
 		.sapMGTContentShimmerPlaceholderItemBoxSmall {
 			height: 3.75rem;
 			margin-bottom: 0.5rem;
 			margin-top: 0.5rem;
 		}
+
 		.sapMGTContentShimmerPlaceholderItemHeader {
 			height: 1rem;
 			margin-bottom: 0.5rem;
@@ -127,11 +137,15 @@
 		}
 	}
 }
-.sapMGT.OneByOne.sapMTileSmallPhone.sapMGTStateLoading{
+
+.sapMGT.OneByOne.sapMTileSmallPhone.sapMGTStateLoading {
+
 	.sapMGTContentShimmerPlaceholderItem {
+
 		.sapMGTContentShimmerPlaceholderItemHeader {
 			width: 7.25rem;
 		}
+
 		.sapMGTContentShimmerPlaceholderItemText {
 			width: 5.875rem;
 		}
@@ -151,7 +165,7 @@
 	}
 
 	.sapMGTContentShimmerPlaceholderImg {
-		margin: 0rem 0.75rem 0rem 0rem;
+		margin: 0 0.75rem 0 0;
 		height: 2rem;
 		width: 2rem;
 		display: inline-block;
@@ -159,6 +173,7 @@
 
 	.sapMGTContentShimmerPlaceholderRowsOneByOne {
 		flex-grow: 1;
+
 		.sapMGTContentShimmerPlaceholderIconOneByOne {
 			height: 2rem;
 			width: 2rem;
@@ -166,6 +181,7 @@
 			margin-bottom: 0.5rem;
 			margin-top: 0.5rem;
 		}
+
 		.sapMGTContentShimmerPlaceholderItemTextOneByOne {
 			height: 0.5rem;
 			margin-bottom: 0.5rem;
@@ -182,7 +198,7 @@
 	flex: 1 1 auto;
 
 	.sapMGTContentShimmerPlaceholderWithDescriptionTwoByHalfIconLoaded {
-		padding: 0rem;
+		padding: 0;
 		flex: none;
 	}
 
@@ -191,7 +207,7 @@
 	}
 
 	.sapMGTContentShimmerPlaceholderImg {
-		margin: 0rem 0.75rem 0rem 0rem;
+		margin: 0 0.75rem 0 0;
 		height: 2rem;
 		width: 2rem;
 		display: inline-block;
@@ -200,13 +216,15 @@
 	.sapMGTContentShimmerPlaceholderRowsTwoByHalf {
 		flex-grow: 1;
 		display: flex;
-    	align-items: center;
+		align-items: center;
+
 		.sapMGTContentShimmerPlaceholderIconTwoByHalf {
 			height: 2rem;
 			width: 2rem;
 			margin-bottom: 0.5rem;
 			margin-top: 0.5rem;
 		}
+
 		.sapMGTContentShimmerPlaceholderItemTextTwoByHalf {
 			height: 0.5rem;
 			width: 80%;
@@ -216,59 +234,62 @@
 }
 
 .sapMGTContentShimmerPlaceholderItemTwoByHalf.sapMGTContentShimmerPlaceholderWithDescriptionTwoByHalfIconLoaded {
-	padding: 0rem;
+	padding: 0;
 	flex: none;
 }
 
-.sapMGTLoadingShimmer, .sapMTileCntLoadingShimmer{
-.sapMGTLoadingShimmerMixin();
+.sapMGTLoadingShimmer,
+.sapMTileCntLoadingShimmer{
+	.sapMGTLoadingShimmerMixin();
 }
 
 .sapMGTLoadingShimmerMixin() {
-background-color: @sapUiContentPlaceholderloadingBackground;
-background-image: @sapUiContentPlaceholderloadingGradient;
-background-repeat: no-repeat;
-background-size: 800px 144px;
-position: relative;
-border-radius: 0.25rem;
+	background-color: var(--sapContent_Placeholderloading_Background);
+	background-image: var(--sapContent_Placeholderloading_Gradient);
+	background-repeat: no-repeat;
+	background-size: 800px 144px;
+	position: relative;
+	border-radius: 0.25rem;
 
-[data-sap-ui-animation-mode="full"] & {
-	animation-duration: 2.5s;
-	animation-fill-mode: forwards;
-	animation-iteration-count: infinite;
-	animation-name: placeHolderShimmer;
-	animation-timing-function: linear;
-}
+	[data-sap-ui-animation-mode='full'] & {
+		animation-duration: 2.5s;
+		animation-fill-mode: forwards;
+		animation-iteration-count: infinite;
+		animation-name: placeHolderShimmer;
+		animation-timing-function: linear;
+	}
 
-[data-sap-ui-animation-mode="basic"] &,
-[data-sap-ui-animation-mode="minimal"] & {
-	animation-duration: 8s;
-	animation-fill-mode: forwards;
-	animation-iteration-count: infinite;
-	animation-name: placeHolderShimmer;
-	animation-timing-function: linear;
-}
+	[data-sap-ui-animation-mode='basic'] &,
+	[data-sap-ui-animation-mode='minimal'] & {
+		animation-duration: 8s;
+		animation-fill-mode: forwards;
+		animation-iteration-count: infinite;
+		animation-name: placeHolderShimmer;
+		animation-timing-function: linear;
+	}
 }
 
 @keyframes placeHolderShimmer {
-0% {
-	background-position: -468px 0;
-}
 
-100% {
-	background-position: 468px 0;
-}
-}
+	0% {
+		background-position: -468px 0;
+	}
 
-@keyframes placeHolderShimmer{
-    0% {
-      background-position: -468px 0;
-    }
-    100% {
-      background-position: 468px 0;
-    }
+	100% {
+		background-position: 468px 0;
+	}
 }
 
+@keyframes placeHolderShimmer {
+
+	0% {
+		background-position: -468px 0;
+	}
+
+	100% {
+		background-position: 468px 0;
+	}
+}
 
 .sapMGTBackgroundImage {
 	background-clip: padding-box;
@@ -312,19 +333,25 @@ border-radius: 0.25rem;
 .sapMGT.sapMGTGridContainerOneRemGap.TwoByHalf {
 	width: 23rem;
 	height: 5rem;
+
 	.sapMGTHdrContent.TwoByHalf {
 		line-height: normal;
 	}
+
 	.sapMGTContent {
 		height: 2.6875rem;
+
 		.sapMTileCnt {
+
 			.sapMTileCntContent {
 				margin-top: 0.125rem;
+
 				.sapMImageContentImageIcon {
 					font-size: 1.625rem;
 					max-height: 1.625rem;
 				}
 			}
+
 			.sapMTileCntFtrTxt {
 				bottom: 0.75rem;
 			}
@@ -334,16 +361,21 @@ border-radius: 0.25rem;
 
 .sapMGT.sapMGTGridContainerOneRemGap.OneByHalf {
 	height: 5rem;
+
 	.sapMGTContent {
 		height: 2.6875rem;
+
 		.sapMTileCnt {
+
 			.sapMTileCntContent {
 				margin-top: 0.125rem;
+
 				.sapMImageContentImageIcon {
 					font-size: 1.625rem;
 					max-height: 1.625rem;
 				}
 			}
+
 			.sapMTileCntFtrTxt {
 				bottom: 0.75rem;
 			}
@@ -351,18 +383,22 @@ border-radius: 0.25rem;
 	}
 }
 
-.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.TwoByOne{
+.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.TwoByOne {
 	width: 19.5rem;
 }
 
-.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.TwoByHalf{
+.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.TwoByHalf {
 	width: 19rem;
 	height: 4.125rem;
+
 	.sapMGTContent {
 		height: 2.375rem;
+
 		.sapMTileCnt {
+
 			.sapMTileCntContent {
 				margin-top: 0.25rem;
+
 				.sapMImageContentImageIcon {
 					max-height: 1.625rem;
 				}
@@ -371,11 +407,13 @@ border-radius: 0.25rem;
 	}
 }
 
-.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.OneByHalf{
+.sapMTileSmallPhone.sapMGT.sapMGTGridContainerOneRemGap.OneByHalf {
 	width: 9.25rem;
 	height: 4.125rem;
+
 	.sapMGTContent {
 		height: 2.375rem;
+
 		.sapMTileCntContent {
 			margin-top: 0.25rem;
 		}
@@ -383,190 +421,246 @@ border-radius: 0.25rem;
 }
 
 .tileWithAppInfo {
+
 	.sapMGTTInfoContainer {
 		display: flex;
 		align-items: flex-end;
 		justify-content: flex-end;
 		min-width: 0;
 	}
+
 	.sapMGTTInfo {
 		padding: 0.125rem 1rem 0.125rem 0.25rem;
 		text-transform: uppercase;
 		margin-bottom: 0.5rem;
 		border-radius: 0.125rem 0 0 0.125rem;
-		background-color: @sapInfobar_NonInteractive_Background;
+		background-color: var(--sapInfobar_NonInteractive_Background);
 		width: fit-content;
+
 		.sapMText{
-			font-size: @sapMFontSmallSize ;
+			font-size: var(--sapFontSmallSize) ;
 			text-align: right !important;
 		}
+
 		.sapMGTSystemInfoText{
 			display: flex;
 			justify-content: flex-end;
+
 			.sapMText {
-				color: @sapUiTileTitleTextColor;
+				color: var(--sapTile_TitleTextColor);
 				padding-left: 0.15rem;
 			}
 		}
+
 		.sapMGTAppAndSystemInfoDivider{
 			height: 0.25rem;
 		}
+
 		.sapMGTAppShortcutText {
 			display: flex;
 			justify-content: flex-end;
+
 			.sapMText {
-				color: @sapUiTileTextColor;
+				color: var(--sapTile_TextColor);
 			}
 		}
 	}
 }
 
 .OneByOne.tileWithAppInfo {
-	.sapMGTTInfo{
+
+	.sapMGTTInfo {
 		margin-bottom: 0.2rem;
 		max-width: 7rem;
 	}
+
 	.sapMGTContent.appInfoWithFooter {
+
 		.sapMTileCnt {
 			height: 3.5rem;
 			width: 100%;
+
 			.sapMTileCntContent {
+
 				.sapMNC {
 					height: 1.75rem;
+
 					.sapMNCLargeFontSize {
 						font-size: 1.75rem;
 						height: 1.75rem;
-							&::before {
-								padding-bottom: 0;
-								margin-top: 0.5rem;
-							}
+
+						&::before {
+							padding-bottom: 0;
+							margin-top: 0.5rem;
+						}
 					}
+
 					.sapMNCIndScale {
-						padding: 0rem;
+						padding: 0;
 						padding-left: 0.5rem;
 					}
 				}
+
 				.sapMImageContent {
 					height: 1.75rem;
+
 					.sapMImageContentImageIcon {
-						padding-bottom: 0rem;
+						padding-bottom: 0;
 						height: inherit;
 						top: 0.1rem;
 					}
-					.sapMImg.sapMImageContentImageIcon{
+
+					.sapMImg.sapMImageContentImageIcon {
 						top: 0.2rem;
 					}
 				}
 			}
+
 			.sapMTileCntFtrTxt {
 				bottom: -0.15rem;
 			}
 		}
 	}
+
 	.sapMGTContent.appInfoWithoutFooter {
+
 		.sapMTileCnt {
 			height: 3.5rem;
 			width: 100%;
+
 			.sapMTileCntContent {
 				height: 3.25rem;
+
 				.sapMNC {
 					height: 3.25rem;
 				}
+
 				.sapMImageContent {
 					height: 3.25rem;
+
 					.sapMImageContentImageIcon.sapUiIcon {
 						font-size: 1.75rem;
 						padding-bottom: 0;
 						top: 0;
 					}
-					.sapMImg{
+
+					.sapMImg {
 						top: 0.3rem;
 					}
 				}
 			}
 		}
 	}
+
 	.sapMGTTInfoContainer {
 		height: 2.75rem;
 	}
-	.appInfoWithoutTileCnt{
+
+	.appInfoWithoutTileCnt {
 		display: flex;
 		flex-direction: column-reverse;
-		.sapMGTTInfo{
+
+		.sapMGTTInfo {
 			margin-bottom: 0.3rem;
 		}
 	}
 }
 
-.OneByOne.sapMTileSmallPhone.tileWithAppInfo{
-	.sapMGTHdrContent.OneByOne{
+.OneByOne.sapMTileSmallPhone.tileWithAppInfo {
+
+	.sapMGTHdrContent.OneByOne {
 		height: 3rem;
 	}
-	.sapMGTContent{
+
+	.sapMGTContent {
+
 		.sapMGTTInfoContainer{
-			.sapMGTTInfo{
+
+			.sapMGTTInfo {
 				margin-bottom: 0.5rem;
 				padding-right: 0.5rem;
 			}
 		}
 	}
+
 	.sapMGTContent.appInfoWithFooter {
+
 		.sapMTileCnt {
 			height: 3rem;
-			.sapMTileCntContent{
-				.sapMImageContent{
-					.sapMImageContentImageIcon{
+
+			.sapMTileCntContent {
+
+				.sapMImageContent {
+
+					.sapMImageContentImageIcon {
 						top: -0.1rem;
 					}
 				}
 			}
 		}
-		.sapMNCValue{
+
+		.sapMNCValue {
 			margin-bottom: 0.3rem;
-			.sapMNCLargeFontSize{
+
+			.sapMNCLargeFontSize {
 				padding: 0;
 			}
-			.sapMNCLargeFontSize.sapMNCIconImage{
+
+			.sapMNCLargeFontSize.sapMNCIconImage {
 				padding-right: 0.375rem;
 			}
 		}
 	}
+
 	.sapMGTContent.appInfoWithoutFooter {
+
 		.sapMTileCnt {
 			height: 3rem;
 		}
-		.sapUiIcon{
+
+		.sapUiIcon {
 			top: 0;
 		}
-		.sapMNCInner.WithoutMargin{
+
+		.sapMNCInner.WithoutMargin {
 			top: 0;
 		}
 	}
-	.appInfoWithoutTileCnt{
-		.sapMGTTInfoContainer{
-			.sapMGTTInfo{
+
+	.appInfoWithoutTileCnt {
+
+		.sapMGTTInfoContainer {
+
+			.sapMGTTInfo {
 				margin-bottom: 0.3rem;
 			}
 		}
 	}
-	.sapUiIcon.sapUiIconMirrorInRTL.sapMImageContentImageIcon{
+
+	.sapUiIcon.sapUiIconMirrorInRTL.sapMImageContentImageIcon {
 		margin-bottom: 0.25rem;
 	}
 }
 
 .TwoByHalf.tileWithAppInfo {
+
 	.sapMGTWrapper {
 		height: inherit;
 		display: flex;
 		justify-content: space-between;
 		gap: 0.25rem;
+
 		.sapMGTWrapperCnt {
+
 			.sapMGTHdrContent {
 				max-width: 13.5rem;
 				padding-right: 0;
 			}
+
 			.sapMGTContent {
+
 				.sapMTileCnt {
+
 					.sapMTileCntContent {
 						padding-right: 0;
 					}
@@ -574,16 +668,21 @@ border-radius: 0.25rem;
 			}
 		}
 	}
+
 	.sapMGTTInfoContainer {
 		max-width: 13.5rem;
-		.sapMGTTInfo{
-			.sapMGTAppShortcutText{
-				.sapMText{
+
+		.sapMGTTInfo {
+
+			.sapMGTAppShortcutText {
+
+				.sapMText {
 					max-width: 13ch;
 				}
 			}
-			.sapMGTSystemInfoText{
-				.sapMText{
+			.sapMGTSystemInfoText {
+
+				.sapMText {
 					max-width: 13ch;
 					padding-left: 0.2rem;
 				}
@@ -591,36 +690,48 @@ border-radius: 0.25rem;
 		}
 	}
 }
+
 .TwoByOne.tileWithAppInfo {
-	.sapMGTContent{
-		.sapMGTTInfoContainer{
-			.sapMGTTInfo{
+
+	.sapMGTContent {
+
+		.sapMGTTInfoContainer {
+
+			.sapMGTTInfo {
 				max-width: 10.875rem;
 			}
 		}
 	}
+
 	.sapMGTContent {
 		display: flex;
 		justify-content: space-between;
 		margin-top: 0.5rem;
+
 		.sapMTileCnt {
+
 			.sapMTileCntContent {
 				padding-right: 0;
 			}
+
 			.sapMTileCntFtrTxt {
 				margin-right: 0;
 			}
 		}
 	}
-	.appInfoWithoutTileCnt{
+
+	.appInfoWithoutTileCnt {
 		flex-direction: row-reverse;
 	}
+
 	.sapMGTTInfoContainer {
 		max-width: 10.875rem;
 		margin-left: 0.25rem;
 		margin-bottom: 0.5rem;
-		.sapMGTTInfo{
-			.sapMGTAppShortcutText{
+
+		.sapMGTTInfo {
+
+			.sapMGTAppShortcutText {
 				text-align: right;
 			}
 		}
@@ -628,34 +739,43 @@ border-radius: 0.25rem;
 }
 
 .OneByHalf {
+
 	.sapMGTHdrContent {
 		height: 1.25rem;
-			.sapMGTHdrTxt {
-				.sapMText {
-					display: block;
-				}
+
+		.sapMGTHdrTxt {
+
+			.sapMText {
+				display: block;
+			}
 		}
 	}
 
 	.sapMGTContent {
 		height: 3rem;
+
 		.sapMTileCnt {
 			height: 100%;
+
 			.sapMTileCntContent {
 				height: 2.5rem;
+
 				.sapMNCLargeFontSize {
 					font-size: 1.5rem;
 					padding-bottom: 0.55rem;
 					height: auto;
 					align-self: flex-end;
 				}
+
 				.sapMNCIndScale.sapMNCLargeFontSize {
 					padding: 0.375rem 0 0.65rem 0.25rem;
 				}
+
 				.sapMImageContent {
 					display: none;
 				}
 			}
+
 			.sapMTileCntContent > div:first-child {
 				height: 100%;
 			}
@@ -664,37 +784,44 @@ border-radius: 0.25rem;
 }
 
 .TwoByHalf {
+
 	.sapMGTHdrContent {
 		height: 1.25rem;
-			.sapMGTHdrTxt {
-				
-				.sapMText {
-					display: block;
-				}
-			
+
+		.sapMGTHdrTxt {
+
+			.sapMText {
+				display: block;
+			}
 		}
 	}
 
 	.sapMGTContent {
 		height: 3rem;
+
 		.sapMTileCnt {
 			height: 100%;
+
 			.sapMTileCntContent {
 				height: 2.5rem;
+
 				.sapMNCLargeFontSize {
 					font-size: 1.5rem;
 					padding-bottom: 0.55rem;
 					height: auto;
 					align-self: flex-end;
 				}
+
 				.sapMNCIndScale.sapMNCLargeFontSize {
 					padding: 0.375rem 0 0.65rem 0.25rem;
 				}
+
 				.sapMImageContentImageIcon {
 					max-height: 1.75rem;
 					bottom: auto;
 				}
 			}
+
 			.sapMTileCntContent > div:first-child {
 				height: 100%;
 			}
@@ -712,7 +839,8 @@ border-radius: 0.25rem;
 }
 
 .sapMGTHdrTxt > .sapMGTTitle,
-.sapMGenericTileFtrFldTxt>.sapMGTFailed, .sapMTileCntFtrFldTxt>.sapMGTFailed{
+.sapMGenericTileFtrFldTxt>.sapMGTFailed,
+.sapMTileCntFtrFldTxt>.sapMGTFailed {
 	cursor: inherit;
 }
 
@@ -736,20 +864,19 @@ border-radius: 0.25rem;
 	}
 }
 
-// added line height so that it is not overridden by other controls.
+/* added line height so that it is not overridden by other controls. */
 .sapMGT {
+
 	.sapMText {
 		line-height: normal;
 	}
 }
 
-
-
 .sapMGTHdrTxt > .sapMText {
-	color: @sapUiTileTitleTextColor;
+	color: var(--sapTile_TitleTextColor);
 	font-weight: normal;
-	font-family: @sapUiFontFamily;
-	font-size: @sapMFontHeader5Size;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontHeader5Size);
 }
 
 .sapMGTSubHdrTxt > .sapMText,
@@ -757,10 +884,10 @@ border-radius: 0.25rem;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapMFontMediumSize;
 	font-weight: normal;
-	color: @sapUiTileTextColor;
+	color: var(--sapTile_TextColor);
 }
 
 .sapMGTHdrContent {
@@ -769,42 +896,47 @@ border-radius: 0.25rem;
 	padding-left: 1rem;
 	padding-right: 1rem;
 }
-.OneByOne.tileWithAppInfo{
+
+.OneByOne.tileWithAppInfo {
+
 	.sapMGTHdrContent.OneByOne {
 		height: 3.4rem;
 	}
 }
-.sapMGTHdrContent.Stretch{
+
+.sapMGTHdrContent.Stretch {
 	height: 42%;
-	padding-top: 0rem;
+	padding-top: 0;
 }
 
-.sapMGT.sapMGTBackgroundImage.Stretch{
+.sapMGT.sapMGTBackgroundImage.Stretch {
+
 	.sapMGTContent {
 		height: 58%;
 		margin-top: 1px;
 	}
 }
 
-
 .sapMGTHdrIconImage {
 	float: right;
 	width: 2.5rem;
 	min-height: 2.5rem;
 	font-size: 2.5rem;
-	font-family: @sapUiFontHeaderFamily;
+	font-family: var(--sapFontHeaderFamily);
 	font-weight: @sapUiFontHeaderWeight;
-	color: @sapUiTileIconColor;
+	color: var(--sapTile_IconColor);
 }
 
-.sapMGenericTileFtrFldTxt, .sapMTileCntFtrFldTxt {
-	font-family: @sapUiFontFamily;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiTileTextColor;
+.sapMGenericTileFtrFldTxt,
+.sapMTileCntFtrFldTxt {
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTile_TextColor);
 }
 
-.sapMGenericTileFtrFldIcn, .sapMTileCntFtrFldIcn {
-	color: @sapUiTileTextColor;
+.sapMGenericTileFtrFldIcn,
+.sapMTileCntFtrFldIcn {
+	color: var(--sapTile_TextColor);
 }
 
 .sapMGT:focus:not([tabindex]) {
@@ -812,7 +944,7 @@ border-radius: 0.25rem;
 }
 
 .sapMGTOverlay {
-	background-color: @sapUiTileBackground;
+	background-color: var(--sapTile_Background);
 	border-radius: 0.125rem;
 }
 
@@ -823,20 +955,22 @@ border-radius: 0.25rem;
 	top: @offset;
 	right: @offset;
 	bottom: @offset;
+
 	& when not (@z-index = 0) {
 		z-index: @z-index;
 	}
 }
 
-.sapMGT.sapMGTScopeActions, .sapMGT.sapMGTScopeSingleAction {
+.sapMGT.sapMGTScopeActions,
+.sapMGT.sapMGTScopeSingleAction {
 
 	.sapMTileCntContent {
 		position: relative;
 
-		&:after {
+		&::after {
 			.sapMGTOverlayMixin();
 			display: block;
-			content: "";
+			content: '';
 			background-color: fade(@sapUiTileBackground, 60);
 		}
 	}
@@ -846,16 +980,19 @@ border-radius: 0.25rem;
 		position: absolute;
 		right: 0.75rem;
 		bottom: 0.563rem;
-		z-index: 1; // Remark: If increased, this will break FLP footer visualization.
-		color: @sapUiButtonIconColor;
+		z-index: 1; /* Remark: If increased, this will break FLP footer visualization. */
+		color: var(--sapButton_IconColor);
+
 		&:focus {
 			outline: none;
 		}
 	}
-	.sapMGTMoreIcon{
+
+	.sapMGTMoreIcon {
 		background-color: transparent;
 		border: 0;
-		.sapMBtnIcon{
+
+		.sapMBtnIcon {
 			bottom: 1rem;
 			left: 0.4rem;
 			border: 0;
@@ -866,37 +1003,41 @@ border-radius: 0.25rem;
 		width: 1.375rem;
 		height: 1.375rem;
 		border-radius: 50%;
-		padding: 0px;
+		padding: 0;
 		position: absolute;
 		top: -0.375rem;
 		right: -0.375rem;
-		z-index: 3; // Remark: If increased, this will break FLP footer visualization.
-		background-color: @sapUiButtonBackground;
-		color: @sapUiButtonTextColor;
+		z-index: 3; /* Remark: If increased, this will break FLP footer visualization. */
+		background-color: var(--sapButton_Background);
+		color: var(--sapButton_TextColor);
 		overflow: visible;
 
 		.sapMBtnFocusDiv {
 			display: none;
 		}
 
-		.sapMBtnInner, .sapMBtnActive.sapMBtnInner {
+		.sapMBtnInner,
+		.sapMBtnActive.sapMBtnInner {
 			width: 100%;
 			height: 100%;
-			min-width: 0px;
+			min-width: 0;
 			outline-offset: -2px;
 
-			&, &:hover, &:active, &:focus  {
-				border-color: @sapTile_Interactive_BorderColor; // Explicitly needed here, because the border would otherwise be transparent in HCB on press
-				border-radius: 50% !important; // Made important because the style is not to be overridden in any way
+			&,
+			&:hover,
+			&:active,
+			&:focus {
+				border-color: var(--sapTile_Interactive_BorderColor); /* Explicitly needed here, because the border would otherwise be transparent in HCB on press */
+				border-radius: 50% !important; /* Made important because the style is not to be overridden in any way */
 			}
 		}
 
 		.sapMBtnIcon {
 			font-size: 0.75rem;
-			margin: 0px;
+			margin: 0;
 			width: 100%;
 
-			&:before {
+			&::before {
 				position: relative;
 				top: -0.15rem;
 				left: 0;
@@ -909,9 +1050,9 @@ border-radius: 0.25rem;
 		}
 
 		/* The touch area has a different size and is slightly moved to the left and bottom */
-		&:before {
-			content: "";
-			color: @sapUiButtonIconColor;
+		&::before {
+			content: '';
+			color: var(--sapButton_IconColor);
 			position: absolute;
 			top: -1px;
 			bottom: -0.6875rem;
@@ -921,10 +1062,14 @@ border-radius: 0.25rem;
 	}
 }
 
-.sapUiSizeCompact{
-	.sapMGT.sapMGTScopeActions, .sapMGT.sapMGTScopeSingleAction {
-		.sapMGTMoreIcon{
-			.sapMBtnIcon{
+.sapUiSizeCompact {
+
+	.sapMGT.sapMGTScopeActions,
+	.sapMGT.sapMGTScopeSingleAction {
+
+		.sapMGTMoreIcon {
+
+			.sapMBtnIcon {
 				left: -0.3rem;
 				bottom: 0.5rem
 			}
@@ -933,26 +1078,30 @@ border-radius: 0.25rem;
 }
 
 .sapMGT.sapMGTIconMode {
+
 	.sapUiIcon.sapMGTTileIcon {
-		text-shadow: @sapContent_ContrastTextShadow;
+		text-shadow: var(--sapContent_ContrastTextShadow);
 	}
 }
 
-.sapMGT.sapMGTScopeActions.sapMGTIconMode{
-	.sapMBtn.sapMGTMoreIcon{
-		&:before{
-			content: "";
+.sapMGT.sapMGTScopeActions.sapMGTIconMode {
+
+	.sapMBtn.sapMGTMoreIcon {
+		padding: 0;
+		height: 0;
+		bottom: auto;
+		right: 0.5rem;
+
+		&::before {
+			content: '';
 			position: absolute;
 			top: -0.25rem;
 			bottom: -2.5rem;
 			left: -0.0125rem;
 			right: -0.0125rem;
 		}
-		padding: 0;
-		height: 0;
-		bottom: auto;
-		right: 0.5rem;
-		.sapMBtnIcon{
+
+		.sapMBtnIcon {
 			bottom: 0;
 			left: 0;
 			padding-left: 0.625rem;
@@ -962,19 +1111,23 @@ border-radius: 0.25rem;
 	}
 }
 
-.sapUiSizeCompact{
-	.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf.sapMTileSmallPhone{
-		.sapMBtn.sapMGTMoreIcon{
-			&:before{
-				content: "";
+.sapUiSizeCompact {
+
+	.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf.sapMTileSmallPhone {
+
+		.sapMBtn.sapMGTMoreIcon {
+			top: 1.4rem;
+
+			&::before {
+				content: '';
 				position: absolute;
 				top: -0.1975rem;
 				bottom: -1.8875rem;
 				left: -0.0125rem;
 				right: -0.0125rem
 			}
-			top: 1.4rem;
-			.sapMBtnInner{
+
+			.sapMBtnInner {
 				padding: 0;
 				min-width: 0;
 			}
@@ -982,11 +1135,14 @@ border-radius: 0.25rem;
 	}
 }
 
-.sapUiSizeCompact{
-	.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf{
-		.sapMBtn.sapMGTMoreIcon{
+.sapUiSizeCompact {
+
+	.sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf {
+
+		.sapMBtn.sapMGTMoreIcon {
 			top: 0.9rem;
-			.sapMBtnIcon{
+
+			.sapMBtnIcon {
 				padding-left: 0.5rem;
 				padding-right: 0.5rem;
 			}
@@ -995,9 +1151,11 @@ border-radius: 0.25rem;
 }
 
 .sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf {
-	.sapMBtn.sapMGTMoreIcon{
+
+	.sapMBtn.sapMGTMoreIcon {
 		top: 0.6rem;
-		.sapMBtnInner{
+
+		.sapMBtnInner {
 			left: 0.2rem;
 			padding: 0;
 		}
@@ -1005,28 +1163,33 @@ border-radius: 0.25rem;
 }
 
 .sapMGT.sapMGTScopeActions.sapMGTIconMode.TwoByHalf.sapMTileSmallPhone {
-	.sapMBtn.sapMGTMoreIcon{
+
+	.sapMBtn.sapMGTMoreIcon {
 		top: 1.1rem;
-		.sapMBtnInner{
-			left: 0rem;
+
+		.sapMBtnInner {
+			left: 0;
 		}
 	}
 }
 
 
-.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage, .sapMGT.sapMGTScopeSingleActions.sapMGTBackgroundImage {
+.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage,
+.sapMGT.sapMGTScopeSingleActions.sapMGTBackgroundImage {
 
 	.sapMTileCntContent {
-		&:after {
+
+		&::after {
 			content: none;
 		}
 	}
 
 	.sapMGTContent {
-		&:before {
+
+		&::before {
 			.sapMGTOverlayMixin();
 			display: block;
-			content: "";
+			content: '';
 			background-color: fade(@sapUiTileBackground, 60);
 			border-radius: 0.125rem;
 		}
@@ -1042,17 +1205,18 @@ border-radius: 0.25rem;
 	-webkit-flex: @resizable @resizable auto;
 }
 
-/************************ LINE MODE LIST VIEW ********************/
+/* LINE MODE LIST VIEW */
 
 .sapMGTLineModeListContainer {
-	background-color: @sapUiGroupContentBackground;
-	border: @sapUiTileBorderColor;
+	background-color: var(--sapGroup_ContentBackground);
+	border: var(--sapTile_BorderColor);
 	border-radius: 0.25rem;
 	box-shadow: @sapUiShadowLevel0;
 }
 
 /* COZY */
 .sapUiMedia-GenericTileDeviceSet-small {
+
 	.sapMGTLineMode.sapMGT {
 		align-items: center;
 		padding: 0.5rem;
@@ -1064,14 +1228,9 @@ border-radius: 0.25rem;
 	}
 
 	.sapMGTLineMode .sapMGTTouchArea {
-		display: -webkit-box;
-		display: -webkit-flex;
 		display: flex;
-		-webkit-box-orient: horizontal;
-		-webkit-flex-direction: row;
 		flex-direction: row;
 		align-items: center;
-
 		width: 100%;
 		pointer-events: auto;
 		padding: 0;
@@ -1081,7 +1240,6 @@ border-radius: 0.25rem;
 
 	.sapMGTLineMode .sapMGTLineModeHelpContainer {
 		.sapMGTFlexEntry(1);
-
 		flex-wrap: wrap;
 		overflow: hidden;
 	}
@@ -1096,8 +1254,8 @@ border-radius: 0.25rem;
 		line-height: 1.375rem;
 	}
 
-	.sapMGTLineMode .sapMGTHdrTxt:after {
-		content: " ";
+	.sapMGTLineMode .sapMGTHdrTxt::after {
+		content: ' ';
 		margin-right: 0.5rem;
 	}
 
@@ -1114,7 +1272,7 @@ border-radius: 0.25rem;
 		line-height: 1.375rem;
 		padding-right: 0.375rem;
 		text-align: left;
-		font-size: 1.375rem  !important;
+		font-size: 1.375rem !important;
 	}
 }
 
@@ -1134,6 +1292,7 @@ border-radius: 0.25rem;
 }
 
 .sapMGTLineMode .sapMGTTouchArea .sapMGTScopeSingleActionContainer {
+
 	.sapMGTMoreIcon {
 		position: static;
 	}
@@ -1146,21 +1305,16 @@ border-radius: 0.25rem;
 }
 
 /* ActionsContainer Styles commonly shared with all screen sizes in compact and cozy */
-.sapMGTLineMode .sapMGTActionsContainer, .sapMGTLineMode .sapMGTScopeSingleActionContainer{
+.sapMGTLineMode .sapMGTActionsContainer,
+.sapMGTLineMode .sapMGTScopeSingleActionContainer {
 	.sapMGTFlexEntry;
-	display: -webkit-box;
-	display: -webkit-flex;
 	display: flex;
-	-webkit-box-orient: horizontal;
-	-webkit-flex-direction: row;
 	flex-direction: row;
-
 	align-items: center;
-	-webkit-box-align: center;
-
 	line-height: 1.375rem;
 
-	&, * {
+	&,
+	* {
 		pointer-events: auto;
 	}
 
@@ -1176,9 +1330,9 @@ border-radius: 0.25rem;
 		margin: 0 0.3125rem;
 		top: -1rem;
 		left: -0.5rem;
-		z-index: 0; // Remark: If increased, this will break FLP footer visualization.
+		z-index: 0; /* Remark: If increased, this will break FLP footer visualization. */
 
-		&:before {
+		&::before {
 			content: none;
 		}
 
@@ -1194,17 +1348,23 @@ border-radius: 0.25rem;
 }
 
 .sapMGTLineMode.sapMGTScopeSingleAction {
-	.sapMGTMoreIcon.sapMBtnBase{
-		.sapMBtnIcon{
-			left: 0rem;
+
+	.sapMGTMoreIcon.sapMBtnBase {
+
+		.sapMBtnIcon {
+			left: 0;
 			bottom: 0.6rem;
 		}
 	}
 }
+
 .sapUiSizeCompact {
+
 	.sapMGTLineMode.sapMGTScopeSingleAction {
-		.sapMGTMoreIcon.sapMBtnBase{
-			.sapMBtnIcon{
+
+		.sapMGTMoreIcon.sapMBtnBase {
+
+			.sapMBtnIcon {
 				left: 0.5rem;
 				bottom: 0.3rem;
 			}
@@ -1213,8 +1373,10 @@ border-radius: 0.25rem;
 }
 
 .sapMGTLineMode.sapMGTScopeActions {
-	.sapMGTMoreIcon.sapMBtnBase{
-		.sapMBtnIcon{
+
+	.sapMGTMoreIcon.sapMBtnBase {
+
+		.sapMBtnIcon {
 			bottom: 0.6rem;
 			left: -1rem;
 		}
@@ -1222,17 +1384,23 @@ border-radius: 0.25rem;
 }
 
 .sapUiSizeCompact {
+
 	.sapMGTLineMode.sapMGTScopeActions {
-		.sapMGTMoreIcon.sapMBtnBase{
-			.sapMBtnIcon{
+
+		.sapMGTMoreIcon.sapMBtnBase {
+
+			.sapMBtnIcon {
 				bottom: 0.3rem;
 				left: -0.5rem;
 			}
 		}
 	}
 }
+
 .sapUiSizeCompact {
+
 	.sapMGTLineMode .sapMGTActionsContainer {
+
 		.sapMGTRemoveButton .sapMBtnIcon::before {
 			padding: 0.25rem 0.3125rem;
 		}
@@ -1243,7 +1411,9 @@ border-radius: 0.25rem;
 	text-align: start;
 }
 
-.sapMGT.sapMGTScopeActions.sapMGTLineMode.sapMGTFailed,.sapMGT.sapMGTScopeSingleAction.sapMGTLineMode.sapMGTFailed {
+.sapMGT.sapMGTScopeActions.sapMGTLineMode.sapMGTFailed,
+.sapMGT.sapMGTScopeSingleAction.sapMGTLineMode.sapMGTFailed {
+
 	.sapMBtn.sapMGTRemoveButton {
 		opacity: 1 !important;
 	}
@@ -1251,31 +1421,38 @@ border-radius: 0.25rem;
 
 /* COMPACT */
 .sapUiMedia-GenericTileDeviceSet-small {
-	&.sapUiSizeCompact, .sapUiSizeCompact {
+
+	&.sapUiSizeCompact,
+	.sapUiSizeCompact {
+
 		.sapMGTLineMode.sapMGT {
 			min-height: 1.625rem;
 		}
+
 		.sapMGTLineMode .sapMGTTouchArea {
-			padding: 0.125rem 0rem;
+			padding: 0.125rem 0;
 			margin: -0.1875rem 0;
 		}
+
 		.sapMGTLineMode .sapMGTLineModeFailedIcon {
 			font-size: 0.875rem !important;
 		}
 	}
 }
-/************************ LINE MODE FLOATING VIEW *****************/
 
+/* LINE MODE FLOATING VIEW */
 .sapMGTLineModeFloatingContainer {
-	background-color: @sapUiTileBackground;
-	border: @sapUiTileBorderColor;
+	background-color: var(--sapTile_Background);
+	border: var(--sapTile_BorderColor);
 	border-radius: 0.25rem;
 	box-shadow: @sapUiShadowLevel0;
 }
 
 /* COZY */
 .sapUiMedia-GenericTileDeviceSet-large {
-	&.sapMGTLineModeContainer, .sapMGTLineModeContainer {
+
+	&.sapMGTLineModeContainer,
+	.sapMGTLineModeContainer {
 		padding-right: 1.0rem;
 		box-sizing: border-box;
 		position: relative; /* make the tile's parent <<positioned>>, in order to make JS get the correct offsetParent */
@@ -1285,7 +1462,7 @@ border-radius: 0.25rem;
 		user-select: none;
 		-webkit-user-select: none;
 		-moz-user-select: -moz-none;
-		-webkit-text-size-adjust:100%;
+		-webkit-text-size-adjust: 100%;
 	}
 
 	.sapMGT.sapMGTLineMode {
@@ -1293,8 +1470,8 @@ border-radius: 0.25rem;
 		clear: none;
 		display: inline-block;
 		min-width: 2rem;
-		background-color: @sapUiTileBackground;
-		border: @sapUiTileBorderColor;
+		background-color: var(--sapTile_Background);
+		border: var(--sapTile_BorderColor);
 		border-radius: 0.25rem;
 		box-shadow: @sapUiShadowLevel0;
 		position: relative;
@@ -1306,7 +1483,8 @@ border-radius: 0.25rem;
 		pointer-events: none;
 	}
 
-	.sapMGTLineMode .sapMGTHdrTxt, .sapMGTLineMode .sapMGTSubHdrTxt {
+	.sapMGTLineMode .sapMGTHdrTxt,
+	.sapMGTLineMode .sapMGTSubHdrTxt {
 		word-break: normal;
 		display: inline;
 		white-space: normal;
@@ -1316,17 +1494,17 @@ border-radius: 0.25rem;
 		border-top: 2px solid transparent;
 		border-bottom: 2px solid transparent;
 		z-index: 2;
-
 		padding-right: 0.5rem;
 
-		&:after {
+		&::after {
 			content: none;
 		}
 	}
 
 	.sapMGTLineMode .sapMGTSubHdrTxt {
-		&:before { //this is needed to enable line-wrapping between header end and subheader beginning
-			content: "";
+
+		&::before { /* this is needed to enable line-wrapping between header end and subheader beginning */
+			content: '';
 			display: inline-block;
 		}
 	}
@@ -1334,13 +1512,14 @@ border-radius: 0.25rem;
 	.sapMGTLineMode .sapMGTLineModeFailedIcon {
 		display: inline-block;
 		vertical-align: middle;
-		padding-right: 0px;
+		padding-right: 0;
 		position: relative;
 		left: 0.5rem;
 		border-right: 0.375rem solid transparent;
 		box-sizing: border-box;
 		font-size: 0.875rem  !important;
 	}
+
 	.sapMGTLineMode .sapMGTHdrTxt {
 		border-left: 0.5rem solid transparent;
 		margin-left: -0.5rem;
@@ -1352,41 +1531,47 @@ border-radius: 0.25rem;
 	}
 
 	.sapMGTLineMode.sapMGTScopeSingleAction {
-		.sapMGTHdrTxt:last-of-type, .sapMGTSubHdrTxt {
+
+		.sapMGTHdrTxt:last-of-type,
+		.sapMGTSubHdrTxt {
 			padding-right: 1.3rem;
 		}
 	}
 
 	.sapMGTLineMode.sapMGTScopeActions {
-		.sapMGTHdrTxt:last-of-type, .sapMGTSubHdrTxt {
+
+		.sapMGTHdrTxt:last-of-type,
+		.sapMGTSubHdrTxt {
 			padding-right: 3.5rem;
 		}
 	}
 
 	.sapMGTActionsContainer {
 		position: absolute;
-		right: 0.1875rem; //together with RemoveButton's margin, this fulfills the right-padding of 0.5rem
-		bottom: 0px;
+		right: 0.1875rem; /* together with RemoveButton's margin, this fulfills the right-padding of 0.5rem */
+		bottom: 0;
 		line-height: 1.375rem;
-		z-index: 2; // Remark: If increased, this will break FLP footer visualization.
-		padding: 0px;
+		z-index: 2; /* Remark: If increased, this will break FLP footer visualization. */
+		padding: 0;
 		height: 1.5rem;
 
-		&, * {
+		&,
+		* {
 			pointer-events: auto;
 		}
 	}
 
-	.sapMGTStartMarker, .sapMGTEndMarker {
+	.sapMGTStartMarker,
+	.sapMGTEndMarker {
 		display: inline-block;
 		position: relative;
 		top: 0.5rem;
-		z-index: 2; // Remark: If increased, this will break FLP footer visualization. Changed from 3 to 2 as it was breaking FLP footer visualization
+		z-index: 2; /* Remark: If increased, this will break FLP footer visualization. Changed from 3 to 2 as it was breaking FLP footer visualization */
 	}
 
 	.sapMGTStyleHelper {
 		position: absolute;
-		top: 0px;
+		top: 0;
 		width: 100%;
 	}
 
@@ -1410,7 +1595,10 @@ border-radius: 0.25rem;
 
 /* COMPACT */
 .sapUiMedia-GenericTileDeviceSet-large {
-	&.sapUiSizeCompact, .sapUiSizeCompact {
+
+	&.sapUiSizeCompact,
+	.sapUiSizeCompact {
+
 		.sapMGT.sapMGTLineMode {
 			@line-height: 1.875rem;
 			@padding-top: 0.125rem;
@@ -1418,11 +1606,12 @@ border-radius: 0.25rem;
 			min-height: 2rem;
 			padding: 0.5rem 0.5rem 0.5rem 0;
 		}
+
 		.sapMGTLineMode .sapMGTLineModeFailedIcon {
 			display: inline-block;
 			vertical-align: middle;
-			padding-right: 0px;
-			margin-top: 0px;
+			padding-right: 0;
+			margin-top: 0;
 			position: relative;
 			left: 0.5rem;
 			border-right: 0.375rem solid transparent;
@@ -1434,12 +1623,14 @@ border-radius: 0.25rem;
 
 /* Fix for rendering order on tablets in RTL */
 html[dir=rtl] .sapMGTLineMode {
-	.sapMGTHdrTxt, .sapMGTSubHdrTxt {
+
+	.sapMGTHdrTxt,
+	.sapMGTSubHdrTxt {
 		unicode-bidi: -webkit-isolate; /* needs to be prefixed for older webkit browsers */
 	}
 }
 
-/******************* OVERLAYS AND HELPERS *******************/
+/* OVERLAYS AND HELPERS */
 .sapMGTOverlay {
 	.sapMGTOverlayMixin();
 	opacity: 0.8;
@@ -1461,14 +1652,16 @@ html[dir=rtl] .sapMGTLineMode {
 	border-radius: 0.25rem !important;
 }
 
-.sapMGenericTileFtrFld, .sapMTileCntFtrFld{
+.sapMGenericTileFtrFld,
+.sapMTileCntFtrFld {
 	left: 0.4375rem;
 	right: 0.4375rem;
 	bottom: 0.75rem;
 	position: absolute;
 }
 
-.sapMGenericTileFtrFldTxt, .sapMTileCntFtrFldTxt {
+.sapMGenericTileFtrFldTxt,
+.sapMTileCntFtrFldTxt {
 	font-weight: normal;
 	display:table-cell;
 	padding-left: 0.5rem;
@@ -1476,40 +1669,45 @@ html[dir=rtl] .sapMGTLineMode {
 	width: 100%;
 }
 
-html[dir=rtl] .sapMGenericTileFtrFldTxt, .sapMTileCntFtrFldTxt {
+html[dir=rtl] .sapMGenericTileFtrFldTxt,
+.sapMTileCntFtrFldTxt {
 	padding-right:0.5rem;
 }
 
-.sapMGenericTileFtrFldIcn, .sapMTileCntFtrFldIcn {
+.sapMGenericTileFtrFldIcn,
+.sapMTileCntFtrFldIcn {
 	margin-right: 0.5rem;
 	display: table-cell;
 	vertical-align: bottom;
 }
 
-.sapMGenericTileFtrFldIcn>.sapMGTFtrFldIcnMrk, .sapMTileCntFtrFldIcn>.sapMGTFtrFldIcnMrk {
+.sapMGenericTileFtrFldIcn > .sapMGTFtrFldIcnMrk,
+.sapMTileCntFtrFldIcn > .sapMGTFtrFldIcnMrk {
 	vertical-align: bottom;
 }
 
 /* the following is needed for non-webkit browsers that don't support line-clamping */
 
-/* some places should be left for subheader when the subheader exists*/
+/* some places should be left for subheader when the subheader exists */
 .sapMGT.sapMGTHeaderMode .sapMGTHdrTxt:nth-last-of-type(2) {
 	max-height: 5.48rem;
 }
 
-.sapMGT:not(.sapMGTHeaderMode) .sapMGTHdrTxt:nth-last-of-type(2){
+.sapMGT:not(.sapMGTHeaderMode) .sapMGTHdrTxt:nth-last-of-type(2) {
 	max-height: 2.74rem;
 }
 
 /* the max-height is calculated the same as webkit-line-clamping and supported to work when
-the screen size changes between small and large (e.g. mobile devices auto rotation) without rerendering*/
+the screen size changes between small and large (e.g. mobile devices auto rotation) without rerendering */
 html[data-sap-ui-browser*='ff'] {
+
 	.sapMGT.sapMGTHeaderMode .sapMGTHdrContent .sapMTextMaxLine {
 		max-height: 6.85rem !important;
 	}
 }
 
-.sapMTileSmallPhone,.sapMTResponsiveIconMode {
+.sapMTileSmallPhone,
+.sapMTResponsiveIconMode {
 
 	&.sapMGT.sapMGTHeaderMode .sapMGTHdrTxt:nth-last-of-type(2) {
 		max-height: 4.72rem;
@@ -1520,12 +1718,14 @@ html[data-sap-ui-browser*='ff'] {
 	}
 
 	html[data-sap-ui-browser*='ff'] {
+
 		&.sapMGT.sapMGTHeaderMode > .sapMGTHdrContent .sapMTextMaxLine {
 			max-height: 5.9rem !important;
 		}
 	}
 
 	html[data-sap-ui-browser*='ff'] {
+
 		&.sapMGT:not(.sapMGTHeaderMode) > .sapMGTHdrContent .sapMTextMaxLine {
 			max-height: 3.54rem !important;
 		}
@@ -1535,6 +1735,7 @@ html[data-sap-ui-browser*='ff'] {
 		width: 9.25rem;
 		height: 9.25rem;
 	}
+
 	&.sapMGT.TwoByOne {
 		width: 19rem;
 		height: 9.25rem;
@@ -1550,24 +1751,30 @@ html[data-sap-ui-browser*='ff'] {
 
 		.sapMGTContent {
 			height: 2.625rem;
+
 			.sapMTileCnt {
 				height: 2.125rem;
+
 				.sapMTileCntContent {
 					height: 100%;
+
 					.sapMNCLargeFontSize {
 						font-size: 1.5rem;
 						height: auto;
 						align-self: flex-end;
 						padding-bottom: 0.25rem;
 					}
+
 					.sapMNCIndScale.sapMNCLargeFontSize {
 						padding: 0.25rem 0 0.25rem 0.25rem;
 					}
+
 					.sapMImageContent {
 						display: none;
 					}
 				}
-				.sapMTileCntFtrTxt  {
+
+				.sapMTileCntFtrTxt {
 					margin-top: 0.25rem;
 					bottom: 0;
 				}
@@ -1583,18 +1790,23 @@ html[data-sap-ui-browser*='ff'] {
 			height: 1.25rem;
 			width: calc(100% - 20%);
 		}
+
 		.sapMGTContent {
 			height: 2.625rem;
+
 			.sapMTileCnt {
 				height: 2.125rem;
+
 				.sapMTileCntContent {
 					height: 100%;
+
 					.sapMNCLargeFontSize {
 						font-size: 1.5rem;
 						align-self: flex-end;
 						height: auto;
 						padding-bottom: 0.25rem;
 					}
+
 					.sapMNCIndScale.sapMNCLargeFontSize {
 						padding: 0.25rem 0 0.25rem 0.2	5rem;
 					}
@@ -1602,13 +1814,14 @@ html[data-sap-ui-browser*='ff'] {
 					.sapMImageContentImageIcon {
 						height: 100%;
 						max-height: 1.75rem;
-					  }
+					}
 				}
+
 				.sapMTileCntContent > div:first-child {
 					height: 100%;
 				}
 
-				.sapMTileCntFtrTxt  {
+				.sapMTileCntFtrTxt {
 					margin-top: 0.25rem;
 					bottom: 0;
 				}
@@ -1629,7 +1842,9 @@ html[data-sap-ui-browser*='ff'] {
 		margin-top: 0;
 	}
 
-	.sapMGT.sapMGTScopeActions, .sapMGT.sapMGTScopeSingleAction {
+	.sapMGT.sapMGTScopeActions,
+	.sapMGT.sapMGTScopeSingleAction {
+
 		.sapMGTMoreIcon {
 			right: 0.5rem;
 			bottom: 0.313rem;
@@ -1637,14 +1852,15 @@ html[data-sap-ui-browser*='ff'] {
 	}
 
 	.sapMGTHdrTxt > .sapMText {
-		font-size: @sapMFontHeader6Size;
+		font-size: var(--sapFontHeader6Size);
 	}
 	.sapMGTSubHdrTxt,
 	.sapMGTSubHdrTxt > .sapMText {
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 
-	.sapMGT.sapMGTBackgroundImage.Stretch{
+	.sapMGT.sapMGTBackgroundImage.Stretch {
+
 		.sapMGTContent {
 			height: 66%;
 		}
@@ -1673,88 +1889,112 @@ html[data-sap-ui-browser*='ff'] {
 .TwoByOne.sapMGTActionMode {
 	height: 10.5rem;
 	width: 20rem;
-	box-shadow: @sapContent_Shadow0;
+	box-shadow: var(--sapContent_Shadow0);
+
 	.sapMGTTitle {
 		font-weight: bold;
 	}
-	.sapMGTHdrContent.sapMGTHdrImage{
+
+	.sapMGTHdrContent.sapMGTHdrImage {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		gap: 0.75rem;
 		height: 2rem;
-		.sapMGTHdrIconImage{
+
+		.sapMGTHdrIconImage {
 			display: flex;
 			align-items: center;
 		}
-		.sapMGTHdrTxt{
+
+		.sapMGTHdrTxt {
 			width: 14.25rem;
 		}
 	}
+
 	.sapMGTHdrContent {
 		padding: 0;
 		margin: 1rem 1rem 0.75rem 1rem;
 		height: fit-content;
 		overflow: hidden;
+
 		.sapMText {
 			line-height: 1rem;
 			font-size: 0.875rem;
 		}
+
 		.sapMGTSubHdrTxt .sapMText {
 			font-size: 0.875rem;
 		}
+
 		.sapMGTHdrIconImage {
 			float: left;
 			width: 3rem;
 		}
+
 		.sapMGTHdrIconImage.sapUiIcon {
 			width: 2rem;
 			line-height: 1.5rem;
 			min-height: 2.1875rem;
 		}
+
 		.sapMGTHdrIconImage.sapUiIcon::before {
 			font-size: 2rem;
 		}
+
 		.sapMGTHdrIconImage.Neutral {
-			color:  @sapUiNeutralText;
+			color: var(--sapNeutralTextColor);
 		}
+
 		.sapMGTHdrIconImage.Good {
-			color: @sapUiPositiveText;
+			color: var(--sapPositiveTextColor);
 		}
+
 		.sapMGTHdrIconImage.Critical {
-			color: @sapUiCriticalElement;
+			color: var(--sapCriticalElementColor);
 		}
+
 		.sapMGTHdrIconImage.Error {
-			color: @sapUiNegativeText;
+			color: var(--sapNegativeTextColor);
 		}
+
 		.sapMGTHdrIconImage.None {
-			color: @sapUiTileIconColor
+			color: var(--sapTile_IconColor);
 		}
 	}
-	.sapMGTContent.sapMGTFtrMarginTop{
+
+	.sapMGTContent.sapMGTFtrMarginTop {
 		height: 7.6rem;
-		.sapMTileCnt{
+
+		.sapMTileCnt {
 			height: 7.6rem;
 		}
 	}
+
 	.sapMGTContent {
 		height: 6.6rem;
+
 		.sapMTileCnt {
 			height: 6.6rem;
+
 			.sapMTileContainer {
 				display: flex;
 				align-items: center;
+
 				.sapMTilePriority {
 					margin: 0 0.5rem 0 1rem;
+
 					.sapMTilePriorityCnt {
 						display: flex;
 						align-items: center;
 						width: fit-content;
 						overflow: hidden;
+
 						.sapMTilePriorityBorder {
 							width: 0.375rem;
 							height: 1.625rem;
 						}
+
 						.sapMTilePriorityValue {
 							font-size: 0.875rem;
 							font-weight: 400;
@@ -1762,66 +2002,86 @@ html[data-sap-ui-browser*='ff'] {
 						}
 					}
 				}
+
 				.High {
+
 					.sapMTilePriorityCnt {
-						color: @sapNegativeElementColor;
+						color: var(--sapNegativeElementColor);
 					}
 				}
+
 				.Medium {
+
 					.sapMTilePriorityCnt {
 						color: @sapWarningColor;
 					}
 				}
+
 				.Low {
+
 					.sapMTilePriorityCnt {
-						color: @sapPositiveElementColor;
+						color: var(--sapPositiveElementColor);
 					}
 				}
+
 				.VeryHigh {
+
 					.sapMTilePriorityCnt {
-						color: @sapIndicationColor_1_BorderColor;
+						color: var(--sapIndicationColor_1_BorderColor);
 					}
 				}
+
 				.sapMTileCntContent {
 					padding: 0;
 					margin: 0 1rem 0 0;
+
 					.sapMText {
 						line-height: 1.5rem;
 					}
+
 					.sapMNC {
+
 						.sapMNCInner {
 							position: relative;
 						}
 					}
 				}
 			}
+
 			.sapMTileCntContent {
+
 				&:first-child {
-					color: @sapTile_TextColor;
+					color: var(--sapTile_TextColor);
 				}
+
 				height: 3rem;
 				overflow: hidden;
 				padding: 0 1rem;
 				margin: 0.75rem 0 1rem 0;
-				p{
+
+				p {
 					margin: 0;
 					line-height: 1rem;
-					color:@sapTile_TextColor;
+					color: var(--sapTile_TextColor);
 					white-space: nowrap;
 					overflow: hidden;
 					text-overflow: ellipsis;
 				}
+
 				.sapMText {
 					line-height: 1rem;
-					color: @sapTile_TextColor;
+					color: var(--sapTile_TextColor);
 				}
+
 				.sapMImageContent {
 					height: 3rem;
+
 					.sapMImageContentImageIcon {
 						max-height: 3rem;
 					}
 				}
 			}
+
 			.sapMTileFtrCnt {
 				height: 1rem;
 				display: flex;
@@ -1832,6 +2092,7 @@ html[data-sap-ui-browser*='ff'] {
 				justify-content: space-between;
 				align-items: center;
 				padding-bottom: 1rem;
+
 				.sapMTileCntFtrTxt {
 					position: initial;
 					margin-right: 0;
@@ -1840,56 +2101,72 @@ html[data-sap-ui-browser*='ff'] {
 					margin-top: 1rem;
 				}
 			}
+
 			.sapMTileCntFtrTxt {
 				margin: 0 1rem 1rem 1rem;
 				font-size: 0.875rem;
 				bottom: 0;
 			}
 		}
-		.sapMTileCnt.sapMGTNoPriority{
-			.sapMTileCntContent{
+
+		.sapMTileCnt.sapMGTNoPriority {
+
+			.sapMTileCntContent {
 				margin: 0;
 			}
 		}
-		.sapMTileCnt.sapMGTPriority{
-			.sapMTileCntContent{
+
+		.sapMTileCnt.sapMGTPriority {
+
+			.sapMTileCntContent {
 				height: 2rem;
 			}
 		}
 	}
-	&.sapMGTStateLoading{
-		.sapMTileCnt{
-			.sapMTileCntContentShimmerPlaceholderItem{
+
+	&.sapMGTStateLoading {
+
+		.sapMTileCnt {
+
+			.sapMTileCntContentShimmerPlaceholderItem {
 				padding-top: 0;
 			}
 		}
 
 	}
+
 	.sapMGTActionModeContainer {
 		position: absolute;
 		bottom: 0.9em;
 		right: 1rem;
-    }
+	}
 }
 
 .TwoByOne.sapMTileSmallPhone.sapMGTActionMode {
 	height: 11.375rem;
 	width: 19rem;
+
 	.sapMGTContent {
 		height: 7.6rem;
+
 		.sapMTileCnt {
 			height: 7.6rem;
 		}
 	}
-	.sapMGTContent.sapMGTFtrMarginTop{
+
+	.sapMGTContent.sapMGTFtrMarginTop {
 		height: 8.6rem;
-		.sapMTileCnt{
+
+		.sapMTileCnt {
 			height: 8.6rem;
 		}
 	}
-	&.sapMGTStateLoading{
-		.sapMTileCnt{
-			.sapMTileCntContentShimmerPlaceholderItem{
+
+	&.sapMGTStateLoading {
+
+		.sapMTileCnt {
+
+			.sapMTileCntContentShimmerPlaceholderItem {
 				padding-top: 2rem;
 			}
 		}
@@ -1898,11 +2175,14 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .TwoByOne.sapMGTLinkTileContent {
+
 	.sapMGTHdrContent {
 		padding: 0;
 		margin: 1rem 1rem 0.75rem 1rem;
 		height: fit-content;
+
 		.sapMGTHdrTxt {
+
 			.sapMText {
 				line-height: 1rem;
 				font-size: 0.875rem;
@@ -1910,29 +2190,37 @@ html[data-sap-ui-browser*='ff'] {
 			}
 		}
 	}
+
 	.sapMGTContent {
 		height: 6.25rem;
-		.sapMGTLinkTileContentWrapper{
+
+		.sapMGTLinkTileContentWrapper {
 			height: 7.15rem;
 			display: flex;
 			flex-direction: column;
+
 			.sapMHBox {
 				height: 1.5rem;
+
 				.sapMFlexItem {
 					height: 1.5rem;
 					display: flex;
 					justify-content: center;
 					align-items: center;
+
 					.sapMLnk {
 						line-height: 1.5rem;
 					}
 				}
 			}
 		}
+
 		&.sapMGTFtrMarginTop {
 			height: 7.25rem;
 		}
+
 		&:not(.sapMGTFtrMarginTop) {
+
 			.sapMGTLinkTileContentWrapper.saMGTLinkSubheaderNotPresent {
 				gap: 2.5px;
 			}
@@ -1941,16 +2229,21 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .TwoByOne.sapMGTLinkTileContent.sapMTileSmallPhone {
+
 	.sapMGTHdrContent {
 		margin: 0.5rem;
 	}
+
 	.sapMGTContent {
 		height: 5.75rem;
+
 		.sapMGTLinkTileContentWrapper {
 			gap: 0 !important;
 		}
+
 		&.sapMGTFtrMarginTop {
 			height: 6.6875rem;
+
 			.sapMGTLinkTileContentWrapper {
 				gap: 0.3125rem !important;
 			}
@@ -1959,65 +2252,84 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .sapMAutoPointer {
+
 	.sapMText {
 		cursor: auto;
 	}
 }
-.sapMGT.sapMGTOneByOne,.sapMGT.sapMGTOneByOne.sapMTileSmallPhone{
-	.sapMBtnBase.sapMGTMoreIcon{
-		.sapMBtnIcon{
+
+.sapMGT.sapMGTOneByOne,
+.sapMGT.sapMGTOneByOne.sapMTileSmallPhone {
+
+	.sapMBtnBase.sapMGTMoreIcon {
+
+		.sapMBtnIcon {
 			bottom: 0.3rem;
 		}
 	}
 }
 
-@media (min-width:320px) and (max-width:600px){
-		.sapMGT.sapMGTOneByOne {
-			width: 12.875rem;
-			height: 7.8125rem;
-			.sapMGTHideOverflow {
-				bottom: 0.6875rem;
-			}
-			.sapMGTSubHdrTxt {
-				.sapMTextMaxLine {
-					-webkit-line-clamp: 1 !important;
-				}
-			}
-			&.HighContrastTile {
-				.sapMGTHideOverflow {
-					bottom: 0.5rem;
-				}
+@media (min-width:320px) and (max-width:600px) {
+
+	.sapMGT.sapMGTOneByOne {
+		width: 12.875rem;
+		height: 7.8125rem;
+
+		.sapMGTHideOverflow {
+			bottom: 0.6875rem;
+		}
+
+		.sapMGTSubHdrTxt {
+
+			.sapMTextMaxLine {
+				-webkit-line-clamp: 1 !important;
 			}
 		}
-		.sapMBtnBase.sapMGTMoreIcon{
-			.sapMBtnIcon{
-				bottom: 0.7rem;
+
+		&.HighContrastTile {
+
+			.sapMGTHideOverflow {
+				bottom: 0.5rem;
 			}
 		}
 	}
+	.sapMBtnBase.sapMGTMoreIcon{
+		.sapMBtnIcon{
+			bottom: 0.7rem;
+		}
+	}
+}
 
 @media (min-width:600px) {
+
 	.sapMGT.sapMGTOneByOne {
 		width: 11.875rem;
 		height: 8rem;
-		.sapMBtnBase.sapMGTMoreIcon{
-			.sapMBtnIcon{
+
+		.sapMBtnBase.sapMGTMoreIcon {
+
+			.sapMBtnIcon {
 				bottom: 0.3rem;
 			}
 		}
-	.sapMGTHideOverflow {
-		bottom: 1rem;
-	}
-	&.HighContrastTile {
+
 		.sapMGTHideOverflow {
-			bottom: 0.75rem;
+			bottom: 1rem;
+		}
+
+		&.HighContrastTile {
+
+			.sapMGTHideOverflow {
+				bottom: 0.75rem;
+			}
 		}
-	}
 	}
 }
+
 .sapMGT.sapMGTOneByOne {
-	border-radius: @sapTile_BorderCornerRadius;
+	border-radius: var(--sapTile_BorderCornerRadius);
 	border: none;
+
 	.sapMGTHideOverflow {
 		position: absolute;
 		top: 0;
@@ -2025,17 +2337,20 @@ html[data-sap-ui-browser*='ff'] {
 		left: 0;
 		overflow: hidden;
 	}
+
 	.sapMGTIconWrapper {
 		display: flex;
 		flex-direction: column;
 		gap: 0.375rem;
 		margin-bottom: 0.375rem;
+
 		.sapMGTHdrContent {
 			padding: 0 0.5rem;
 			display: block;
 			flex-direction: column;
 			height: fit-content;
 			align-items: center;
+
 			.sapMGTHdrTxt {
 				height: inherit;
 				max-height: none;
@@ -2045,65 +2360,81 @@ html[data-sap-ui-browser*='ff'] {
 			}
 		}
 	}
+
 	.sapMGTSubHdrTxt {
 		margin: 0 0.5rem 0 0.5rem;
 		display: flex;
 		align-items: center;
 		flex-direction: column;
 		white-space: initial;
+
 		.sapMText {
 			font-weight: 400;
-			color: @sapUiContentContrastTextColor;
+			color: var(--sapContent_ContrastTextColor);
 			text-align: center !important;
 			white-space: pre-line;
 			line-height: 1rem;
 		}
 	}
+
 	&.sapMGTHeaderOneLine {
+
 		.sapMGTHdrContent.sapMGTOneByOne {
 			justify-content: end;
+
 			.sapMGTHdrTxt {
 				height: fit-content;
 			}
 		}
 	}
+
 	&.sapMGTHeaderThreeLine {
+
 		.sapMGTSubHdrTxt {
+
 			.sapMText {
 				white-space: nowrap;
 			}
 		}
 	}
-	&:focus:not(:active){
-		outline: 0.125rem solid @sapTile_Background;
+
+	&:focus:not(:active) {
+		outline: 0.125rem solid var(--sapTile_Background);
+
 		.sapMGTFocusDiv {
 			border: none;
-			outline: @sapContent_FocusWidth @sapContent_FocusStyle @sapContent_FocusColor;
+			outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 			outline-offset: 0.125rem;
 		}
 	}
 }
 
-.sapMGTHdrContent.sapMGTOneByOne > .sapMGTHdrTxt > .sapMText{
+.sapMGTHdrContent.sapMGTOneByOne > .sapMGTHdrTxt > .sapMText {
 	font-size: 0.875rem;
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 	text-align: center !important;
 	white-space: initial;
 	font-weight: 700;
 }
 
 .sapMGTArticleMode {
+
 	.sapMGTContent {
+
 		.sapMTileCnt {
+
 			.sapMTileCntContent {
 				height: 3.25rem;
+
 				.sapMImageContent {
 					height: 3rem;
+
 					.sapMImageContentImageIcon {
 						max-height: 3.25rem;
 					}
 				}
 			}
+
 			.sapMTileFtrCnt {
 				height: 2.5rem;
 				display: flex;
@@ -2113,10 +2444,12 @@ html[data-sap-ui-browser*='ff'] {
 				bottom: 0.25rem;
 				justify-content: space-between;
 				align-items: center;
+
 				.sapMTileCntFtrTxt {
 					position: initial;
 					margin-right: 0;
 				}
+
 				.sapMTileNavContainer {
 					margin: 0 1rem 0 0.5rem;
 				}
@@ -2124,10 +2457,15 @@ html[data-sap-ui-browser*='ff'] {
 		}
 	}
 }
+
 .sapMGTArticleMode.sapMTileSmallPhone {
+
 	.sapMGTContent {
+
 		.sapMTileCnt {
+
 			.sapMTileFtrCnt {
+
 				.sapMTileNavContainer {
 					margin-right: 0.5rem;
 				}
@@ -2135,41 +2473,51 @@ html[data-sap-ui-browser*='ff'] {
 		}
 	}
 }
-.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered{
+
+.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered {
 	padding: 0;
-	.sapMGTStartMarker{
+
+	.sapMGTStartMarker {
 		display: inline;
 	}
-	.sapMGTEndMarker{
+
+	.sapMGTEndMarker {
 		display: inline;
 	}
-	.sapMGTLineWrapper{
+
+	.sapMGTLineWrapper {
 		display: flex;
 		flex-wrap: wrap;
 	}
-	.sapMGTHeaderWrapper{
+
+	.sapMGTHeaderWrapper {
 		display: inline-block;
 		padding: 0.5rem 0.5rem 0.25rem 0;
 		margin-bottom: 0.25rem;
-		.sapMGTSubHdrTxt{
+
+		.sapMGTSubHdrTxt {
 			margin-right: 0;
 		}
 	}
-	.sapMGTTInfo{
+
+	.sapMGTTInfo {
 		display: inline-block;
 		margin: 0;
 		flex-grow: 1;
 		padding-left: 0.5rem;
-		.sapMGTAppShortcutText{
+
+		.sapMGTAppShortcutText {
 			padding-left: 0;
 		}
 	}
 }
-.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered.sapMGTLineModeSmall{
+
+.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered.sapMGTLineModeSmall {
 	display: flex;
 	flex-wrap: wrap;
 	max-width: 94%;
-	.sapMGTHeaderWrapper{
+
+	.sapMGTHeaderWrapper {
 		padding-left:0.5rem;
 		display: flex;
 		text-overflow: ellipsis;
@@ -2177,63 +2525,78 @@ html[data-sap-ui-browser*='ff'] {
 		flex-wrap: wrap;
 		margin-bottom: 0;
 	}
-	.sapMGTTouchArea{
+
+	.sapMGTTouchArea {
 		padding: 0;
 		margin: 0;
 	}
-	.sapMGTTInfo{
-		.sapMGTAppShortcutText{
+
+	.sapMGTTInfo {
+
+		.sapMGTAppShortcutText {
 			padding-left: 0;
 		}
 	}
 }
-.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered{
-.sapMGTTInfoWrapper{
-	padding: 0.5rem;
-	flex-grow: 1;
-	background-color: @sapInfobar_NonInteractive_Background;
-	border-radius: 0 0.25rem 0.25rem 0;
-	.sapMGTTInfo{
-		margin: 0;
-		vertical-align: top;
-		text-transform: uppercase;
+
+.sapMGT.sapMGTScopeDisplay.sapMGTLineMode.sapMGTInfoRendered {
+
+	.sapMGTTInfoWrapper {
+		padding: 0.5rem;
 		flex-grow: 1;
-		display: flex;
-		overflow: hidden;
-		align-items: baseline;
-		flex-wrap: wrap;
-		padding: 0;
-		.sapMGTHdrTxt{
-			padding-top: 0.3rem;
-		}
-		.sapMGTSubHdrTxt{
-			margin-right: 0.25rem;
-		}
-		.sapMText{
-			font-size: @sapMFontSmallSize ;
-		}
-			.sapMGTAppShortcutText{
+		background-color: var(--sapInfobar_NonInteractive_Background);
+		border-radius: 0 0.25rem 0.25rem 0;
+
+		.sapMGTTInfo {
+			margin: 0;
+			vertical-align: top;
+			text-transform: uppercase;
+			flex-grow: 1;
+			display: flex;
+			overflow: hidden;
+			align-items: baseline;
+			flex-wrap: wrap;
+			padding: 0;
+
+			.sapMGTHdrTxt {
+				padding-top: 0.3rem;
+			}
+
+			.sapMGTSubHdrTxt {
+				margin-right: 0.25rem;
+			}
+
+			.sapMText {
+				font-size: var(--sapFontSmallSize) ;
+			}
+
+			.sapMGTAppShortcutText {
 				padding-right: 0.5rem;
 				padding-left: 0;
-				.sapMText{
-					color: @sapUiTileTextColor;
+
+				.sapMText {
+					color: var(--sapTile_TextColor);
 				}
 			}
-			.sapMGTSystemInfoText{
+
+			.sapMGTSystemInfoText {
 				font-size: 0.75rem;
 				position: relative;
 				display: inline-block;
 				word-break: break-word;
+
 				.sapMText{
-					color: @sapUiTileTitleTextColor;
+					color: var(--sapTile_TitleTextColor);
 				}
 			}
-			.sapMGTSystemInfoText.sapMGTSeperatorPresent{
+
+			.sapMGTSystemInfoText.sapMGTSeperatorPresent {
 				font-size: 0.75rem;
 				position: relative;
 				display: inline-block;
-				&::before{
-					content: "";
+
+				&::before {
+					content: '';
 					position: absolute;
 					display: inline-block;
 					height: 1rem;
@@ -2241,32 +2604,34 @@ html[data-sap-ui-browser*='ff'] {
 					left: 0;
 					transform: translateX(-0.25rem);
 					top: -0.125rem;
-					background-color: @sapUiTileTextColor;
-
+					background-color: var(--sapTile_TextColor);
 				}
 			}
+		}
 	}
-}
-.sapMGTTInfo.sapMGTInfoNotContainsSeperator{
-	.sapMGTAppShortcutText{
-		padding-right: 0;
+
+	.sapMGTTInfo.sapMGTInfoNotContainsSeperator {
+
+		.sapMGTAppShortcutText {
+			padding-right: 0;
+		}
 	}
 }
-}
 
-/*-----------------------------------------------------
-					IconMode Styles
-------------------------------------------------------*/
+/* IconMode Styles */
 .sapMGTIconMode {
+
 	.sapMGTHdrTxt > .sapMText {
 		font-weight: bold;
-		font-size: @sapFontHeader6Size;
+		font-size: var(--sapFontHeader6Size);
 	}
+
 	.sapMGTSubHdrTxt {
 		line-height: 1rem;
+
 		.sapMText {
 			font-size: 0.875rem;
-			color: @sapUiContentLabelColor;
+			color: var(--sapContent_LabelColor);
 		}
 	}
 }
@@ -2274,20 +2639,24 @@ html[data-sap-ui-browser*='ff'] {
 .sapMGTOneByOne.sapMGTIconMode {
 	min-width: 7rem;
 	max-width: 15rem;
+
 	.sapMGTHdrContent {
 		padding: 0 0.5rem;
 	}
+
 	.sapMGTHdrTxt > .sapMText {
 		text-shadow: none;
 		line-height: 1rem;
 		display: block;
 	}
+
 	.sapMGTOneByOneIconLoaded {
 		margin-top: -1rem;
 	}
 }
 
 .sapMGTOneByOne.sapMGTIconMode.sapMTResponsiveIconMode {
+
 	.sapMGTHdrContent {
 		height:auto;
 		padding: 1rem 0.5rem 1rem 0;
@@ -2303,13 +2672,13 @@ html[data-sap-ui-browser*='ff'] {
 	width: 18.75rem ;
 	height: 3.438rem ;
 	padding-left: 0.75rem;
-	border-radius: @sapTile_BorderCornerRadius;
+	border-radius: var(--sapTile_BorderCornerRadius);
 	box-sizing: border-box;
 }
 
-.sapMGTTwoByHalf  > .TwoByHalf > .sapMGTHdrTxt > .sapMText{
+.sapMGTTwoByHalf  > .TwoByHalf > .sapMGTHdrTxt > .sapMText {
 	font-size: 0.875rem;
-	color: @sapUiTileTitleTextColor;
+	color: var(--sapTile_TitleTextColor);
 }
 
 .TwoByHalf.sapMGT .sapMGTHdrContent {
@@ -2318,6 +2687,7 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .TwoByHalf.sapMGTIconMode {
+
 	.sapMGTHdrContent {
 		height: auto;
 		padding-top: 0;
@@ -2326,6 +2696,7 @@ html[data-sap-ui-browser*='ff'] {
 		max-height: 2rem;
 		align-items: center;
 	}
+
 	.sapMGTMoreIcon {
 		visibility: hidden;
 		bottom: auto;
@@ -2334,6 +2705,7 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .TwoByHalf.sapMGTIconMode.sapMGT:hover {
+
 	.sapMGTMoreIcon {
 		visibility: visible;
 	}
@@ -2344,6 +2716,7 @@ html[data-sap-ui-browser*='ff'] {
 	align-items: flex-end;
 	padding-top: 1rem;
 	justify-content: center;
+
 	.sapUiIcon {
 		font-size: 1.25rem !important;
 	}
@@ -2364,7 +2737,7 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .sapMGTTwoByHalfIcon .sapMGTileBadge {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 	top: 1.46875rem;
 	line-height: 0.75rem;
 	font-weight: bold;
@@ -2372,24 +2745,24 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .sapMGTTileIcon {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 }
 
-.TwoByHalf.sapMGTIconMode.sapMGT:focus{
+.TwoByHalf.sapMGTIconMode.sapMGT:focus {
+
 	.sapMGTMoreIcon{
 		visibility: visible !important;
 	}
 }
 .sapMGTVisible {
-
 	visibility: visible !important;
 }
 
-// Mobile View-specific styles
-
+/* Mobile View-specific styles */
 .sapMGTOneByOne.sapMGTIconMode.sapMTileSmallPhone {
 	height: 4rem;
 	max-width: none;
+
 	.sapMGTHdrContent {
 		height:auto;
 		overflow: auto;
@@ -2403,49 +2776,62 @@ html[data-sap-ui-browser*='ff'] {
 	height: 5.375rem;
 	display: flex;
 	flex-direction: column;
+
 	.sapMGTHideOverflow {
 		bottom: 1rem;
 	}
+
 	.sapMGTIconWrapper {
 		margin: 1rem 0.5rem 0.375rem 0.5rem;
 		align-items: center;
 		flex-direction: row;
 		gap: 0;
-		.sapMGTOneByOneIcon{
+
+		.sapMGTOneByOneIcon {
 			padding: 0;
 			margin-bottom: auto;
 			margin-top: 0.375rem;
 		}
-		.sapMGTHdrTxt{
+
+		.sapMGTHdrTxt {
 			align-items: center;
+
 			.sapMText {
 				text-align: left !important;
+
 				.sapMTextMaxLine {
 					-webkit-line-clamp: 3 !important;
 				}
 			}
 		}
 	}
+
 	.sapMGTSubHdrTxt {
 		padding: 0 0.5rem;
 		margin: 0;
 		flex-direction: row;
 		align-items: flex-start;
+
 		.sapMText {
 			font-weight: 400;
 			white-space: initial;
 			text-align: left !important;
+
 			.sapMTextMaxLine {
 				-webkit-line-clamp: 1 !important;
 			}
 		}
 	}
+
 	&.sapMGTHeaderOneLine {
+
 		.sapMGTHdrContent.sapMGTOneByOne {
 			justify-content: center;
 		}
 	}
+
 	&.HighContrastTile {
+
 		.sapMGTHideOverflow {
 			bottom: 0.75rem;
 		}
@@ -2453,6 +2839,7 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .TwoByHalf.sapMGTIconMode.sapMTileSmallPhone {
+
 	.sapMGTHdrContent {
 		height: auto;
 		max-width: 12.5rem;
@@ -2463,10 +2850,10 @@ html[data-sap-ui-browser*='ff'] {
 	}
 }
 
-// High Contrast Theme specific styles
-
-.sapMGT.sapMGTIconMode.HighContrastTile, .sapMGT.sapMGTIconMode .HighContrastTile.sapMGTTwoByHalfIcon {
-	background-color: @sapUiTileBackground;
+/* High Contrast Theme specific styles */
+.sapMGT.sapMGTIconMode.HighContrastTile,
+.sapMGT.sapMGTIconMode .HighContrastTile.sapMGTTwoByHalfIcon {
+	background-color: var(--sapTile_Background);
 	border: 0.125rem solid;
 }
 
@@ -2475,46 +2862,51 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .sapMGT.sapMGTTwoByHalf.sapMGTIconMode.HighContrastTile:not(.sapMGTStateDisabled):hover {
-	box-shadow: 0 0 0 0.188rem @sapUiContentShadowColor inset;
+	box-shadow: 0 0 0 0.188rem var(--sapContent_ShadowColor) inset;
 	border: none;
 }
 
 .sapMGT.sapMGTOneByOne.HighContrastTile:focus:not(:active) {
 	outline-offset: 0.0625rem;
+
 	.sapMGTFocusDiv{
 		outline: none;
 	}
+
 	&::before {
-		content: "";
+		content: '';
 		position: absolute;
-		outline: @sapContent_FocusWidth @sapContent_FocusStyle @sapContent_FocusColor;
+		outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 		border-radius: 0.1rem;
 		outline-offset: 0.25rem;
 		inset: 0;
 	}
 }
+
 .sapMGT.sapMGTOneByOne.HighContrastTile:hover {
+
 	.sapMGTFocusDiv {
 		outline-offset: 0 !important;
 	}
 }
 
 .sapMGT:focus .sapMGTFocusDiv{
-	border: @sapContent_FocusWidth @sapContent_FocusStyle @sapContent_FocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, // focus inside GridContainer
+.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, /* focus inside GridContainer */
 .sapMGT:focus .sapMGTFocusDiv,
 .sapMGT:active .sapMGTFocusDiv,
 .sapMGTLineModePress .sapMGTFocusDiv {
-	border:@sapContent_FocusWidth @sapContent_FocusStyle @sapContent_FocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
-//Badge Styles
+/*Badge Styles */
 
-//Styles when Icon and Text are present
+/* Styles when Icon and Text are present */
 
 .sapMGT {
+
 	.sapMGTBadge {
 		position: absolute;
 		top: -0.6rem;
@@ -2523,7 +2915,7 @@ html[data-sap-ui-browser*='ff'] {
 		font-weight: bold;
 		font-size: 0.75rem;
 		padding: 0 0.5rem;
-		font-size: @sapFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 		height: 1rem;
 		line-height: 1rem;
 		z-index: 2;
@@ -2534,57 +2926,75 @@ html[data-sap-ui-browser*='ff'] {
 		gap: 0.3125rem;
 		border: 0.0625rem solid transparent;
 		box-sizing: border-box;
+
 		.sapMGTBadgeText {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
-		&.sapMGTBadgeOnlyIcon{
+
+		&.sapMGTBadgeOnlyIcon {
 			border-radius: 1.375rem;
 			padding: 0;
 			height: 1.375rem;
 			width: 1.375rem;
 			top: -0.75rem;
+
 			.sapUiIcon {
 				top: 0.0625rem;
 			}
 		}
+
 		.sapMGTBadgeOverlay {
 			position: absolute;
 			inset: -1px;
 			border-radius: 0.5rem;
 			opacity: 0.8;
 		}
+
 		&.sapMGTBadgeTextPresent {
+
 			.sapUiIcon {
 				line-height: 0;
 			}
 		}
 	}
+
 	&.OneByOne {
+
 		.sapMGTBadge {
-			.sapMGTBadgeText{
+
+			.sapMGTBadgeText {
 				max-width: 7.9rem;
 			}
 		}
 	}
+
 	&.TwoByOne {
+
 		.sapMGTBadge {
+
 			.sapMGTBadgeText {
 				max-width: 19.55rem;
 			}
 		}
 	}
+
 	&.TwoByHalf {
+
 		.sapMGTBadge {
+
 			.sapMGTBadgeText {
 				max-width: 19.55rem;
 			}
 		}
 	}
+
 	&.OneByHalf {
+
 		.sapMGTBadge {
-			.sapMGTBadgeText{
+
+			.sapMGTBadgeText {
 				max-width: 7.9rem;
 			}
 		}
@@ -2592,29 +3002,41 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .sapMGT.sapMTileSmallPhone {
+
 	&.OneByOne {
+
 		.sapMGTBadge {
+
 			.sapMGTBadgeText {
 				max-width: 6.25rem;
 			}
 		}
 	}
+
 	&.TwoByOne {
+
 		.sapMGTBadge {
+
 			.sapMGTBadgeText {
 				max-width: 15.85rem;
 			}
 		}
 	}
+
 	&.TwoByHalf {
+
 		.sapMGTBadge {
+
 			.sapMGTBadgeText {
 				max-width: 15.85rem;
 			}
 		}
 	}
+
 	&.OneByHalf {
+
 		.sapMGTBadge {
+
 			.sapMGTBadgeText {
 				max-width: 6.25rem;
 			}
@@ -2622,10 +3044,13 @@ html[data-sap-ui-browser*='ff'] {
 	}
 }
 
-//Styles when only text is present
+/* Styles when only text is present */
 .sapMGT {
+
 	&.OneByOne {
+
 		.sapMGTBadge.sapMGTBadgeOnlyText {
+
 			.sapMGTBadgeText {
 				max-width: 9.0625rem;
 			}
@@ -2633,7 +3058,9 @@ html[data-sap-ui-browser*='ff'] {
 	}
 
 	&.TwoByOne {
+
 		.sapMGTBadge.sapMGTBadgeOnlyText {
+
 			.sapMGTBadgeText {
 				max-width: 20.5625rem;
 			}
@@ -2641,7 +3068,9 @@ html[data-sap-ui-browser*='ff'] {
 	}
 
 	&.OneByHalf {
+
 		.sapMGTBadge.sapMGTBadgeOnlyText {
+
 			.sapMGTBadgeText {
 				max-width: 9.0625rem;
 			}
@@ -2649,7 +3078,9 @@ html[data-sap-ui-browser*='ff'] {
 	}
 
 	&.TwoByHalf {
+
 		.sapMGTBadge.sapMGTBadgeOnlyText {
+
 			.sapMGTBadgeText {
 				max-width: 20.5625rem;
 			}
@@ -2658,8 +3089,11 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .sapMGT.sapMTileSmallPhone {
+
 	&.OneByOne {
+
 		.sapMGTBadge.sapMGTBadgeOnlyText {
+
 			.sapMGTBadgeText {
 				max-width: 7.3125rem;
 			}
@@ -2667,7 +3101,9 @@ html[data-sap-ui-browser*='ff'] {
 	}
 
 	&.TwoByOne {
+
 		.sapMGTBadge.sapMGTBadgeOnlyText {
+
 			.sapMGTBadgeText {
 				max-width: 17.0625rem;
 			}
@@ -2675,7 +3111,9 @@ html[data-sap-ui-browser*='ff'] {
 	}
 
 	&.OneByHalf {
+
 		.sapMGTBadge.sapMGTBadgeOnlyText {
+
 			.sapMGTBadgeText {
 				max-width: 7.3125rem;
 			}
@@ -2683,7 +3121,9 @@ html[data-sap-ui-browser*='ff'] {
 	}
 
 	&.TwoByHalf {
+
 		.sapMGTBadge.sapMGTBadgeOnlyText {
+
 			.sapMGTBadgeText {
 				max-width: 17.0625rem;
 			}
@@ -2691,14 +3131,17 @@ html[data-sap-ui-browser*='ff'] {
 	}
 }
 
-//Styles in IconMode tile when size is TwoByHalf
+/* Styles in IconMode tile when size is TwoByHalf */
 
 .sapMGT.sapMGTIconMode.TwoByHalf {
+
 	.sapMGTBadge.sapMGTBadgeOnlyIcon {
 		top: -0.125rem;
 		left: 2.125rem;
 	}
+
 	&.sapMTileSmallPhone {
+
 		.sapMGTBadge.sapMGTBadgeOnlyIcon {
 			top: 0.3125rem;
 		}
@@ -2706,238 +3149,313 @@ html[data-sap-ui-browser*='ff'] {
 }
 
 .sapMGT {
+
 	.sapMGTBadgeBackgroundColorIndication1 {
-		background-color: @sapUiIndication1;
+		background-color: var(--sapIndicationColor_1);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication2 {
-		background-color: @sapUiIndication2;
+		background-color: var(--sapIndicationColor_2);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication3 {
-		background-color: @sapUiIndication3;
+		background-color: var(--sapIndicationColor_3);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication4 {
-		background-color: @sapUiIndication4;
+		background-color: var(--sapIndicationColor_4);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication5 {
-		background-color: @sapUiIndication5;
+		background-color: var(--sapIndicationColor_5);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication6 {
-		background-color: @sapUiIndication6;
+		background-color: var(--sapIndicationColor_6);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication7 {
-		background-color: @sapUiIndication7;
+		background-color: var(--sapIndicationColor_7);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication8 {
-		background-color: @sapUiIndication8;
+		background-color: var(--sapIndicationColor_8);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication9 {
-		background-color: @sapUiIndication9;
+		background-color: var(--sapIndicationColor_9);
 	}
+
 	.sapMGTBadgeBackgroundColorIndication10 {
-		background-color: @sapUiIndication10;
+		background-color: var(--sapIndicationColor_10);
 	}
+
 	.sapMGTBadgeBackgroundColorCriticalTextColor {
-		background-color: @sapCriticalTextColor;
+		background-color: var(--sapCriticalTextColor);
 	}
+
 	.sapMGTBadgeBackgroundColorWarningBackground {
-		background-color: @sapWarningBackground;
+		background-color: var(--sapWarningBackground);
 	}
+
 	.sapMGTBadgeBackgroundColorWarningBorderColor {
-		background-color: @sapWarningBorderColor;
+		background-color: var(--sapWarningBorderColor);
 	}
+
 	.sapMGTBadgeBackgroundColorBrandColor {
-		background-color: @sapBrandColor;
+		background-color: var(--sapBrandColor);
 	}
+
 	.sapMGTBadgeBackgroundColorInformationBorderColor {
-		background-color: @sapInformationBorderColor;
+		background-color: var(--sapInformationBorderColor);
 	}
+
 	.sapMGTBadgeBackgroundColorInformationBackgroundColor {
-		background-color: @sapInformationBackground;
+		background-color: var(--sapInformationBackground);
 	}
+
 	.sapMGTBadgeBackgroundColorNeutralElementColor {
-		background-color: @sapNeutralElementColor;
+		background-color: var(--sapNeutralElementColor);
 	}
+
 	.sapMGTBadgeBackgroundColorNeutralBackgroundColor {
-		background-color: @sapNeutralBackground;
+		background-color: var(--sapNeutralBackground);
 	}
+
 	.sapMGTBadgeBackgroundColorNeutralBorderColor {
-		background-color: @sapNeutralBorderColor;
+		background-color: var(--sapNeutralBorderColor);
 	}
 
 	.sapMGTBadgeColorIndication1 {
-		color: @sapUiIndication1;
+		color: var(--sapIndicationColor_1);
 	}
+
 	.sapMGTBadgeColorIndication2 {
-		color: @sapUiIndication2;
+		color: var(--sapIndicationColor_2);
 	}
+
 	.sapMGTBadgeColorIndication3 {
-		color: @sapUiIndication3;
+		color: var(--sapIndicationColor_3);
 	}
+
 	.sapMGTBadgeColorIndication4 {
-		color: @sapUiIndication4;
+		color: var(--sapIndicationColor_4);
 	}
+
 	.sapMGTBadgeColorIndication5 {
-		color: @sapUiIndication5;
+		color: var(--sapIndicationColor_5);
 	}
+
 	.sapMGTBadgeColorIndication6 {
-		color: @sapUiIndication6;
+		color: var(--sapIndicationColor_6);
 	}
+
 	.sapMGTBadgeColorIndication7 {
-		color: @sapUiIndication7;
+		color: var(--sapIndicationColor_7);
 	}
+
 	.sapMGTBadgeColorIndication8 {
-		color: @sapUiIndication8;
+		color: var(--sapIndicationColor_8);
 	}
+
 	.sapMGTBadgeColorIndication9 {
-		color: @sapUiIndication9;
+		color: var(--sapIndicationColor_9);
 	}
+
 	.sapMGTBadgeColorIndication10 {
-		color: @sapUiIndication10;
+		color: var(--sapIndicationColor_10);
 	}
+
 	.sapMGTBadgeColorCriticalTextColor {
-		color: @sapCriticalTextColor;
+		color: var(--sapCriticalTextColor);
 	}
+
 	.sapMGTBadgeColorWarningBackground {
-		color: @sapWarningBackground;
+		color: var(--sapWarningBackground);
 	}
+
 	.sapMGTBadgeColorWarningBorderColor {
-		color: @sapWarningBorderColor;
+		color: var(--sapWarningBorderColor);
 	}
+
 	.sapMGTBadgeColorBrandColor {
-		color: @sapBrandColor;
+		color: var(--sapBrandColor);
 	}
+
 	.sapMGTBadgeColorInformationBorderColor {
-		color: @sapInformationBorderColor;
+		color: var(--sapInformationBorderColor);
 	}
+
 	.sapMGTBadgeColorInformationBackgroundColor {
-		color: @sapInformationBackground
+		color: var(--sapInformationBackground)
 	}
+
 	.sapMGTBadgeColorNeutralElementColor {
-		color: @sapNeutralElementColor
+		color: var(--sapNeutralElementColor)
 	}
+
 	.sapMGTBadgeColorNeutralBackgroundColor {
-		color: @sapNeutralBackground
+		color: var(--sapNeutralBackground)
 	}
+
 	.sapMGTBadgeColorNeutralBorderColor {
-		color: @sapNeutralBorderColor
+		color: var(--sapNeutralBorderColor)
 	}
 
 	.sapMGTBadgeBorderColorIndication1 {
-		border-color: @sapUiIndication1;
+		border-color: var(--sapIndicationColor_1);
 	}
+
 	.sapMGTBadgeBorderColorIndication2 {
-		border-color: @sapUiIndication2;
+		border-color: var(--sapIndicationColor_2);
 	}
+
 	.sapMGTBadgeBorderColorIndication3 {
-		border-color: @sapUiIndication3;
+		border-color: var(--sapIndicationColor_3);
 	}
+
 	.sapMGTBadgeBorderColorIndication4 {
-		border-color: @sapUiIndication4;
+		border-color: var(--sapIndicationColor_4);
 	}
+
 	.sapMGTBadgeBorderColorIndication5 {
-		border-color: @sapUiIndication5;
+		border-color: var(--sapIndicationColor_5);
 	}
+
 	.sapMGTBadgeBorderColorIndication6 {
-		border-color: @sapUiIndication6;
+		border-color: var(--sapIndicationColor_6);
 	}
+
 	.sapMGTBadgeBorderColorIndication7 {
-		border-color: @sapUiIndication7;
+		border-color: var(--sapIndicationColor_7);
 	}
+
 	.sapMGTBadgeBorderColorIndication8 {
-		border-color: @sapUiIndication8;
+		border-color: var(--sapIndicationColor_8);
 	}
+
 	.sapMGTBadgeBorderColorIndication9 {
-		border-color: @sapUiIndication9;
+		border-color: var(--sapIndicationColor_9);
 	}
+
 	.sapMGTBadgeBorderColorIndication10 {
-		border-color: @sapUiIndication10;
+		border-color: var(--sapIndicationColor_10);
 	}
+
 	.sapMGTBadgeBorderColorCriticalTextColor {
-		border-color: @sapCriticalTextColor;
+		border-color: var(--sapCriticalTextColor);
 	}
+
 	.sapMGTBadgeBorderColorWarningBackground {
-		border-color: @sapWarningBackground;
+		border-color: var(--sapWarningBackground);
 	}
+
 	.sapMGTBadgeBorderColorWarningBorderColor {
-		border-color: @sapWarningBorderColor;
+		border-color: var(--sapWarningBorderColor);
 	}
+
 	.sapMGTBadgeBorderColorBrandColor {
-		border-color: @sapBrandColor;
+		border-color: var(--sapBrandColor);
 	}
+
 	.sapMGTBadgeBorderColorInformationBorderColor {
-		border-color: @sapInformationBorderColor;
+		border-color: var(--sapInformationBorderColor);
 	}
+
 	.sapMGTBadgeBorderColorInformationBackgroundColor {
-		border-color: @sapInformationBackground
+		border-color: var(--sapInformationBackground)
 	}
+
 	.sapMGTBadgeBorderColorNeutralElementColor {
-		border-color: @sapNeutralElementColor
+		border-color: var(--sapNeutralElementColor)
 	}
+
 	.sapMGTBadgeBorderColorNeutralBackgroundColor {
-		border-color: @sapNeutralBackground
+		border-color: var(--sapNeutralBackground)
 	}
+
 	.sapMGTBadgeBorderColorNeutralBorderColor {
-		border-color: @sapNeutralBorderColor
+		border-color: var(--sapNeutralBorderColor)
 	}
 
 	.sapMGTBadge {
+
 		.sapMGTBadgeOverlay {
+
 			&.sapMGTBadgeBackgroundColorIndication1 {
-				background-color: @sapUiIndication1;
+				background-color: var(--sapIndicationColor_1);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication2 {
-				background-color: @sapUiIndication2;
+				background-color: var(--sapIndicationColor_2);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication3 {
-				background-color: @sapUiIndication3;
+				background-color: var(--sapIndicationColor_3);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication4 {
-				background-color: @sapUiIndication4;
+				background-color: var(--sapIndicationColor_4);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication5 {
-				background-color: @sapUiIndication5;
+				background-color: var(--sapIndicationColor_5);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication6 {
-				background-color: @sapUiIndication6;
+				background-color: var(--sapIndicationColor_6);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication7 {
-				background-color: @sapUiIndication7;
+				background-color: var(--sapIndicationColor_7);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication8 {
-				background-color: @sapUiIndication8;
+				background-color: var(--sapIndicationColor_8);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication9 {
-				background-color: @sapUiIndication9;
+				background-color: var(--sapIndicationColor_9);
 			}
+
 			&.sapMGTBadgeBackgroundColorIndication10 {
-				background-color: @sapUiIndication10;
+				background-color: var(--sapIndicationColor_10);
 			}
+
 			&.sapMGTBadgeBackgroundColorCriticalTextColor {
-				background-color: @sapCriticalTextColor;
+				background-color: var(--sapCriticalTextColor);
 			}
+
 			&.sapMGTBadgeBackgroundColorWarningBackground {
-				background-color: @sapWarningBackground;
+				background-color: var(--sapWarningBackground);
 			}
+
 			&.sapMGTBadgeBackgroundColorWarningBorderColor {
-				background-color: @sapWarningBorderColor;
+				background-color: var(--sapWarningBorderColor);
 			}
+
 			&.sapMGTBadgeBackgroundColorBrandColor {
-				background-color: @sapBrandColor;
+				background-color: var(--sapBrandColor);
 			}
+
 			&.sapMGTBadgeBackgroundColorInformationBorderColor {
-				background-color: @sapInformationBorderColor;
+				background-color: var(--sapInformationBorderColor);
 			}
+
 			&.sapMGTBadgeBackgroundColorInformationBackgroundColor {
-				background-color: @sapInformationBackground;
+				background-color: var(--sapInformationBackground);
 			}
+
 			&.sapMGTBadgeBackgroundColorNeutralElementColor {
-				background-color: @sapNeutralElementColor;
+				background-color: var(--sapNeutralElementColor);
 			}
+
 			&.sapMGTBadgeBackgroundColorNeutralBackgroundColor {
-				background-color: @sapNeutralBackground;
+				background-color: var(--sapNeutralBackground);
 			}
+
 			&.sapMGTBadgeBackgroundColorNeutralBorderColor {
-				background-color: @sapNeutralBorderColor;
+				background-color: var(--sapNeutralBorderColor);
 			}
 		}
 	}