@openui5/themelib_sap_horizon 1.101.0 → 1.103.0

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

@@ -3,11 +3,228 @@
 /* Horizon High Contrast Black theme          */
 /* ========================================== */
 
-@_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: @sapUiContentShadow2;
+@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset: 1.5rem;
 
 @_sap_ui_layout_BlockLayout_LinkTextShadow: none;
 
-@_sap_ui_layout_BlockLayout_BackgroundDashboardColor: @sapUiTileBackground;
-@_sap_ui_layout_BlockLayout_BackgroundDashboardBorderRadius: 0.25rem;
+// Horizon specific colors
+@_sap_ui_layout_BlockLayout_BtpGrey1: #1C2834;
+@_sap_ui_layout_BlockLayout_BtpGrey2: #233240;
+@_sap_ui_layout_BlockLayout_BtpGrey3: #293A4B;
+@_sap_ui_layout_BlockLayout_BtpGrey4: #304458;
+@_sap_ui_layout_BlockLayout_BtpGrey6: #3C556D;
+@_sap_ui_layout_BlockLayout_BtpGrey7: #415C76;
+
+@_sap_ui_layout_BlockLayout_BtpTeal6: #035D52;
+@_sap_ui_layout_BlockLayout_BtpTeal7: #036559;
+
+@_sap_ui_layout_BlockLayout_BtpBlue6: #004CB5;
+@_sap_ui_layout_BlockLayout_BtpBlue7: #0052C4;
+
+@_sap_ui_layout_BlockLayout_BtpIndigo6: #490AFA;
+@_sap_ui_layout_BlockLayout_BtpIndigo7: #591FFA;
+
+/* ============ Custom Cell Background Color ============== */
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1A: #362401; // Mango 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1B: #432C01; // Mango 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1C: #4E3401; // Mango 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1D: #5B3D01; // Mango 4
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1E: #714B02; // Mango 6
+@_sap_ui_layout_BlockLayout_BlockColorAccentType1F: #7A5102; // Mango 7
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2A: #550404; // Red 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2B: #680505; // Red 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2C: #770505; // Red 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2D: #8A0606; // Red 4
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2E: #A80707; // Red 6
+@_sap_ui_layout_BlockLayout_BlockColorAccentType2F: #B50808; // Red 7
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3A: #520230; // Raspberry 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3B: #63033A; // Raspberry 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3C: #720342; // Raspberry 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3D: #84044D; // Raspberry 4
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3E: #A2045E; // Raspberry 6
+@_sap_ui_layout_BlockLayout_BlockColorAccentType3F: #AE0565; // Raspberry 7
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4A: #480057; // Pink 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4B: #570069; // Pink 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4C: #630078; // Pink 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4D: #73008B; // Pink 4
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4E: #8C00AA; // Pink 6
+@_sap_ui_layout_BlockLayout_BlockColorAccentType4F: #9700B7; // Pink 7
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5A: #240381; // Indigo 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5B: #2C049D; // Indigo 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5C: #3204B3; // Indigo 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType5D: #3A05CF; // 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: #002559; // Blue 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6B: #002E6D; // Blue 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6C: #00357E; // Blue 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType6D: #003E93; // 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: #012D28; // Teal 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7B: #023731; // Teal 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7C: #024039; // Teal 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType7D: #024B42; // 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: #0F2D17; // Green 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8B: #13381D; // Green 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8C: #164122; // Green 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8D: #194C28; // Green 4
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8E: #1F5E31; // Green 6
+@_sap_ui_layout_BlockLayout_BlockColorAccentType8F: #226635; // Green 7 
+
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9A: #032B37; // Cyan 1
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9B: #033545; // Cyan 2
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9C: #043E50; // Cyan 3
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9D: #05495D; // Cyan 4
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9E: #065A73; // Cyan 6
+@_sap_ui_layout_BlockLayout_BlockColorAccentType9F: #06617D; // 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;
+@_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) {
+	@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"; }
+	.@{css-selector} {
+		background-color: @@color-param;
+
+		.sapUiBlockCellContent {
+			color: @sapUiBaseText;
+
+			.sapMText,
+			.sapMLabel,
+			.sapUiBlockCellTitle {
+				color: inherit;
+			}
+		}
+	}
+}
+
+// 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");
+	.generateCellColorSets(@i, "C");
+	.generateCellColorSets(@i, "D");
+	.generateCellColorSets(@i, "E");
+	.generateCellColorSets(@i, "F");
+
+	.loop-cell-colors(@i + 1); // Execute next loop iteration
+}
+
+// Execute Loop through color sets
+.loop-cell-colors();
+
+/* ============ Background type: Light ============== */
+.sapUiBlockLayoutBackgroundLight .sapUiBlockLayoutRow {
+	&.sapUiBlockLayoutBackgroundColorSet1 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey1, @sapUiGroupContentBackground); // B, A
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
+		.setCellsColorDoubles(@sapUiGroupContentBackground, @_sap_ui_layout_BlockLayout_BtpGrey1);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet2 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey3, @_sap_ui_layout_BlockLayout_BtpGrey2); // D, C
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey2, @_sap_ui_layout_BlockLayout_BtpGrey3);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet3 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey6, @_sap_ui_layout_BlockLayout_BtpGrey4); // F, E
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet3Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey4, @_sap_ui_layout_BlockLayout_BtpGrey6);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet4 {
+		.setCellsColorDoubles(@sapUiPageFooterBackground, @_sap_ui_layout_BlockLayout_BtpGrey7); // H, G
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey7, @sapUiPageFooterBackground);
+	}
+}
+
+/* ============ Background type: Accent ============== */
+.sapUiBlockLayoutBackgroundAccent .sapUiBlockLayoutRow {
+	&.sapUiBlockLayoutBackgroundColorSet1 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal7, @_sap_ui_layout_BlockLayout_BtpTeal6); // Colors B, A
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal6, @_sap_ui_layout_BlockLayout_BtpTeal7);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet2 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue7, @_sap_ui_layout_BlockLayout_BtpBlue6); // Colors D, C
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue6, @_sap_ui_layout_BlockLayout_BtpBlue7);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet3 {
+		.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
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet4 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey2, @_sap_ui_layout_BlockLayout_BtpGrey1); // Colors H, G
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey1, @_sap_ui_layout_BlockLayout_BtpGrey2);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet1,
+	&.sapUiBlockLayoutBackgroundColorSet2,
+	&.sapUiBlockLayoutBackgroundColorSet3,
+	&.sapUiBlockLayoutBackgroundColorSet4 {
+		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray1 {
+			background-color: @_sap_ui_layout_BlockLayout_BtpGrey1; //color: G
+		}
+
+		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray2 {
+			background-color: @_sap_ui_layout_BlockLayout_BtpGrey2; //color: H
+		}
+	}
+}

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

