@openui5/sap.ui.layout 1.134.0 → 1.136.0

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

@@ -3,39 +3,41 @@
 /* Base theme                                 */
 /* ========================================== */
 
-@_sap_ui_layout_BlockLayout_FontSizeLandXL: @sapMFontHeader1Size;
+@_sap_ui_layout_BlockLayout_FontSizeLandXL: var(--sapFontHeader1Size);
 
 @_sap_ui_layout_BlockLayout_BackgroundDashboardMargin: 0.25rem;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin: 0.5rem;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardAfterScrollbarMargin: 0.375rem;
-@_sap_ui_layout_BlockLayout_BackgroundDashboardColor: @sapUiContentForegroundTextColor;
+@_sap_ui_layout_BlockLayout_BackgroundDashboardColor: var(--sapContent_ForegroundTextColor);
 @_sap_ui_layout_BlockLayout_BackgroundDashboardBorderRadius: 0;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadow: @sapUiShadowLevel0;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset: 0;
 
 @_sap_ui_layout_BlockLayout_LinkTextShadow: @sapUiShadowText;
-@_sap_ui_layout_BlockLayout_CellTextColor: @sapUiContentForegroundTextColor;
+@_sap_ui_layout_BlockLayout_CellTextColor: var(--sapContent_ForegroundTextColor);
 
 .setCellsColorDoubles (@evenCell, @oddCell) {
-	// Match every even cell
+
+	/* Match every even cell */
 	.sapUiBlockLayoutEvenCell {
 		background-color: @evenCell;
 	}
 
-	// Match every odd cell
+	/* Match every odd cell */
 	.sapUiBlockLayoutOddCell {
 		background-color: @oddCell;
 	}
 }
 
 .sapUiBlockLayout {
+
 	.sapUiFormResLayout > div {
 		background-color: inherit;
 	}
 }
 
 .sapUiBlockCellContent {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-weight: normal;
 	font-size: 0.875rem;
 	color: @_sap_ui_layout_BlockLayout_CellTextColor;
@@ -46,7 +48,7 @@
 	}
 
 	.sapUiBlockCellTitle {
-		font-size: @sapMFontHeader3Size;
+		font-size: var(--sapFontHeader3Size);
 
 		.sapMLnk {
 			text-shadow: @_sap_ui_layout_BlockLayout_LinkTextShadow;
@@ -59,11 +61,13 @@
 	font-size: 1.25rem;
 }
 
-// Styles & Sizes for Tablet
+/* Styles & Sizes for Tablet */
 .sapUiBlockLayoutSizeM:not(.sapUiBlockLayoutKeepFontSize) {
+
 	.sapUiNoContentPadding .sapUiBlockCellContent {
 		padding: 0;
 	}
+
 	.sapUiBlockCellContent {
 		padding: 1rem 2rem;
 		font-size: @sapMFontMediumSize;
@@ -78,17 +82,19 @@
 	}
 }
 
-// Styles & Sizes for Desktop
+/* Styles & Sizes for Desktop */
 .sapUiBlockLayoutSizeL:not(.sapUiBlockLayoutKeepFontSize) {
+
 	.sapUiNoContentPadding .sapUiBlockCellContent {
 		padding: 0;
 	}
+
 	.sapUiBlockCellContent {
 		padding: 2rem 3rem;
-		font-size: @sapMFontLargeSize;
+		font-size: var(--sapFontLargeSize);
 
 		> .sapMText {
-			font-size: @sapMFontLargeSize;
+			font-size: var(--sapFontLargeSize);
 		}
 
 		> .sapUiIcon {
@@ -102,17 +108,19 @@
 	}
 }
 
-// Styles & Sizes for LargeDesktop
+/* Styles & Sizes for LargeDesktop */
 .sapUiBlockLayoutSizeXL:not(.sapUiBlockLayoutKeepFontSize) {
+
 	.sapUiNoContentPadding .sapUiBlockCellContent {
 		padding: 0;
 	}
+
 	.sapUiBlockCellContent {
 		padding: 2rem 3rem;
-		font-size: @sapMFontLargeSize;
+		font-size: var(--sapFontLargeSize);
 
 		> .sapMText {
-			font-size: @sapMFontLargeSize;
+			font-size: var(--sapFontLargeSize);
 		}
 
 		> .sapUiIcon {
@@ -128,17 +136,18 @@
 
 /* ============ Background type: Dashboard ============== */
 .sapUiBlockLayoutBackgroundDashboard {
+
 	.sapUiBlockLayoutCell {
 		font-weight: normal;
 		color: @_sap_ui_layout_BlockLayout_BackgroundDashboardColor;
 
-		// use padding and negative margin to display box-shadow outside of the cell, because it has overflow: hidden
+		/* use padding and negative margin to display box-shadow outside of the cell, because it has overflow: hidden */
 		padding: @_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset;
 		margin: -@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset;
 	}
 
 	.sapUiBlockCellContent {
-		background-color: @sapUiGroupContentBackground;
+		background-color: var(--sapGroup_ContentBackground);
 		box-shadow: @_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadow;
 		margin: @_sap_ui_layout_BlockLayout_BackgroundDashboardMargin;
 		border-radius: @_sap_ui_layout_BlockLayout_BackgroundDashboardBorderRadius;
@@ -152,12 +161,13 @@
 	}
 
 	&:not(.sapUiBlockLayoutSizeS) {
+
 		.sapUiBlockLayoutCell:first-of-type {
 			margin-left: 0;
 			padding-left: 0;
 
 			.sapUiBlockCellContent {
-				margin-left: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust first cell in a row with 0.5rem on the left
+				margin-left: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; /* Adjust first cell in a row with 0.5rem on the left */
 			}
 		}
 
@@ -166,59 +176,64 @@
 			padding-right: 0;
 
 			.sapUiBlockCellContent {
-				margin-right: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust last cell in a row with 0.5rem on the right
+				margin-right: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; /* Adjust last cell in a row with 0.5rem on the right */
 			}
 		}
 
 		.sapUiBlockLayoutRow:first-of-type {
+
 			.sapUiBlockLayoutCell {
 				margin-top: 0;
 				padding-top: 0;
 			}
 
 			.sapUiBlockCellContent {
-				margin-top: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust spacing at the top for all cells in the first row
-			}	
+				margin-top: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; /* Adjust spacing at the top for all cells in the first row */
+			}
 		}
 
 		.sapUiBlockLayoutRow:last-of-type {
+
 			.sapUiBlockLayoutCell {
 				margin-bottom: 0;
 				padding-bottom: 0;
 			}
 
 			.sapUiBlockCellContent {
-				margin-bottom: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust spacing at the bottom for all cells in the last row
+				margin-bottom: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; /* Adjust spacing at the bottom for all cells in the last row */
 			}
 		}
 	}
 
-	// Block Layout with size S (Phone) puts every cell into a single row
-	// Therefore spacing should be altered in this case
+	/* Block Layout with size S (Phone) puts every cell into a single row
+	Therefore spacing should be altered in this case */
 	&.sapUiBlockLayoutSizeS {
+
 		.sapUiBlockCellContent {
 			margin-left: 0.5rem;
 			margin-right: 0.5rem;
 		}
 
 		.sapUiBlockLayoutRow:first-of-type {
+
 			.sapUiBlockLayoutCell {
 				margin-top: 0;
 				padding-top: 0;
 
 				&:first-of-type .sapUiBlockCellContent {
-					margin-top: 0.5rem; // Add 0.5rem spacing for the first cell in the first row
+					margin-top: 0.5rem; /* Add 0.5rem spacing for the first cell in the first row */
 				}
 			}
 		}
 
 		.sapUiBlockLayoutRow:last-of-type {
+
 			.sapUiBlockLayoutCell {
 				margin-bottom: 0;
 				padding-bottom: 0;
-	
+
 				&:last-of-type .sapUiBlockCellContent {
-					margin-bottom: 0.5rem; // Add 0.5rem spacing for the last cell in the last row
+					margin-bottom: 0.5rem; /* Add 0.5rem spacing for the last cell in the last row */
 				}
 			}
 		}

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

@@ -59,4 +59,4 @@
 /* override for standard padding: 2rem for BlockLayoutCell */
 .sapUiBlockLayoutCell.sapUiContentPadding > .sapUiBlockCellContent {
 	padding: 2rem;
-}
+}

package/src/sap/ui/layout/themes/base/BlockLayoutRow.less

@@ -17,7 +17,9 @@
 
 .sapUiBlockLayoutSizeL,
 .sapUiBlockLayoutSizeXL {
+
 	.sapUiBlockScrollingNarrowCells {
+
 		.sapUiBlockScrollableCell {
 			width: 25%;
 		}
@@ -25,6 +27,7 @@
 }
 
 .sapUiBlockLayoutSizeS {
+
 	.sapUiBlockSmallCell {
 		width: 100%;
 	}
@@ -34,6 +37,7 @@
 	}
 
 	.sapUiBlockScrollingRow {
+
 		.sapUiBlockScrollableCell:first-child .sapUiBlockCellContent {
 			padding-left: 2rem;
 		}

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

@@ -10,24 +10,24 @@
 @_sap_ui_layout_ColumnLayout_formColumnElementCols: 12;
 @_sap_ui_layout_ColumnLayout_formColumnElementOneCol: 100% / @_sap_ui_layout_ColumnLayout_formColumnElementCols;
 
-.sapUiFormCL{
+.sapUiFormCL {
 	white-space: initial; /* eg, if in Splitter where whit-space is set to nowrap */
 }
 
 /* Title */
-.sapUiFormCL > .sapUiFormTitle{
+.sapUiFormCL > .sapUiFormTitle {
 	box-sizing: border-box;
 	padding: 0 1rem;
 }
 
-.sapUiFormCLContainer > .sapUiFormTitle{
+.sapUiFormCLContainer > .sapUiFormTitle {
 	padding: 0 0.25rem;
 }
 
 .sapUiFormCL > .sapUiFormTitle > img,
 .sapUiFormCLContainer > .sapUiFormTitle > img,
 .sapUiFormCL > .sapUiFormTitle > span,
-.sapUiFormCLContainer > .sapUiFormTitle > span{
+.sapUiFormCLContainer > .sapUiFormTitle > span {
 	margin-right: 0.5rem;
 }
 
@@ -39,7 +39,7 @@
 }
 
 /* Containers */
-.sapUiFormCLContainer{
+.sapUiFormCLContainer {
 	min-height: 1px;
 	overflow: hidden;
 	padding: 1rem 0.75rem;
@@ -47,11 +47,11 @@
 }
 
 /* on real phones use smaller space between containers */
-html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:first-child){
+html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:first-child) {
 	padding-top: 0.5rem;
 }
 
-html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:last-child){
+html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:last-child) {
 	padding-bottom: 0.5rem;
 }
 
@@ -65,7 +65,7 @@ html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:l
 .sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLFirstRow.sapUiFormContainerTitle,
 .sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLFirstRow.sapUiFormContainerToolbar,
 .sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerTitle,
-.sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerToolbar{
+.sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerToolbar {
 	padding-top: 0.5rem;
 }
 
@@ -78,27 +78,27 @@ html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:l
 .sapUiSizeCompact .sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLFirstRow.sapUiFormContainerTitle,
 .sapUiSizeCompact .sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLFirstRow.sapUiFormContainerToolbar,
 .sapUiSizeCompact .sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerTitle,
-.sapUiSizeCompact .sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerToolbar{
+.sapUiSizeCompact .sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLFirstRow.sapUiFormContainerToolbar {
 	padding-top: 1rem;
 }
 
 /* Container content */
-.sapUiFormCLContainer > .sapUiFormCLContainerCont{
+.sapUiFormCLContainer > .sapUiFormCLContainerCont {
 	column-gap: 1.5rem;
 	font-size: 0; /* otherwise there will be a spacing between elements */
 }
 
-.sapUiFormCLContainerColl > .sapUiFormCLContainerCont{
+.sapUiFormCLContainerColl > .sapUiFormCLContainerCont {
 	display: none;
 }
 
 /* Stand Alone Container */
-.sapUiFormCL > .sapUiFormCLContainer{
+.sapUiFormCL > .sapUiFormCLContainer {
 	width: 100%;
 }
 
 /* More containers */
-.sapUiFormCLContent > .sapUiFormCLContainer{
+.sapUiFormCLContent > .sapUiFormCLContainer {
 	width: 100%; /* default, overwritten by precise width*/
 	float: left;
 }
@@ -122,21 +122,21 @@ html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:l
 }
 
 /* XL */
-.sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLBreak{
+.sapUiFormCLMedia-Std-LargeDesktop > .sapUiFormCLContent > .sapUiFormCLContainerXLBreak {
 	clear: both;
 }
 
 .createContainerRules(@_sap_ui_layout_ColumnLayout_formColumnMaxXL, LargeDesktop, XL);
 
 /* L */
-.sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLBreak{
+.sapUiFormCLMedia-Std-Desktop > .sapUiFormCLContent > .sapUiFormCLContainerLBreak {
 	clear: both;
 }
 
 .createContainerRules(@_sap_ui_layout_ColumnLayout_formColumnMaxL, Desktop, L);
 
 /* M */
-.sapUiFormCLMedia-Std-Tablet > .sapUiFormCLContent > .sapUiFormCLContainerMBreak{
+.sapUiFormCLMedia-Std-Tablet > .sapUiFormCLContent > .sapUiFormCLContainerMBreak {
 	clear: both;
 }
 .createContainerRules(@_sap_ui_layout_ColumnLayout_formColumnMaxM, Tablet, M);
@@ -144,14 +144,14 @@ html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:l
 /* S */
 
 /* Elements */
-.sapUiFormCLElement{
+.sapUiFormCLElement {
 	width: 100%; /* to use the whole column */
 	display: inline-block; /* otherwise it wraps inside element -> label in one column, field in another */
 	font-size: @sapUiFontSize; /* restore default font size */
 }
 
-.sapUiFormCLContent:after,
-.sapUiFormCLElement:after {
+.sapUiFormCLContent::after,
+.sapUiFormCLElement::after {
 /* CLEAR FIX */
 	clear: both;
 	content: " ";
@@ -161,7 +161,7 @@ html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:l
 	visibility: hidden;
 }
 
-.sapUiFormCLElement > div {
+.sapUiFormCLElement > * {
 	float: left;
 	padding: 0 0.25rem;
 	box-sizing: border-box;
@@ -181,26 +181,26 @@ html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:l
 /* small columns */
 .createColumnRules(@_sap_ui_layout_ColumnLayout_formColumnElementCols, Small, S);
 
-.sapUiFormCLSmallColumns .sapUiFormCLElement > .sapUiFormCLCellSBreak{
+.sapUiFormCLSmallColumns .sapUiFormCLElement > .sapUiFormCLCellSBreak {
 	clear: both;
 }
 
 /* wide columns - Labels next to field */
 .createColumnRules(@_sap_ui_layout_ColumnLayout_formColumnElementCols, Wide, L);
 
-.sapUiFormCLWideColumns .sapUiFormCLElement > .sapUiFormCLCellLBreak{
+.sapUiFormCLWideColumns .sapUiFormCLElement > .sapUiFormCLCellLBreak {
 	clear: both;
 }
 
 /* edit mode */
 /* labels next to field */
 .sapUiFormEdit > .sapUiFormCLSmallColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsS12),
-.sapUiFormEdit > .sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12){
+.sapUiFormEdit > .sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12) {
 	padding-top: 1rem;
 }
 
 .sapUiSizeCompact .sapUiFormEdit > .sapUiFormCLSmallColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsS12),
-.sapUiSizeCompact .sapUiFormEdit > .sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12){
+.sapUiSizeCompact .sapUiFormEdit > .sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12) {
 	padding-top: 0.5rem;
 }
 
@@ -229,7 +229,7 @@ html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:l
 	padding-top: 0.375rem;
 }
 
-html.sap-phone .sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormCLContainer:not(.sapUiFormContainerTitle):not(.sapUiFormContainerToolbar){
+html.sap-phone .sapUiFormEdit .sapUiFormCLSmallColumns .sapUiFormCLContainer:not(.sapUiFormContainerTitle):not(.sapUiFormContainerToolbar) {
 	padding-top: 0;
 	margin-top: -0.125rem;
 }
@@ -241,14 +241,15 @@ html[data-sap-ui-browser^="sf"] .sapUiFormEdit .sapUiFormCLElement {
 
 /* display mode */
 /* in display only mode add padding to controls as they don't have one */
-.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > div{
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > *{
 	padding-top: 0.25rem;
 	padding-bottom: 0.25rem;
 	font-size: 1px; /* as browser adds some px to text to meet font-size */
+	margin: 0; /* As <dd> would add a margin */
 }
 
-.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > div .sapUiIcon:not(.sapMBtnIcon),
-.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > div .sapMCbBg{
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > * .sapUiIcon:not(.sapMBtnIcon),
+.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > * .sapMCbBg{
 	font-size: @sapUiFontSize; /* to set default font size on icons */
 }
 

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

@@ -7,7 +7,7 @@
 @_sap_ui_layout_FormLayout_FormSubTitleSize: ~"H5";
 
 .sapUiFormLayout {
-	border: 1px solid @sapUiGroupTitleBorderColor;
+	border: 1px solid var(--sapGroup_TitleBorderColor);
 	font-size: @sapUiDesktopFontSize;
 }
 
@@ -16,7 +16,7 @@
 }
 
 .sapUiFormTitle {
-	border-bottom: 1px solid @sapUiGroupTitleBorderColor;
+	border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
 	overflow: hidden;
 	width: 100%;
 	font-synthesis: none;
@@ -35,7 +35,7 @@
 	display: block;
 	width: 100%;
 	font-weight: @sapUiFontHeaderWeight;
-	color: @sapUiGroupTitleTextColor;
+	color: var(--sapGroup_TitleTextColor);
 	margin: 0;
 }
 
@@ -53,48 +53,48 @@
 	line-height: 2rem;
 }
 
-.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable{
+.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable {
 	overflow: visible; /* to allow to put expander outside */
 	padding-left: 2.5rem;
 }
 
-.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable > button{
+.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable > button {
 	position: absolute;
 	left: -0.25rem;
 	padding-right: 0.5rem;
 }
 
 .sapUiFormTitle.sapUiFormTitleEmph {
-	border-color: @sapUiGroupTitleBorderColor;
+	border-color: var(--sapGroup_TitleBorderColor);
 }
 
 /* Title levels - can not use TextView CSS from commons, because also used in mobile */
 .sapUiFormTitleH1 {
-	font-size: @sapMFontHeader1Size;
+	font-size: var(--sapFontHeader1Size);
 	line-height: 122%;
 }
 
 .sapUiFormTitleH2 {
-	font-size: @sapMFontHeader2Size;
+	font-size: var(--sapFontHeader2Size);
 	line-height: 122%;
 }
 
 .sapUiFormTitleH3 {
-	font-size: @sapMFontHeader3Size;
+	font-size: var(--sapFontHeader3Size);
 	line-height: 122%;
 }
 
 .sapUiFormTitleH4 {
-	font-size: @sapMFontHeader4Size;
+	font-size: var(--sapFontHeader4Size);
 }
 
 .sapUiFormTitleH5 {
-	font-size: @sapMFontHeader5Size;
+	font-size: var(--sapFontHeader5Size);
 }
 
 .sapUiFormTitleH6 {
-	font-size: @sapMFontHeader6Size;
-	color: @sapUiGroupTitleTextColor;
+	font-size: var(--sapFontHeader6Size);
+	color: var(--sapGroup_TitleTextColor);
 }
 
 .sapUiFormTitle> img {
@@ -106,12 +106,12 @@
 	margin-bottom: 0.5rem;
 }
 
-.sapUiFormToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto{
-	font-size: @sapMFontHeader4Size;
+.sapUiFormToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto {
+	font-size: var(--sapFontHeader4Size);
 }
 
-.sapUiFormContainerToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto{
-	font-size: @sapMFontHeader5Size;
+.sapUiFormContainerToolbar > div:first-child >.sapMTitle.sapMTitleStyleAuto {
+	font-size: var(--sapFontHeader5Size);
 }
 
 .sapUiFormM .sapUiFormContainerTitle > .sapUiFormTitle {

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

@@ -22,11 +22,11 @@
 	position: relative;
 }
 
-.sapUiGridHeader.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable{
+.sapUiGridHeader.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable {
 	padding-left: 2.25rem;
 }
 
-.sapUiGridHeader.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable > button{
+.sapUiGridHeader.sapUiFormContainerTitle > .sapUiFormTitle.sapUiFormTitleExpandable > button {
 	left: -0.5rem;
 }
 
@@ -115,6 +115,7 @@
 
 html[data-sap-ui-browser^="ff"].sapUiSizeCompact,
 html[data-sap-ui-browser^="ff"] .sapUiSizeCompact {
+
 	.sapUiFormEdit.sapUiFormM > .sapUiGrid > tbody > tr > td.sapUiFormElementLbl {
 		padding-top: 0.4375rem;
 	}
@@ -165,22 +166,22 @@ html[data-sap-ui-browser^="ff"] .sapUiSizeCompact {
 }
 
 /* for display mode add padding to elements to have spacing between */
-.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid tr:not(.sapUiGridConteinerHeaderRow) > td{
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid tr:not(.sapUiGridConteinerHeaderRow) > td {
 	padding-top: 0.25rem;
 	padding-bottom: 0.25rem;
 }
 
 .sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid {
-	font-size: 1px; /* as browser adds some px to text to meet font-size*/
+	font-size: 1px; /* as browser adds some px to text to meet font-size */
 }
 
 .sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid tr:not(.sapUiGridConteinerHeaderRow) > td .sapUiIcon:not(.sapMBtnIcon),
-.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid tr:not(.sapUiGridConteinerHeaderRow) > td .sapMCbBg{
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid tr:not(.sapUiGridConteinerHeaderRow) > td .sapMCbBg {
 	font-size: @sapUiFontSize; /* to set default font size on icons */
 }
 
 .sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid .sapUiGridConteinerFirstRow:not(.sapUiGridConteinerHeaderRow) > td,
-.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid .sapUiGridConteinerHeaderRow + tr:not(.sapUiGridConteinerHeaderRow) > td{
+.sapUiFormM:not(.sapUiFormEdit) > .sapUiGrid .sapUiGridConteinerHeaderRow + tr:not(.sapUiGridConteinerHeaderRow) > td {
 	padding-top: 0;
 }
 

package/src/sap/ui/layout/themes/base/HorizontalLayout.less

@@ -28,20 +28,25 @@
 }
 
 @media (max-width: 599px) {
+
 	.sapMSplitContainerHideMode > .sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding ,
 	.sapMSplitContainerPortrait > .sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding ,
 	.sapUiHLayout.sapUiResponsiveContentPadding  > .sapUiHLayoutChildWrapper:not(:last-child) {
 		padding: 0;
 	}
 }
+
 @media (min-width: 600px) and (max-width: 1023px) {
+
 	.sapMSplitContainerHideMode > .sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding ,
 	.sapUiHLayout.sapUiResponsiveContentPadding  > .sapUiHLayoutChildWrapper:not(:last-child) {
 		padding-right: 1rem;
 		box-sizing: border-box;
 	}
 }
+
 @media (min-width: 1024px) {
+
 	.sapMSplitContainerHideMode > .sapMSplitContainerDetail .sapUiHLayout.sapUiResponsiveContentPadding ,
 	.sapUiHLayout.sapUiResponsiveContentPadding  > .sapUiHLayoutChildWrapper:not(:last-child) {
 		padding-right: 1rem;