@openui5/themelib_sap_horizon 1.135.0 → 1.136.0

package/src/sap/ui/layout/themes/sap_horizon_dark/BlockLayout.less

@@ -3,20 +3,20 @@
 /* Evening Horizon theme                      */
 /* ========================================== */
 
-@_sap_ui_layout_BlockLayout_FontSizeLandXL: @sapMFontHeader2Size;
+@_sap_ui_layout_BlockLayout_FontSizeLandXL: var(--sapFontHeader2Size);
 
 @_sap_ui_layout_BlockLayout_BackgroundDashboardMargin: 0.75rem;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin: 1rem;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardAfterScrollbarMargin: 0.75rem;
-@_sap_ui_layout_BlockLayout_BackgroundDashboardColor: @sapUiTileBackground;
+@_sap_ui_layout_BlockLayout_BackgroundDashboardColor: var(--sapTile_Background);
 @_sap_ui_layout_BlockLayout_BackgroundDashboardBorderRadius: 0.5rem;
-@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadow: @sapUiContentShadow2;
+@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadow: var(--sapContent_Shadow2);
 @_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset: 1.5rem;
 
 @_sap_ui_layout_BlockLayout_LinkTextShadow: none;
-@_sap_ui_layout_BlockLayout_CellTextColor: @sapUiBaseText;
+@_sap_ui_layout_BlockLayout_CellTextColor: var(--sapTextColor);
 
-// Horizon specific colors
+/* Horizon specific colors */
 @_sap_ui_layout_BlockLayout_BtpGrey1: #1E2833;
 @_sap_ui_layout_BlockLayout_BtpGrey2: #29394B;
 @_sap_ui_layout_BlockLayout_BtpGrey3: #2F4763;
