@openui5/sap.f 1.133.2 → 1.135.0

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

@@ -1,12 +1,12 @@
-/* ================================== */
-/* CSS for control sap.f/Card         */
-/* Base theme                         */
-/* ================================== */
+/* =========================== */
+/* CSS for control sap.f/Card  */
+/* Base theme                  */
+/* =========================== */
 
-@_sap_f_Card_BoxShadow: @sapUiContentShadow0;
-@_sap_f_Card_HeaderBorder: 0.0625rem solid @sapUiTileSeparatorColor; // used as top or bottom border
+@_sap_f_Card_BoxShadow: var(--sapContent_Shadow0);
+@_sap_f_Card_HeaderBorder: 0.0625rem solid var(--sapTile_SeparatorColor); /* used as top or bottom border */
 @_sap_f_Card_FocusBorderRadius: none;
-@_sap_f_Card_BorderRadius: @sapUiElementBorderCornerRadius;
+@_sap_f_Card_BorderRadius: var(--sapElement_BorderCornerRadius);
 @_sap_f_Card_ContentPadding: 1rem;
 @_sap_f_Card_FocusBorderBottomOffset: 1px;
 @_sap_f_Card_FocusBorderTopOffset: 1px;
@@ -19,15 +19,15 @@
 	flex-direction: column;
 	vertical-align: top;
 	box-sizing: border-box;
-	background: @sapUiTileBackground;
+	background: var(--sapTile_Background);
 	box-shadow: @_sap_f_Card_BoxShadow;
 	border-radius: @_sap_f_Card_BorderRadius;
-	border: 0.0625rem solid @sapUiTileBorderColor;
+	border: 0.0625rem solid var(--sapTile_BorderColor);
 	width: 100%;
 	height: auto;
-	font-family: @sapUiFontFamily;
-	font-size: @sapMFontMediumSize;
-	color: @sapUiGroupTitleTextColor;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	color: var(--sapGroup_TitleTextColor);
 	outline: none;
 }
 
@@ -35,7 +35,7 @@
 .sapFCardTransparent.sapFCard,
 ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 	border: none;
-	border-radius: 0%;
+	border-radius: 0;
 	background: transparent;
 	box-shadow: unset;
 	overflow: visible;
