@openui5/themelib_sap_horizon 1.102.2 → 1.104.0

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

@@ -5,95 +5,114 @@
 
 @_sap_ui_layout_BlockLayout_FontSizeLandXL: @sapMFontHeader2Size;
 
-/* ============ Custom Cell Background Color ============== */
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: lighten(@sapAccentColor1, 53);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: lighten(@sapAccentColor1, 51);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: lighten(@sapAccentColor1, 49);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: lighten(@sapAccentColor1, 47);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1E: @sapAccentColor1;
-@_sap_ui_layout_BlockLayout_BlockColorAccentType1F: darken(@sapAccentColor1, 3);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: lighten(@sapAccentColor2, 44);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: lighten(@sapAccentColor2, 42);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: lighten(@sapAccentColor2, 40);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: lighten(@sapAccentColor2, 38);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2E: @sapAccentColor2;
-@_sap_ui_layout_BlockLayout_BlockColorAccentType2F: darken(@sapAccentColor2, 4);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: lighten(@sapAccentColor3, 49);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: lighten(@sapAccentColor3, 47);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: lighten(@sapAccentColor3, 45);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: lighten(@sapAccentColor3, 43);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3E: @sapAccentColor3;
-@_sap_ui_layout_BlockLayout_BlockColorAccentType3F: darken(@sapAccentColor3, 6);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: lighten(@sapAccentColor4, 50);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: lighten(@sapAccentColor4, 48);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: lighten(@sapAccentColor4, 46);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: lighten(@sapAccentColor4, 44);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4E: @sapAccentColor4;
-@_sap_ui_layout_BlockLayout_BlockColorAccentType4F: darken(@sapAccentColor4, 6);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: lighten(@sapAccentColor5, 35);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: lighten(@sapAccentColor5, 33);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: lighten(@sapAccentColor5, 31);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: lighten(@sapAccentColor5, 29);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5E: @sapAccentColor5;
-@_sap_ui_layout_BlockLayout_BlockColorAccentType5F: darken(@sapAccentColor5, 6);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6A: lighten(@sapAccentColor6, 55);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: lighten(@sapAccentColor6, 53);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: lighten(@sapAccentColor6, 51);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: lighten(@sapAccentColor6, 49);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6E: @sapAccentColor6;
-@_sap_ui_layout_BlockLayout_BlockColorAccentType6F: darken(@sapAccentColor6, 10);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7A: lighten(@sapAccentColor7, 67);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: lighten(@sapAccentColor7, 65);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: lighten(@sapAccentColor7, 63);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: lighten(@sapAccentColor7, 61);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7E: @sapAccentColor7;
-@_sap_ui_layout_BlockLayout_BlockColorAccentType7F: darken(@sapAccentColor7, 3);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8A: lighten(@sapAccentColor8, 64);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: lighten(@sapAccentColor8, 62);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: lighten(@sapAccentColor8, 60);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: lighten(@sapAccentColor8, 58);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8E: darken(@sapAccentColor8, 7);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType8F: darken(@sapAccentColor8, 10);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: @sapUiGroupContentBackground;
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: darken(@sapUiGroupContentBackground,2);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: darken(@sapUiGroupContentBackground,4);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: darken(@sapUiGroupContentBackground,6);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9E: darken(@sapUiGroupContentBackground, 54);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType9F: darken(@sapUiGroupContentBackground, 58);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10A: darken(@sapUiGroupContentBackground,8);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10B: darken(@sapUiGroupContentBackground,10);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10C: darken(@sapUiGroupContentBackground,12);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10D: darken(@sapUiGroupContentBackground,14);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10E: darken(@sapUiGroupContentBackground, 60);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType10F: darken(@sapUiGroupContentBackground, 64);
-
-@_sap_ui_layout_BlockLayout_BlockColorAccentType11A: lighten(@sapUiHighlight, 65);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType11B: lighten(@sapUiHighlight, 63);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType11C: lighten(@sapUiHighlight, 61);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType11D: lighten(@sapUiHighlight, 59);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType11E: lighten(@sapUiHighlight, 7);
-@_sap_ui_layout_BlockLayout_BlockColorAccentType11F: darken(@sapUiHighlight, 2);
-
-@_sap_ui_layout_BlockLayout_BackgroundDashboardMargin: 0.5rem;
+@_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_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_BackgroundDashboardCellShadowOffset: 1.5rem;
 
 @_sap_ui_layout_BlockLayout_LinkTextShadow: none;
+@_sap_ui_layout_BlockLayout_CellTextColor: @sapUiBaseText;
 
