@openui5/themelib_sap_horizon 1.135.0 → 1.136.0

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

@@ -3,19 +3,19 @@
 /* Horizon High Contrast White 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;
 
-// Horizon specific colors
+/* Horizon specific colors */
 @_sap_ui_layout_BlockLayout_BtpGrey1: #C5CDD3;
 @_sap_ui_layout_BlockLayout_BtpGrey2: #BCC5CC;
 @_sap_ui_layout_BlockLayout_BtpGrey3: #B3BDC5;
@@ -33,75 +33,75 @@
 @_sap_ui_layout_BlockLayout_BtpIndigo7: #A87CFF;
 
 /* ============ Custom Cell Background Color ============== */
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: #FFC218; // Mango 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: #FAB900; // Mango 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: #F0B100; // Mango 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: #E5A900; // Mango 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1E: #CD9700; // Mango 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1F: #BF8D00; // Mango 7
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: #FFBABA; // Red 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: #FFAFAF; // Red 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: #FFA3A3; // Red 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: #FF9595; // Red 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2E: #FF7474; // Red 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2F: #FF5E5E; // Red 7
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: #FEB7D9; // Raspberry 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: #FEABD3; // Raspberry 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: #FE9FCC; // Raspberry 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: #FE90C5; // Raspberry 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3E: #FD6DB2; // Raspberry 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3F: #FD55A6; // Raspberry 7
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: #FFB3F5; // Pink 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: #FFA6F3; // Pink 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: #FF98F1; // Pink 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: #FF88EF; // Pink 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4E: #FF5DE9; // Pink 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4F: #FF3BE5; // Pink 7
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: #D6C2FF; // Indigo 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: #D0B8FF; // Indigo 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: #CAAEFF; // Indigo 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: #C2A3FF; // Indigo 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5E: @_sap_ui_layout_BlockLayout_BtpIndigo6; // Indigo 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5F: @_sap_ui_layout_BlockLayout_BtpIndigo7; // Indigo 7
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6A: #8FD4FF; // Blue 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: #7ECCFF; // Blue 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: #69C5FF; // Blue 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: #53BCFF; // Blue 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6E: @_sap_ui_layout_BlockLayout_BtpBlue6; // Blue 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6F: @_sap_ui_layout_BlockLayout_BtpBlue7; // Blue 7
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7A: #3CE3C5; // Teal 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: #1FDCBA; // Teal 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: #1ED3B3; // Teal 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: #1DC9AA; // Teal 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7E: @_sap_ui_layout_BlockLayout_BtpTeal6; // Teal 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7F: @_sap_ui_layout_BlockLayout_BtpTeal7; // Teal 7
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8A: #9BDF47; // Green 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: #8AD926; // Green 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: #84D025; // Green 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: #7EC623; // Green 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8E: #71B11F; // Green 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8F: #69A51D; // Green 7
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: #51DDF2; // Cyan 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: #2DD6EF; // Cyan 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: #12CEE9; // Cyan 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: #11C4DF; // Cyan 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9E: #0FB0C7; // Cyan 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9F: #0EA4BA; // Cyan 7
-
-@_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_BtpGrey6; // Grey 6
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10F: @_sap_ui_layout_BlockLayout_BtpGrey7; // Grey 7
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: #FFC218; /* Mango 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: #FAB900; /* Mango 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: #F0B100; /* Mango 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: #E5A900; /* Mango 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1E: #CD9700; /* Mango 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1F: #BF8D00; /* Mango 7 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: #FFBABA; /* Red 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: #FFAFAF; /* Red 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: #FFA3A3; /* Red 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: #FF9595; /* Red 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2E: #FF7474; /* Red 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2F: #FF5E5E; /* Red 7 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: #FEB7D9; /* Raspberry 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: #FEABD3; /* Raspberry 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: #FE9FCC; /* Raspberry 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: #FE90C5; /* Raspberry 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3E: #FD6DB2; /* Raspberry 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3F: #FD55A6; /* Raspberry 7 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: #FFB3F5; /* Pink 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: #FFA6F3; /* Pink 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: #FF98F1; /* Pink 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: #FF88EF; /* Pink 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4E: #FF5DE9; /* Pink 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4F: #FF3BE5; /* Pink 7 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: #D6C2FF; /* Indigo 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: #D0B8FF; /* Indigo 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: #CAAEFF; /* Indigo 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: #C2A3FF; /* Indigo 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5E: @_sap_ui_layout_BlockLayout_BtpIndigo6; /* Indigo 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5F: @_sap_ui_layout_BlockLayout_BtpIndigo7; /* Indigo 7 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6A: #8FD4FF; /* Blue 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: #7ECCFF; /* Blue 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: #69C5FF; /* Blue 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: #53BCFF; /* Blue 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6E: @_sap_ui_layout_BlockLayout_BtpBlue6; /* Blue 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6F: @_sap_ui_layout_BlockLayout_BtpBlue7; /* Blue 7 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7A: #3CE3C5; /* Teal 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: #1FDCBA; /* Teal 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: #1ED3B3; /* Teal 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: #1DC9AA; /* Teal 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7E: @_sap_ui_layout_BlockLayout_BtpTeal6; /* Teal 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7F: @_sap_ui_layout_BlockLayout_BtpTeal7; /* Teal 7 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8A: #9BDF47; /* Green 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: #8AD926; /* Green 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: #84D025; /* Green 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: #7EC623; /* Green 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8E: #71B11F; /* Green 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8F: #69A51D; /* Green 7 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: #51DDF2; /* Cyan 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: #2DD6EF; /* Cyan 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: #12CEE9; /* Cyan 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: #11C4DF; /* Cyan 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9E: #0FB0C7; /* Cyan 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9F: #0EA4BA; /* Cyan 7 */
+
+@_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_BtpGrey6; /* Grey 6 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType10F: @_sap_ui_layout_BlockLayout_BtpGrey7; /* Grey 7 */
 
 @_sap_ui_layout_BlockLayout_BlockColorAccentType11A: transparent;
 @_sap_ui_layout_BlockLayout_BlockColorAccentType11B: transparent;