@@ -34,75 +34,75 @@
 @_sap_ui_layout_BlockLayout_BtpIndigo9: #DCC4FF;
 
 /* ============ Custom Cell Background Color ============== */
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: #2E2703; // Mango 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: #4A3502; // Mango 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: #5D4002; // Mango 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: #7A5102; // Mango 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1E: #D89101; // Mango 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1F: #F4CA55; // Mango 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: #570000; // Red 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: #770606; // Red 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: #8F0707; // Red 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: #B50808; // Red 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2E: #FF758C; // Red 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2F: #FFBCD8; // Red 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: #4E0536; // Raspberry 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: #6E064B; // Raspberry 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: #8A0152; // Raspberry 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: #AE0565; // Raspberry 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3E: #FF6FA0; // Raspberry 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3F: #FFBEC9; // Raspberry 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: #3A0962; // Pink 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: #580787; // Pink 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: #72009C; // Pink 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: #9700B7; // Pink 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4E: #F764F3; // Pink 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4F: #FFB9EF; // Pink 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: #231570; // Indigo 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: #331C9F; // Indigo 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: #4316CA; // Indigo 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: #591FFA; // Indigo 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5E: @_sap_ui_layout_BlockLayout_BtpIndigo7; // Indigo 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5F: @_sap_ui_layout_BlockLayout_BtpIndigo9; // Indigo 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6A: #0C225F; // Blue 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: #0E3382; // Blue 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: #003CA8; // Blue 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: #0052C4; // Blue 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6E: @_sap_ui_layout_BlockLayout_BtpBlue7; // Blue 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6F: @_sap_ui_layout_BlockLayout_BtpBlue9; // Blue 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7A: #042C2B; // Teal 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: #054039; // Teal 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: #034F48; // Teal 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: #036559; // Teal 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7E: @_sap_ui_layout_BlockLayout_BtpTeal7; // Teal 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7F: @_sap_ui_layout_BlockLayout_BtpTeal9; // Teal 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8A: #0C2D16; // Green 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: #164120; // Green 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: #194F2A; // Green 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: #226635; // Green 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8E: #57B520; // Green 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8F: #A4E058; // Green 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: #062845; // Cyan 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: #063D5B; // Cyan 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: #074B66; // Cyan 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: #06617D; // Cyan 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9E: #00AFCF; // Cyan 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9F: #61E6F6; // Cyan 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10A: @_sap_ui_layout_BlockLayout_BtpGrey1; // Grey 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10B: @_sap_ui_layout_BlockLayout_BtpGrey2; // Grey 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10C: @_sap_ui_layout_BlockLayout_BtpGrey3; // Grey 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10D: @_sap_ui_layout_BlockLayout_BtpGrey4; // Grey 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10E: @_sap_ui_layout_BlockLayout_BtpGrey7; // Grey 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10F: @_sap_ui_layout_BlockLayout_BtpGrey9; // Grey 9
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: #2E2703; /* Mango 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: #4A3502; /* Mango 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: #5D4002; /* Mango 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: #7A5102; /* Mango 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1E: #D89101; /* Mango 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1F: #F4CA55; /* Mango 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: #570000; /* Red 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: #770606; /* Red 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: #8F0707; /* Red 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: #B50808; /* Red 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2E: #FF758C; /* Red 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2F: #FFBCD8; /* Red 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: #4E0536; /* Raspberry 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: #6E064B; /* Raspberry 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: #8A0152; /* Raspberry 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: #AE0565; /* Raspberry 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3E: #FF6FA0; /* Raspberry 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3F: #FFBEC9; /* Raspberry 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: #3A0962; /* Pink 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: #580787; /* Pink 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: #72009C; /* Pink 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: #9700B7; /* Pink 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4E: #F764F3; /* Pink 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4F: #FFB9EF; /* Pink 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: #231570; /* Indigo 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: #331C9F; /* Indigo 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: #4316CA; /* Indigo 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: #591FFA; /* Indigo 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5E: @_sap_ui_layout_BlockLayout_BtpIndigo7; /* Indigo 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5F: @_sap_ui_layout_BlockLayout_BtpIndigo9; /* Indigo 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6A: #0C225F; /* Blue 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: #0E3382; /* Blue 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: #003CA8; /* Blue 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: #0052C4; /* Blue 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6E: @_sap_ui_layout_BlockLayout_BtpBlue7; /* Blue 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6F: @_sap_ui_layout_BlockLayout_BtpBlue9; /* Blue 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7A: #042C2B; /* Teal 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: #054039; /* Teal 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: #034F48; /* Teal 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: #036559; /* Teal 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7E: @_sap_ui_layout_BlockLayout_BtpTeal7; /* Teal 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7F: @_sap_ui_layout_BlockLayout_BtpTeal9; /* Teal 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8A: #0C2D16; /* Green 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: #164120; /* Green 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: #194F2A; /* Green 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: #226635; /* Green 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8E: #57B520; /* Green 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8F: #A4E058; /* Green 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: #062845; /* Cyan 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: #063D5B; /* Cyan 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: #074B66; /* Cyan 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: #06617D; /* Cyan 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9E: #00AFCF; /* Cyan 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9F: #61E6F6; /* Cyan 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType10A: @_sap_ui_layout_BlockLayout_BtpGrey1; /* Grey 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType10B: @_sap_ui_layout_BlockLayout_BtpGrey2; /* Grey 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType10C: @_sap_ui_layout_BlockLayout_BtpGrey3; /* Grey 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType10D: @_sap_ui_layout_BlockLayout_BtpGrey4; /* Grey 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType10E: @_sap_ui_layout_BlockLayout_BtpGrey7; /* Grey 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType10F: @_sap_ui_layout_BlockLayout_BtpGrey9; /* Grey 9 */
 
 @_sap_ui_layout_BlockLayout_BlockColorAccentType11A: transparent;
 @_sap_ui_layout_BlockLayout_BlockColorAccentType11B: transparent;
@@ -111,14 +111,14 @@
 @_sap_ui_layout_BlockLayout_BlockColorAccentType11E: transparent;
 @_sap_ui_layout_BlockLayout_BlockColorAccentType11F: transparent;
 
