feat(ui5-tab-container): SAP Horizon theme implementation (#4207)

Author: GerganaKremenska

packages/main/src/themes/TabInStrip.css

@@ -104,6 +104,8 @@
 .ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
 .ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
     outline: var(--_ui5_tc_headerItem_focus_border);
+	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
+	outline-offset: var(--_ui5_tc_headerItem_focus_offset);
 }
 
 .ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer::before {
@@ -115,7 +117,7 @@
 	right: var(--_ui5_tc_headerItem_focus_border_offset);
 	top: var(--_ui5_tc_headerItem_focus_border_offset);
 	bottom: var(--_ui5_tc_headerItem_focus_border_offset);
-	border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);;
+	border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);
 }
 
 
@@ -332,7 +334,9 @@
     border-color: var(--_ui5_tc_headerItem_neutral_border_color);
 	background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
 }
-
+.ui5-tab-strip-item .ui5-tab-strip-itemAdditionalText {
+	font-weight: var(--_ui5_tc_headeritem_additional_text_font_weight);
+}
 /*** RTL ***/
 
 [dir=rtl] .ui5-tab-strip-item-semanticIcon::before {

packages/main/src/themes/base/TabContainer-parameters.css

@@ -13,6 +13,7 @@
 	--_ui5_tc_headeritem_text_selected_color: var(--sapSelectedColor);
 	--_ui5_tc_headeritem_text_selected_hover_color: var(--sapSelectedColor);
 	--_ui5_tc_headeritem_text_font_weight: normal;
+	--_ui5_tc_headeritem_additional_text_font_weight: normal;
 	--_ui5_tc_headerItem_neutral_color: var(--sapNeutralColor);
 	--_ui5_tc_headerItem_positive_color: var(--sapPositiveColor);
 	--_ui5_tc_headerItem_negative_color: var(--sapNegativeColor);
@@ -27,6 +28,7 @@
 	--_ui5_tc_headerItem_critical_selected_border_color: var(--_ui5_tc_headerItem_critical_color);
 	--_ui5_tc_headerItem_transition: none;
 	--_ui5_tc_headerItem_hover_border_visibility: hidden;
+	--_ui5_tc_headerItem_focus_offset: 0px;
 
 	--_ui5_tc_headerItemContent_border_radius: 0.125rem 0.125rem 0 0;
 	--_ui5_tc_headerItemContent_border_bottom: 0.125rem solid var(--sapSelectedColor);
@@ -40,12 +42,13 @@
 	--_ui5_tc_headerItemContent_border_height: 0;
 	--_ui5_tc_headerItemContent_offset: 1rem;
 	--_ui5_tc_headerItemContent_focus_offset: 1rem;
-	--_ui5_tc_headerItem_focus_border: 1px dotted var(--sapContent_FocusColor);
+	--_ui5_tc_headerItem_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	--_ui5_tc_headerItemContent_padding: 0;
 	--_ui5_tc_headerItemContent_focus_border: none;
 	--_ui5_tc_headerItemContent_default_focus_border: none;
 	--_ui5_tc_headerItemContent_focus_border_radius: 0;
 	--_ui5_tc_headerItemSemanticIcon_display: none;
+	--_ui5_tc_headerItem_focus_border_radius: 0px;
 
 	/* Overflow Item */
 

packages/main/src/themes/sap_horizon/TabContainer-parameters.css

@@ -5,11 +5,18 @@
 
 	/* Header Item */
 	--_ui5_tc_headerItemContent_border_bottom: 0.1875rem solid var(--sapSelectedColor);
-
+	--_ui5_tc_headerItem_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_default_color: var(--sapHighlightColor);
 	--_ui5_tc_overflowItem_current_color: CurrentColor;
 	--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
 
 	--_ui5_tc_headerItem_focus_border_offset: -5px;
 	--_ui5_tc_headerItemIcon_focus_border_radius: 50%;
+	--_ui5_tc_headerItem_focus_border_radius: 0.25rem;
+	--_ui5_tc_headeritem_text_font_weight: bold;
+	--_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);
+	--_ui5_tc_headerItem_focus_offset: 1px;
+
+	/* Header Item icons */
+	--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapHighlightColor);
 }