-@_sap_ui_layout_BlockLayout_BackgroundDashboardColor: @sapUiTileBackground;
-@_sap_ui_layout_BlockLayout_BackgroundDashboardBorderRadius: 0.25rem;
+// Horizon specific colors
+@_sap_ui_layout_BlockLayout_BtpGrey1: #F5F6F7;
+@_sap_ui_layout_BlockLayout_BtpGrey2: #EAECEE;
+@_sap_ui_layout_BlockLayout_BtpGrey3: #D5DADD;
+@_sap_ui_layout_BlockLayout_BtpGrey4: #A9B4BE;
+@_sap_ui_layout_BlockLayout_BtpGrey7: #475E75;
+@_sap_ui_layout_BlockLayout_BtpGrey9: #223548;
+
+@_sap_ui_layout_BlockLayout_BtpTeal7: #07838F;
+@_sap_ui_layout_BlockLayout_BtpTeal9: #035663;
+
+@_sap_ui_layout_BlockLayout_BtpBlue7: #0070F2;
+@_sap_ui_layout_BlockLayout_BtpBlue9: #0040B0;
+
+@_sap_ui_layout_BlockLayout_BtpIndigo7: #5D36FF;
+@_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_BlockColorAccentType11A: transparent;
+@_sap_ui_layout_BlockLayout_BlockColorAccentType11B: transparent;
+@_sap_ui_layout_BlockLayout_BlockColorAccentType11C: transparent;
+@_sap_ui_layout_BlockLayout_BlockColorAccentType11D: transparent;
+@_sap_ui_layout_BlockLayout_BlockColorAccentType11E: transparent;
+@_sap_ui_layout_BlockLayout_BlockColorAccentType11F: transparent;
 
 // Create classes which would just set background color of the BlockLayout cells
-.generateCellColorSets (@backgroundColorSet, @backgroundColorShade) {
+.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
@@ -104,175 +123,192 @@
 		background-color: @@color-param;
 
 		.sapUiBlockCellContent {
-			color: contrast(@@color-param, @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
+			color: @textColor;
 
 			.sapMText,
 			.sapMLabel,
-			.sapUiBlockCellTitle{
+			.sapUiBlockCellTitle {
 				color: inherit;
 			}
 		}
 	}
-	.sapContrast.@{css-selector},
-	.sapContrast .@{css-selector},
-	.sapContrastPlus.@{css-selector},
-	.sapContrastPlus .@{css-selector} {
-		background-color: inherit; // Read from the
-
-		.sapUiBlockCellContent {
-			color: inherit;
-		}
-	}
 }
 
-// Define a loop and go trough 11 color sets and for each set apply 4 or 6 shades (depending on the theme)
-.loop-cell-colors(@i: 1) when (@i =< 11) {
-	.generateCellColorSets(@i, "A");
-	.generateCellColorSets(@i, "B");
-	.generateCellColorSets(@i, "C");
-	.generateCellColorSets(@i, "D");
-	.generateCellColorSets(@i, "E"); // only for Fiori 3 theme
-	.generateCellColorSets(@i, "F"); // only for Fiori 3 theme
+// 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);
+	.generateCellColorSets(@i, "C", @sapUiBaseText);
+	.generateCellColorSets(@i, "D", @sapUiBaseText);
+	.generateCellColorSets(@i, "E", @sapUiContentContrastTextColor);
+	.generateCellColorSets(@i, "F", @sapUiContentContrastTextColor);
 
 	.loop-cell-colors(@i + 1); // Execute next loop iteration
 }
 
-//Execute Loop through color sets
-.loop-cell-colors(1);
+// Execute Loop through color sets
+.loop-cell-colors();
 
-/**
- * Mixin to set contrast containers for Light background
- */
-.setLightContrastContainers (@evenCell, @oddCell) {
-	// Match every even cell
-	.sapUiBlockLayoutCell.sapContrast:nth-child(2n),
-	.sapUiBlockLayoutCell.sapContrastPlus:nth-child(2n) {
-		.sapUiBlockCellContent {
-			background-color: @oddCell;
-		}
+// iterate 11th background separately, because it uses different contrast text color
+.generateCellColorSets(11, "A", @sapUiBaseText);
+.generateCellColorSets(11, "B", @sapUiBaseText);
+.generateCellColorSets(11, "C", @sapUiBaseText);
+.generateCellColorSets(11, "D", @sapUiBaseText);
+.generateCellColorSets(11, "E", @sapUiBaseText);
+.generateCellColorSets(11, "F", @sapUiBaseText);
+
+/* ============ Background type: Light ============== */
+.sapUiBlockLayoutBackgroundLight .sapUiBlockLayoutRow {
+	&.sapUiBlockLayoutBackgroundColorSet1 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey1, @sapUiGroupContentBackground); // B, A
 	}
 
-	.sapUiBlockLayoutCell.sapContrast:nth-child(2n+1),
-	.sapUiBlockLayoutCell.sapContrastPlus:nth-child(2n+1) {
-		.sapUiBlockCellContent {
-			background-color: @evenCell;
-		}
+	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
+		.setCellsColorDoubles(@sapUiGroupContentBackground, @_sap_ui_layout_BlockLayout_BtpGrey1);
 	}
-}
 
-//Link as title
-.sapUiBlockCellTitle .sapMLnk {color: darken(@sapUiLink, 4);}
-.sapUiBlockCellTitle .sapMLnk:visited {color: darken(@sapUiLinkVisited, 4);}
-.sapUiBlockCellTitle .sapMLnk:hover:not(.sapMLnkDsbl) {color: darken(@sapUiLinkHover, 4);}
-// disabled and emphasized links: we do not support this at all here.
+	&.sapUiBlockLayoutBackgroundColorSet2 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey3, @_sap_ui_layout_BlockLayout_BtpGrey2); // D, C
+	}
 