@@ -110,19 +110,19 @@
 @_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) {
-	@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;
 
 		.sapUiBlockCellContent {
-			color: @sapUiBaseText;
+			color: var(--sapTextColor);
 
 			.sapMText,
 			.sapMLabel,
@@ -133,7 +133,7 @@
 	}
 }
 
-// Define a loop and go through 11 color sets and for each set apply 6 shades
+/* Define a loop and go through 11 color sets and for each set apply 6 shades */
 .loop-cell-colors(@i: 1) when (@i =< 11) {
 	.generateCellColorSets(@i, "A");
 	.generateCellColorSets(@i, "B");
@@ -142,16 +142,17 @@
 	.generateCellColorSets(@i, "E");
 	.generateCellColorSets(@i, "F");
 
-	.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();
 
 /* ============ 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 {
@@ -159,7 +160,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 {
@@ -167,7 +168,7 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet3 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey6, @_sap_ui_layout_BlockLayout_BtpGrey4); // F, E
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey6, @_sap_ui_layout_BlockLayout_BtpGrey4); /* F, E */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet3Inverted {
@@ -175,7 +176,7 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet4 {
-		.setCellsColorDoubles(@sapUiPageFooterBackground, @_sap_ui_layout_BlockLayout_BtpGrey7); // H, G
+		.setCellsColorDoubles(@sapUiPageFooterBackground, @_sap_ui_layout_BlockLayout_BtpGrey7); /* H, G */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
@@ -185,8 +186,9 @@
 
 /* ============ Background type: Accent ============== */
 .sapUiBlockLayoutBackgroundAccent .sapUiBlockLayoutRow {
+
 	&.sapUiBlockLayoutBackgroundColorSet1 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal7, @_sap_ui_layout_BlockLayout_BtpTeal6); // Colors B, A
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal7, @_sap_ui_layout_BlockLayout_BtpTeal6); /* Colors B, A */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
@@ -194,7 +196,7 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet2 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue7, @_sap_ui_layout_BlockLayout_BtpBlue6); // Colors D, C
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue7, @_sap_ui_layout_BlockLayout_BtpBlue6); /* Colors D, C */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
@@ -202,15 +204,15 @@
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet3 {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo7, @_sap_ui_layout_BlockLayout_BtpIndigo6); // Colors F, E
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo7, @_sap_ui_layout_BlockLayout_BtpIndigo6); /* Colors F, E */
 	}
 
 	&.sapUiBlockLayoutBackgroundColorSet3Inverted {
-		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo6, @_sap_ui_layout_BlockLayout_BtpIndigo7); // Colors F & E
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo6, @_sap_ui_layout_BlockLayout_BtpIndigo7); /* 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 {
@@ -221,12 +223,13 @@
 	&.sapUiBlockLayoutBackgroundColorSet2,
 	&.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 */
 		}
 	}
-}
+}

package/src/sap/ui/layout/themes/sap_horizon_hcw/BlockLayoutCell.less

@@ -4,5 +4,5 @@
 /* ============================================== */
 
 .sapUiBlockCellContent {
-	border: @sapUiGroupBorderWidth solid @sapUiTileBorderColor;
+	border: var(--sapGroup_BorderWidth) solid var(--sapTile_BorderColor);
 }

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

@@ -13,6 +13,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_hcw/FormLayout.less

@@ -21,39 +21,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_hcw/ResponsiveGridLayout.less

@@ -20,6 +20,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_hcw/ResponsiveLayout.less

@@ -19,10 +19,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_hcw/Splitter.less

@@ -3,10 +3,10 @@
 /* Horizon High Contrast White theme       */
 /* ======================================= */
 
-@_sap_ui_layout_Splitter_BarActiveDecorationColors: @sapUiObjectHeaderBorderColor, @sapUiObjectHeaderBorderColor;
-@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiObjectHeaderBorderColor, fade(@sapUiObjectHeaderBorderColor, 0);
-@_sap_ui_layout_Splitter_BarHoverIconBorderColor: @sapUiButtonLiteHoverBorderColor;
-@_sap_ui_layout_Splitter_BarHoverIconBackground: @sapUiButtonLiteHoverBackground;
+@_sap_ui_layout_Splitter_BarActiveDecorationColors: var(--sapObjectHeader_BorderColor), var(--sapObjectHeader_BorderColor);
+@_sap_ui_layout_Splitter_BarDecorationColors: var(--sapObjectHeader_BorderColor), fade(@sapUiObjectHeaderBorderColor, 0);
+@_sap_ui_layout_Splitter_BarHoverIconBorderColor: var(--sapButton_Lite_Hover_BorderColor);
+@_sap_ui_layout_Splitter_BarHoverIconBackground: var(--sapButton_Lite_Hover_Background);
 
 .sapUiLoSplitter {
 	background-color: @sapUiHcStandardBackground;
@@ -16,6 +16,7 @@
 
 .sapUiLoSplitter > .sapUiLoSplitterBar,
 .sapUiLoSplitter > .sapUiLoSplitterOverlay .sapUiLoSplitterOverlayBar {
+
 	&:focus::after {
 		border-width: 2px;
 	}

package/src/sap/ui/layout/themes/sap_horizon_hcw/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.
  */
 

package/src/sap/ui/mdc/themes/sap_horizon/FieldBase.less

@@ -1,3 +1,8 @@
+/* ===================================== */
+/* CSS for control sap.ui.mdc/FieldBase  */
+/* Morning Horizon theme                 */
+/* ===================================== */
+
 .sapUiMdcFieldBase {
 	overflow: visible; /* as hover outline is outside of Input control */
-}
+}

package/src/sap/ui/mdc/themes/sap_horizon/Table.less

@@ -1,13 +1,13 @@
-/* =================================== */
+/* ================================= */
 /* CSS for control sap.ui.mdc/Table  */
-/* Horizon theme                       */
-/* =================================== */
+/* Morning Horizon theme             */
+/* ================================= */
 
 @_sap_ui_mdc_Table_ExportButtonType: ~"Transparent";
 @_sap_ui_mdc_Table_ToolbarDesign: ~"Solid";
 @_sap_ui_mdc_Table_HeaderStyle: ~"H5";
 
 .sapUiMdcTable .sapMIBar.sapMTBHeader-CTX {
-	border-top-right-radius: @sapUiElementBorderCornerRadius;
-	border-top-left-radius: @sapUiElementBorderCornerRadius;
+	border-top-right-radius: var(--sapElement_BorderCornerRadius);
+	border-top-left-radius: var(--sapElement_BorderCornerRadius);
 }

package/src/sap/ui/mdc/themes/sap_horizon/TokenDisplay.less

@@ -1,37 +1,35 @@
 /* ======================================== */
 /* CSS for control sap.ui.mdc/TokenDisplay  */
-/* Horizon theme              				*/
+/* Morning Horizon theme                    */
 /* ======================================== */
 
 .sapUiMdcTokenizerDisplay .sapMToken {
 	background: transparent;
-	border: 0px;
-
+	border: 0;
 	padding-left: 0.3125rem;
 }
 
 .sapUiMdcTokenizerDisplay .sapMTokenSelected:not(:focus),
 .sapUiMdcTokenizerDisplay .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
 	background: transparent;
-	border: 0px;
+	border: 0;
 	box-shadow: none;
 }
 
 html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:not(.sapMTokenSelected):not(:focus):hover,
 html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:not(.sapMTokenSelected):not(.sapMTokenReadOnly):focus:hover {
 	background: transparent;
-	border: 0px;
+	border: 0;
 	box-shadow: none;
 }
 
 html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken.sapMTokenSelected:hover {
 	background: transparent;
-	border: 0px;
+	border: 0;
 }
 
 html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:focus,