-// Create classes which would just set background color of the BlockLayout cells
+/* Create classes which would just set background color of the BlockLayout cells */
 .generateCellColorSets (@backgroundColorSet, @backgroundColorShade, @textColor) {
-	@css-param: "@{backgroundColorSet}@{backgroundColorShade}"; // Concat the params
-	@css-selector: ~"sapUiBlockLayoutCellColor@{css-param}"; // Create the css selector string
-	@color-param: "_sap_ui_layout_BlockLayout_BlockColorAccentType@{css-param}"; // Build the color param name
+	@css-param: "@{backgroundColorSet}@{backgroundColorShade}"; /* Concat the params */
+	@css-selector: ~"sapUiBlockLayoutCellColor@{css-param}"; /* Create the css selector string */
+	@color-param: "_sap_ui_layout_BlockLayout_BlockColorAccentType@{css-param}"; /* Build the color param name */
 
-	// Build the real CSS selector.
-	// The output would be something like this: .sapUiBlockLayoutCellColor1A { background-color: "#996b00"; }
+	/* Build the real CSS selector.
+	The output would be something like this: .sapUiBlockLayoutCellColor1A { background-color: "#996b00"; } */
 	.@{css-selector} {
 		background-color: @@color-param;
 
@@ -134,7 +134,7 @@
 	}
 }
 
-// Define a loop and go through 10 of 11 color sets and for each set apply 6 shades. Also provide contrast text color
+/* Define a loop and go through 10 of 11 color sets and for each set apply 6 shades. Also provide contrast text color */
 .loop-cell-colors(@i: 1) when (@i =< 10) {
 	.generateCellColorSets(@i, "A", @sapUiBaseText);
 	.generateCellColorSets(@i, "B", @sapUiBaseText);
@@ -143,13 +143,13 @@
 	.generateCellColorSets(@i, "E", @sapUiContentContrastTextColor);
 	.generateCellColorSets(@i, "F", @sapUiContentContrastTextColor);
 
-	.loop-cell-colors(@i + 1); // Execute next loop iteration
+	.loop-cell-colors(@i + 1); /* Execute next loop iteration */
 }
 
-// Execute Loop through color sets
+/* Execute Loop through color sets */
 .loop-cell-colors();
 
-// iterate 11th background separately, because it uses different contrast text color
+/* iterate 11th background separately, because it uses different contrast text color */
 .generateCellColorSets(11, "A", @sapUiBaseText);
 .generateCellColorSets(11, "B", @sapUiBaseText);
 .generateCellColorSets(11, "C", @sapUiBaseText);
@@ -159,8 +159,9 @@
 
 /* ============ Background type: Light ============== */
 .sapUiBlockLayoutBackgroundLight .sapUiBlockLayoutRow {
+
 	&.sapUiBlockLayoutBackgroundColorSet1 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey1, @sapUiGroupContentBackground); // B, A
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey1, @sapUiGroupContentBackground); /* B, A */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
@@ -168,7 +169,7 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet2 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey3, @_sap_ui_layout_BlockLayout_BtpGrey2); // D, C
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey3, @_sap_ui_layout_BlockLayout_BtpGrey2); /* D, C */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
@@ -176,9 +177,9 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet3 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey7, @_sap_ui_layout_BlockLayout_BtpGrey4); // F, E
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey7, @_sap_ui_layout_BlockLayout_BtpGrey4); /* F, E */
 