-/* ============ Background type: Light ============== */
-.sapUiBlockLayoutBackgroundLight {
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1,
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3 {
-		.setCellsColorDoubles(lighten(@sapUiHighlight, 61), lighten(@sapUiHighlight, 65));
-		.setLightContrastContainers(lighten(@sapUiHighlight, 61), lighten(@sapUiHighlight, 65));
+	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey2, @_sap_ui_layout_BlockLayout_BtpGrey3);
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1Inverted,
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3Inverted {
-		.setCellsColorDoubles(lighten(@sapUiHighlight, 65), lighten(@sapUiHighlight, 61));
-		.setLightContrastContainers(lighten(@sapUiHighlight, 65), lighten(@sapUiHighlight, 61));
+	&.sapUiBlockLayoutBackgroundColorSet3 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey7, @_sap_ui_layout_BlockLayout_BtpGrey4); // F, E
+
+		// texts on dark background
+		.sapUiBlockLayoutEvenCell .sapUiBlockCellContent {
+			color: @sapUiContentContrastTextColor;
+
+			.sapMText,
+			.sapMLabel,
+			.sapUiBlockCellTitle {
+				color: inherit;
+			}
+		}
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2,
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
-		.setCellsColorDoubles(lighten(@sapUiHighlight, 63), lighten(@sapUiHighlight, 59));
-		.setLightContrastContainers(lighten(@sapUiHighlight, 63), lighten(@sapUiHighlight, 59));
+	&.sapUiBlockLayoutBackgroundColorSet3Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey4, @_sap_ui_layout_BlockLayout_BtpGrey7);
+
+		// texts on dark background
+		.sapUiBlockLayoutOddCell .sapUiBlockCellContent {
+			color: @sapUiContentContrastTextColor;
+
+			.sapMText,
+			.sapMLabel,
+			.sapUiBlockCellTitle {
+				color: inherit;
+			}
+		}
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2Inverted,
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4Inverted {
-		.setCellsColorDoubles(lighten(@sapUiHighlight, 59), lighten(@sapUiHighlight, 63));
-		.setLightContrastContainers(lighten(@sapUiHighlight, 59), lighten(@sapUiHighlight, 63));
+	&.sapUiBlockLayoutBackgroundColorSet4 {
+		.setCellsColorDoubles(@sapUiPageFooterBackground, @_sap_ui_layout_BlockLayout_BtpGrey9); // H, G
+
+		// texts on dark background
+		.sapUiBlockLayoutOddCell .sapUiBlockCellContent {
+			color: @sapUiContentContrastTextColor;
+
+			.sapMText,
+			.sapMLabel,
+			.sapUiBlockCellTitle {
+				color: inherit;
+			}
+		}
 	}
-}
 
-/* ============ Background type: Mixed  - Deprecated as of version 1.50 ============== */
-.sapUiBlockLayoutBackgroundMixed {
-	.sapUiBlockLayoutBackgroundLight; // Use the same rules as in sapUiBlockLayoutBackgroundLight
+	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey9, @sapUiPageFooterBackground);
 
