@openui5/themelib_sap_fiori_3 1.128.0 → 1.129.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.16.1
+Component: SAP Theming Base Content, version: 11.18.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.128.0",
+  "version": "1.129.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.128.0",
-    "@openui5/sap.m": "1.128.0",
-    "@openui5/sap.tnt": "1.128.0",
-    "@openui5/sap.ui.codeeditor": "1.128.0",
-    "@openui5/sap.ui.commons": "1.128.0",
-    "@openui5/sap.ui.core": "1.128.0",
-    "@openui5/sap.ui.dt": "1.128.0",
-    "@openui5/sap.ui.fl": "1.128.0",
-    "@openui5/sap.ui.mdc": "1.128.0",
-    "@openui5/sap.ui.integration": "1.128.0",
-    "@openui5/sap.ui.layout": "1.128.0",
-    "@openui5/sap.ui.rta": "1.128.0",
-    "@openui5/sap.ui.suite": "1.128.0",
-    "@openui5/sap.ui.table": "1.128.0",
-    "@openui5/sap.ui.unified": "1.128.0",
-    "@openui5/sap.ui.ux3": "1.128.0",
-    "@openui5/sap.uxap": "1.128.0"
+    "@openui5/sap.f": "1.129.0",
+    "@openui5/sap.m": "1.129.0",
+    "@openui5/sap.tnt": "1.129.0",
+    "@openui5/sap.ui.codeeditor": "1.129.0",
+    "@openui5/sap.ui.commons": "1.129.0",
+    "@openui5/sap.ui.core": "1.129.0",
+    "@openui5/sap.ui.dt": "1.129.0",
+    "@openui5/sap.ui.fl": "1.129.0",
+    "@openui5/sap.ui.mdc": "1.129.0",
+    "@openui5/sap.ui.integration": "1.129.0",
+    "@openui5/sap.ui.layout": "1.129.0",
+    "@openui5/sap.ui.rta": "1.129.0",
+    "@openui5/sap.ui.suite": "1.129.0",
+    "@openui5/sap.ui.table": "1.129.0",
+    "@openui5/sap.ui.unified": "1.129.0",
+    "@openui5/sap.ui.ux3": "1.129.0",
+    "@openui5/sap.uxap": "1.129.0"
   }
 }

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

@@ -8,8 +8,9 @@
 /* ----------------------------- */
 
 .sapMActionSelectPicker .sapMBtn {
+
 	 .sapMBtnInner {
-		border-top: 1px solid @sapUiListBorderColor;
+		border-top: 1px solid var(--sapList_BorderColor);
 		border-bottom: 0;
 		border-left: 0;
 		border-right: 0;
@@ -28,8 +29,8 @@
 /* override standard buttons inside the action select */
 
 .sapMActionSelectPicker .sapMBtnDefault {
-	background: @sapUiListBackground;
-	border-color: @sapUiListBorderColor;
+	background: var(--sapList_Background);
+	border-color: var(--sapList_BorderColor);
 
 	/* override the default text-shadow */
 	text-shadow: none;
@@ -37,11 +38,11 @@
 
 .sapMActionSelectPicker .sapMBtn,
 .sapMActionSelectPicker .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
-	border-color: @sapUiListBorderColor;
+	border-color: var(--sapList_BorderColor);
 }
 
 html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled) .sapMBtnDefault:not(.sapMBtnActive):hover {
-	background: @sapUiListHoverBackground;
+	background: var(--sapList_Hover_Background);
 }
 
 /* ======================================================================== */
@@ -62,7 +63,7 @@ html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled) .sapMBtn
 	height: 2rem;
 	border-radius: 0;
 	border: 0;
-	border-top: 1px solid @sapUiListBorderColor;
+	border-top: 1px solid var(--sapList_BorderColor);
 
 	.sapMBtnContent {
 		line-height: 2rem;

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

@@ -4,6 +4,6 @@
 /* ================================== */
 
 .sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 	background: transparent;
 }

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