-		// texts on dark background
+		/* texts on dark background */
 		.sapUiBlockLayoutEvenCell .sapUiBlockCellContent {
 			color: @sapUiContentContrastTextColor;
 
@@ -193,9 +194,9 @@
 	&.sapUiBlockLayoutBackgroundColorSet3Inverted {
 		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey4, @_sap_ui_layout_BlockLayout_BtpGrey7);
 
-		// texts on dark background
+		/* texts on dark background */
 		.sapUiBlockLayoutOddCell .sapUiBlockCellContent {
-			color: @sapUiContentContrastTextColor;
+			color: var(--sapContent_ContrastTextColor);
 
 			.sapMText,
 			.sapMLabel,
@@ -206,11 +207,11 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet4 {
-		.setCellsColorDoubles(@sapUiPageFooterBackground, @_sap_ui_layout_BlockLayout_BtpGrey9); // H, G
+		.setCellsColorDoubles(@sapUiPageFooterBackground, @_sap_ui_layout_BlockLayout_BtpGrey9); /* H, G */
 
-		// texts on dark background
+		/* texts on dark background */
 		.sapUiBlockLayoutOddCell .sapUiBlockCellContent {
-			color: @sapUiContentContrastTextColor;
+			color: var(--sapContent_ContrastTextColor);
 
 			.sapMText,
 			.sapMLabel,
@@ -223,9 +224,9 @@
 	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
 		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey9, @sapUiPageFooterBackground);
 
-		// texts on dark background
+		/* texts on dark background */
 		.sapUiBlockLayoutEvenCell .sapUiBlockCellContent {
-			color: @sapUiContentContrastTextColor;
+			color: var(--sapContent_ContrastTextColor);
 
 			.sapMText,
 			.sapMLabel,
@@ -238,8 +239,9 @@
 
 /* ============ Background type: Accent ============== */
 .sapUiBlockLayoutBackgroundAccent .sapUiBlockLayoutRow {
+
 	&.sapUiBlockLayoutBackgroundColorSet1 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal9, @_sap_ui_layout_BlockLayout_BtpTeal7); // Colors B, A
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal9, @_sap_ui_layout_BlockLayout_BtpTeal7); /* Colors B, A */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
@@ -247,7 +249,7 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet2 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue9, @_sap_ui_layout_BlockLayout_BtpBlue7); // Colors D, C
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue9, @_sap_ui_layout_BlockLayout_BtpBlue7); /* Colors D, C */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
@@ -255,15 +257,15 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet3 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo9, @_sap_ui_layout_BlockLayout_BtpIndigo7); // Colors F, E
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo9, @_sap_ui_layout_BlockLayout_BtpIndigo7); /* Colors F, E */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet3Inverted {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo7, @_sap_ui_layout_BlockLayout_BtpIndigo9); // Colors F & E
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo7, @_sap_ui_layout_BlockLayout_BtpIndigo9); /* Colors F & E */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet4 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey2, @_sap_ui_layout_BlockLayout_BtpGrey1); // Colors H, G
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey2, @_sap_ui_layout_BlockLayout_BtpGrey1); /* Colors H, G */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
@@ -275,17 +277,17 @@
 	&.sapUiBlockLayoutBackgroundColorSet3,
 	&.sapUiBlockLayoutBackgroundColorSet4 {
 		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray1 {
-			background-color: @_sap_ui_layout_BlockLayout_BtpGrey1; //color: G
+			background-color: @_sap_ui_layout_BlockLayout_BtpGrey1; /* color: G */
 		}
 
 		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray2 {
-			background-color: @_sap_ui_layout_BlockLayout_BtpGrey2; //color: H
+			background-color: @_sap_ui_layout_BlockLayout_BtpGrey2; /* color: H */
 		}
 	}
 
-	// texts on dark accent background
+	/* texts on dark accent background */
 	.sapUiBlockCellContent {
-		color: @sapUiContentContrastTextColor;
+		color: var(--sapContent_ContrastTextColor);
 
 		.sapMText,
 		.sapMLabel,
@@ -294,21 +296,22 @@
 
 		}
 		.sapMLnk {
-			color: @sapUiLinkInvertedColor;
+			color: var(--sapLink_InvertedColor);
 		}
 	}
 
-	// texts on light accent background
+	/* texts on light accent background */
 	&.sapUiBlockLayoutBackgroundColorSet4,
 	&.sapUiBlockLayoutBackgroundColorSet4Inverted,
 	.sapUiBlockLayoutBackgroundColorSetGray1,
 	.sapUiBlockLayoutBackgroundColorSetGray2 {
+
 		.sapUiBlockCellContent {
-			color: @sapUiGroupTitleTextColor;
+			color: var(--sapGroup_TitleTextColor);
 		}
 
 		.sapMLnk {
-			color: @sapUiLink;
+			color: var(--sapLinkColor);
 		}
 	}
 }