-	&.sapUiBlockLayoutSizeL, &.sapUiBlockLayoutSizeXL {
-		.sapUiBlockLayoutRow {
-			.sapContrast, .sapContrastPlus {
-				&.sapUiBlockLayoutCell {
-					background-color: darken(@sapUiBaseColor, 12);
-				}
+		// texts on dark background
+		.sapUiBlockLayoutEvenCell .sapUiBlockCellContent {
+			color: @sapUiContentContrastTextColor;
 
-				&.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundContrast2 {
-					background-color: darken(@sapUiBaseColor, 4);
-				}
+			.sapMText,
+			.sapMLabel,
+			.sapUiBlockCellTitle {
+				color: inherit;
 			}
 		}
 	}
 }
 
 /* ============ Background type: Accent ============== */
-.sapUiBlockLayoutBackgroundAccent {
-	.sapUiBlockCellContent,
-	.sapUiBlockCellTitle,
-	.sapUiBlockCellContent .sapMText {
-		color: @sapUiContentContrastTextColor;
-	}
-
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1 {
-		.setCellsColorDoubles(darken(@sapUiAccent7, 8), darken(@sapUiAccent7, 11)); // Colors A & B
+.sapUiBlockLayoutBackgroundAccent .sapUiBlockLayoutRow {
+	&.sapUiBlockLayoutBackgroundColorSet1 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal9, @_sap_ui_layout_BlockLayout_BtpTeal7); // Colors B, A
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1Inverted {
-		.setCellsColorDoubles(darken(@sapUiAccent7, 11), darken(@sapUiAccent7, 8)); // Colors B & A
+	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal7, @_sap_ui_layout_BlockLayout_BtpTeal9);
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2 {
-		.setCellsColorDoubles(darken(@sapUiAccent6, 13), darken(@sapUiAccent6, 26)); // Colors C & D
+	&.sapUiBlockLayoutBackgroundColorSet2 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue9, @_sap_ui_layout_BlockLayout_BtpBlue7); // Colors D, C
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2Inverted {
-		.setCellsColorDoubles(darken(@sapUiAccent6, 26), darken(@sapUiAccent6, 13)); // Colors D & C
+	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue7, @_sap_ui_layout_BlockLayout_BtpBlue9);
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3 {
-		.setCellsColorDoubles(@sapUiAccent5, darken(@sapUiAccent5, 6)); // Colors E & F
+	&.sapUiBlockLayoutBackgroundColorSet3 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo9, @_sap_ui_layout_BlockLayout_BtpIndigo7); // Colors F, E
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3Inverted {
-		.setCellsColorDoubles(darken(@sapUiAccent5, 6), @sapUiAccent5); // Colors F & E
+	&.sapUiBlockLayoutBackgroundColorSet3Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpIndigo7, @_sap_ui_layout_BlockLayout_BtpIndigo9); // Colors F & E
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
-		.setCellsColorDoubles(darken(@sapUiGroupContentBackground, 2), darken(@sapUiGroupContentBackground, 0)); // Colors G & H
+	&.sapUiBlockLayoutBackgroundColorSet4 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey2, @_sap_ui_layout_BlockLayout_BtpGrey1); // Colors H, G
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4Inverted {
-		.setCellsColorDoubles(darken(@sapUiGroupContentBackground, 0), darken(@sapUiGroupContentBackground, 2)); // Colors H & G
+	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey1, @_sap_ui_layout_BlockLayout_BtpGrey2);
 	}
 
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet1,
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet2,
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet3,
-	.sapUiBlockLayoutRow.sapUiBlockLayoutBackgroundColorSet4 {
+	&.sapUiBlockLayoutBackgroundColorSet1,
+	&.sapUiBlockLayoutBackgroundColorSet2,
+	&.sapUiBlockLayoutBackgroundColorSet3,
+	&.sapUiBlockLayoutBackgroundColorSet4 {
 		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray1 {
-			background-color: darken(@sapUiGroupContentBackground, 0); //color: H
+			background-color: @_sap_ui_layout_BlockLayout_BtpGrey1; //color: G
 		}
 
 		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray2 {
-			background-color: darken(@sapUiGroupContentBackground, 2); //color: G
+			background-color: @_sap_ui_layout_BlockLayout_BtpGrey2; //color: H
 		}
 	}
 
-	.sapUiBlockLayoutBackgroundColorSet4,
-	.sapUiBlockLayoutBackgroundColorSet4Inverted,
+	// texts on dark accent background
+	.sapUiBlockCellContent {
+		color: @sapUiContentContrastTextColor;
+
+		.sapMText,
+		.sapMLabel,
+		.sapUiBlockCellTitle {
+			color: inherit;
+
+		}
+		.sapMLnk {
+			color: @sapUiLinkInvertedColor;
+		}
+	}
+
+	// texts on light accent background
+	&.sapUiBlockLayoutBackgroundColorSet4,
+	&.sapUiBlockLayoutBackgroundColorSet4Inverted,
 	.sapUiBlockLayoutBackgroundColorSetGray1,
 	.sapUiBlockLayoutBackgroundColorSetGray2 {
-		.sapUiBlockCellContent,
-		.sapUiBlockCellTitle,
-		.sapUiBlockCellContent .sapMText {
+		.sapUiBlockCellContent {
 			color: @sapUiGroupTitleTextColor;
 		}
+
+		.sapMLnk {
+			color: @sapLinkColor;
+		}
 	}
 }

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

@@ -13,7 +13,7 @@
 .sapUiFormCL.sapUiFormToolbar > div:first-child {
 	height: 2.75rem; /* to have always 3rem on Form header */
 	line-height: 2.75rem;
-	padding: 0 1rem;
+	padding-right: 1rem;
 }
 
 /* edit mode */