@openui5/sap.f 1.134.0 → 1.136.0

package/src/sap/f/themes/base/GridContainer.less

@@ -1,11 +1,12 @@
-/* =================================== */
-/* CSS for control sap.f/GridContainer */
-/* Base theme                          */
-/* =================================== */
+/* ==================================== */
+/* CSS for control sap.f/GridContainer  */
+/* Base theme                           */
+/* ==================================== */
 
 @_sap_f_GridContainer_FocusBorderOffset: 0;
 
 .sapFGridContainer {
+
 	.sapFGridContainerDummyArea {
 		position: fixed;
 	}
@@ -54,4 +55,4 @@
 	.sapUiIntCard.sapUiIntCardAnalytical {
 		min-height: 100%;
 	}
-}
+}

package/src/sap/f/themes/base/GridList.less

@@ -1,14 +1,15 @@
-/* ============================== */
-/* CSS for control sap.f/GridList */
-/* Base theme                     */
-/* ============================== */
+/* =============================== */
+/* CSS for control sap.f/GridList  */
+/* Base theme                      */
+/* =============================== */
 
 @_sap_f_GridList_ItemFocusBorderRadius: unset;
-@_sap_f_GridList_ItemHighlightBorderRadius: 0px;
-@_sap_f_GridList_ItemFocusedHighlightOffset: 0px;
+@_sap_f_GridList_ItemHighlightBorderRadius: 0;
+@_sap_f_GridList_ItemFocusedHighlightOffset: 0;
 @_sap_f_GridList_ItemOverflow: unset;
 
 .sapFGridList {
+
 	/* List headers overrides */
 	& > .sapMListHdrText,
 	& > .sapMListHdrTBar {
@@ -25,10 +26,10 @@
 		}
 
 		> .sapMLIBFocusable:focus::after {
-			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 			border-radius: @_sap_f_GridList_ItemFocusBorderRadius;
 			position: absolute;
-			content: " ";
+			content: ' ';
 			top: 1px;
 			right: 1px;
 			bottom: 1px;
@@ -52,6 +53,7 @@
 
 /* List Group headers overrides. */
 .sapFGridListGroup {
+
 	& > .sapMLIB.sapMGHLI {
 		background: none;
 		border: none;
@@ -61,24 +63,24 @@
 
 		& .sapMGHLITitle {
 			font-size: 1.125rem;
-			color: @sapUiGroupTitleTextColor;
+			color: var(--sapGroup_TitleTextColor);
 		}
 	}
 }
 
-// Overrides for various list items, except for GridListItem. It has its own independent styles
+/* Overrides for various list items, except for GridListItem. It has its own independent styles */
 .sapFGridList > .sapMListUl > .sapMLIB:not(.sapMGHLI):not(.sapFGLI) {
-	border-radius: @sapUiTileBorderCornerRadius;
+	border-radius: var(--sapTile_BorderCornerRadius);
 	border: none;
-	box-shadow: @sapUiContentShadow0;
+	box-shadow: var(--sapContent_Shadow0);
 	overflow: @_sap_f_GridList_ItemOverflow;
 
-	// Highlighted items
+	/* Highlighted items */
 	> .sapMLIBHighlight {
 		border-top-left-radius: 0.25rem;
 		border-bottom-left-radius: 0.25rem;
 	}
-	
+
 	&.sapMLIBFocusable:focus > .sapMLIBHighlight {
 		top: @_sap_f_GridList_ItemFocusedHighlightOffset;
 		bottom: @_sap_f_GridList_ItemFocusedHighlightOffset;
@@ -92,12 +94,12 @@
 }
 
 .sapFGridList > .sapMListUl.sapMGrowingList {
-	border-radius: @sapUiTileBorderCornerRadius;
+	border-radius: var(--sapTile_BorderCornerRadius);
 }
 
 .sapFGridList > .sapMListUl > .sapUiBlockLayerTabbable {
-	// There are "span" helpers, which purpose is to block navigation into the blocked controls content.
-	// If the focus reaches the span before the blocked/busy control it is forwarded to the one after the control.
-	// These spans should not be visible.
+	/* There are "span" helpers, which purpose is to block navigation into the blocked controls content.
+	If the focus reaches the span before the blocked/busy control it is forwarded to the one after the control.
+	These spans should not be visible. */
 	position: absolute;
 }

package/src/sap/f/themes/base/GridListItem.less

@@ -3,22 +3,22 @@
 /* Base theme                          */
 /* =================================== */
 
-@_sap_f_GridListItem_HeaderBoxShadow: inset 0 -0.0625rem @sapUiPageHeaderBorderColor;
+@_sap_f_GridListItem_HeaderBoxShadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor);
 @_sap_f_GridListItem_Overflow: unset;
 @_sap_f_GridListItem_HeaderHeight: 3rem;
 @_sap_f_GridListItem_Compact_HeaderHeight: 2rem;
 @_sap_f_GridListItem_FocusedHighlightOffset: 0.125rem;
 @_sap_f_GridListItem_HighlightBorderRadius: 0.25rem;
-@_sap_f_GridListItem_FocusedHighlightBorderRadius: 0px;
+@_sap_f_GridListItem_FocusedHighlightBorderRadius: 0;
 
 .sapFGLI {
 	padding: 0;
-	border-radius: @sapUiTileBorderCornerRadius;
+	border-radius: var(--sapTile_BorderCornerRadius);
 	border: none;
-	box-shadow: @sapUiContentShadow0;
+	box-shadow: var(--sapContent_Shadow0);
 	overflow: @_sap_f_GridListItem_Overflow;
 
-	// Highlighted items
+	/* Highlighted items */
 	> .sapMLIBHighlight {
 		z-index: 1;
 		border-top-left-radius: @_sap_f_GridListItem_HighlightBorderRadius;
@@ -36,7 +36,7 @@
 		width: 100%;
 		height: 100%;
 
-		// Header Toolbar
+		/* Header Toolbar */
 		.sapFGLIToolbar {
 			height: @_sap_f_GridListItem_HeaderHeight;
 			box-shadow: @_sap_f_GridListItem_HeaderBoxShadow;
@@ -52,13 +52,13 @@
 				padding: 0;
 			}
 
-			// add spacing between the items, except for the first item
-			>:not(:first-child) {
+			/* add spacing between the items, except for the first item */
+			> :not(:first-child) {
 				margin: 0 0 0 0.5rem;
 			}
 		}
 
-		// Content
+		/* Content */
 		.sapMLIBContent {
 			height: 100%;;
 		}
@@ -83,13 +83,14 @@
 
 /* Interaction states */
 .sapFGLI {
+
 	&.sapMLIBHoverable:hover {
-		box-shadow: 0 0 0 0.0625rem @sapUiTileInteractiveBorderColor;
+		box-shadow: 0 0 0 0.0625rem var(--sapTile_Interactive_BorderColor);
 	}
 
 	&.sapMLIB.sapMLIBSelected {
 		border-bottom: none;
-		box-shadow: 0 0 0 0.125rem @sapUiListSelectionBorderColor;
+		box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
 	}
 }
 
@@ -100,7 +101,7 @@
 		height: @_sap_f_GridListItem_Compact_HeaderHeight;
 	}
 
-	// Content
+	/* Content */
 	.sapMLIBContent {
 		height: 100%;;
 	}
@@ -108,4 +109,4 @@
 	.sapFGLIToolbar + .sapMLIBContent {
 		height: calc(100% ~"-" @_sap_f_GridListItem_Compact_HeaderHeight);
 	}
-}
+}

package/src/sap/f/themes/base/SidePanel.less

@@ -1,28 +1,28 @@
-/* =============================== */
-/* CSS for control sap.f/SidePanel */
-/* Base theme                      */
-/* =============================== */
+/* ================================ */
+/* CSS for control sap.f/SidePanel  */
+/* Base theme                       */
+/* ================================ */
 
-@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
-@_sap_ui_layout_Splitter_BarActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
+@_sap_ui_layout_Splitter_BarDecorationColors: var(--sapHighlightColor), fade(@sapUiHighlight, 0);
+@_sap_ui_layout_Splitter_BarActiveDecorationColors: var(--sapHighlightColor), var(--sapHighlightColor);
 
 /***** Desktop *****/
 
-// Cozy
+/* Cozy */
 .sapFSP {
 	height: 100%;
 	display: flex;
 	margin: 0;
 	touch-action: none;
 
-	// Main content
+	/* Main content */
 	.sapFSPMain {
 		flex: 1 1;
 		padding: 0.5rem;
 		overflow: hidden auto;
 	}
 
-	// Splitter
+	/* Splitter */
 	.sapFSPSplitterBar {
 		cursor: col-resize;
 		width: 1rem;
@@ -34,7 +34,7 @@
 		border-left: none;
 		border-right: none;
 		vertical-align: top;
-		color: @sapUiContentIconColor;
+		color: var(--sapContent_IconColor);
 		position: absolute;
 		left: -1rem;
 
@@ -43,14 +43,14 @@
 		}
 
 		&:focus:not(:active)::after {
-			content: "";
+			content: '';
 			display: block;
 			position: absolute;
 			top: 0;
 			right: 0;
 			bottom: 0;
 			left: 0;
-			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 		}
 
 		.sapFSPSplitterBarDecorationBefore {
@@ -82,18 +82,19 @@
 
 			.sapFSPSplitterBarGripIcon {
 				cursor: col-resize;
-				line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth;
+				line-height: ~"calc(1.625rem - var(--sapButton_BorderWidth) - var(--sapButton_BorderWidth); )";
 				box-sizing: border-box;
 				height: 1.625rem;
 				width: 1.5rem;
 				margin-top: 3px;
-				border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
-				border-radius: @sapUiButtonBorderCornerRadius;
-				background: @sapUiButtonLiteBackground;
+				border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+				border-radius: var(--sapButton_BorderCornerRadius);
+				background: var(--sapButton_Lite_Background);
 			}
 		}
 
 		&:active {
+
 			.sapFSPSplitterBarDecorationBefore {
 				flex-grow: 1;
 				background-image: linear-gradient(to top, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
@@ -105,6 +106,7 @@
 		}
 
 		&:hover {
+
 			.sapFSPSplitterBarDecorationBefore,
 			.sapFSPSplitterBarDecorationAfter {
 				flex-grow: 1;
@@ -112,13 +114,13 @@
 			}
 
 			.sapFSPSplitterBarGripIcon {
-				background: @sapUiButtonLiteBackground;
-				border-color: @sapUiButtonLiteBorderColor;
+				background: var(--sapButton_Lite_Background);
+				border-color: var(--sapButton_Lite_BorderColor);
 			}
 		}
 	}
 
-	// Side panel
+	/* Side panel */
 	.sapFSPSide {
 		position: relative;
 		display: flex;
@@ -140,9 +142,9 @@
 			display: flex;
 			flex-direction: row-reverse;
 			align-items: stretch;
-			border-radius: @sapUiTileBorderCornerRadius 0 0 @sapUiTileBorderCornerRadius;
+			border-radius: var(--sapTile_BorderCornerRadius) 0 0 var(--sapTile_BorderCornerRadius);
 			box-shadow: 0 0 1rem fade(@sapUiContentShadowColor, 10);
-			background-color: @sapUiGroupContentBackground;
+			background-color: var(--sapGroup_ContentBackground);
 			min-width: 4.25rem;
 			width: 100%;
 
@@ -169,16 +171,16 @@
 					margin-right: 1rem;
 
 					& > .sapUiIcon {
-						color: @sapUiContentIconColor;
+						color: var(--sapContent_IconColor);
 					}
 
 					.sapMTitle {
 						flex-grow: 2;
-						font-family: @sapUiFontBoldFamily;
-						font-size: @sapMFontHeader6Size;
+						font-family: var(--sapFontBoldFamily);
+						font-size: var(--sapFontHeader6Size);
 						font-style: normal;
 						font-weight: 700;
-						color: @sapUiBaseText;
+						color: var(--sapTextColor);
 
 						& > span {
 							overflow: hidden;
@@ -225,11 +227,11 @@
 				cursor: pointer;
 
 				.sapFSPItemText {
-					font-family: @sapUiFontSemiboldDuplexFamily;
-					font-size: @sapMFontHeader6Size;
+					font-family: var(--sapFontSemiboldDuplexFamily);
+					font-size: var(--sapFontHeader6Size);
 					font-style: normal;
 					font-weight: 600;
-					color: @sapUiBaseText;
+					color: var(--sapTextColor);
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
@@ -240,19 +242,19 @@
 					flex-shrink: 0;
 					align-items: center;
 					justify-content: center;
-					font-size: @sapMFontHeader4Size;
-					background-color: @sapUiGroupContentBackground;
-					color: @sapUiContentSelectedForegroundColor;
+					font-size: var(--sapFontHeader4Size);
+					background-color: var(--sapGroup_ContentBackground);
+					color: var(--sapContent_Selected_ForegroundColor);
 					width: 2.75rem;
 					height: 2.75rem;
 					box-sizing: border-box;
 					border-radius: 50%;
-					border: 0.0625rem solid @sapUiContentSelectedForegroundColor;
+					border: 0.0625rem solid var(--sapContent_Selected_ForegroundColor);
 					cursor: pointer;
 				}
 
 				&.sapFSPDisabled {
-					opacity: @sapUiContentDisabledOpacity;
+					opacity: var(--sapContent_DisabledOpacity);
 
 					&:hover {
 						background-color: initial;
@@ -263,24 +265,26 @@
 					visibility: hidden;
 
 					.sapUiIcon {
-						color: @sapUiContentSelectedForegroundColor;
+						color: var(--sapContent_Selected_ForegroundColor);
 					}
 
 					&:not(.sapFSPSelected):not(:hover) {
+
 						.sapUiIcon {
 							border: none;
 						}
 					}
 
 					&.sapFSPSelected {
+
 						&::before {
 							display: none;
 						}
 
 						.sapUiIcon {
-							border-color: @sapUiContentSelectedForegroundColor;
-							background-color: @sapUiListSelectionBackgroundColor;
-							color: @sapUiContentSelectedForegroundColor;
+							border-color: var(--sapContent_Selected_ForegroundColor);
+							background-color: var(--sapList_SelectionBackgroundColor);
+							color: var(--sapContent_Selected_ForegroundColor);
 						}
 					}
 				}
@@ -289,41 +293,42 @@
 					outline: none;
 
 					&::after {
-						content: "";
+						content: '';
 						position: absolute;
 						box-sizing: border-box;
 						left: 0;
 						top: 0;
 						right: 0;
 						bottom: 0;
-						border: 0.0625rem dotted @sapUiContentFocusColor;
+						border: 0.0625rem dotted var(--sapContent_FocusColor);
 						pointer-events: none;
 					}
 				}
 
 				&:hover {
-					background-color: @sapUiListHoverBackground;
+					background-color: var(--sapList_Hover_Background);
 
 					&.sapFSPOverflowItem .sapUiIcon {
-						border-color: @sapUiContentSelectedForegroundColor;
+						border-color: var(--sapContent_Selected_ForegroundColor);
 					}
 				}
 
 				&.sapFSPSelected {
+
 					&::before {
 						position: absolute;
 						left: 0;
-						content: "";
+						content: '';
 						height: 3.125rem;
 						width: 0.1875rem;
-						background-color: @sapUiContentSelectedForegroundColor;
+						background-color: var(--sapContent_Selected_ForegroundColor);
 						border-radius: 0 0.1875rem 0.1875rem 0;
 					}
 
 					.sapUiIcon {
-						border-color: @sapUiContentSelectedForegroundColor;
-						background-color: @sapUiContentSelectedForegroundColor;
-						color: @sapUiContentContrastIconColor;
+						border-color: var(--sapContent_Selected_ForegroundColor);
+						background-color: var(--sapContent_Selected_ForegroundColor);
+						color: var(--sapContent_ContrastIconColor);
 					}
 
 					&:focus::after {
@@ -341,6 +346,7 @@
 	}
 
 	&.sapFSPActionBarExpanded {
+
 		&:not(.sapFSPSideContentExpanded) .sapFSPSide {
 			width: 20rem;
 		}
@@ -357,7 +363,9 @@
 		}
 
 		&.sapFSPSideContentExpanded {
+
 			.sapFSPSide:not(.sapFSPSplitView) {
+
 				.sapFSPSideContent {
 					display: none;
 				}
@@ -373,11 +381,13 @@
 	}
 
 	&:not(.sapFSPSingleItem) .sapFSPSideContent {
-		border-right: 0.0625rem solid @sapUiGroupContentBorderColor;
+		border-right: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 	}
 
 	&.sapFSPSingleItem {
+
 		&.sapFSPSideContentExpanded	{
+
 			.sapFSPExpandCollapse,
 			.sapFSPActionBar {
 				display: none;
@@ -407,32 +417,36 @@
 }
 
 .sapFSPOverflowMenu .sapUiMnuItm {
+
 	.sapUiMnuItmIco {
-		color: @sapUiContentSelectedForegroundColor;
+		color: var(--sapContent_Selected_ForegroundColor);
 	}
 
 	.sapUiMnuItmTxt {
-		font-family: @sapUiFontFamily;
-		font-size: @sapMFontHeader6Size;
+		font-family: var(--sapFontFamily);
+		font-size: var(--sapFontHeader6Size);
 		font-style: normal;
 		font-weight: 600;
 	}
 
 	&.sapUiMnuItmDsbl {
+
 		.sapUiMnuItmTxt {
-			opacity: @sapUiContentDisabledOpacity;
+			opacity: var(--sapContent_DisabledOpacity);
 		}
 	}
 
 	&:not(.sapUiMnuItmHov:active) .sapUiMnuItmTxt,
 	&.sapUiMnuItmDsbl.sapUiMnuItmHov:active .sapUiMnuItmTxt {
-		color: @sapUiBaseText;
+		color: var(--sapTextColor);
 	}
 }
 
-// Compact
+/* Compact */
 .sapUiSizeCompact {
+
 	.sapFSP {
+
 		.sapFSPSide {
 			min-width: 4rem;
 			width: 4rem;
@@ -449,6 +463,7 @@
 			}
 
 			.sapFSPActionBarList {
+
 				.sapFSPItem {
 					height: 2.375rem;
 					padding: 0.1875rem 1rem;
@@ -458,7 +473,7 @@
 					}
 
 					.sapUiIcon {
-						font-size: @sapMFontHeader5Size;
+						font-size: var(--sapFontHeader5Size);
 						width: 2rem;
 						height: 2rem;
 						line-height: 1.75rem;
@@ -477,6 +492,7 @@
 		}
 
 		&.sapFSPActionBarExpanded {
+
 			.sapFSPSideInner .sapFSPActionBar {
 				width: 100%;
 				max-width: 100%;
@@ -487,16 +503,20 @@
 
 .sapFSP.sapFSPLeft {
 	flex-direction: row-reverse;
+
 	.sapFSPSide {
 		margin: 0.5rem 1rem 0.5rem 0;
+
 		.sapFSPSideInner {
-			border-radius: 0 @sapUiTileBorderCornerRadius @sapUiTileBorderCornerRadius 0;
+			border-radius: 0 var(--sapTile_BorderCornerRadius) var(--sapTile_BorderCornerRadius) 0;
 			flex-direction: row;
 		}
+
 		.sapFSPExpandCollapse {
 			right: auto;
 			left: 1rem;
 		}
+
 		.sapFSPSplitterBar {
 			left: initial;
 			right: -1rem;
@@ -506,14 +526,14 @@
 
 .sapFSP.sapFSPLeft:not(.sapFSPSingleItem) .sapFSPSideContent {
 	border-right: none;
-	border-left: 0.0625rem solid @sapUiGroupContentBorderColor;
+	border-left: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 }
 
 /***** Phone *****/
 
 html.sap-phone {
 
-	// Cozy
+	/* Cozy */
 	.sapFSP {
 		flex-direction: column;
 
@@ -544,7 +564,7 @@ html.sap-phone {
 				overflow: hidden;
 				border-radius: 0;
 				border: none;
-				border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
+				border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 
 				.sapFSPActionBar {
 					position: relative;
@@ -575,7 +595,7 @@ html.sap-phone {
 						text-align: center;
 						height: 2.25rem;
 						padding: 0.1875rem 1rem;
-						border-bottom: 0.0625rem solid @sapUiGroupContentBorderColor;
+						border-bottom: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 						margin-right: 0;
 
 						& > .sapUiIcon {
@@ -653,6 +673,7 @@ html.sap-phone {
 		}
 
 		&.sapFSPActionBarExpanded {
+
 			&.sapFSPSideContentExpanded .sapFSPSide:not(.sapFSPSplitView) .sapFSPSideContent {
 				display: flex;
 			}
@@ -669,6 +690,7 @@ html.sap-phone {
 		}
 
 		&.sapFSPSingleItem {
+
 			.sapFSPSide {
 				flex: 0 0 4.125rem;
 				width: 100%;
@@ -701,6 +723,7 @@ html.sap-phone {
 									border-width: 0;
 									width: 2.25rem;
 								}
+
 								.sapFSPItemText {
 									display: inline;
 									font-size: 0.875rem;
@@ -745,7 +768,7 @@ html.sap-phone {
 			bottom: 0;
 			left: 0;
 			right: 0;
-			background: @sapBackgroundColor;
+			background: var(--sapBackgroundColor);
 			height: 100%;
 
 			.sapFSPSideInner {
@@ -757,7 +780,7 @@ html.sap-phone {
 				border: none;
 
 				.sapFSPActionBarListWrapper {
-					border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
+					border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);
 				}
 			}
 		}
@@ -768,13 +791,16 @@ html.sap-phone {
 		}
 	}
 
-	// Compact
+	/* Compact */
 	.sapUiSizeCompact {
+
 		.sapFSP {
+
 			.sapFSPSide {
 				flex: 0 0 3.75rem;
 
 				.sapFSPSideInner {
+
 					.sapFSPActionBarListWrapper {
 						height: 5.5rem;
 					}
@@ -813,11 +839,13 @@ html.sap-phone {
 				height: 100%;
 
 				.sapFSPSideInner {
+
 					.sapFSPSideContentInner {
 						padding: 0.5rem 1rem;
 					}
 
 					.sapFSPSideContentHeader {
+
 						& > .sapUiIcon {
 							width: 2rem;
 						}
@@ -830,8 +858,11 @@ html.sap-phone {
 			}
 
 			&.sapFSPSingleItem {
+
 				.sapFSPSide {
+
 					.sapFSPSideInner {
+
 						.sapFSPActionBarListWrapper .sapFSPActionBarList .sapFSPItem .sapUiIcon {
 							width: 2rem;
 						}
@@ -841,6 +872,7 @@ html.sap-phone {
 						}
 					}
 				}
+
 				&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
 					height: 0;
 					overflow: hidden;