@openui5/themelib_sap_horizon 1.134.0 → 1.136.0

package/src/sap/ui/integration/themes/sap_horizon_dark/TableContent.less

@@ -1,15 +1,19 @@
-/* ===================================================== */
-/* CSS for control sap.ui.integration.cards/TableContent */
-/* Evening Horizon theme                                 */
-/* ===================================================== */
+/* ====================================================== */
+/* CSS for control sap.ui.integration.cards/TableContent  */
+/* Evening Horizon theme                                  */
+/* ====================================================== */
+
+.sapUiIntCard:not(.sapUiIntCardDialogCard) {
 
-.sapUiIntCard:not(".sapUiIntCardDialogCard") {
 	&.sapFCardNoHeader,
 	&.sapFCardBottomHeader {
-		& > .sapFCardContent > .sapFCardTableContent .sapMListTblHeader.sapMLIBFocusable:focus { // header of the table
+
+		& > .sapFCardContent > .sapFCardTableContent .sapMListTblHeader.sapMLIBFocusable:focus { /* header of the table */
+
 			> .sapMTblFirstVisibleCell::before {
 				border-top-left-radius: 1rem;
 			}
+
 			> .sapMTblLastVisibleCell::before {
 				border-top-right-radius: 1rem;
 			}
@@ -17,8 +21,9 @@
 	}
 
 	&:not(.sapUiIntCardWithFooter):not(.sapFCardBottomHeader):not(.sapFCardTransparent) {
-		& > .sapFCardContent > .sapFCardTableContent .sapMTableTBody .sapUiIntTCIRoundedCorners.sapMLIBFocusable:last-child:focus { // last row in the table
+
+		& > .sapFCardContent > .sapFCardTableContent .sapMTableTBody .sapUiIntTCIRoundedCorners.sapMLIBFocusable:last-child:focus { /* last row in the table */
 			border-radius: 0 0 1rem 1rem;
 		}
 	}
-}
+}

package/src/sap/ui/integration/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.
  */
 

package/src/sap/ui/integration/themes/sap_horizon_hcb/ListContentItem.less

@@ -1,6 +1,6 @@
-/* =========================================================== */
-/* CSS for control sap.ui.integration.controls/ListContentItem */
-/* Quartz High Contrast Black                                  */
-/* =========================================================== */
+/* ============================================================ */
+/* CSS for control sap.ui.integration.controls/ListContentItem  */
+/* Horizon High Contrast Black theme                            */
+/* ============================================================ */
 
-@_sap_ui_integration_ListContentItem_TextShadow: none;
+@_sap_ui_integration_ListContentItem_TextShadow: none;

package/src/sap/ui/integration/themes/sap_horizon_hcb/Paginator.less

@@ -1,11 +1,11 @@
 /* ====================================================== */
-/* CSS for control sap.ui.integration.controls/Paginator */
+/* CSS for control sap.ui.integration.controls/Paginator  */
+/* Horizon High Contrast Black theme                      */
 /* ====================================================== */
 
-@_sap_ui_integration_Paginator_BulletActiveBorder: @sapUiContentForegroundBorderColor;
+@_sap_ui_integration_Paginator_BulletActiveBorder: var(--sapContent_ForegroundBorderColor);
 @_sap_ui_integration_Paginator_BulletInactiveBackground: none;
-@_sap_ui_integration_Paginator_BulletInactiveBorderColor: @sapUiContentForegroundBorderColor;
-@_sap_ui_integration_Paginator_BulletInactiveHoverBackground: @sapUiButtonHoverBackground;
-
+@_sap_ui_integration_Paginator_BulletInactiveBorderColor: var(--sapContent_ForegroundBorderColor);
+@_sap_ui_integration_Paginator_BulletInactiveHoverBackground: var(--sapButton_Hover_Background);
 @_sap_ui_integration_Paginator_BulletInactiveWidth: 0.5rem;
 @_sap_ui_integration_Paginator_BulletInactivePadding: 0.25rem;

package/src/sap/ui/integration/themes/sap_horizon_hcb/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/integration/themes/sap_horizon_hcw/ListContentItem.less

@@ -1,6 +1,6 @@
-/* =========================================================== */
-/* CSS for control sap.ui.integration.controls/ListContentItem */
-/* Quartz High Contrast Black                                  */
-/* =========================================================== */
+/* ============================================================ */
+/* CSS for control sap.ui.integration.controls/ListContentItem  */
+/* Horizon High Contrast White theme                            */
+/* ============================================================ */
 
-@_sap_ui_integration_ListContentItem_TextShadow: none;
+@_sap_ui_integration_ListContentItem_TextShadow: none;

package/src/sap/ui/integration/themes/sap_horizon_hcw/Paginator.less

@@ -1,11 +1,11 @@
 /* ====================================================== */
-/* CSS for control sap.ui.integration.controls/Paginator */
+/* CSS for control sap.ui.integration.controls/Paginator  */
+/* Horizon High Contrast White theme                      */
 /* ====================================================== */
 
-@_sap_ui_integration_Paginator_BulletActiveBorder: @sapUiContentForegroundBorderColor;
+@_sap_ui_integration_Paginator_BulletActiveBorder: var(--sapContent_ForegroundBorderColor);
 @_sap_ui_integration_Paginator_BulletInactiveBackground: none;
-@_sap_ui_integration_Paginator_BulletInactiveBorderColor: @sapUiContentForegroundBorderColor;
-@_sap_ui_integration_Paginator_BulletInactiveHoverBackground: @sapUiButtonHoverBackground;
-
+@_sap_ui_integration_Paginator_BulletInactiveBorderColor: var(--sapContent_ForegroundBorderColor);
+@_sap_ui_integration_Paginator_BulletInactiveHoverBackground: var(--sapButton_Hover_Background);
 @_sap_ui_integration_Paginator_BulletInactiveWidth: 0.5rem;
 @_sap_ui_integration_Paginator_BulletInactivePadding: 0.25rem;

package/src/sap/ui/integration/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/layout/themes/sap_horizon/BlockLayout.less

@@ -1,22 +1,22 @@
 /* ========================================== */
 /* CSS for control sap.ui.layout/BlockLayout  */
-/* Horizon theme                              */
+/* Morning 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: 0px 0px 0.125rem rgba(91, 115, 139, 0.16), 0px 1rem 2rem rgba(91, 115, 139, 0.16);
+@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadow: 0 0 0.125rem rgba(91, 115, 139, 0.16), 0px 1rem 2rem rgba(91, 115, 139, 0.16);
 @_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: #F5F6F7;
 @_sap_ui_layout_BlockLayout_BtpGrey2: #EAECEE;
 @_sap_ui_layout_BlockLayout_BtpGrey3: #D5DADD;
@@ -34,75 +34,75 @@
 @_sap_ui_layout_BlockLayout_BtpIndigo9: #2C13AD;
 
 /* ============ Custom Cell Background Color ============== */
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: #FFF8D6; // Mango 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: #FFF3B8; // Mango 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: #FFDF72; // Mango 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: #FFC933; // Mango 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1E: #C35500; // Mango 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1F: #8D2A00; // Mango 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: #FFEAF4; // Red 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: #FFD5EA; // Red 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: #FFB2D2; // Red 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: #FF8CB2; // Red 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2E: #D20A0A; // Red 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2F: #840606; // Red 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: #FFF0F5; // Raspberry 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: #FFDCE8; // Raspberry 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: #FECBDA; // Raspberry 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: #FEADC8; // Raspberry 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3E: #DF1278; // Raspberry 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3F: #9B015D; // Raspberry 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: #FFF0FA; // Pink 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: #FFDCF3; // Pink 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: #FFAFED; // Pink 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: #FF8AF0; // Pink 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4E: #CC00DC; // Pink 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4F: #7800A4; // Pink 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: #F1ECFF; // Indigo 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: #E2D8FF; // Indigo 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: #D3B6FF; // Indigo 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: #B894FF; // 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: #EBF8FF; // Blue 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: #D1EFFF; // Blue 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: #A6E0FF; // Blue 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: #89D1FF; // 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: #DAFDF5; // Teal 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: #C2FCEE; // Teal 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: #85F1DC; // Teal 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: #2CE0BF; // 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: #F5FAE5; // Green 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: #E5F2BD; // Green 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: #BAE881; // Green 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: #97DD40; // Green 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8E: #188918; // Green 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8F: #1E592F; // Green 9
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: #DBF9FF; // Cyan 1
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: #B8F3FF; // Cyan 2
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: #7AEAF8; // Cyan 3
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: #2DD6EF; // Cyan 4
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9E: #007FA9; // Cyan 7
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9F: #025484; // 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: #FFF8D6; /* Mango 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: #FFF3B8; /* Mango 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: #FFDF72; /* Mango 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: #FFC933; /* Mango 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1E: #C35500; /* Mango 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1F: #8D2A00; /* Mango 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: #FFEAF4; /* Red 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: #FFD5EA; /* Red 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: #FFB2D2; /* Red 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: #FF8CB2; /* Red 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2E: #D20A0A; /* Red 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2F: #840606; /* Red 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: #FFF0F5; /* Raspberry 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: #FFDCE8; /* Raspberry 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: #FECBDA; /* Raspberry 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: #FEADC8; /* Raspberry 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3E: #DF1278; /* Raspberry 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3F: #9B015D; /* Raspberry 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: #FFF0FA; /* Pink 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: #FFDCF3; /* Pink 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: #FFAFED; /* Pink 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: #FF8AF0; /* Pink 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4E: #CC00DC; /* Pink 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4F: #7800A4; /* Pink 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: #F1ECFF; /* Indigo 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: #E2D8FF; /* Indigo 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: #D3B6FF; /* Indigo 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: #B894FF; /* 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: #EBF8FF; /* Blue 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: #D1EFFF; /* Blue 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: #A6E0FF; /* Blue 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: #89D1FF; /* 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: #DAFDF5; /* Teal 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: #C2FCEE; /* Teal 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: #85F1DC; /* Teal 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: #2CE0BF; /* 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: #F5FAE5; /* Green 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: #E5F2BD; /* Green 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: #BAE881; /* Green 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: #97DD40; /* Green 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8E: #188918; /* Green 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8F: #1E592F; /* Green 9 */
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: #DBF9FF; /* Cyan 1 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: #B8F3FF; /* Cyan 2 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: #7AEAF8; /* Cyan 3 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: #2DD6EF; /* Cyan 4 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9E: #007FA9; /* Cyan 7 */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9F: #025484; /* 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,11 +177,11 @@
 	}
 
 	&.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;
+			color: var(--sapContent_ContrastTextColor);
 
 			.sapMText,
 			.sapMLabel,
@@ -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 {
@@ -274,18 +276,19 @@
 	&.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 */
 		}
 	}
 
-	// texts on dark accent background
+	/* texts on dark accent background */
 	.sapUiBlockCellContent {
-		color: @sapUiContentContrastTextColor;
+		color: var(--sapContent_ContrastTextColor);
 
 		.sapMText,
 		.sapMLabel,
@@ -294,21 +297,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/ColumnLayout.less

@@ -1,12 +1,12 @@
 /* ================================================ */
 /* CSS for control sap.ui.layout/form/ColumnLayout  */
-/* Horizon theme                                    */
+/* Morning Horizon theme                            */
 /* ================================================ */
 
 .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/FormLayout.less

@@ -1,6 +1,6 @@
 /* ========================================= */
 /* CSS for control sap.ui.layout/FormLayout  */
-/* Horizon theme                             */
+/* Morning Horizon theme                     */
 /* ========================================= */
 
 .sapUiFormLayout {
@@ -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,41 +36,41 @@
 }
 
 /* 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 {
 	padding: 0 0.25rem 0 0;
-}
+}

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

@@ -1,6 +1,6 @@
 /* ========================================= */
 /* CSS for control sap.ui.layout/GridLayout  */
-/* Horizon theme                             */
+/* Morning Horizon theme                     */
 /* ========================================= */
 
 .sapUiGrid {
@@ -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 {
@@ -44,4 +44,4 @@
 .sapUiFormEdit.sapUiFormM >.sapUiGrid > tbody > tr:first-child > td.sapUiFormElementLbl, /* if no Form title */
 .sapUiFormEdit[aria-labelledby].sapUiFormM > .sapUiGrid > tbody > tr:nth-child(2) > td.sapUiFormElementLbl {
 	padding-top: 1.875rem;
-}
+}