-html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:focus:after {
-	border: 0px;
+html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:focus::after {
+	border: 0;
 	box-shadow: none;
-}
-
+}

package/src/sap/ui/mdc/themes/sap_horizon/TokenizerDisplay.less

@@ -1,10 +1,9 @@
-/* =========================================== */
-/* CSS for control sap.ui.mdc/TokenizerDisplay */
-/* Horizon theme                               */
-/* =========================================== */
+/* ============================================ */
+/* CSS for control sap.ui.mdc/TokenizerDisplay  */
+/* Morning Horizon theme                        */
+/* ============================================ */
 
 html.sap-desktop .sapUiMdcTokenizerDisplay.sapMTokenizer:focus {
-    outline: none;
-    box-shadow: none;
-}
-
+	outline: none;
+	box-shadow: none;
+}

package/src/sap/ui/mdc/themes/sap_horizon/ValueHelpDialog.less

@@ -1,14 +1,14 @@
 /* =========================================== */
 /* CSS for control sap.ui.mdc/ValueHelpDialog  */
-/* Horizon theme                               */
+/* Morning Horizon theme                       */
 /* =========================================== */
 
-// give the title 2rem left margin
+/* give the title 2rem left margin */
 .sapMdcValueHelpTitle.sapMDialog header .sapMBarPH {
 	padding-left: 2rem;
 }
 
-// setting some background to transparent so that the VH dialog content get a white background
+/* setting some background to transparent so that the VH dialog content get a white background */
 .sapMdcValueHelpPanel {
     background-color: transparent;
 }

package/src/sap/ui/mdc/themes/sap_horizon/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.
  */
 

package/src/sap/ui/mdc/themes/sap_horizon_dark/FieldBase.less

@@ -1,3 +1,8 @@
+/* ===================================== */
+/* CSS for control sap.ui.mdc/FieldBase  */
+/* Evening Horizon theme                 */
+/* ===================================== */
+
 .sapUiMdcFieldBase {
 	overflow: visible; /* as hover outline is outside of Input control */
-}
+}

package/src/sap/ui/mdc/themes/sap_horizon_dark/Table.less

@@ -8,6 +8,6 @@
 @_sap_ui_mdc_Table_HeaderStyle: ~"H5";
 
 .sapUiMdcTable .sapMIBar.sapMTBHeader-CTX {
-	border-top-right-radius: @sapUiElementBorderCornerRadius;
-	border-top-left-radius: @sapUiElementBorderCornerRadius;
+	border-top-right-radius: var(--sapElement_BorderCornerRadius);
+	border-top-left-radius: var(--sapElement_BorderCornerRadius);
 }

package/src/sap/ui/mdc/themes/sap_horizon_dark/TokenDisplay.less

@@ -1,34 +1,33 @@
 /* ======================================== */
 /* CSS for control sap.ui.mdc/TokenDisplay  */
-/* Evening Horizon theme       				*/
+/* Evening Horizon theme                    */
 /* ======================================== */
 
 .sapUiMdcTokenizerDisplay .sapMToken {
 	background: transparent;
-	border: 0px;
-
+	border: 0;
 	padding-left: 0.3125rem;
 }
 
 .sapUiMdcTokenizerDisplay .sapMTokenSelected:not(:focus),
 .sapUiMdcTokenizerDisplay .sapMToken.sapMTokenReadOnly.sapMTokenSelected {
 	background: transparent;
-	border: 0px;
+	border: 0;
 	box-shadow: none;
 }
 
 html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:not(.sapMTokenSelected):not(:focus):hover {
 	background: transparent;
-	border: 0px;
+	border: 0;
 	box-shadow: none;
 }
 
 html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken.sapMTokenSelected:hover {
 	background: transparent;
-	border: 0px;
+	border: 0;
 }
 
 html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:focus {
-	border: 0px;
+	border: 0;
 	box-shadow: none;
 }

package/src/sap/ui/mdc/themes/sap_horizon_dark/TokenizerDisplay.less

@@ -4,6 +4,6 @@
 /* ============================================ */
 
 html.sap-desktop .sapUiMdcTokenizerDisplay.sapMTokenizer:focus {
-    outline: none;
-    box-shadow: none;
+	outline: none;
+	box-shadow: none;
 }