package/src/sap/ui/layout/themes/sap_horizon_dark/ColumnLayout.less

@@ -5,8 +5,8 @@
 
 .sapUiFormCL.sapUiFormBackgrSolid,
 .sapUiFormCL.sapUiFormBackgrTranslucent {
-	background-color: @sapUiGroupContentBackground;
-	border-radius: @sapUiElementBorderCornerRadius;
+	background-color: var(--sapGroup_ContentBackground);
+	border-radius: var(--sapElement_BorderCornerRadius);
 }
 
 /* Toolbar */
@@ -19,6 +19,6 @@
 /* edit mode */
 /* labels next to field */
 .sapUiFormEdit > .sapUiFormCLSmallColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsS12),
-.sapUiFormEdit > .sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12){
+.sapUiFormEdit > .sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12) {
 	padding-top: 0.875rem;
 }

package/src/sap/ui/layout/themes/sap_horizon_dark/FormLayout.less

@@ -9,14 +9,14 @@
 
 .sapUiFormLayout.sapUiFormBackgrSolid,
 .sapUiFormLayout.sapUiFormBackgrTranslucent {
-	background-color: @sapUiGroupContentBackground;
-	border-radius: @sapUiElementBorderCornerRadius;
+	background-color: var(--sapGroup_ContentBackground);
+	border-radius: var(--sapElement_BorderCornerRadius);
 }
 
 .sapUiForm .sapUiFormTitle {
 	border-width: 1px;
-	border-color: @sapUiGroupTitleBorderColor;
-	font-family: @sapUiFontHeaderFamily;
+	border-color: var(--sapGroup_TitleBorderColor);
+	font-family: var(--sapFontHeaderFamily);
 	height: 2.75rem;
 	line-height: 2.75rem;
 }
@@ -36,39 +36,39 @@
 }
 
 /* Title levels should be all rendered in same style. Levels can be changed by application to meet page structure without visual effect */
-/* Form Titles are rendered using H4 level, but H5 size*/
+/* Form Titles are rendered using H4 level, but H5 size */
 .sapUiFormTitleH1,
 .sapUiFormTitleH2,
 .sapUiFormTitleH3,
 .sapUiFormTitleH4,
 .sapUiFormTitleH5,
 .sapUiFormTitleH6 {
-	font-size: @sapMFontHeader5Size;
+	font-size: var(--sapFontHeader5Size);
 }
 
-/* FormContainer Titles are rendered using H5 level, but H6 size*/
+/* FormContainer Titles are rendered using H5 level, but H6 size */
 .sapUiFormContainerTitle .sapUiFormTitleH1,
 .sapUiFormContainerTitle .sapUiFormTitleH2,
 .sapUiFormContainerTitle .sapUiFormTitleH3,
 .sapUiFormContainerTitle .sapUiFormTitleH4,
 .sapUiFormContainerTitle .sapUiFormTitleH5,
 .sapUiFormContainerTitle .sapUiFormTitleH6 {
-	font-size: @sapMFontHeader6Size;
-	color: @sapUiGroupTitleTextColor;
+	font-size: var(--sapFontHeader6Size);
+	color: var(--sapGroup_TitleTextColor);
 	font-weight: bold;
 }
 
 /* Toolbar */
