@openui5/themelib_sap_horizon 1.129.0 → 1.130.0

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

@@ -3,42 +3,42 @@
 /* Horizon theme                     */
 /* ================================= */
 
-// ==========================================================================
-// Variables overriding
-// ==========================================================================
+/* ========================================================================== */
+/* Variables overriding */
+/* ========================================================================== */
 
-@_sap_m_IconTabBar_TextColor: @sapUiBaseText;
+@_sap_m_IconTabBar_TextColor: var(--sapTextColor);
 @_sap_m_IconTabBar_TextShadow: none;
-@_sap_m_IconTabBar_Separator_Font_Size: @sapMFontLargeSize;
+@_sap_m_IconTabBar_Separator_Font_Size: var(--sapFontLargeSize);
 @_sap_m_IconTabBar_More_Button_Focus_Offset: -0.3125rem;
 @_sap_m_IconTabBar_Arrow_SubItem_Left_Padding: 0.5rem;
 
 
-// ==================== Cozy size ====================
+/* ==================== Cozy size ==================== */
 
-// Content arrow
+/* Content arrow */
 @_sap_m_IconTabBar_ContentArrowBorderWidth: 0.1875rem;
 @_sap_m_IconTabBar_ContentArrowHeight: 0.875rem;
 
-// Inline mode
+/* Inline mode */
 @_sap_m_IconTabBar_InLineFilterMargin: 0.875rem 0 0 0;
 @_sap_m_IconTabBar_InLineTextOnlyVerticalHeight: 2.75rem;
 @_sap_m_IconTabBar_InLineTextOnlyContentArrowHeight: @_sap_m_IconTabBar_ContentArrowHeight;
 
-// TextOnly mode
+/* TextOnly mode */
 @_sap_m_IconTabBar_TextOnlyTabPadding: 0 0 0.125rem 0;
 @_sap_m_IconTabBar_TextOnlyVerticalHeight: 3rem;
 
-// NoText mode
+/* NoText mode */
 @_sap_m_IconTabBar_NoTextFilterWidth: 3.125rem;
 @_sap_m_IconTabBar_NoTextVerticalHeight: 3.75rem;
 
-// All tabs
+/* All tabs */
 @_sap_m_IconTabBar_AllTabHeight: 2.875rem;
 @_sap_m_IconTabBar_AllTabLineHeight: 2.875rem;
 @_sap_m_IconTabBar_AllTabMarginBottom: 0.375rem;
 
-// Horizontal tabs
+/* Horizontal tabs */
 @_sap_m_IconTabBar_HorizontalFilterHeight: 3.75rem;
 @_sap_m_IconTabBar_HorizontalTabHeight: 2.75rem;
 @_sap_m_IconTabBar_HorizontalWrapperHeight: 2.75rem;
@@ -47,18 +47,18 @@
 @_sap_m_IconTabBar_HorizontalTextPaddingTop: 0.375rem;
 @_sap_m_IconTabBar_HorizontalTextPaddingLeft: 0.125rem;
 
-// Vertical tabs
+/* Vertical tabs */
 @_sap_m_IconTabBar_VerticalHeight: 4.625rem;
 @_sap_m_IconTabBar_VerticalContentArrowHeight: 0.625rem;
 
-// Filter icon
+/* Filter icon */
 @_sap_m_IconTabBar_FilterIconHeight: 2.75rem;
 @_sap_m_IconTabBar_FilterIconWidth: 2.75rem;
 
-// Filter text
+/* Filter text */
 @_sap_m_IconTabBar_FilterTextLineHeight: 0.875rem;
 
-// Separator
+/* Separator */
 @_sap_m_IconTabBar_SeparatorHeight: 2rem;
 @_sap_m_IconTabBar_SeparatorMargin: 0.75rem 0.25rem 0;
 @_sap_m_IconTabBar_TextOnlySeparatorMargin: 0.375rem 0.25rem 0.375rem;
@@ -66,77 +66,77 @@
 @_sap_m_IconTabBar_SeparatorIconHeight: 2.75rem;
 @__sap_m_IconTabBar_SeparatorIconLineHeight: 2.75rem;
 
-// Left and Right arrows
+/* Left and Right arrows */
 @_sap_m_IconTabBar_ArrowScrollPadding: 0.875rem 0.4rem;
 @_sap_m_IconTabBar_SplitContainerArrowScrollPadding: 0.875rem 0.4rem;
 
-// Header
-@_sap_m_IconTabBar_HeaderBackgroundTranslucent: @sapUiObjectHeaderBackground;
-@_sap_m_IconTabBar_HeaderBackground: @sapUiObjectHeaderBackground;
+/* Header */
+@_sap_m_IconTabBar_HeaderBackgroundTranslucent: var(--sapObjectHeader_Background);
+@_sap_m_IconTabBar_HeaderBackground: var(--sapObjectHeader_Background);
 
 @_sap_m_IconTabBar_HeaderBorderBottom: none;