@@ -49,7 +49,7 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 	& > .sapFCardFooter {
 		background: transparent;
 		border: none;
-		border-radius: 0%;
+		border-radius: 0;
 	}
 
 	& > .sapFCardFooter .sapMTB {
@@ -64,7 +64,7 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 
 .sapFCard .sapFCardFilterBar {
 	padding: 0.5rem @_sap_f_Card_ContentPadding;
-	background: @sapUiTileBackground;
+	background: var(--sapTile_Background);
 	border-bottom: @_sap_f_Card_HeaderBorder;
 
 	.sapFCardFilterBarContent {
@@ -88,6 +88,10 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 .sapFCard .sapFCardHeader {
 	border-bottom: @_sap_f_Card_HeaderBorder;
 	border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
+
+	.sapFCardHeaderMainPart {
+		border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
+	}
 }
 
 .sapFCard .sapFCardIcon.sapFAvatar {
@@ -99,10 +103,23 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 }
 
 .sapFCard.sapFCardBottomHeader {
+
 	.sapFCardHeader {
 		border-top: @_sap_f_Card_HeaderBorder;
 		border-bottom: none;
 		border-radius: 0 0 @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius;
+
+		.sapFCardHeaderMainPart {
+			border-radius: 0;
+		}
+
+		&.sapFCardHeaderMainPartOnly .sapFCardHeaderMainPart {
+			border-radius: 0 0 @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius;
+		}
+
+		.sapFCardHeaderLastPart {
+			padding-bottom: @_sap_f_Card_ContentPadding;
+		}
 	}
 
 	.sapFCardContent {
@@ -134,6 +151,7 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 }
 
 .sapFCard .sapFCardContent {
+
 	.sapVizFrame {
 		min-height: inherit;
 
@@ -143,34 +161,39 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 	}
 
 	.sapMLIB.sapMSLINoDescIcon {
-		padding: 0 1rem 0 0.125rem; // padding left is for alignment with the header
+		padding: 0 1rem 0 0.125rem; /* padding left is for alignment with the header */
 	}
 
 	.sapMLIBContent {
+
 		.sapMSLIDiv {
 			flex: 1 1 auto;
 		}
 	}
 
 	.sapUiView.sapUiXMLView > .sapMImg {
-		display: block; // Fix for unwanted space under the only image inside Component Card content
+		display: block; /* Fix for unwanted space under the only image inside Component Card content */
 	}
 
 	.sapFCardIcon.sapFAvatarColorTransparent {
+
 		.sapUiIcon {
-			color: @sapUiContentNonInteractiveIconColor;
+			color: var(--sapContent_NonInteractiveIconColor);
 		}
 	}
 }
 
-html[data-sap-ui-browser^="sf"] .sapFCard,
-html[data-sap-ui-browser^="cr"] .sapFCard {
+html[data-sap-ui-browser^='sf'] .sapFCard,
+html[data-sap-ui-browser^='cr'] .sapFCard {
+
 	.sapFCardHeaderText {
 		flex: 1;
 	}
 
 	.sapFCardContent {
+
 		.sapMLIBContent {
+
 			.sapMSLIDiv {
 				flex: 1;
 			}
@@ -181,33 +204,62 @@ html[data-sap-ui-browser^="cr"] .sapFCard {
 .sapFCard.sapFCardNoContent .sapFCardHeader {
 	border-bottom: none;
 	border-radius: @_sap_f_Card_BorderRadius;
-	flex-grow: 1;
+
+	&.sapFCardHeaderMainPartOnly {
+		flex-grow: 1;
+
+		.sapFCardHeaderMainPart {
+			border-radius: @_sap_f_Card_BorderRadius;
+			flex-grow: 1;
+			align-items: flex-start;
+		}
+	}
+
+	.sapFCardHeaderLastPart {
+		padding-bottom: @_sap_f_Card_ContentPadding;
+	}
 }
 
-.sapFCard.sapFCardInteractive:hover {
-	box-shadow: @sapUiContentShadow2;
+.sapFCard.sapFCardInteractive:not(.sapFCardDisableMouseInteraction):hover {
+	box-shadow: var(--sapContent_Shadow2);
 	cursor: pointer;
+
+	.sapMText,
+	.sapMLabel,
+	.sapMTitle,
+	.sapFCardNumericIndicators .sapUiIcon {
+		cursor: pointer;
+	}
+
+	.sapMLIB:not(.sapMLIBActionable) .sapMText,
+	.sapMListTblHeader  .sapMText {
+		cursor: text;
+	}
 }
-//Todo HC should use the active background:  --sapTile_Hover_Background
+
+/* Todo HC should use the active background: --sapTile_Hover_Background */
 .sapFCard.sapFCardInteractive:focus:active {
 	box-shadow: none;
-	border: 0.0625rem solid @sapTile_Interactive_BorderColor;
+	border: .0625rem solid var(--sapTile_Interactive_BorderColor);
 }
 
 .sapFCard.sapFCardSectionInteractive {
+
 	&[data-sap-ui-draggable=true] {
+
 		.sapMText {
 			cursor: grab;
 		}
 	}
 
 	&:not(.sapFCardTransparent) {
+
 		.sapFCardSectionClickable:hover {
-			background: @sapUiTileHoverBackground;
+			background: var(--sapTile_Hover_Background);
 		}
 
 		.sapFCardSectionClickable:active {
-			background: @sapUiTileActiveBackground;
+			background: var(--sapTile_Active_Background);
 		}
 	}
 
@@ -221,8 +273,7 @@ html[data-sap-ui-browser^="cr"] .sapFCard {
 	}
 }
 
-.sapFCard.sapFCardFocus:focus::before,
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard.sapFCardNoHeader::before { // ... focus on a card without header
+.sapFCard.sapFCardFocus:focus::before {
 	content: '';
 	display: block;
 	position: absolute;
@@ -230,7 +281,7 @@ html[data-sap-ui-browser^="cr"] .sapFCard {
 	bottom: @_sap_f_Card_FocusBorderBottomOffset;
 	right: @_sap_f_Card_FocusBorderRightOffset;
 	top: @_sap_f_Card_FocusBorderTopOffset;
-	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: @_sap_f_Card_FocusBorderRadius;
 	pointer-events: none;
 	z-index: 1;
@@ -240,6 +291,7 @@ html[data-sap-ui-browser^="cr"] .sapFCard {
 /* ui5-restricted work zone */
 .sapFCard.sapFCardFocusFullCard,
 ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
+
 	&:has(.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within)::before {
 		content: '';
 		display: block;
@@ -248,7 +300,7 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 		bottom: @_sap_f_Card_FocusBorderBottomOffset;
 		right: @_sap_f_Card_FocusBorderRightOffset;
 		top: @_sap_f_Card_FocusBorderTopOffset;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 		border-radius: @_sap_f_Card_FocusBorderRadius;
 		pointer-events: none;
 		z-index: 1;
@@ -259,11 +311,6 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 	}
 }
 
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard.sapFCardNoHeader::before { // focus inside GridContainer on a card without header
-	bottom: 1px;
-	z-index: 1;
-}
-
 .sapUiSizeCompact {
 	.sapFCard .sapFCardContent {
 		.sapMLIB.sapMSLINoDescIcon {
@@ -275,6 +322,7 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 				line-height: 1rem;
 			}
 		}
+
 		.sapMListTbl {
 			padding-bottom: 0.5rem;
 		}
@@ -282,6 +330,7 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 }
 
 .sapFCardAdaptiveContent {
+
 	.sapFCardAdaptiveContentChoiceSetWrapper {
 		display: flex;
 		flex-direction: column;
@@ -290,12 +339,14 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 		align-items: flex-start;
 		height: fit-content;
 	}
+
 	.sapFTimeInput {
 		width: 13.125rem;
 	}
 }
 
 .sapFCardTableContent {
+
 	.sapMListTbl {
 		border: none;
 	}
@@ -306,6 +357,7 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 }
 
 .sapFCardExperimentalCaching {
+
 	.sapFCardDataTimestamp {
 		min-width: 100px;
 		padding-right: 1px;
@@ -313,9 +365,10 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 
 	.sapFCardDataTimestamp:not(.sapFCardDataTimestampUpdating) {
 		cursor: pointer;
-		&:hover:before {
-			content: "\e010";
-			font-family: "SAP-icons";
+
+		&:hover::before {
+			content: '\e010';
+			font-family: var(--sapContent_IconFontFamily);
 			margin-right: 4px;
 			font-size: 0.7rem;
 		}
@@ -340,5 +393,4 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 		pointer-events: all;
 		box-shadow: @sapUiShadow;
 	}
-}
-
+}

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

@@ -1,3 +1,8 @@
+/* ================================ */
+/* CSS for control sap.f/CardBadge  */
+/* Base theme                       */
+/* ================================ */
+
 .sapFCardBadgePlaceholder {
 	z-index: 100;
 	position: absolute;
@@ -9,6 +14,7 @@
 }
 
 .sapUiIntCard .sapFCardBadgePlaceholder .sapMObjStatus:not(.sapMObjStatusShowCustomIcon) {
+
 	.sapMObjStatusIcon {
 		display: initial;
 	}
@@ -32,7 +38,7 @@
 			padding: 0 0.25rem;
 		}
 
-		.sapMObjStatusIcon{
+		.sapMObjStatusIcon {
 			padding: 0;
 		}
 
@@ -43,13 +49,12 @@
 			white-space: nowrap;
 			max-width: inherit;
 		}
-
 	}
-
 }
 
 /* Padding between icon and text is too much */
-.sapFCardBadgePlaceholder .sapMObjStatus.sapMObjStatusInverted.sapFCardBadgeTextIcon{
+.sapFCardBadgePlaceholder .sapMObjStatus.sapMObjStatusInverted.sapFCardBadgeTextIcon {
+
 	.sapMObjStatusWrapper {
 
 		.sapMObjStatusIcon {
@@ -60,4 +65,4 @@
 			padding: 0 0.375rem 0 0.25rem;
 		}
 	}
-}
+}

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

@@ -6,25 +6,25 @@
 @_sap_f_CardHeaders_Padding: 1rem;
 @_sap_f_CardHeaders_TitleFontSize: @sapMFontHeader5Size;
 @_sap_f_CardHeaders_HeaderFocusBorderLeftOffset: 1px;
-@_sap_f_CardHeaders_HeaderFocusBorderBottomOffset: 2px;
+@_sap_f_CardHeaders_HeaderFocusBorderBottomOffset: 1px;
 @_sap_f_CardHeaders_HeaderFocusBorderRightOffset: 1px;
 @_sap_f_CardHeaders_HeaderFocusBorderTopOffset: 1px;
-@_sap_f_CardHeaders_HeaderFocusBorderRadius: none;
 
 .sapFCardHeader {
 	position: relative;
 	flex-shrink: 0;
-	justify-content: space-between;
 	background: @sapUiTileBackground;
-	padding: @_sap_f_CardHeaders_Padding;
 	display: flex;
+	flex-direction: column;
 
-	.sapFCardHeaderWrapper {
+	.sapFCardHeaderMainPart {
 		outline: none;
 		display: flex;
 		min-width: 0;
-		flex: 1;
 		height: fit-content;
+		padding: @_sap_f_CardHeaders_Padding @_sap_f_CardHeaders_Padding 0.75rem @_sap_f_CardHeaders_Padding;
+		position: relative;
+		border-radius: 0;
 	}
 
 	.sapFCardHeaderImage {
@@ -122,10 +122,12 @@
 	}
 
 	&.sapFCardHeaderHasToolbar {
-		min-height: 2rem;
+		&:not(.sapFCardHeaderHasIcon) .sapFCardHeaderMainPart {
+			min-height: 2rem;
+			align-items: flex-start;
+		}
 
 		.sapFCardHeaderText {
-			margin-inline-end: 2rem;
 			width: unset;
 		}
 	}
@@ -159,7 +161,7 @@
 		}
 	}
 
-	&.sapFCardSectionClickable {
+	.sapFCardSectionClickable {
 		cursor: pointer !important;
 
 		.sapMText {
@@ -188,10 +190,18 @@
 
 .sapFCardHeader.sapFCardNumericHeader {
 
-	.sapFCardHeaderContent {
-		outline: none;
-		min-width: 0; // fixes Chrome issue
-		flex: 1;
+	.sapFCardNumericHeaderNumericPart {
+		padding: 0.25rem 1rem 0.5rem 1rem;
+
+		.sapFCardHeaderNumericPartFirstLine {
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+
+			.sapFCardNumericIndicators  {
+				flex: 1;
+			}
+		}
 	}
 
 	.sapFCardStatus {
@@ -219,23 +229,7 @@
 		color: @sapUiTileTextColor;
 	}
 
-	.sapFCardAvatarAndIndicatorsLine {
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-
-		.sapFCardIcon.sapFAvatar {
-			margin-top: 0.5rem;
-			margin-right: 0.5rem;
-
-			&.sapFAvatarImage {
-				margin-right: 0.5rem;
-			}
-		}
-	}
-
 	.sapFCardNumericIndicators {
-		margin-top: 0.25rem;
 		flex: 1;
 		min-width: 0; // allows items to shrink and truncate the content inside
 
@@ -326,13 +320,12 @@
 }
 
 .sapUiSizeCompact {
-	.sapFCardHeaderHasToolbar {
+	.sapFCardHeaderHasToolbar:not(.sapFCardHeaderHasIcon) .sapFCardHeaderMainPart{
 		min-height: 1rem;
 	}
 }
 
-.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard > .sapFCardHeader:not(.sapFCardHeaderToolbarFocused)::before { // focus inside Grid Container
+.sapFCardHeader:not(.sapFCardHeaderToolbarFocused) .sapFCardHeaderFocusable:focus::before {
 	content: '';
 	display: block;
 	position: absolute;
@@ -341,12 +334,8 @@
 	right: @_sap_f_CardHeaders_HeaderFocusBorderRightOffset;
 	top: @_sap_f_CardHeaders_HeaderFocusBorderTopOffset;
 	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-	border-radius: @_sap_f_CardHeaders_HeaderFocusBorderRadius;
+	border-radius: inherit;
 	pointer-events: none;
-}
-
-.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before {
-	bottom: 1px;
 	z-index: 1;
 }
 

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

@@ -2,9 +2,10 @@
 /* CSS for control sap.f/CardLoading  */
 /* Base theme                         */
 /* ================================== */
+
 @_sap_f_Card_FocusBorderWidth: 1px;
-@_sap_f_Card_Background_Placeholder_Color: @sapUiContentPlaceholderloadingBackground;
-@_sap_f_Card_Placeholder_Gradient: linear-gradient(to right, @sapUiContentPlaceholderloadingBackground 0%, @sapUiContentPlaceholderloadingBackground 35%, darken(@sapUiContentPlaceholderloadingBackground, 5) 50%, @sapUiContentPlaceholderloadingBackground 65%, @sapUiContentPlaceholderloadingBackground 100%);
+@_sap_f_Card_Background_Placeholder_Color: var(--sapContent_Placeholderloading_Background);
+@_sap_f_Card_Placeholder_Gradient: linear-gradient(to right, var(--sapContent_Placeholderloading_Background) 0%, var(--sapContent_Placeholderloading_Background) 35%, darken(@sapUiContentPlaceholderloadingBackground, 5) 50%, var(--sapContent_Placeholderloading_Background) 65%, var(--sapContent_Placeholderloading_Background) 100%);
 
 .sapFCard {
 
@@ -15,10 +16,10 @@
 			height: 3rem;
 			width: 3rem;
 			margin-right: 0.75rem;
-			//hide the fallback icon
+			/* hide the fallback icon */
 		}
 
-		.sapFCardHeaderImage .sapFCardHeaderItemBinded::after {
+		.sapFCardHeaderMainPart .sapFCardHeaderImage .sapFCardHeaderItemBinded::after {
 			max-height: 2rem;
 			max-width: 2rem;
 			margin-top: 0.5rem;
@@ -41,25 +42,25 @@
 			margin-top: 0.3rem;
 		}
 
-		.sapFCardHeaderTextSecondLine .sapFCardHeaderItemBinded::after,
-		.sapFCardSubtitle.sapFCardHeaderItemBinded::after,
-		.sapFCardHeaderDetailsWrapper .sapFCardHeaderItemBinded::after,
-		.sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded::after,
-		.sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded.sapMText::after {
+		.sapFCardHeaderMainPart .sapFCardHeaderTextSecondLine .sapFCardHeaderItemBinded::after,
+		.sapFCardHeaderMainPart .sapFCardSubtitle.sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardHeaderDetailsWrapper .sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded.sapMText::after {
 			max-height: 0.6rem;
 		}
 
-		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded::after {
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded::after {
 			margin-top: 0.5rem;
 			width: 80%;
 		}
 
 		.sapFCardHeaderItemBinded {
-			visibility: hidden; // hide the loaded elements (texts, icons, etc.) behind the loading indicators
+			visibility: hidden; /* hide the loaded elements (texts, icons, etc.) behind the loading indicators */
 		}
 
 		.sapFCardHeaderItemBinded::after {
-			visibility: visible; // ... but show the loading indicator
+			visibility: visible; /* ... but show the loading indicator */
 		}
 
 		.sapFCardHeaderText .sapFCardHeaderTextFirstLine {
@@ -75,9 +76,9 @@
 			}
 		}
 
-		.sapFCardHeaderItemBinded::after {
+		&:not(.sapFCardLoadingDelayed) .sapFCardHeaderItemBinded::after {
 			.sapFCardLoadingShimmerMixin();
-			content: "";
+			content: '';
 			position: absolute;
 			width: 100%;
 			height: 100%;
@@ -89,8 +90,10 @@
 
 	&.sapUiIntCardTileFlat,
 	&.sapUiIntCardTileFlatWide {
+
 		.sapFCardHeader.sapFCardHeaderLoading,
 		&.sapFCardPreview .sapFCardHeader {
+
 			.sapFAvatar.sapFCardHeaderItemBinded::after,
 			.sapFAvatar.sapFCardHeaderItemBinded::after {
 				margin-top: 0;
@@ -108,22 +111,22 @@
 		}
 	}
 
-	// no sapFCardHeaderItemBinded class present for the filter?
+	/* no sapFCardHeaderItemBinded class present for the filter? */
 	.sapFCardFilterLoading::after {
 		height: 2rem;
 		margin-top: 0.25rem;
 	}
 
 	.sapFCardFilterLoading .sapMSlt {
-		visibility: hidden; // hide the loaded Select behind the loading indicator
+		visibility: hidden; /* hide the loaded Select behind the loading indicator */
 	}
 
 	&.sapFCardPreview .sapFCardFilter,
-	.sapFCardFilterLoading {
+	&:not(.sapFCardLoadingDelayed) .sapFCardFilterLoading {
 		position: relative;
 		&::after {
 			.sapFCardLoadingShimmerMixin();
-			content: "";
+			content: '';
 			position: absolute;
 			top: 2px;
 			bottom: 2px;
@@ -134,20 +137,23 @@
 
 	&.sapFCardPreview .sapFCardFooter,
 	.sapFCardFooterLoading {
+
 		.sapUiIntActionsStrip {
 			position: relative;
+
 			&::after {
-				content: "";
+				content: '';
 				position: absolute;
 				width: 100%;
 				height: 100%;
-				background-color: @sapUiTileBackground;
+				background-color: var(--sapTile_Background);
 			}
 		}
 	}
 
 	.sapFCardNumericHeader.sapFCardHeaderLoading,
 	&.sapFCardPreview .sapFCardNumericHeader {
+
 		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded {
 			min-width: 5rem;
 		}
@@ -186,7 +192,7 @@
 			bottom: 1px;
 			right: 1px;
 			top: 1px;
-			border: @_sap_f_Card_FocusBorderWidth dotted @sapUiContentFocusColor;
+			border: @_sap_f_Card_FocusBorderWidth dotted var(--sapContent_FocusColor);
 			pointer-events: none;
 		}
 
@@ -199,7 +205,7 @@
 			height: 100%;
 
 			.sapFCardSVG {
-				fill: @sapUiTileBackground;
+				fill: var(--sapTile_Background);
 			}
 		}
 
@@ -216,7 +222,7 @@
 		}
 	}
 
-	.sapFCardLoadingShimmer {
+	&:not(.sapFCardLoadingDelayed) .sapFCardLoadingShimmer {
 		.sapFCardLoadingShimmerMixin();
 	}
 
@@ -266,3 +272,8 @@
 		}
 	}
 }
+
+.sapUiSizeCompact .sapFCard .sapFCardFilterLoading::after {
+	height: 1.75rem;
+	margin-top: 0;
+}

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

@@ -420,3 +420,8 @@ To be used in Comparison pattern scenario. */
 .sapUiComparisonContainer .sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper .sapUiComparisonContent  {
 	margin-right: -1rem;
 }
+
+// Avoid visible gap between content and header when title is snapped
+.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper > .sapFDynamicPageHeaderWrapper {
+	background: @sapUiObjectHeaderBackground;
+}