@@ -4,5 +4,5 @@
 /* ============================================== */
 
 .sapUiBlockCellContent {
-	border: 1px solid @sapUiTileBorderColor;
+	border: @sapUiGroupBorderWidth solid @sapUiTileBorderColor;
 }

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

@@ -7,7 +7,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 */

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

@@ -19,9 +19,5 @@
 .sapUiLoSplitter > .sapUiLoSplitterOverlay .sapUiLoSplitterOverlayBar {
 	&:focus::after {
 		border-width: 2px;
-		top: -1px;
-		bottom: -1px;
-		left: -1px;
-		right: -1px;
 	}
 }

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

@@ -3,11 +3,228 @@
 /* Horizon High Contrast White theme          */
 /* ========================================== */
 
-@_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: @sapUiContentShadow2;
+@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset: 1.5rem;
 
 @_sap_ui_layout_BlockLayout_LinkTextShadow: none;
 
-@_sap_ui_layout_BlockLayout_BackgroundDashboardColor: @sapUiTileBackground;
-@_sap_ui_layout_BlockLayout_BackgroundDashboardBorderRadius: 0.25rem;
+// Horizon specific colors
+@_sap_ui_layout_BlockLayout_BtpGrey1: #C5CDD3;
+@_sap_ui_layout_BlockLayout_BtpGrey2: #BCC5CC;
+@_sap_ui_layout_BlockLayout_BtpGrey3: #B3BDC5;
+@_sap_ui_layout_BlockLayout_BtpGrey4: #A9B5BE;
+@_sap_ui_layout_BlockLayout_BtpGrey6: #93A2AD;
+@_sap_ui_layout_BlockLayout_BtpGrey7: #8797A4;
+
+@_sap_ui_layout_BlockLayout_BtpTeal6: #1AB498;
+@_sap_ui_layout_BlockLayout_BtpTeal7: #18A88E;
+
+@_sap_ui_layout_BlockLayout_BtpBlue6: #1CA7FF;
+@_sap_ui_layout_BlockLayout_BtpBlue7: #009AFC;
+
+@_sap_ui_layout_BlockLayout_BtpIndigo6: #B28BFF;
+@_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_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) {
+	@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"; }
+	.@{css-selector} {
+		background-color: @@color-param;
+
+		.sapUiBlockCellContent {
+			color: @sapUiBaseText;
+
+			.sapMText,
+			.sapMLabel,
+			.sapUiBlockCellTitle {
+				color: inherit;
+			}
+		}
+	}
+}
+
+// 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");
+	.generateCellColorSets(@i, "C");
+	.generateCellColorSets(@i, "D");
+	.generateCellColorSets(@i, "E");
+	.generateCellColorSets(@i, "F");
+
+	.loop-cell-colors(@i + 1); // Execute next loop iteration
+}
+
+// Execute Loop through color sets
+.loop-cell-colors();
+
+/* ============ Background type: Light ============== */
+.sapUiBlockLayoutBackgroundLight .sapUiBlockLayoutRow {
+	&.sapUiBlockLayoutBackgroundColorSet1 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey1, @sapUiGroupContentBackground); // B, A
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
+		.setCellsColorDoubles(@sapUiGroupContentBackground, @_sap_ui_layout_BlockLayout_BtpGrey1);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet2 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey3, @_sap_ui_layout_BlockLayout_BtpGrey2); // D, C
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey2, @_sap_ui_layout_BlockLayout_BtpGrey3);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet3 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey6, @_sap_ui_layout_BlockLayout_BtpGrey4); // F, E
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet3Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey4, @_sap_ui_layout_BlockLayout_BtpGrey6);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet4 {
+		.setCellsColorDoubles(@sapUiPageFooterBackground, @_sap_ui_layout_BlockLayout_BtpGrey7); // H, G
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey7, @sapUiPageFooterBackground);
+	}
+}
+
+/* ============ Background type: Accent ============== */
+.sapUiBlockLayoutBackgroundAccent .sapUiBlockLayoutRow {
+	&.sapUiBlockLayoutBackgroundColorSet1 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal7, @_sap_ui_layout_BlockLayout_BtpTeal6); // Colors B, A
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet1Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpTeal6, @_sap_ui_layout_BlockLayout_BtpTeal7);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet2 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue7, @_sap_ui_layout_BlockLayout_BtpBlue6); // Colors D, C
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet2Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpBlue6, @_sap_ui_layout_BlockLayout_BtpBlue7);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet3 {
+		.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
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet4 {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey2, @_sap_ui_layout_BlockLayout_BtpGrey1); // Colors H, G
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet4Inverted {
+		.setCellsColorDoubles(@_sap_ui_layout_BlockLayout_BtpGrey1, @_sap_ui_layout_BlockLayout_BtpGrey2);
+	}
+
+	&.sapUiBlockLayoutBackgroundColorSet1,
+	&.sapUiBlockLayoutBackgroundColorSet2,
+	&.sapUiBlockLayoutBackgroundColorSet3,
+	&.sapUiBlockLayoutBackgroundColorSet4 {
+		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray1 {
+			background-color: @_sap_ui_layout_BlockLayout_BtpGrey1; //color: G
+		}
+
+		.sapUiBlockLayoutCell.sapUiBlockLayoutBackgroundColorSetGray2 {
+			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: 1px solid @sapUiTileBorderColor;
+	border: @sapUiGroupBorderWidth solid @sapUiTileBorderColor;
 }

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

@@ -7,7 +7,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 */

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

@@ -19,9 +19,5 @@
 .sapUiLoSplitter > .sapUiLoSplitterOverlay .sapUiLoSplitterOverlayBar {
 	&:focus::after {
 		border-width: 2px;
-		top: -1px;
-		bottom: -1px;
-		left: -1px;
-		right: -1px;
 	}
 }

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

@@ -0,0 +1,3 @@
+.sapUiMdcFieldBase {
+	overflow: visible; /* as hover outline is outside of Input control */
+}

package/src/sap/ui/mdc/themes/sap_horizon/library.source.less

@@ -12,4 +12,5 @@
 @import "Table.less";
 @import "ValueHelpDialog.less";
 @import "TokenDisplay.less";
-@import "TokenizerDisplay.less";
+@import "TokenizerDisplay.less";
+@import "FieldBase.less";

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

@@ -0,0 +1,3 @@
+.sapUiMdcFieldBase {
+	overflow: visible; /* as hover outline is outside of Input control */
+}

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

@@ -12,4 +12,5 @@
 @import "Table.less";
 @import "ValueHelpDialog.less";
 @import "TokenDisplay.less";
-@import "TokenizerDisplay.less";
+@import "TokenizerDisplay.less";
+@import "FieldBase.less";

package/src/sap/ui/rta/themes/sap_horizon/AddIFrame.less

@@ -0,0 +1,65 @@
+/******************************************************************
+	Style of the RTA Add IFrame Dialog  - Horizon Theme
+*******************************************************************/
+@_sap_ui_rta_AddIFrame_DelimiterLineColor: @sapUiToolbarSeparatorColor; //#d9d9d9
+@_sap_ui_rta_AddIFrame_BorderRadius: @sapUiGroupBorderCornerRadius; //0.5rem
+@_sap_ui_rta_AddIFrame_PreviewTlbarHoverBG: @sapUiButtonHoverBackground; //fff
+
+.sapUiRtaMode {
+	.sapUiRtaAddIFrameDialog {
+		.sapUiRtaAddIFrameDialogVlWrapper {
+			.sapUiRtaAddIFrameDialogEditGrid {
+
+				.sapUiRtaAddIFrameDialogParameters {
+					.sapMScrollCont {
+						border-radius: @_sap_ui_rta_AddIFrame_BorderRadius;
+					}
+				}
+
+				.sapUiRtaAddIFrameDialogEditUrl {
+					.sapMTextArea {
+						.sapMInputBaseContentWrapper {
+							border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
+							border-radius: @_sap_ui_rta_AddIFrame_BorderRadius;
+							background-image: none;
+						}
+
+						.sapMTextAreaInner {
+							border: none;
+						}
+					}
+				}
+			}
+
+			.sapUiRtaAddIFrameDialogPreviewLinkGrid {
+				.sapUiRtaAddIFrameDialogPreviewLinkPanel {
+
+					&.sapMPanel .sapMPanelWrappingDiv:not(.sapMPanelWrappingDivExpanded),
+					&.sapMPanel .sapMPanelWrappingDivTb:not(.sapMPanelWrappingDivTbExpanded) {
+						border-radius: 0;
+					}
+
+					.sapUiRtaAddIFrameDialogPreviewLinkToolbar {
+						padding-left: 0;
+						padding-right: 0.125rem;
+
+						&.sapMTB:hover,
+						&.sapMTB-Solid-CTX.sapMTB:hover {
+							background-color: @_sap_ui_rta_AddIFrame_PreviewTlbarHoverBG;
+						}
+					}
+				}
+			}
+
+			.sapUiRtaAddIFrameDialogPreviewGrid {
+				border-radius: @_sap_ui_rta_AddIFrame_BorderRadius;
+				padding-bottom: 0.5rem;
+			}
+		}
+	}
+}
+
+// adapt scrollbars to rounded corners
+html.sap-desktop:not(.sapUiNativeScrollbars) ::-webkit-scrollbar {
+	background-color: inherit !important;
+}

package/src/sap/ui/rta/themes/sap_horizon/ChangeVisualization.less

@@ -1,10 +1,16 @@
-/* =============================================== */
-/* CSS for control sap.ui.rta/ChangeVisualization  */
-/* Horizon theme                                   */
-/* =============================================== */
+/******************************************************************
+	Style of the RTA Change Visualization - Horizon theme
+*******************************************************************/
+@_sap_ui_rta_ChangeVisualization_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.5rem
 
-.sapUiRtaChangeIndicatorHovered {
-	&:after {
-		border-radius: @sapUiFieldBorderCornerRadius;
+.sapUiDtOverlay {
+	.sapUiRtaChangeIndicatorHovered {
+		&:after {
+			border-radius: @_sap_ui_rta_ChangeVisualization_BorderRadius;
+		}
+	}
+
+	&.sapUiRtaChangeIndicatorDependent {
+		border-radius: @_sap_ui_rta_ChangeVisualization_BorderRadius;
 	}
 }