@@ -4,22 +4,22 @@
 /* ============================= */
 
 .sapFAvatarInitialsHolder {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 }
 
 .sapFAvatarIcon {
-	color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_ContrastIconColor);
 }
 
 .sapFAvatarSquare {
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: var(--sapElement_BorderCornerRadius);
 
 	.sapFAvatarImageHolder {
-		border-radius: @sapUiElementBorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 	}
 }
 
-.sapFAvatarXL{
+.sapFAvatarXL {
 	font-size: 3rem;
 }
 

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

@@ -20,25 +20,25 @@
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:first-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child {
 	margin: 0 0.25rem 0 0;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:last-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:last-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child {
 	margin: 0 0 0 0.25rem;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:not(:first-child):not(:last-child),
 .sapMBar .sapMBarLeft.sapMBarContainer > *:not(:first-child):not(:last-child),
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child){
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child) {
 	margin: 0 0.25rem;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:first-child:last-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child:last-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child {
 	margin: 0;
 }
 
@@ -47,7 +47,9 @@
 	line-height: 2.75rem;
 }
 
-.sapMBarLeft, .sapMBarRight, .sapMBarPH {
+.sapMBarLeft,
+.sapMBarRight,
+.sapMBarPH {
 	height: 2.75rem;
 	line-height: 2.75rem;
 }
@@ -55,17 +57,17 @@
 /* in Master page the bar should have different color */
 .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX,
 .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 /* in Master page the bar should have a different color shadow only if we don't have subHeader (e.g. another bar) */
 .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX:only-of-type {
-	box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
+	box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
 }
 
 /* in Master page the bar should have a different color shadow */
 .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
-	box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
+	box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
 }
 
 /* Bar Title Alignment */

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

@@ -18,26 +18,30 @@ html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare div,
 }
 
 .sap-desktop .sapMColorPalette .sapMBtn:focus {
-	&:after {
-		border-color: @sapUiContentFocusColor;
+
+	&::after {
+		border-color: var(--sapContent_FocusColor);
 	}
-	&:active:after {
-		border-color: @sapUiContentContrastFocusColor;
+
+	&:active::after {
+		border-color: var(--sapContent_ContrastFocusColor);
 	}
 }
 
 .sap-desktop .sapContrast,
 .sap-desktop.sapContrast {
+
 	.sapMColorPalette .sapMBtn {
-		&:focus:after {
-			border-color: @sapUiContentFocusColor;
+
+		&:focus::after {
+			border-color: var(--sapContent_FocusColor);
 		}
+
 		&:active,
 		> .sapMBtnActive,
 		&:hover > .sapMBtnActive,
 		&:active > .sapMBtnActive {
-			color: @sapUiListTextColor;
+			color: var(--sapList_TextColor);
 		}
 	}
-}
-
+}

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

@@ -4,23 +4,23 @@
 /* ==================================== */
 
 .sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon {
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 	background: transparent;
 
 	&:hover {
-		background: @sapUiButtonLiteHoverBackground;
+		background: var(--sapButton_Lite_Hover_Background);
 	}
 
 	&:active {
-		background-color: @sapUiButtonLiteActiveBackground;
-		color: @sapUiButtonActiveTextColor;
+		background-color: var(--sapButton_Lite_Active_Background);
+		color: var(--sapButton_Active_TextColor);
 
 		&::before {
-			color: @sapUiButtonActiveTextColor;
+			color: var(--sapButton_Active_TextColor);
 		}
 	}
 }
 
 .sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon::before {
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 }

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

@@ -3,21 +3,21 @@
 /* Fiori 3 theme                 */
 /* ============================= */
 
-// ==========================================================================
-// Variables
-// ==========================================================================
+/* ========================================================================== */
+/* Variables */
+/* ========================================================================== */
 
 @_sap_m_Dialog_VerticalMargin: 3%;
 @_sap_m_Dialog_BarHeight: 2.75rem;
 @_sap_m_Dialog_SubHeaderCompactHeight: 2.25rem;
 
 @_sap_m_Dialog_NoStateHeaderShadow: @sapUiShadowHeader;
-@_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem @sapUiSuccessBorder, @sapUiShadowHeader;
-@_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem @sapUiErrorBorder, @sapUiShadowHeader;
-@_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem @sapUiWarningBorder, @sapUiShadowHeader;
-@_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem @sapUiInformationBorder, @sapUiShadowHeader;
+@_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem var(--sapSuccessBorderColor), @sapUiShadowHeader;
+@_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem var(--sapErrorBorderColor), @sapUiShadowHeader;
+@_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem var(--sapWarningBorderColor), @sapUiShadowHeader;
+@_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem var(--sapInformationBorderColor), @sapUiShadowHeader;
 
-// This parameter is used in sap.m.Select. TODO: remove it when it is removed from there.
+/* This parameter is used in sap.m.Select. TODO: remove it when it is removed from there. */
 @_sap_m_Dialog_HeaderShadowColor: darken(@sapUiGroupContentBackground, 8);
 
 .sapMDialogSubHeader .sapMIBar {
@@ -35,21 +35,23 @@
 }
 
 .sapMDialogTitleGroup {
-	z-index: 3; // to hide the shadow from the header when there is sub-header
+	z-index: 3; /* to hide the shadow from the header when there is sub-header */
 }
 
-// buttons on phone must be to the right side (in LTR mode)
+/* buttons on phone must be to the right side (in LTR mode) */
 html.sap-phone .sapMDialog {
+
 	& > footer .sapMFooter-CTX {
 		justify-content: flex-end;
 	}
 }
 
-// ==========================================================================
-// header, sub-header, footer
-// ==========================================================================
+/* ========================================================================== */
+/* header, sub-header, footer */
+/* ========================================================================== */
 
 .sapMDialog {
+
 	header .sapMBarLeft,
 	header .sapMBarPH {
 		padding-left: 1rem;
@@ -66,10 +68,16 @@ html.sap-phone .sapMDialog {
 	}
 }
 
-.sapMDialogTitleGroup, .sapMDialogSubHeader {
-	.sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
-	.sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
+.sapMDialogTitleGroup,
+.sapMDialogSubHeader {
+
+	.sapUi-Std-PaddingS,
+	.sapUi-Std-PaddingM,
+	.sapUi-Std-PaddingL,
+	.sapUi-Std-PaddingXL {
+
 		&.sapMIBar {
+
 			.sapMBarMiddle .sapMBarPH {
 				padding-left: 0;
 				padding-right: 0;
@@ -92,4 +100,4 @@ html.sap-phone .sapMDialog {
 			}
 		}
 	}
-}
+}

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

@@ -22,7 +22,7 @@
 	background: transparent;
 }
 
-.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
+.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 	&:not(.sapMGTLineModePress):hover {
 		background: @sapUiTileHoverBackground;
 	}
@@ -73,7 +73,7 @@
 
 /************************ LINE MODE FLOATING VIEW *****************/
 
-.sapUiMedia-GenericTileDeviceSet-large.sap-desktop {
+.sapUiMedia-GenericTileDeviceSet-large{
 	.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 		&:focus, &.sapMGTLineModePress {
 			.sapMGTLineStyleHelperInner:before {
@@ -90,7 +90,7 @@
 	}
 }
 .sapUiMedia-GenericTileDeviceSet-large {
-	&.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
+	.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 		&:hover .sapMGTLineStyleHelperInner {
 			background: @sapUiTileHoverBackground;
 		}
@@ -160,8 +160,8 @@
 	text-shadow: @sapUiShadowText;
 }
 
-html.sap-desktop .sapMGTWithoutImageHoverOverlay,
-html.sap-desktop .sapMGTWithImageHoverOverlay {
+.sapMGTWithoutImageHoverOverlay,
+.sapMGTWithImageHoverOverlay {
 	z-index: 1;
 	position: absolute;
 	pointer-events: none;
@@ -201,7 +201,7 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
 	background: fade(@sapUiTileActiveBackground, 20%);
 }
 
-html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
+.sapMGT:hover:not(.sapMGTPressActive) {
 	box-shadow: 0 0 0 1px fade(@sapUiContentShadowColor, 30);
 	transition: background 0.2s;
 
@@ -222,22 +222,22 @@ html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
 
 
 
-html.sap-desktop .sapMGTActionButtonPress.sapMGT:active
+.sapMGTActionButtonPress.sapMGT:active
 {
 	.sapMGTFocusDiv{
 		border: none;
 	}
 }
 
-html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus-visible
+.sapMGTActionButtonPress.sapMGT:focus-visible
 {
 	.sapMGTFocusDiv{
 	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	}
 }
 
-html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
-html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
+.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
+.sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
 	&:after {
 		content: "";
 		.sapMGTOverlayMixin();

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

@@ -3,7 +3,7 @@
 /* Fiori 3 theme                    */
 /* ================================ */
 
-html.sap-desktop .sapMST:active .sapMSTFocusDiv {
+.sapMST:active .sapMSTFocusDiv {
 	border: 1px solid @sapUiTileBackground;
 }
 
@@ -14,8 +14,8 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv {
 }
 
 /* This part is used to achieve dotted white black interlace border*/
-html.sap-desktop .sapMST:focus .sapMSTFocusDiv:after,
-html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
+.sapMST:focus .sapMSTFocusDiv:after,
+.sapMST:active .sapMSTFocusDiv:after {
 	content: "";
 	position: absolute;
 	top: 0;
@@ -28,12 +28,12 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
 }
 
 /* Bulleted indicator of multiple tiles*/
-.sapMSTBulleted > span {
+.sapMSTBulleted .sapMSTIndicator {
 	background-color: @sapUiContentNonInteractiveIconColor;
 	box-shadow: 0 0 0.25rem fade(@sapUiContentShadowColor, 25);
 }
 
-.sapMSTBulleted > span.sapMSTActive {
+.sapMSTBulleted .sapMSTIndicator.sapMSTActive {
 	background-color: @sapUiContentContrastIconColor;
 	box-shadow: 0 0 0.25rem fade(@sapUiContentShadowColor, 25);
 }
@@ -50,7 +50,7 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
 	text-shadow: 0px 1px @sapUiButtonEmphasizedTextShadow;
 }
 
-html.sap-desktop .sapMST .sapMGT:active .sapMGTFocusDiv,
-html.sap-desktop .sapMST .sapMGT:active .sapMGTFocusDiv:after {
+.sapMST .sapMGT:active .sapMGTFocusDiv,
+.sapMST .sapMGT:active .sapMGTFocusDiv:after {
 	border: none;
 }

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

@@ -6,12 +6,15 @@
 @_sap_m_Token_TokenPadding: 0.5rem;
 @_sap_m_Token_TokenCompactPadding: 0.25rem;
 @_sap_m_Token_LeftPadding: 0.3125rem;
-@_sap_m_Token_TokenSize: @sapMFontSmallSize + (2 * @_sap_m_Token_TokenPadding) - @_sap_m_Token_LeftPadding;
-@_sap_m_Token_TokenCompactSize: @sapMFontSmallSize  + @_sap_m_Token_TokenCompactPadding;
+@_sap_m_Token_IconWidth: 1.75rem;
+@_sap_m_Token_CompactIconWidth: 1.5rem;
+@_sap_m_Token_DeleteIconHeight: 2.25rem;
+@_sap_m_Token_DeleteIconCompactHeight: 1.625rem;
 
 .sapMToken {
 	padding-left: 0.3125rem;
 	color: @sapUiBaseText;
+	overflow: visible;
 }
 
 html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
@@ -30,4 +33,27 @@ html.sap-desktop .sapMToken:focus {
 
 html.sap-desktop .sapMToken.sapMTokenSelected:focus {
 	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentContrastFocusColor;
+}
+
+.sapMTokenIcon {
+	box-sizing: border-box;
+	top: ~"calc((@{_sap_m_Token_TokenHeight} / 2) - (@{_sap_m_Token_DeleteIconHeight} / 2) - @{sapUiButtonBorderWidth})";
+	width: @_sap_m_Token_IconWidth;
+	height: @_sap_m_Token_DeleteIconHeight;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.sapUiSizeCompact .sapMTokenIcon {
+	top: ~"calc((@{_sap_m_Token_TokenCompactHeight} / 2) - (@{_sap_m_Token_DeleteIconCompactHeight} / 2) - @{sapUiButtonBorderWidth})";
+	width: @_sap_m_Token_CompactIconWidth;
+	height: @_sap_m_Token_DeleteIconCompactHeight;
+}
+
+.sapMTokenIcon::before {
+	display: inline-block;
+	width: 0.75rem;
+	height: 0.75rem;
+	line-height: 1;
 }

package/src/sap/m/themes/sap_fiori_3_dark/ActionSelect.less

@@ -8,6 +8,7 @@
 /* ----------------------------- */
 
 .sapMActionSelectPicker .sapMBtn {
+
 	 .sapMBtnInner {
 		border-top: 1px solid @sapUiButtonActionSelectBorderColor;
 		border-bottom: 0;
@@ -20,6 +21,7 @@
 		line-height: 2.4375rem;
 	 }
 }
+
 .sapMActionSelectPicker .sapMBtnDisabled {
 	opacity: 1;
 }

package/src/sap/m/themes/sap_fiori_3_dark/ActionSheet.less

@@ -4,6 +4,6 @@
 /* ================================== */
 
 .sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	background: transparent;
 }

package/src/sap/m/themes/sap_fiori_3_dark/Avatar.less

@@ -4,25 +4,26 @@
 /* ============================= */
 
 .sapFAvatarIcon {
-	color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_ContrastIconColor);
 }
 
 .sapFAvatarInitialsHolder {
-	color: @sapUiContentContrastTextColor;
+	color: var(--sapContent_ContrastTextColor);
 }
 
 .sapFAvatarSquare {
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: var(--sapElement_BorderCornerRadius);
 
 	.sapFAvatarImageHolder {
-		border-radius: @sapUiElementBorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 	}
 }
 
 .sapFAvatarColorPlaceholder {
-	background-color: @sapUiContentImagePlaceholderBackground;
+	background-color: var(--sapContent_ImagePlaceholderBackground);
 }
-.sapFAvatarXL{
+
+.sapFAvatarXL {
 	font-size: 3rem;
 }
 

package/src/sap/m/themes/sap_fiori_3_dark/Bar.less

@@ -20,25 +20,25 @@
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:first-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child {
 	margin: 0 0.25rem 0 0;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:last-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:last-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:last-child {
 	margin: 0 0 0 0.25rem;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:not(:first-child):not(:last-child),
 .sapMBar .sapMBarLeft.sapMBarContainer > *:not(:first-child):not(:last-child),
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child){
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:not(:first-child):not(:last-child) {
 	margin: 0 0.25rem;
 }
 
 .sapMBar .sapMBarRight.sapMBarContainer > *:first-child:last-child,
 .sapMBar .sapMBarLeft.sapMBarContainer > *:first-child:last-child,
-.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child{
+.sapMBar .sapMBarMiddle .sapMBarContainer > *:first-child:last-child {
 	margin: 0;
 }
 
@@ -47,7 +47,9 @@
 	line-height: 2.75rem;
 }
 
-.sapMBarLeft, .sapMBarRight, .sapMBarPH {
+.sapMBarLeft,
+.sapMBarRight,
+.sapMBarPH {
 	height: 2.75rem;
 	line-height: 2.75rem;
 }
@@ -55,17 +57,17 @@
 /* in Master page the bar should have different color */
 .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX,
 .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
-	background-color: @sapUiGroupContentBackground;
+	background-color: var(--sapGroup_ContentBackground);
 }
 
 /* in Master page the bar should have a different color shadow only if we don't have subHeader (e.g. another bar) */
 .sapMSplitContainerMaster .sapMIBar .sapMHeader-CTX:only-of-type {
-	box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
+	box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
 }
 
 /* in Master page the bar should have a different color shadow */
 .sapMSplitContainerMaster .sapMIBar.sapMSubHeader-CTX {
-	box-shadow: inset 0 -0.0625rem @sapUiGroupContentBorderColor;
+	box-shadow: inset 0 -0.0625rem var(--sapGroup_ContentBorderColor);
 }
 
 /* Bar Title Alignment */