-@_sap_m_IconTabBar_HeaderShadow: @sapUiContentHeaderShadow;
+@_sap_m_IconTabBar_HeaderShadow: var(--sapContent_HeaderShadow);
 
-// Content
-@_sap_m_IconTabBar_ContentBackground: @sapUiBaseBG;
-@_sap_m_IconTabBar_ContentBackgroundTranslucent: @sapUiGroupContentBackground;
+/* Content */
+@_sap_m_IconTabBar_ContentBackground: var(--sapBackgroundColor);
+@_sap_m_IconTabBar_ContentBackgroundTranslucent: var(--sapGroup_ContentBackground);
 
-// ==================== Compact size ====================
+/* ==================== Compact size ==================== */
 
-// Content arrow
+/* Content arrow */
 @_sap_m_IconTabBar_Compact_NoTextContentArrowHeight: 1rem;
 @_sap_m_IconTabBar_Compact_ContentArrowHeight: 1rem;
 @_sap_m_IconTabBar_Compact_NoTextContentArrowWidth: 2.375rem;
 
-// Inline mode (same as cozy)
+/* Inline mode (same as cozy) */
 @_sap_m_IconTabBar_Compact_InLineVerticalTabHeight: @_sap_m_IconTabBar_InLineTextOnlyVerticalHeight;
 @_sap_m_IconTabBar_Compact_InLineFilterTextMargin: @_sap_m_IconTabBar_InLineFilterMargin;
 @_sap_m_IconTabBar_Compact_TextOnlyContentArrowHeight: @_sap_m_IconTabBar_VerticalContentArrowHeight;
 
-// TextOnly (same as cozy)
+/* TextOnly (same as cozy) */
 @_sap_m_IconTabBar_Compact_TextOnlyVerticalHeight: @_sap_m_IconTabBar_TextOnlyVerticalHeight;
 @_sap_m_IconTabBar_Compact_TextOnlyTabPadding: @_sap_m_IconTabBar_TextOnlyTabPadding;
 @_sap_m_IconTabBar_Compact_TextOnlyHeadPadding: 0 0.925rem 0 0.1875rem;
 @_sap_m_IconTabBar_Compact_TextOnlyTextLineHeight: 1rem;
 @_sap_m_IconTabBar_Compact_TextOnlyTextPadding: 0;
 
-// NoText
+/* NoText */
 @_sap_m_IconTabBar_Compact_NoTextTabWidth: 2.375rem;
 @_sap_m_IconTabBar_Compact_NoTextVerticalHeight: 3rem;
 
-// Horizontal
+/* Horizontal */
 @_sap_m_IconTabBar_Compact_HorizontalHeight: 3rem;
 @_sap_m_IconTabBar_Compact_HorizontalContentArrowHeight: 1rem;
 
-// Vertical
+/* Vertical */
 @_sap_m_IconTabBar_Compact_VerticalHeight: 3.875rem;
 
-// Filter text
+/* Filter text */
 @_sap_m_IconTabBar_Compact_FilterTextPadding: 0.375rem 0 0;
 
-// Focus border
+/* Focus border */
 @_sap_m_IconTabBar_Compact_HorizontalFocusBottom: 1rem;
 
-// =========== Phone ===========
+/* =========== Phone =========== */
 
-// Content arrow
+/* Content arrow */
 @_sap_m_IconTabBar_Phone_ContentArrowHeight: 0.625rem;
 
 @_sap_m_IconTabBar_Phone_TextOnlyContentArrowHeight: 0.5rem;
 @_sap_m_IconTabBar_Phone_Compact_TextOnlyContentArrowHeight: 0.75rem;
 
-// =========== Badge ===========
-@_sap_m_IconTabBar_Badge_Neutral_Background: @sapUiNeutralElement;
-@_sap_m_IconTabBar_Badge_Positive_Background: @sapUiPositiveElement;
-@_sap_m_IconTabBar_Badge_Critical_Background: @sapUiCriticalElement;
-@_sap_m_IconTabBar_Badge_Negative_Background: @sapUiNegativeElement;
+/* =========== Badge =========== */
+@_sap_m_IconTabBar_Badge_Neutral_Background: var(--sapNeutralElementColor);
+@_sap_m_IconTabBar_Badge_Positive_Background: var(--sapPositiveElementColor);
+@_sap_m_IconTabBar_Badge_Critical_Background: var(--sapCriticalElementColor);
+@_sap_m_IconTabBar_Badge_Negative_Background: var(--sapNegativeElementColor);
 