-.sapUiFormContainerToolbar > div:first-child > .sapMTitle{
+.sapUiFormContainerToolbar > div:first-child > .sapMTitle {
 	font-weight: bold;
 }
 
-.sapUiFormToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto{
-	font-size: @sapMFontHeader5Size;
+.sapUiFormToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto {
+	font-size: var(--sapFontHeader5Size);
 }
 
-.sapUiFormContainerToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto{
-	font-size: @sapMFontHeader6Size;
+.sapUiFormContainerToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto {
+	font-size: var(--sapFontHeader6Size);
 }
 
 .sapUiFormContainerToolbar > .sapMTB-Transparent-CTX.sapMTB.sapMIBar {

package/src/sap/ui/layout/themes/sap_horizon_dark/GridLayout.less

@@ -9,8 +9,8 @@
 
 .sapUiGrid.sapUiFormBackgrSolid,
 .sapUiGrid.sapUiFormBackgrTranslucent {
-	background-color: @sapUiGroupContentBackground;
-	border-radius: @sapUiElementBorderCornerRadius;
+	background-color: var(--sapGroup_ContentBackground);
+	border-radius: var(--sapElement_BorderCornerRadius);
 }
 
 .sapUiGrid > tbody > tr.sapUiGridTitle {

package/src/sap/ui/layout/themes/sap_horizon_dark/ResponsiveGridLayout.less

@@ -5,8 +5,8 @@
 
 .sapUiFormResGrid.sapUiFormBackgrSolid,
 .sapUiFormResGrid.sapUiFormBackgrTranslucent {
-	background-color: @sapUiGroupContentBackground;
-	border-radius: @sapUiElementBorderCornerRadius;
+	background-color: var(--sapGroup_ContentBackground);
+	border-radius: var(--sapElement_BorderCornerRadius);
 }
 
 /* Toolbar */
@@ -21,6 +21,6 @@
 .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12),
 .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12),
 .sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12),
-.sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12){
+.sapUiFormEdit.sapUiFormM .sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12) {
 	padding-top: 0.875rem;
 }

package/src/sap/ui/layout/themes/sap_horizon_dark/ResponsiveLayout.less

@@ -5,8 +5,8 @@
 
 .sapUiFormResLayout.sapUiFormBackgrSolid,
 .sapUiFormResLayout.sapUiFormBackgrTranslucent {
-	background-color: @sapUiGroupContentBackground;
-	border-radius: @sapUiElementBorderCornerRadius;
+	background-color: var(--sapGroup_ContentBackground);
+	border-radius: var(--sapElement_BorderCornerRadius);
 }
 
 .sapUiRLContainer > .sapUiFormTitle > .sapUiBtn {
@@ -25,10 +25,10 @@
 }
 
 /* alignment of Label */
-.sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent{
+.sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent {
 	padding-top: 0.875rem;
 }
 
-html[data-sap-ui-browser^="ff"] .sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent{
+html[data-sap-ui-browser^="ff"] .sapUiFormEdit.sapUiFormM .sapUiRLElementWithLabel > .sapUiRFLRow:not(.sapUiRFLCompleteRow) > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent {
 	padding-top: 0.8125rem;
 }

package/src/sap/ui/layout/themes/sap_horizon_dark/ResponsiveSplitter.less

@@ -7,6 +7,6 @@
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonWidth: 2.25rem;
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHeight: 2.25rem;
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius: inherit;
-@_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton: @sapUiSelected;
-@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive: @sapUiButtonActiveTextColor;
-@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHoverShadow: @sapUiContentInteractionShadow;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton: var(--sapSelectedColor);
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive: var(--sapButton_Active_TextColor);
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHoverShadow: var(--sapContent_Interaction_Shadow);

package/src/sap/ui/layout/themes/sap_horizon_dark/Splitter.less

@@ -1,7 +1,7 @@
-/* ================================================= */
-/* CSS for control sap.ui.layout/Splitter            */
-/* Evening Horizon theme                             */
-/* ================================================= */
+/* ======================================= */
+/* CSS for control sap.ui.layout/Splitter  */
+/* Evening Horizon theme                   */
+/* ======================================= */
 
-@_sap_ui_layout_Splitter_GripButtonColor: @sapUiButtonLiteTextColor;
-@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiGroupContentBorderColor, transparent;
+@_sap_ui_layout_Splitter_GripButtonColor: var(--sapButton_Lite_TextColor);
+@_sap_ui_layout_Splitter_BarDecorationColors: var(--sapGroup_ContentBorderColor), transparent;

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */