@openui5/themelib_sap_horizon 1.127.1 → 1.129.0

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

@@ -84,14 +84,14 @@
 	background: transparent;
 }
 
-.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
+.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 	&:not(.sapMGTLineModePress):hover {
 		background: @sapTile_Hover_Background;
 		box-shadow: @sapContent_Shadow2;
 	}
 }
 
-html.sap-desktop .sapMGT.sapMGTLineMode:active{
+.sapMGT.sapMGTLineMode:active{
 	background-color: @sapTile_Active_Background;
 	outline: 0.125rem solid @sapContent_FocusColor !important;
 	outline-offset: -0.125rem;
@@ -153,7 +153,7 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
 
 /************************ LINE MODE FLOATING VIEW *****************/
 
-.sapUiMedia-GenericTileDeviceSet-large.sap-desktop {
+.sapUiMedia-GenericTileDeviceSet-large {
 	.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 		&:focus, &.sapMGTLineModePress {
 			.sapMGTLineStyleHelperInner:before {
@@ -170,7 +170,7 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
 	}
 }
 .sapUiMedia-GenericTileDeviceSet-large {
-	&.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
+	.sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
 		&:hover .sapMGTLineStyleHelperInner {
 			background: @sapUiTileHoverBackground;
 		}
@@ -240,8 +240,8 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
 	text-shadow: @sapUiShadowText;
 }
 
-html.sap-desktop .sapMGTWithoutImageHoverOverlay,
-html.sap-desktop .sapMGTWithImageHoverOverlay {
+.sapMGTWithoutImageHoverOverlay,
+.sapMGTWithImageHoverOverlay {
 	z-index: 1;
 	position: absolute;
 	pointer-events: none;
@@ -281,7 +281,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;
 
@@ -300,14 +300,14 @@ html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
 	}
 }
 
-html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus
+.sapMGTActionButtonPress.sapMGT:focus
 {
 		.sapMGTFocusDiv{
 			box-shadow: none;
 		}
 }
 
-html.sap-desktop .sapMGTActionButtonPress.sapMGT:active
+.sapMGTActionButtonPress.sapMGT:active
 {
 	.sapMGTFocusDiv{
 		border: none;
@@ -315,7 +315,7 @@ html.sap-desktop .sapMGTActionButtonPress.sapMGT:active
 	}
 }
 
-html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus-visible
+.sapMGTActionButtonPress.sapMGT:focus-visible
 {
 	.sapMGTFocusDiv{
 		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
@@ -323,8 +323,8 @@ html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus-visible
 	}
 }
 
-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();
@@ -416,21 +416,21 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
 	}
 }
 
-.sap-desktop .sapMGT.sapMGTLineMode.sapMGTInfoRendered:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
+.sapMGT.sapMGTLineMode.sapMGTInfoRendered:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
 	border: transparent !important;
 }
 
-.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
+.sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
 	background: @sapTile_Hover_Background;
 	border: 1px solid @sapTile_BorderColor !important;
 	box-shadow: @sapContent_Shadow2 !important;
 }
 
-html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
+.sapMGT:hover:not(.sapMGTPressActive) {
 	box-shadow: @sapContent_Shadow2 !important;
 }
 
-html.sap-desktop .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
+.sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
 	border: none !important;
 }
 
@@ -440,12 +440,12 @@ html.sap-desktop .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
 	margin-right: 1px;
 }
 
-html.sap-desktop .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, html.sap-desktop .sapMGT:focus .sapMGTFocusDiv, html.sap-desktop .sapMGT:active .sapMGTFocusDiv, html.sap-desktop .sapMGTLineModePress .sapMGTFocusDiv {
-	border-radius: @sapElement_BorderCornerRadius;
-	box-shadow: inset 0 0 0 0.063rem @sapContent_ContrastFocusColor, 0 0 0 @sapContent_FocusWidth @sapContent_FocusColor;
+.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, .sapMGT:focus .sapMGTFocusDiv, .sapMGT:active .sapMGTFocusDiv, .sapMGTLineModePress .sapMGTFocusDiv {
+	border-radius:  @sapTile_BorderCornerRadius;
+	inset: -1px;
 }
 
-html.sap-desktop .sapMGT:active{
+.sapMGT:active{
 	background-color: @sapTile_Active_Background;
 	border: 0.0625rem solid @sapTile_Interactive_BorderColor;
 	&.sapMGTIconMode{
@@ -461,18 +461,17 @@ html.sap-desktop .sapMGT:active{
 	}
 }
 
-html.sap-desktop .sapMGT:focus .sapMGTFocusDiv{
-	border: 0.125rem solid @sapContent_FocusColor;
+.sapMGT:focus .sapMGTFocusDiv{
 	border-radius:  @sapTile_BorderCornerRadius;
 	box-shadow: none;
 	inset: -1px;
 }
 
-html.sap-desktop .sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
+.sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
 	inset: 0;
 }
 
-html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv:after {
+.sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv:after {
 	border: none;
 	border-radius: @sapElement_BorderCornerRadius;
 }

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

@@ -52,8 +52,4 @@
 			}
 		}
 	}
-}
-
-.sapMNwC:focus {
-	outline: 1px dotted @sapUiContentFocusColor;
 }

package/src/sap/m/themes/sap_horizon/Popover.less

@@ -103,26 +103,6 @@
 	}
 }
 
-.sapMPopoverWithoutSubHeader .sapMPopoverHeader, .sapMPopoverSubHeader {
-	&:after {
-		content: "";
-		position: absolute;
-		height: 1px;
-		bottom: 0px;
-		width: 100%;
-		box-shadow: @sapUiShadowHeader;
-		z-index: 1;
-	}
-
-	.sapMIBar-CTX {
-		z-index: 2;
-	}
-}
-
-.sapMPopoverWithSubHeader .sapMPopoverHeader .sapMIBar-CTX {
-	box-shadow: none;
-}
-
 .sapMPopover {
 	border-radius: @sapUiPopoverBorderCornerRadius;
 
@@ -144,14 +124,5 @@
 }
 
 .sapMPopoverResizeHandle {
-	border: none;
 	color: @sapButton_Lite_TextColor;
-	width: 1rem;
-	font-size: 1rem;
-	line-height: 1rem;
-	content: "\e24f";
-	height: 1rem;
-	top: 0;
-	right: 0.125rem;
-	padding: 0 0.125rem 0rem 0rem;
 }

package/src/sap/m/themes/sap_horizon/RatingIndicator.less

@@ -56,7 +56,6 @@ html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly){
 .sapMRIDisplayOnly .sapMRIUnsel .sapMRIunratedIcon,
 .sapMRIDisabled .sapMRIUnsel .sapMRIunratedIcon {
 	font-size: 75% !important;
-	vertical-align: baseline;
 }
 
 .sapUiSizeCompact {
@@ -67,7 +66,6 @@ html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly){
 	&.sapMRIDisabled .sapMRIUnsel .sapMRIunratedIcon,
 	&.sapMRIDisabled .sapMRIIconSel .sapMRIunratedIcon {
 		font-size: 75% !important;
-		vertical-align: baseline;
 	}
 
 	& .sapMRISel,

package/src/sap/m/themes/sap_horizon/SinglePlanningCalendarGrid.less

@@ -40,6 +40,7 @@
 	.sapMSinglePCColumnWeekend,
 	.sapMSinglePCNonWorkingRow,
 	.sapMSinglePCBlockersRow,
+	.sapMSinglePCNonWorkingPeriod,
 	.sapMSinglePCRowHeaders {
 		background-color: @sapUiListAlternatingBackground;
 	}

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

@@ -3,11 +3,7 @@
 /* Horizon theme                    */
 /* ================================ */
 
-html.sap-desktop .sapMST:focus .sapMSTFocusDiv {
-	border: 1px solid @sapUiTileBackground
-}
-
-html.sap-desktop .sapMST:active{
+.sapMST:active{
 	background-color: @sapTile_Active_Background;
 	.sapMSTFocusDiv{
 		border: 1px solid @sapTile_Interactive_BorderColor;
@@ -23,8 +19,8 @@ html.sap-desktop .sapMST:active{
 }
 
 /* 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;
@@ -37,14 +33,14 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
 }
 
 /* Bulleted indicator of multiple tiles*/
-.sapMSTBulleted > span {
+.sapMSTBulleted .sapMSTIndicator {
 	border: solid 0.0625rem @sapTile_OverlayForegroundColor;
 	opacity: 0.6;
 	box-shadow : 0 0 0.125rem @sapContent_ShadowColor;
 	margin: 0 0.094rem;
 }
 
-.sapMSTBulleted > span.sapMSTActive {
+.sapMSTBulleted  .sapMSTIndicator.sapMSTActive {
 	background: @sapTile_OverlayForegroundColor;
 	box-shadow: 0 0 0.063rem @sapContent_ShadowColor;
 }
@@ -76,20 +72,19 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
 	text-shadow: 0px 1px @sapUiButtonEmphasizedTextShadow;
 }
 
-html.sap-desktop .sapMST:focus .sapMSTFocusDiv {
+.sapMST:focus .sapMSTFocusDiv {
 	border-radius: @sapTile_BorderCornerRadius;
 	box-shadow: none;
-	border: 2px solid @sapContent_FocusColor;
 	inset: 0;
 }
 
-html.sap-desktop .sapMST:focus .sapMSTFocusDiv:after,
-html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
+.sapMST:focus .sapMSTFocusDiv:after,
+.sapMST:active .sapMSTFocusDiv:after {
 	border: none;
 	border-radius: @sapElement_BorderCornerRadius;
 }
 
-html.sap-desktop .sapMST:hover {
+.sapMST:hover {
 	box-shadow: @sapContent_Shadow2 !important;
 
 	.sapMGT:hover {
@@ -99,7 +94,7 @@ html.sap-desktop .sapMST:hover {
 
 }
 
-html.sap-desktop .sapMST:active{
+.sapMST:active{
 	.sapMGT{
 		opacity: 0.8;
 	}

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

@@ -3,17 +3,18 @@
 /* Horizon theme                */
 /* ============================ */
 
-@_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: @_sap_m_Token_LeftPadding;
 	border-radius: 0.375rem;
 	color: @sapTextColor;
 	font-size: @sapFontSize;
+	overflow: visible;
 }
 
 .sapMTokenSelected,
@@ -24,6 +25,13 @@
 	font-family: @sapFontSemiboldDuplexFamily;
 }
 
+.sapMTokenIcon::before {
+	display: inline-block;
+	width: 0.75rem;
+	height: 0.75rem;
+	line-height: 1;
+}
+
 .sapMToken.sapMTokenSelected::before {
 	content: '';
 	position: absolute;
@@ -81,4 +89,21 @@ html.sap-desktop .sapUiSizeCondensed .sapMToken:focus {
 	.sapMTokenText {
 		line-height: 0.875rem;
 	}
+}
+
+.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;
+	right: -@sapUiButtonBorderWidth;
+}
+
+.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;
 }

package/src/sap/m/themes/sap_horizon/Tokenizer.less

@@ -21,8 +21,8 @@
 }
 
 html.sap-desktop .sapMTokenizer:focus {
-	outline: none;
-	box-shadow: 0px 0px 0px 2px @sapContent_FocusColor;
+	outline: 2px solid @sapContent_FocusColor;
+	outline-offset: -0.125rem;
 	border-radius: @sapField_BorderCornerRadius;
 }
 

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

@@ -8,8 +8,9 @@
 /* ----------------------------- */
 
 html.sap-desktop .sapMActionSelectPicker .sapMBtn {
+
 	.sapMBtnInner {
-		border-top: 1px solid @sapUiListBorderColor;
+		border-top: 1px solid var(--sapList_BorderColor);
 		border-bottom: 0;
 		border-left: 0;
 		border-right: 0;
@@ -30,19 +31,19 @@ html.sap-phone .sapMActionSelectPicker .sapMBtn .sapMBtnInner {
 }
 
 html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn {
-	border: 1px solid @sapUiListBorderColor;
+	border: 1px solid var(--sapList_BorderColor);
 	border-bottom: none;
 }
 
 html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn ~ .sapMBtn {
-	border: 1px solid @sapUiListBorderColor;
+	border: 1px solid var(--sapList_BorderColor);
 }
 
 /* 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;
@@ -50,11 +51,11 @@ html.sap-phone .sapMActionSelectPicker .sapUiSimpleFixFlexFlexContent > .sapMBtn
 
 .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);
 }
 
 /* ================================================================================ */
@@ -75,18 +76,18 @@ html.sap-desktop .sapUiSizeCompact.sapMActionSelectPicker .sapMBtnInner {
 	height: 2rem;
 	border-radius: 0;
 	border: 0;
-	border-top: 1px solid @sapUiListBorderColor;
+	border-top: 1px solid var(--sapList_BorderColor);
 
 	.sapMBtnContent {
 		line-height: 2rem;
 	}
 }
 
-.sapMActionSelectPicker.sapMSltPicker-CTX .sapMSelectListItemBaseSelected.sapMActionSelectItemWithoutFocus:after {
+.sapMActionSelectPicker.sapMSltPicker-CTX .sapMSelectListItemBaseSelected.sapMActionSelectItemWithoutFocus::after {
 	border: none;
 }
 
-html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled):focus > .sapMBtnInner:before {
+html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled):focus > .sapMBtnInner::before {
 	border-radius: 0;
 	left: 0.125rem;
 	top: 0.125rem;

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

@@ -4,26 +4,26 @@
 /* ================================== */
 
 .sapMActionSheetPopover.sapMPopover {
-	box-shadow: @sapUiContentShadow2;
+	box-shadow: var(--sapContent_Shadow2);
 }
 
 .sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
-	color: @sapUiPageHeaderTextColor;
-	font-size: @sapMFontHeader5Size;
+	color: var(--sapPageHeader_TextColor);
+	font-size: var(--sapFontHeader5Size);
 	font-weight: bold;
 }
 
 .sapMDialog.sapMActionSheetDialog {
-	background-color: @sapUiPageHeaderBackground;
-	border-top-left-radius: @sapUiElementBorderCornerRadius;
-	border-top-right-radius: @sapUiElementBorderCornerRadius;
-	box-shadow: @sapUiContentShadow3;
+	background-color: var(--sapPageHeader_Background);
+	border-top-left-radius: var(--sapElement_BorderCornerRadius);
+	border-top-right-radius: var(--sapElement_BorderCornerRadius);
+	box-shadow: var(--sapContent_Shadow3);
 
 	&.sapMDialogPhone .sapMIBar.sapMHeader-CTX {
-		box-shadow: @sapUiContentHeaderShadow;
-		background-color: @sapUiPageHeaderBackground;
-		border-top-left-radius: @sapUiElementBorderCornerRadius;
-		border-top-right-radius: @sapUiElementBorderCornerRadius;
+		box-shadow: var(--sapContent_HeaderShadow);
+		background-color: var(--sapPageHeader_Background);
+		border-top-left-radius: var(--sapElement_BorderCornerRadius);
+		border-top-right-radius: var(--sapElement_BorderCornerRadius);
 	}
 
 	&.sapUiPopupWithPadding:not(.sapUiNoContentPadding) .sapMDialogScrollCont {

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

@@ -10,10 +10,10 @@
 @_sap_m_Avatar_Font_Size_XS: 1rem;
 
 .sapFAvatarSquare {
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: var(--sapElement_BorderCornerRadius);
 
 	.sapFAvatarImageHolder {
-		border-radius: @sapUiElementBorderCornerRadius;
+		border-radius: var(--sapElement_BorderCornerRadius);
 	}
 }
 
@@ -22,23 +22,24 @@
 }
 
 .sapFAvatarFocusable.sapMAvatarPressed {
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+	box-shadow: 0 0 0 0.125rem var(--sapContent_FocusColor);
 
 	&:hover {
-		box-shadow: 0px 0px 0px 0.125rem @sapUiButtonSelectedHoverBorderColor;
+		box-shadow: 0 0 0 0.125rem var(--sapButton_Selected_Hover_BorderColor);
 	}
 }
 
 .sapFAvatarFocusable:focus {
-	outline-offset: .125rem;
+	outline-offset: 0.125rem;
+
 	&.sapFAvatarSquare {
-		outline-offset: .125rem;
+		outline-offset: 0.125rem;
 	}
 }
 
 .sapFAvatarColorTileIcon {
-	background-color: @sapUiTileBackground;
-	color: @sapUiTileIconColor;
+	background-color: var(--sapTile_Background);
+	color: var(--sapTile_IconColor);
 
 	.sapFAvatarInitialsHolder {
 		color: currentColor;
@@ -46,8 +47,9 @@
 }
 
 .sapFAvatarColorPlaceholder {
-	background-color: @sapUiContentImagePlaceholderBackground;
-	color: @sapUiContentImagePlaceholderForegroundColor;;
+	background-color: var(--sapContent_ImagePlaceholderBackground);
+	color: var(--sapContent_ImagePlaceholderForegroundColor);
+
 	.sapFAvatarInitialsHolder {
 		color: currentColor;
 	}

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

@@ -7,7 +7,7 @@
 	text-shadow: none;
 }
 
-.sapMBarLeft{
+.sapMBarLeft {
 	padding-left: 1rem;
 	padding-right: 0.25rem;
 }
@@ -24,25 +24,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.5rem;
 }
 
 .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;
 }
 
@@ -51,7 +51,9 @@
 	line-height: 2.75rem;
 }
 
-.sapMBarLeft, .sapMBarRight, .sapMBarPH {
+.sapMBarLeft,
+.sapMBarRight,
+.sapMBarPH {
 	height: 2.75rem;
 	line-height: 2.75rem;
 }
@@ -59,17 +61,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 */
@@ -82,5 +84,5 @@ html[data-sap-ui-browser^="ff"].sap-desktop .sapMBarTitleAlignAuto .sapMBarPH {
 }
 
 .sapMIBar-CTX.sapMFooter-CTX {
-	border-top: 0.0625rem solid @sapUiPageFooterBorderColor;
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
 }