-// ==========================================================================
-// Variables
-// ==========================================================================
+/* ========================================================================== */
+/* Variables */
+/* ========================================================================== */
 
-@_sap_m_IconTabBar_TextHoverColor: @sapUiContentSelectedForegroundColor;
-@_sap_m_IconTabBar_SelectedTextColor: @sapUiContentSelectedForegroundColor;
+@_sap_m_IconTabBar_TextHoverColor: var(--sapContent_Selected_ForegroundColor);
+@_sap_m_IconTabBar_SelectedTextColor: var(--sapContent_Selected_ForegroundColor);
 @_sap_m_IconTabBar_SelectedTextHoverColor: darken(@sapUiSelected, 10);
 @_sap_m_IconTabBar_ArrowScroll_AfterHeight: 1px;
 @_sap_m_IconTabBar_HeaderFocusBorderTopOffset: -4px;
@@ -144,32 +144,33 @@
 @_sap_m_IconTabBar_HeaderFocusBorderRightOffset: -3px;
 @_sap_m_IconTabBar_HeaderFocusBorderLeftOffset: -3px;
 @_sap_m_IconTabBar_HeaderBorderRadius: 0.25rem;
-@_sap_m_IconTab_Bar_Separator_Line: @sapUiGroupTitleBorderColor;
+@_sap_m_IconTab_Bar_Separator_Line: var(--sapGroup_TitleBorderColor);
 
-// =========== Overflow ===========
-@_sap_m_IconTabBar_Overflow_TextColor: @sapUiBaseText;
-@_sap_m_IconTabBar_Overflow_Icon_Color: @sapUiBaseText;
-@_sap_m_IconTabBar_Overflow_BorderColorHover: @sapUiButtonHoverBorderColor;
-@_sap_m_IconTabBar_Overflow_BackgroundColorHover: @sapUiButtonHoverBackground;
+/* =========== Overflow =========== */
+@_sap_m_IconTabBar_Overflow_TextColor: var(--sapTextColor);
+@_sap_m_IconTabBar_Overflow_Icon_Color: var(--sapTextColor);
+@_sap_m_IconTabBar_Overflow_BorderColorHover: var(--sapButton_Hover_BorderColor);
+@_sap_m_IconTabBar_Overflow_BackgroundColorHover: var(--sapButton_Hover_Background);
 @_sap_m_IconTabBar_Overflow_BoxShadowHover: none;
-@_sap_m_IconTabBar_Overflow_TextColorHover: @sapUiBaseText;
-@_sap_m_IconTabBar_Overflow_Icon_ColorHover: @sapUiBaseText;
+@_sap_m_IconTabBar_Overflow_TextColorHover: var(--sapTextColor);
+@_sap_m_IconTabBar_Overflow_Icon_ColorHover: var(--sapTextColor);
 
-@_sap_m_IconTabBar_Overflow_BackgroundColorPressed: @sapUiButtonActiveBackground;
-@_sap_m_IconTabBar_Overflow_BorderColorPressed: @sapUiButtonActiveBorderColor;
-@_sap_m_IconTabBar_Overflow_TextColorPressed: @sapUiButtonActiveTextColor;
-@_sap_m_IconTabBar_Overflow_Icon_ColorPressed: @sapUiButtonActiveTextColor;
+@_sap_m_IconTabBar_Overflow_BackgroundColorPressed: var(--sapButton_Active_Background);
+@_sap_m_IconTabBar_Overflow_BorderColorPressed: var(--sapButton_Active_BorderColor);
+@_sap_m_IconTabBar_Overflow_TextColorPressed: var(--sapButton_Active_TextColor);
+@_sap_m_IconTabBar_Overflow_Icon_ColorPressed: var(--sapButton_Active_TextColor);
 
-// =========== Shell ===========
-@_sap_m_IconTabBar_ShellHeaderShadow: @sapUiShellShadow;
-@_sap_m_IconTabBar_ShellSelectedTextColor: @sapUiShellNavigationSelectedTextColor;
-@_sap_m_IconTabBar_Filter_Expand_Shell_BackgroundColor_Hover: @sapUiButtonHoverBackground;
-@_sap_m_IconTabBar_Filter_Expand_Shell_BorderColor_Hover: @sapUiButtonHoverBorderColor;
+/* =========== Shell =========== */
+@_sap_m_IconTabBar_ShellHeaderShadow: var(--sapShell_Shadow);
+@_sap_m_IconTabBar_ShellSelectedTextColor: var(--sapShell_Navigation_Selected_TextColor);
+@_sap_m_IconTabBar_Filter_Expand_Shell_BackgroundColor_Hover: var(--sapButton_Hover_Background);
+@_sap_m_IconTabBar_Filter_Expand_Shell_BorderColor_Hover: var(--sapButton_Hover_BorderColor);
 
 
 /* Head Container */
 .sapMITH {
-	z-index: 1; // shows the bottom shadow of the ITHeader over the content of the ITB
+	z-index: 1; /* shows the bottom shadow of the ITHeader over the content of the ITB */
+
 	.sapMITBHead {
 		padding-top: 0.875rem;
 	}
@@ -194,17 +195,20 @@
 			padding-top: 0;
 		}
 	}
+
 	.sapMITBDisabled {
+
 		.sapMITHTextContent {
-			color: @sapUiBaseText;
-			font-family: @sapUiFontBoldFamily;
+			color: var(--sapTextColor);
+			font-family: var(--sapFontBoldFamily);
 			font-size: @sapMFontMediumSize;
-	 	}
+		}
 	}
 
 	.sapMITBSelected {
+
 		.sapMITBContentArrow::after {
-			background: @sapUiContentSelectedForegroundColor;
+			background: var(--sapContent_Selected_ForegroundColor);
 		}
 	}
 
@@ -216,39 +220,41 @@
 		margin-top: 1.0625rem;
 	}
 
-
-	//More Button
+	/* More Button */
 	.sapMITHStartOverflow,
 	.sapMITHEndOverflow {
+
 		.sapMITBItem {
-			color: @sapUiButtonTextColor;
-			background: @sapUiButtonBackground;
-			border: 1px solid @sapUiButtonBorderColor;
+			color: var(--sapButton_TextColor);
+			background: var(--sapButton_Background);
+			border: 1px solid var(--sapButton_BorderColor);
 
 			.sapMITHShowSubItemsIcon {
-				color: @sapUiBaseText;
+				color: var(--sapTextColor);
 			}
 		}
 	}
 
 	.sapMITHEndOverflow,
 	.sapMITHStartOverflow {
+
 		.sapMITBItem:hover {
-			background: @sapUiButtonHoverBackground;
+			background: var(--sapButton_Hover_Background);
 			border: 1px solid @_sap_m_IconTabBar_Overflow_BorderColorHover;
 		}
 	}
 
 	.sapMITHEndOverflow,
 	.sapMITHStartOverflow {
+
 		.sapMITHShowSubItemsIcon {
 			padding-left: 0.375rem;
 		}
 	}
 
-	//Arrow button
-	.sapMITBFilterWithItems .sapMITBFilterExpandBtn .sapUiIcon  {
-		color: @sapUiBaseText;
+	/* Arrow button */
+	.sapMITBFilterWithItems .sapMITBFilterExpandBtn .sapUiIcon {
+		color: var(--sapTextColor);
 	}
 }
 
@@ -259,6 +265,7 @@
 	.sapMITBFilterIcon {
 		line-height: 1.8rem;
 	}
+
 	.sapMITBHead {
 		padding-top: 0.875rem;
 	}
@@ -320,9 +327,9 @@
 	border-bottom: none;
 	position: relative;
 
-	// creates border bottom with rounded top corners
+	/* creates border bottom with rounded top corners */
 	&::after {
-		content: "";
+		content: '';
 		position: absolute;
 		bottom: 0;
 		left: 0;
@@ -335,7 +342,7 @@
 .sapMITBHorizontal.sapMITBFilter {
 	margin-top: 0.125rem;
 
-	+ .sapMITBSep {
+	+.sapMITBSep {
 		margin-top: 0.25rem;
 	}
 }
@@ -343,33 +350,38 @@
 /* Content Container */
 
 .sapMITBContent {
-	border-bottom: 0.0625rem solid @sapUiObjectHeaderBorderColor;
+	border-bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
 }
 
 /* Tab Filter Item */
 
 .sapMITH:not(.sapMITBTextOnly) .sapMITBHorizontal {
+
 	.sapMITBFilterExpandBtn {
 		margin-bottom: 0.9375rem;
 	}
 }
 
 .sapMITH:not(.sapMITBTextOnly):not(.sapMITBNoText) .sapMITBVertical {
+
 	.sapMITBFilterExpandBtn {
 		margin-bottom: 1.875rem;
 	}
 }
 
 .sapMITBNoText.sapMITH {
+
 	.sapMITBFilterExpandBtn {
 		margin-bottom: 0.9375rem;
 	}
 }
 
 .sapMITBNoContentPadding .sapMITBTextOnly {
+
 	.sapMITBFilterExpandBtnSeparator {
 		margin-top: 1.3125rem;
 	}
+
 	.sapMITBFilterExpandBtn {
 		margin-top: 0.25rem;
 	}
@@ -378,188 +390,221 @@
 .sapMITBTextOnly {
 
 	.sapMITBFilterDefault.sapMITBSelected {
+
 		.sapMITBText {
-			color: @sapUiContentSelectedForegroundColor;
+			color: var(--sapContent_Selected_ForegroundColor);
 		}
+
 		.sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiContentSelectedForegroundColor;
+			border-color: var(--sapContent_Selected_ForegroundColor);
 		}
+
 		.sapMITBFilterExpandIcon {
 			color: @_sap_m_IconTabBar_SelectedTextColor !important;
 		}
 	}
 
 	.sapMITBFilterNeutral {
+
 		.sapMITBText {
-			color: @sapUiNeutralText;
+			color: var(--sapNeutralTextColor);
 		}
+
 		.sapMITBFilterWrapper:hover .sapMITBText {
-			color: @sapUiNeutralText;
+			color: var(--sapNeutralTextColor);
 		}
-		.sapMITBFilterExpandBtn:hover{
+
+		.sapMITBFilterExpandBtn:hover {
+
 			.sapMITBFilterExpandIcon {
-				color: @sapUiNeutralText;
+				color: var(--sapNeutralTextColor);
 			}
 		}
+
 		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiNeutralText;
+			border-color: var(--sapNeutralTextColor);
 		}
 	}
 
 	.sapMITBFilterPositive {
+
 		.sapMITBText {
-			color: @sapUiPositiveText;
+			color: var(--sapPositiveTextColor);
 		}
+
 		.sapMITBFilterWrapper:hover .sapMITBText {
-			color: @sapUiPositiveText;
+			color: var(--sapPositiveTextColor);
 		}
-		.sapMITBFilterExpandBtn:hover{
+
+		.sapMITBFilterExpandBtn:hover {
+
 			.sapMITBFilterExpandIcon {
-				color: @sapUiPositiveText !important;
+				color: var(--sapPositiveTextColor) !important;
 			}
 		}
+
 		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiPositiveText;
+			border-color: var(--sapPositiveTextColor);
 		}
 	}
 
 	.sapMITBFilterNegative {
-		 .sapMITBText {
-			color: @sapUiNegativeText;
+
+		.sapMITBText {
+			color: var(--sapNegativeTextColor);
 		}
+
 		.sapMITBFilterWrapper:hover .sapMITBText {
-			color: @sapUiNegativeText;
+			color: var(--sapNegativeTextColor);
 		}
-		.sapMITBFilterExpandBtn:hover{
+
+		.sapMITBFilterExpandBtn:hover {
+
 			.sapMITBFilterExpandIcon {
-				color: @sapUiNegativeText;
+				color: var(--sapNegativeTextColor);
 			}
 		}
+
 		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiNegativeText;
+			border-color: var(--sapNegativeTextColor);
 		}
 	}
 
 	.sapMITBFilterCritical {
+
 		.sapMITBText {
-			color: @sapUiCriticalText;
+			color: var(--sapCriticalTextColor);
 		}
+
 		.sapMITBFilterWrapper:hover .sapMITBText {
-			color: @sapUiCriticalText;
+			color: var(--sapCriticalTextColor);
 		}
-		.sapMITBFilterExpandBtn:hover{
+
+		.sapMITBFilterExpandBtn:hover {
+
 			.sapMITBFilterExpandIcon {
-				color: @sapUiCriticalText;
+				color: var(--sapCriticalTextColor);
 			}
 		}
+
 		&.sapMITBSelected .sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiCriticalText;
+			border-color: var(--sapCriticalTextColor);
 		}
 	}
 }
 
 .sapMITBFilterIcon {
-	border: 2px solid @sapUiContentSelectedForegroundColor;
+	border: 2px solid var(--sapContent_Selected_ForegroundColor);
 }
 
 .sapMITBFilterDefault {
-	border-color: @sapUiContentSelectedForegroundColor;
-	color: @sapUiContentSelectedForegroundColor;
+	border-color: var(--sapContent_Selected_ForegroundColor);
+	color: var(--sapContent_Selected_ForegroundColor);
 
 	.sapMITBFilterExpandBtnSeparator {
-		border-color: @sapUiBaseText;
+		border-color: var(--sapTextColor);
 	}
 
 	.sapMITBFilterExpandIcon {
-		color: @sapUiBaseText;
+		color: var(--sapTextColor);
 	}
 }
 
 .sapMITBFilterNeutral {
-	color: @sapUiNeutralElement;
-	border-color: @sapUiNeutralElement;
+	color: var(--sapNeutralElementColor);
+	border-color: var(--sapNeutralElementColor);
 
 	.sapMITBFilterExpandBtnSeparator {
-		border-color: @sapUiNeutralText;
+		border-color: var(--sapNeutralTextColor);
 	}
 
 	.sapMITBFilterExpandIcon {
-		color: @sapUiNeutralText !important;
+		color: var(--sapNeutralTextColor) !important;
 	}
 }
 
 .sapMITBFilterPositive {
-	color: @sapUiPositiveElement;
-	border-color: @sapUiPositiveElement;
+	color: var(--sapPositiveElementColor);
+	border-color: var(--sapPositiveElementColor);
 
 	.sapMITBFilterExpandBtnSeparator {
-		border-color: @sapUiPositiveText;
+		border-color: var(--sapPositiveTextColor);
 	}
 
 	.sapMITBFilterExpandIcon {
-		color: @sapUiPositiveText !important;
+		color: var(--sapPositiveTextColor) !important;
 	}
 }
 
 .sapMITBFilterNegative:not(.sapMITBTextOnly) {
-	color: @sapUiNegativeElement;
-	border-color: @sapUiNegativeElement;
+	color: var(--sapNegativeElementColor);
+	border-color: var(--sapNegativeElementColor);
 
 	.sapMITBFilterExpandBtnSeparator {
-		border-color: @sapUiNegativeText;
+		border-color: var(--sapNegativeTextColor);
 	}
 
 	.sapMITBFilterExpandIcon {
-		color: @sapUiNegativeText !important;
+		color: var(--sapNegativeTextColor) !important;
 	}
 }
 
 .sapMITBFilterCritical {
-	color: @sapUiCriticalElement;
-	border-color: @sapUiCriticalElement;
+	color: var(--sapCriticalElementColor);
+	border-color: var(--sapCriticalElementColor);
 
 	.sapMITBFilterExpandBtnSeparator {
-		border-color: @sapUiCriticalText;
+		border-color: var(--sapCriticalTextColor);
 	}
 
 	.sapMITBFilterExpandIcon {
-		color: @sapUiCriticalText !important;
+		color: var(--sapCriticalTextColor) !important;
 	}
 }
+
 .sapMITH:not(.sapMITBTextOnly) {
 
 	.sapMITBFilterNeutral {
+
 		.sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiNeutralElement;
+			border-color: var(--sapNeutralElementColor);
 		}
+
 		.sapMITBFilterExpandIcon {
-			color: @sapUiNeutralElement !important;
+			color: var(--sapNeutralElementColor) !important;
 		}
 	}
 
 	.sapMITBFilterPositive {
+
 		.sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiPositiveElement;
+			border-color: var(--sapPositiveElementColor);
 		}
+
 		.sapMITBFilterExpandIcon {
-			color: @sapUiPositiveElement !important;
+			color: var(--sapPositiveElementColor) !important;
 		}
 	}
 
 	.sapMITBFilterNegative {
+
 		.sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiNegativeElement;
+			border-color: var(--sapNegativeElementColor);
 		}
+
 		.sapMITBFilterExpandIcon {
-			color: @sapUiNegativeElement !important;
+			color: var(--sapNegativeElementColor) !important;
 		}
 	}
+
 	.sapMITBFilterCritical {
+
 		.sapMITBFilterExpandBtnSeparator {
-			border-color: @sapUiCriticalElement;
+			border-color: var(--sapCriticalElementColor);
 		}
+
 		.sapMITBFilterExpandIcon {
-			color: @sapUiCriticalElement !important;
+			color: var(--sapCriticalElementColor) !important;
 		}
 	}
 }
@@ -571,44 +616,44 @@
 	}
 
 	&.sapMITBFilterNeutral .sapMITBContentArrow::after {
-		background: @sapUiNeutralElement;
+		background: var(--sapNeutralElementColor);
 	}
 
 	&.sapMITBFilterPositive .sapMITBContentArrow::after {
-		background: @sapUiPositiveElement;
+		background: var(--sapPositiveElementColor);
 	}
 
 	&.sapMITBFilterNegative .sapMITBContentArrow::after {
-		background: @sapUiNegativeElement;
+		background: var(--sapNegativeElementColor);
 	}
 
 	&.sapMITBFilterCritical .sapMITBContentArrow::after {
-		background: @sapUiCriticalElement;
+		background: var(--sapCriticalElementColor);
 	}
 
 	.sapMITBFilterDefault {
 		background: @_sap_m_IconTabBar_SelectedTextColor;
-		color: @sapUiContentContrastIconColor;
+		color: var(--sapContent_ContrastIconColor);
 	}
 
 	.sapMITBFilterNeutral {
-		background: @sapUiNeutralElement;
-		color: @sapUiContentContrastIconColor;
+		background: var(--sapNeutralElementColor);
+		color: var(--sapContent_ContrastIconColor);
 	}
 
 	.sapMITBFilterPositive {
-		background: @sapUiPositiveElement;
-		color: @sapUiContentContrastIconColor;
+		background: var(--sapPositiveElementColor);
+		color: var(--sapContent_ContrastIconColor);
 	}
 
 	.sapMITBFilterNegative {
-		background: @sapUiNegativeElement;
-		color: @sapUiContentContrastIconColor;
+		background: var(--sapNegativeElementColor);
+		color: var(--sapContent_ContrastIconColor);
 	}
 
 	.sapMITBFilterCritical {
-		background: @sapUiCriticalElement;
-		color: @sapUiContentContrastIconColor;
+		background: var(--sapCriticalElementColor);
+		color: var(--sapContent_ContrastIconColor);
 	}
 }
 
@@ -637,6 +682,7 @@
 }
 
 .sapMITH.sapMITBNoText .sapMITBHead {
+
 	> .sapMITBSepLine {
 		margin: 0.25rem 0.25rem 0 0;
 	}
@@ -645,6 +691,7 @@
 .sapMITH.sapUiSizeCompact {
 
 	&.sapMITBNoText .sapMITBHead {
+
 		> .sapMITBSepLine {
 			margin: 0 0.125rem 0 0.125rem;
 		}
@@ -668,23 +715,25 @@
 	}
 
 	&.sapMITBHorizontal {
+
 		.sapMITBTab {
 			margin-top: 0;
 		}
+
 		+ .sapMITBSepLine {
 			margin-top: 0.5rem;
 		}
 	}
 
-  .sapMITBCount {
-	  font-family: @sapUiFontBoldFamily;
-	  font-size: @sapMFontHeader3Size;
-  }
+	.sapMITBCount {
+		font-family: var(--sapFontBoldFamily);
+		font-size: var(--sapFontHeader3Size);
+	}
 
-  .sapMITBText {
-	  font-family: @sapUiFontFamily;
-	  font-size: @sapMFontSmallSize;
-  }
+	.sapMITBText {
+		font-family: var(--sapFontFamily);
+		font-size: var(--sapFontSmallSize);
+	}
 }
 
 .sapMITBSepLine {
@@ -701,7 +750,9 @@
 
 /* Custom focus outline */
 html.sap-desktop {
+
 	.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll {
+
 		&::after {
 			top: 0.75rem;
 			bottom: 1.75rem;
@@ -709,14 +760,15 @@ html.sap-desktop {
 	}
 
 	.sapMITBFilter .sapMITBCount {
-		color: @sapUiContentLabelColor;
-	  	font-family: @sapUiFontFamily;
-	  	font-size: @sapMFontMediumSize;
+		color: var(--sapContent_LabelColor);
+		font-family: var(--sapFontFamily);
+		font-size: @sapMFontMediumSize;
 	}
 
 	.sapMITH.sapUiSizeCompact {
 
 		.sapMITBItem:focus.sapMITBAll {
+
 			&::after {
 				bottom: 1.3rem;
 				top: 0.125rem;
@@ -726,23 +778,29 @@ html.sap-desktop {
 
 	.sapMITHStartOverflow,
 	.sapMITHEndOverflow {
-	  .sapMITBItem:not(.sapUiDnDDragging):focus {
-		&::after {
-		  border-radius: 1.75rem;
+
+		.sapMITBItem:not(.sapUiDnDDragging):focus {
+
+			&::after {
+				border-radius: 1.75rem;
+			}
 		}
-	  }
 	}
 
 	.sapMITH {
+
 		.sapMITHStartOverflow,
 		.sapMITHEndOverflow {
+
 			.sapMITBItem {
-				&:active{
+
+				&:active {
 					background-color: @_sap_m_IconTabBar_Overflow_BackgroundColorPressed;
 					border: 1px solid @_sap_m_IconTabBar_Overflow_BorderColorPressed;
 				}
+
 				&:active::after {
-					// when overflow is pressed, hide the focus
+					/* when overflow is pressed, hide the focus */
 					border-color: transparent;
 				}
 			}
@@ -762,6 +820,7 @@ html.sap-desktop {
 html.sap-desktop {
 
 	.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBFilterIcon {
+
 		&::after {
 			top: -5px;
 			bottom: -5px;
@@ -773,7 +832,9 @@ html.sap-desktop {
 }
 
 .sapUiMedia-Std-Phone {
+
 	.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll {
+
 		&::after {
 			right: 6px !important;
 			left: -1px !important;
@@ -782,76 +843,80 @@ html.sap-desktop {
 }
 
 .sapMITBFilter .sapMITBText {
-  font-weight: bold;
+	font-weight: bold;
 }
+
 /* ------------------------------------------------ */
-/* Shell overrides                        */
+/* Shell overrides */
 /* ------------------------------------------------ */
 
 .sapUshellShellTabBar .sapMITH,
 .sapUshellShellTabBar.sapMITH {
 
-  //More Button
-  .sapMITHStartOverflow,
-  .sapMITHEndOverflow {
-	.sapMITBItem {
-	  border: 1px solid @sapUiButtonBorderColor;
-	  color: @sapUiShellNavigationTextColor;
-	  background-color: @sapUiShellInteractiveBackground;
+	/* More Button */
+	.sapMITHStartOverflow,
+	.sapMITHEndOverflow {
+
+		.sapMITBItem {
+			border: 1px solid var(--sapButton_BorderColor);
+			color: var(--sapShell_Navigation_TextColor);
+			background-color: var(--sapShell_InteractiveBackground);
 
-	  .sapMITHShowSubItemsIcon {
-		color: @sapUiShellNavigationTextColor;
-	  }
+			.sapMITHShowSubItemsIcon {
+				color: var(--sapShell_Navigation_TextColor);
+			}
 
-	  &:hover {
-		box-shadow: @sapUiContentInteractionShadow;
-	  }
+			&:hover {
+				box-shadow: var(--sapContent_Interaction_Shadow);
+			}
+		}
 	}
-  }
 
-  .sapMITH .sapMITBFilter.sapMITBSelected .sapMITBCount,
-  .sapMITH .sapMITBFilter.sapMITBSelected .sapMITBCount {
-	color:  @sapUiShellNavigationSelectedColor;
-  }
+	.sapMITH .sapMITBFilter.sapMITBSelected .sapMITBCount,
+	.sapMITH .sapMITBFilter.sapMITBSelected .sapMITBCount {
+		color: var(--sapShell_Navigation_SelectedColor);
+	}
 
-  .sapMITBSelected:not(.sapMITBDisabled)  .sapMITBContentArrow::after {
-	background: @sapUiShellNavigationSelectedColor;
-  }
+	.sapMITBSelected:not(.sapMITBDisabled) .sapMITBContentArrow::after {
+		background: var(--sapShell_Navigation_SelectedColor);
+	}
 
-  .sapMITH .sapMITBFilterWithItems .sapMITBFilterExpandBtn {
-	margin-left: 0.188rem;
-  }
+	.sapMITH .sapMITBFilterWithItems .sapMITBFilterExpandBtn {
+		margin-left: 0.188rem;
+	}
 
-  .sapMITHStartOverflow,
-  .sapMITHEndOverflow {
-	.sapMITBItem {
-		background-color: @sapUiShellInteractiveBackground;
+	.sapMITHStartOverflow,
+	.sapMITHEndOverflow {
+
+		.sapMITBItem {
+			background-color: var(--sapShell_InteractiveBackground);
 
-	  &:hover {
-		background: @sapUiShellHoverBackground;
-		background-color: @sapUiShellHoverBackground;
-		border-color: @_sap_m_IconTabBar_ShellOverflowHoverBorderColor;
-	  }
+			&:hover {
+				background: var(--sapShell_Hover_Background);
+				background-color: var(--sapShell_Hover_Background);
+				border-color: @_sap_m_IconTabBar_ShellOverflowHoverBorderColor;
+			}
+		}
 	}
-  }
 
-  html.sap-desktop & {
+	html.sap-desktop & {
 
-	.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBFilterIcon,
-	.sapMITBTextOnly .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
-	.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll,
-	.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
-	.sapMITHStartOverflow .sapMITBItem:not(.sapUiDnDDragging):focus,
-	.sapMITHEndOverflow .sapMITBItem:not(.sapUiDndDragging):focus {
-	  &::after {
-		border-color: @sapUiContentFocusColor !important;
-	  }
+		.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBFilterIcon,
+		.sapMITBTextOnly .sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
+		.sapMITBItem:not(.sapUiDnDDragging):focus.sapMITBAll,
+		.sapMITBItem:not(.sapUiDnDDragging):focus .sapMITBText,
+		.sapMITHStartOverflow .sapMITBItem:not(.sapUiDnDDragging):focus,
+		.sapMITHEndOverflow .sapMITBItem:not(.sapUiDndDragging):focus {
+
+			&::after {
+				border-color: var(--sapContent_FocusColor) !important;
+			}
+		}
 	}
-  }
 }
 
 /* ------------------------------------------------ */
-/* IconTabBar Badge									*/
+/* IconTabBar Badge */
 /* ------------------------------------------------ */
 
 .sapMITH,
@@ -863,7 +928,9 @@ html.sap-desktop {
 }
 
 .sapMITH {
+
 	.sapMITBFilterWithItems .sapMITBFilterExpandBtn {
-		margin-left: -1px; // to hide the separator on hover over the button
+		margin-left: -1px;
+		/* to hide the separator on hover over the button */
 	}
 }