@openui5/themelib_sap_fiori_3 1.131.0 → 1.132.0

package/THIRDPARTY.txt

@@ -468,7 +468,7 @@ License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: lib/jsdoc/ui5/plugin.js
 
-Component: SAP Theming Base Content, version: 11.22.0
+Component: SAP Theming Base Content, version: 11.24.0
 Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/themelib_sap_fiori_3",
-  "version": "1.131.0",
+  "version": "1.132.0",
   "description": "OpenUI5 Theme Library sap_fiori_3",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,22 +14,22 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "devDependencies": {
-    "@openui5/sap.f": "1.131.0",
-    "@openui5/sap.m": "1.131.0",
-    "@openui5/sap.tnt": "1.131.0",
-    "@openui5/sap.ui.codeeditor": "1.131.0",
-    "@openui5/sap.ui.commons": "1.131.0",
-    "@openui5/sap.ui.core": "1.131.0",
-    "@openui5/sap.ui.dt": "1.131.0",
-    "@openui5/sap.ui.fl": "1.131.0",
-    "@openui5/sap.ui.mdc": "1.131.0",
-    "@openui5/sap.ui.integration": "1.131.0",
-    "@openui5/sap.ui.layout": "1.131.0",
-    "@openui5/sap.ui.rta": "1.131.0",
-    "@openui5/sap.ui.suite": "1.131.0",
-    "@openui5/sap.ui.table": "1.131.0",
-    "@openui5/sap.ui.unified": "1.131.0",
-    "@openui5/sap.ui.ux3": "1.131.0",
-    "@openui5/sap.uxap": "1.131.0"
+    "@openui5/sap.f": "1.132.0",
+    "@openui5/sap.m": "1.132.0",
+    "@openui5/sap.tnt": "1.132.0",
+    "@openui5/sap.ui.codeeditor": "1.132.0",
+    "@openui5/sap.ui.commons": "1.132.0",
+    "@openui5/sap.ui.core": "1.132.0",
+    "@openui5/sap.ui.dt": "1.132.0",
+    "@openui5/sap.ui.fl": "1.132.0",
+    "@openui5/sap.ui.mdc": "1.132.0",
+    "@openui5/sap.ui.integration": "1.132.0",
+    "@openui5/sap.ui.layout": "1.132.0",
+    "@openui5/sap.ui.rta": "1.132.0",
+    "@openui5/sap.ui.suite": "1.132.0",
+    "@openui5/sap.ui.table": "1.132.0",
+    "@openui5/sap.ui.unified": "1.132.0",
+    "@openui5/sap.ui.ux3": "1.132.0",
+    "@openui5/sap.uxap": "1.132.0"
   }
 }

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

@@ -3,4 +3,4 @@
 /* Fiori 3 theme                 */
 /* ============================= */
 
-@_sap_f_Card_HeaderFocusBorderBottomOffset: 2px;
+@_sap_f_Card_FocusBorderBottomOffset: 2px;

package/src/sap/f/themes/sap_fiori_3/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

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

@@ -3,4 +3,4 @@
 /* Quartz Dark theme           */
 /* =========================== */
 
-@_sap_f_Card_HeaderFocusBorderBottomOffset: 2px;
+@_sap_f_Card_FocusBorderBottomOffset: 2px;

package/src/sap/f/themes/sap_fiori_3_dark/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

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

@@ -4,30 +4,6 @@
 /* ================================= */
 
 @_sap_f_Card_BoxShadow: none;
-@_sap_f_Card_HeaderFocusBorderBottomOffset: 2px;
+@_sap_f_Card_FocusBorderBottomOffset: 2px;
 @_sap_f_Card_Badge_Background: @sapUiHighlight;
 @_sap_f_Card_Badge_Border: 0.0625rem solid @sapUiContentForegroundBorderColor;
-
-.sapFCard .sapFCardHeader.sapFCardSectionClickable {
-	&:hover {
-		.sapFCardNumericIndicatorsMain {
-			.sapMNCValue,
-			.sapMNCIndicator,
-			.sapMNCScale,
-			.sapMNCIndIcon {
-				color: @sapUiContentContrastTextColor;
-			}
-		}
-	}
-
-	&:active {
-		.sapFCardNumericIndicatorsMain {
-			.sapMNCValue,
-			.sapMNCIndicator,
-			.sapMNCScale,
-			.sapMNCIndIcon {
-				color: @sapUiContentContrastTextColor;
-			}
-		}
-	}
-}

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

@@ -0,0 +1,28 @@
+/* ======================================== */
+/* CSS for control sap.f.cards/BaseHeader	*/
+/* Quartz High Contrast Black theme			*/
+/* ======================================== */
+
+.sapFCardHeader.sapFCardSectionClickable {
+	&:hover {
+		.sapFCardNumericIndicatorsMain {
+			.sapMNCValue,
+			.sapMNCIndicator,
+			.sapMNCScale,
+			.sapMNCIndIcon {
+				color: @sapUiContentContrastTextColor;
+			}
+		}
+	}
+
+	&:active {
+		.sapFCardNumericIndicatorsMain {
+			.sapMNCValue,
+			.sapMNCIndicator,
+			.sapMNCScale,
+			.sapMNCIndIcon {
+				color: @sapUiContentContrastTextColor;
+			}
+		}
+	}
+}

package/src/sap/f/themes/sap_fiori_3_hcb/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -13,6 +13,7 @@
 @import "DynamicPageTitle.less";
 @import "FlexibleColumnLayout.less";
 @import "Card.less";
+@import "CardHeaders.less";
 @import "ShellBar.less";
 @import "CardLoading.less";
 @import "GridContainer.less";

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

@@ -4,30 +4,6 @@
 /* ================================= */
 
 @_sap_f_Card_BoxShadow: none;
-@_sap_f_Card_HeaderFocusBorderBottomOffset: 2px;
+@_sap_f_Card_FocusBorderBottomOffset: 2px;
 @_sap_f_Card_Badge_Background: @sapUiHighlight;
-@_sap_f_Card_Badge_Border: 0.0625rem solid @sapUiContentForegroundBorderColor;
-
-.sapFCard .sapFCardHeader.sapFCardSectionClickable {
-	&:hover {
-		.sapFCardNumericIndicatorsMain {
-			.sapMNCValue,
-			.sapMNCIndicator,
-			.sapMNCScale,
-			.sapMNCIndIcon {
-				color: @sapUiContentContrastTextColor;
-			}
-		}
-	}
-
-	&:active {
-		.sapFCardNumericIndicatorsMain {
-			.sapMNCValue,
-			.sapMNCIndicator,
-			.sapMNCScale,
-			.sapMNCIndIcon {
-				color: @sapUiContentContrastTextColor;
-			}
-		}
-	}
-}
+@_sap_f_Card_Badge_Border: 0.0625rem solid @sapUiContentForegroundBorderColor;

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

@@ -0,0 +1,28 @@
+/* ======================================== */
+/* CSS for control sap.f.cards/BaseHeader	*/
+/* Quartz High Contrast White theme			*/
+/* ======================================== */
+
+.sapFCard .sapFCardHeader.sapFCardSectionClickable {
+	&:hover {
+		.sapFCardNumericIndicatorsMain {
+			.sapMNCValue,
+			.sapMNCIndicator,
+			.sapMNCScale,
+			.sapMNCIndIcon {
+				color: @sapUiContentContrastTextColor;
+			}
+		}
+	}
+
+	&:active {
+		.sapFCardNumericIndicatorsMain {
+			.sapMNCValue,
+			.sapMNCIndicator,
+			.sapMNCScale,
+			.sapMNCIndIcon {
+				color: @sapUiContentContrastTextColor;
+			}
+		}
+	}
+}

package/src/sap/f/themes/sap_fiori_3_hcw/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -13,6 +13,7 @@
 @import "DynamicPageTitle.less";
 @import "FlexibleColumnLayout.less";
 @import "Card.less";
+@import "CardHeaders.less";
 @import "ShellBar.less";
 @import "CardLoading.less";
 @import "GridContainer.less";

package/src/sap/m/themes/sap_fiori_3/Button.less

@@ -164,7 +164,19 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnNeutral.sapMFocusable {
 }
 
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable {
-	outline: 0.0625rem dotted var(--sapContent_ContrastFocusColor);
+	outline: .0625rem solid var(--sapContent_FocusColor);
+}
+
+html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable :not(.sapMBadgeIndicator) ::after {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	left: 0.0625rem;
+	top: 0.0625rem;
+	right: 0.0625rem;
+	bottom: 0.0625rem;
+	border: .0625rem dotted var(--sapContent_ContrastFocusColor);
+	pointer-events: none
 }
 
 .sapMTB-Transparent-CTX .sapMBtnInner:not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized):not(.sapMBtnAccept):not(.sapMBtnAttention):not(.sapMBtnReject):not(.sapMBtnActive):not(.sapMBtnGhost) {

package/src/sap/m/themes/sap_fiori_3/MessagePage.less

@@ -3,9 +3,11 @@
 /* Fiori 3 theme                      */
 /* ================================== */
 
-/* MessagePage inner controls styles*/
+/* MessagePage inner controls styles */
 .sapMMessagePage {
+
 	.sapMMessagePageInner {
+
 		.sapMMessagePageIcon.sapUiIcon::before {
 			color: fade(@sapUiContentNonInteractiveIconColor,50);
 		}
@@ -24,7 +26,7 @@
 		}
 
 		.sapMLnk {
-			font-size: @sapMFontHeader5Size;
+			font-size: var(--sapFontHeader5Size);
 		}
 	}
 

package/src/sap/m/themes/sap_fiori_3/MessageStrip.less

@@ -4,16 +4,16 @@
 /* =================================== */
 
 .sapMMsgStrip {
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: var(--sapElement_BorderCornerRadius);
 }
 
 .sapMMsgStripInformation {
-	background-color: @sapInformationBackground;
-	border-color: @sapInformationBorderColor;
-	color: @sapUiBaseText;
+	background-color: var(--sapInformationBackground);
+	border-color: var(--sapInformationBorderColor);
+	color: var(--sapTextColor);
 
 	& .sapMMsgStripIcon {
-		color: @sapInformativeElementColor;
+		color: var(--sapInformativeElementColor);
 	}
 }
 

package/src/sap/m/themes/sap_fiori_3/MessageView.less

@@ -2,19 +2,24 @@
 /* CSS for control sap.m/MessageView  */
 /* Fiori 3 theme                      */
 /* ================================== */
+
 @_sap_m_MessageView_DescIcon_Width: 1rem;
 
 .sapMMsgView {
+
 	.sapMMsgViewDetailsPage section {
 		padding: 1rem;
 	}
+
 	.sapMMsgViewItem {
 		padding-left: 0;
+
 		&.sapMSLIWithDescription {
 			padding-top: 0.5rem;
 			padding-bottom: 0.5rem;
 		}
 	}
+
 	.sapMLIBActive .sapMLIBImgNav {
 		background: none;
 	}
@@ -25,19 +30,19 @@
 	}
 
 	.sapMSLITitle {
-		color: @sapUiGroupTitleTextColor;
+		color: var(--sapGroup_TitleTextColor);
 	}
 
 	.sapMSLIDescription {
-		color: @sapUiContentLabelColor;
+		color: var(--sapContent_LabelColor);
 	}
 
 	.sapMMsgViewDescriptionText {
 		padding-bottom:0;
 		margin: 0 0 1rem 2.5rem;
 		line-height: 1.4;
-		font-family: @sapUiFontFamily;
-		color: @sapUiBaseText;
+		font-family: var(--sapFontFamily);
+		color: var(--sapTextColor);
 	}
 
 	.sapMMsgViewTitleText {
@@ -46,10 +51,10 @@
 
 	.sapMMsgViewDescriptionLink {
 		margin: 0 0 1rem 2.5rem;
-		font-family: @sapUiFontFamily;
+		font-family: var(--sapFontFamily);
 		font-size: @sapMFontMediumSize;
 		font-weight: normal;
-		color: @sapUiLink;
+		color: var(--sapLinkColor);
 	}
 
 	.sapMSLIWithDescription > .sapMLIBContent > .sapMSLIDiv > .sapMSLIDescription {
@@ -63,7 +68,7 @@
 }
 
 .sapMMsgView .sapMIBar.sapMHeader-CTX {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 	padding-left: 1rem;
 }
 
@@ -83,6 +88,7 @@
 
 /* Compact size */
 .sapUiSizeCompact .sapMMsgView {
+
 	.sapMMsgViewDescIcon {
 		line-height: 1rem;
 	}

package/src/sap/m/themes/sap_fiori_3/NewsContent.less

@@ -12,13 +12,17 @@
 }
 
 .sapMTileCnt.News {
+
 	.sapMNwC {
 		text-shadow: 0 0 0.125rem contrast(@_sap_m_NewsContent_SubHeaderTextColor, @sapUiContentShadowColor, @sapUiContentContrastShadowColor, @sapUiContentContrastTextThreshold);
+
 		.sapMNwCSbh {
 			color: @_sap_m_NewsContent_SubHeaderTextColor;
 			line-height: normal;
 		}
-		.sapMNwCCTxt .sapMText, .sapMNwCCTxt .sapMFT {
+
+		.sapMNwCCTxt .sapMText,
+		.sapMNwCCTxt .sapMFT {
 			color: @_sap_m_NewsContent_HeaderTextColor;
 			line-height: normal;
 		}

package/src/sap/m/themes/sap_fiori_3/ObjectHeader.less

@@ -7,7 +7,7 @@
 .sapMOHC.sapMOHBgTranslucent,
 .sapMOH.sapMOHBgSolid,
 .sapMOHC.sapMOHBgSolid {
-	background-color: @sapUiObjectHeaderBackground;
+	background-color: var(--sapObjectHeader_Background);
 }
 
 .sapMOHC.sapMOHBgTranslucent,
@@ -15,6 +15,7 @@
 	border: none;
 	box-shadow: none;
 }
+
 .sapMOH.sapMOHBgTransparent,
 .sapMOHC.sapMOHBgTransparent {
 	background: transparent;
@@ -40,13 +41,13 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
 .sapMOHTitle.sapMOHTitleActive:focus > h6 span,
 .sapMOHIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus,
 .sapMOHTitleArrow .sapUiIcon:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	outline-offset: -1px;
 }
 
-/*** styles for responsive object header ***/
+/* styles for responsive object header */
 .sapMOHRTitle h1 {
-	font-size: @sapMFontHeader3Size;
+	font-size: var(--sapFontHeader3Size);
 }
 
 .sapMOHR:not(.sapMOHRNoBorder) {
@@ -55,7 +56,7 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
 
 .sapMOHR.sapMOHRBgSolid,
 .sapMOHR.sapMOHRBgTranslucent {
-	background: @sapUiObjectHeaderBackground;
+	background: var(--sapObjectHeader_Background);
 }
 
 .sapMOHR.sapMOHRBgTransparent {
@@ -63,17 +64,18 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
 }
 
 .sapMOHRTitleArrow .sapUiIcon:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	outline-offset: -1px;
 }
 
 .sapMOHRIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus {
-	&:before {
-		outline: 1px dotted @sapUiContentFocusColor;
+
+	&::before {
+		outline: 1px dotted var(--sapContent_FocusColor);
 	}
 }
 
 .sapMOHRTitleActive .sapMOHRTitleText:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	outline-offset: -1px;
 }

package/src/sap/m/themes/sap_fiori_3/Page.less

@@ -13,32 +13,35 @@
 		position: relative;
 		z-index: 2;
 	}
-	&:after {
-		content: "";
+
+	&::after {
+		content: '';
 		position: absolute;
 		height: 1px;
 		bottom: 0;
 		width: 100%;
-		box-shadow: inset 0 -0.0625rem @sapUiPageHeaderBorderColor, 0 0 0.25rem 0 fade(@sapUiContentShadowColor, 15);
+		box-shadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor), 0 0 0.25rem 0 fade(@sapUiContentShadowColor, 15);
 		z-index: 1;
 	}
 }
 
 .sapMPageWithHeader.sapMPageWithSubHeader {
+
 	.sapMPageHeader {
 		box-shadow: none;
-		&:after {
+
+		&::after {
 			box-shadow: none;
 		}
 	}
 }
 
 .sapMPageBgStandard {
-	background-color: @sapUiBaseBG;
+	background-color: var(--sapBackgroundColor);
 }
 
 .sapMPageBgSolid {
-	background-color: @sapUiBaseBG;
+	background-color: var(--sapBackgroundColor);
 }
 
 .sapMPageBgTransperant {
@@ -46,7 +49,7 @@
 }
 
 .sapMPageBgList {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 /* The following overrides for sap_belize/sap_belize_plus are only intended for apps inside FLP (Ushell) */
@@ -54,7 +57,7 @@
 
 	/* In sap_belize_plus backgroundDesign=Standard maps to Solid */
 	.sapMPageBgStandard {
-		background-color: @sapUiBaseBG;
+		background-color: var(--sapBackgroundColor);
 	}
 
 	/* For the pages in the master part of sap.m.SplitApp backgroundDesign=Standard maps to Transparent */
@@ -74,26 +77,32 @@
 	opacity: 1;
 
 	.sapMIBar-CTX.sapMFooter-CTX {
-		box-shadow: @sapUiContentShadow1;
+		box-shadow: var(--sapContent_Shadow1);
 		border: none;
 	}
 }
 
 html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
+
 	@keyframes bounceShow {
+
 		0% {
 			transform: translateY(100%);
 			opacity: 0;
 		}
+
 		100% {
 			opacity: 1;
 		}
 	}
+
 	@keyframes bounceHide {
+
 		0% {
 			transform: translateY(-5%);
 			opacity: 1;
 		}
+
 		100% {
 			transform: translateY(100%);
 			opacity: 0;
@@ -102,6 +111,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage.sapF2CollapsedHeader > .sapMPageHeader {
+
 	& + section,
 	& + .sapUiHiddenPlaceholder + section {
 		top: 0;
@@ -113,6 +123,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage.sapF2CollapsedHeader > .sapMPageHeader {
+
 	& + section,
 	& + .sapUiHiddenPlaceholder + section {
 		top: 0;
@@ -129,6 +140,7 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapMPage {
+
 	> .sapMPageHeader + section,
 	> .sapMPageSubHeader + section,
 	> .sapMPageHeader + .sapUiHiddenPlaceholder + section {
@@ -145,41 +157,55 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 }
 
 .sapUiSizeCompact .sapF2CollapsedHeader.sapMPageWithHeader {
+
 	> section {
 		top: 0;
 	}
+
 	&.sapMPageWithSubHeader > section {
 		top: 2rem;
 	}
 }
 
 .sapMPageWithHeader {
+
 	&.sapFShellBar-CTX > section {
 		top: 2.75rem;
 	}
+
 	&.sapMPageWithSubHeader.sapFShellBar-CTX > section {
 		top: 5.5rem;
 	}
 }
 
-.sapMPageHeader, .sapMPageSubHeader, .sapMPageFooter {
-	.sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
-	.sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
+.sapMPageHeader,
+.sapMPageSubHeader,
+.sapMPageFooter {
+
+	.sapUi-Std-PaddingS,
+	.sapUi-Std-PaddingM,
+	.sapUi-Std-PaddingL,
+	.sapUi-Std-PaddingXL {
+
 		&.sapMBar {
 			box-sizing: border-box;
+
 			.sapMBarLeft {
 				padding-left: inherit;
 			}
+
 			.sapMBarRight {
 				padding-right: inherit;
 			}
 		}
 	}
 }
+
 .sapUi-Std-PaddingS,
 .sapUi-Std-PaddingM,
 .sapUi-Std-PaddingL,
 .sapUi-Std-PaddingXL {
+
 	&.sapMPageFloatingFooter.sapMPageFooter {
 		margin: 0.5rem 0;
 		width: auto;
@@ -203,9 +229,11 @@ html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
 	}
 
 	.sapMPageWithHeader {
+
 		&.sapFShellBar-CTX > section {
 			top: 2.75rem;
 		}
+
 		&.sapMPageWithSubHeader.sapFShellBar-CTX > section {
 			top: 5.25rem;
 		}

package/src/sap/m/themes/sap_fiori_3/Panel.less

@@ -8,7 +8,7 @@
 }
 
 .sapMPanelBGSolid {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 .sapMPanelBGTranslucent {
@@ -27,11 +27,11 @@
 .sapMPanelWrappingDiv,
 /* do not want border if expanded and if only header text */
 .sapMPanelWrappingDivTb {
-	border-bottom: 0.0625rem solid @sapUiGroupTitleBorderColor;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 }
 
 .sapMPanelContent:not(.sapMPanelBGTransparent) {
-	border-bottom: 0.0625rem solid @sapUiGroupTitleBorderColor;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 }
 
 .sapMPanel .sapMPanelHdr {