From 9ee9ec4f9e3c45b07e90d28b0f1253b5d1091623 Mon Sep 17 00:00:00 2001
From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com>
Date: Fri, 7 Jul 2023 17:05:06 +0300
Subject: [PATCH] feat(ui5-tabcontainer): implement latest SAP Horizon design
(#7257)
---
packages/main/src/Tab.ts | 8 ++
packages/main/src/TabInStrip.hbs | 1 +
packages/main/src/TabSeparator.ts | 2 +-
packages/main/src/themes/TabContainer.css | 9 +-
packages/main/src/themes/TabInStrip.css | 94 ++++++++++---------
.../themes/base/TabContainer-parameters.css | 14 +--
.../TabContainer-parameters.css | 1 -
.../TabContainer-parameters.css | 1 -
.../TabContainer-parameters.css | 1 -
.../TabContainer-parameters.css | 1 -
.../sap_horizon/TabContainer-parameters.css | 7 ++
.../TabContainer-parameters.css | 24 ++++-
.../TabContainer-parameters.css | 4 -
.../TabContainer-parameters.css | 24 +++--
.../TabContainer-parameters.css | 24 +++--
15 files changed, 131 insertions(+), 84 deletions(-)
diff --git a/packages/main/src/Tab.ts b/packages/main/src/Tab.ts
index 58e489c4c715..debe3c6e965e 100644
--- a/packages/main/src/Tab.ts
+++ b/packages/main/src/Tab.ts
@@ -246,6 +246,10 @@ class Tab extends UI5Element implements ITab, ITabbable {
return this.subTabs.length > 0 && this._isTopLevelTab && !this._hasOwnContent;
}
+ get isTwoClickArea() {
+ return this.subTabs.length > 0 && this._isTopLevelTab && this._hasOwnContent;
+ }
+
get isOnSelectedTabPath(): boolean {
return this._realTab === this || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
}
@@ -380,6 +384,10 @@ class Tab extends UI5Element implements ITab, ITabbable {
classes.push(`ui5-tab-strip-item--singleClickArea`);
}
+ if (this.isTwoClickArea) {
+ classes.push(`ui5-tab-strip-item--twoClickArea`);
+ }
+
return {
itemClasses: classes.join(" "),
additionalTextClasses: this.additionalTextClasses,
diff --git a/packages/main/src/TabInStrip.hbs b/packages/main/src/TabInStrip.hbs
index fc9e48d84889..f940fce36770 100644
--- a/packages/main/src/TabInStrip.hbs
+++ b/packages/main/src/TabInStrip.hbs
@@ -47,6 +47,7 @@
{{#if this.requiresExpandButton}}
+
[ui5-button] {
- margin-top: 0.25rem;
border-radius: 0.75rem;
height: 1.5rem;
}
+.ui5-tc__overflow > [ui5-button]:not([active]) {
+ color: var(--_ui5_tc_overflow_text_color);
+}
+
+.ui5-tc__overflow > [ui5-button]:not([active]):hover {
+ color: var(--_ui5_tc_overflow_text_color);
+}
+
.ui5-tc__overflow > [ui5-button][focused] {
outline-offset: 0.125rem;
--_ui5_button_focused_border: none;
diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css
index d29721ec8173..6a770f0bb4b4 100644
--- a/packages/main/src/themes/TabInStrip.css
+++ b/packages/main/src/themes/TabInStrip.css
@@ -4,7 +4,7 @@
height: var(--_ui5_tc_header_height);
color: var(--_ui5_tc_headerItem_color);
cursor: pointer;
- padding: var(--_ui5_tc_headeritem_padding);
+ padding: 0 var(--_ui5_tc_headeritem_padding);
font-size: var(--sapFontSmallSize);
font-weight: var(--_ui5_tc_headeritem_text_font_weight);
text-shadow: var(--sapContent_TextShadow);
@@ -35,20 +35,31 @@
.ui5-tab-strip-itemContent {
display: flex;
+ height: 100%;
min-width: 0;
justify-content: center;
flex-direction: column;
- padding: var(--_ui5_tc_headerItemContent_padding);
border: var(--_ui5_tc_headerItemContent_default_focus_border);
border-radius: var(--_ui5_tc_headerItemContent_focus_border_radius);
- pointer-events: none;
transition: var(--_ui5_tc_headerItem_transition);
}
+
+.ui5-tab-expand-button {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+ z-index: 1;
+ background-color: var(--_ui5_tc_header_background);
+ padding-inline-end: 0.188rem;
+}
+
.ui5-tab-expand-button > [ui5-button] {
height: 1.5rem;
min-width: 1.5rem;
- margin-top: 0.25rem;
- margin-inline-start: 0.625rem;
+ margin-inline-start: var(--_ui5_tc_headerItem_expand_button_margin_inline_start);
+ --_ui5_button_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
+ --_ui5_button_focused_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
}
.ui5-tab-expand-button > [ui5-button]:not([active]) {
@@ -63,8 +74,27 @@
color: var(--_ui5_tc_headerItem_text_selected_hover_color);
}
+.ui5-tab-expand-button-separator {
+ display: var(--_ui5_tc_headerItem_expand_button_separator_display);
+ position: relative;
+ width: 0.0625rem;
+ right: -0.0625rem;
+ height: 1rem;
+ background: var(--sapTextColor);
+ margin-inline-start: 0.0625rem;
+ z-index: 2;
+}
+
+.ui5-tab-expand-button:hover {
+ z-index: 2;
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-expand-button-separator {
+ background: var(--_ui5_tc_headerItem_text_selected_color);
+}
+
.ui5-tab-single-click-icon {
- margin-inline-start: 0.875rem;
+ margin-inline-start: var(--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start);
}
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
@@ -87,12 +117,16 @@
.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon > [ui5-icon] {
color: var(--_ui5_tc_headerItem_color);
}
-.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative).ui5-tab-strip-item--textOnly,
-.ui5-tab-strip-item--singleClickArea.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled) .ui5-tab-single-click-icon > [ui5-icon] {
+
+/* hover effects */
+.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--twoClickArea):not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative):hover,
+.ui5-tab-strip-item--twoClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative) .ui5-tab-strip-itemContent:hover,
+.ui5-tab-strip-item--singleClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled):hover .ui5-tab-single-click-icon > [ui5-icon] {
color: var(--_ui5_tc_headerItem_text_hover_color);
}
-/* the outline when hover or selected */
+
+/* selection indicator */
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
@@ -107,39 +141,11 @@
height: var(--_ui5_tc_headerItemContent_border_height);
}
-/* the outline when hover and not selected */
-.ui5-tab-strip-item--textOnly:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after {
- border-color: var(--_ui5_tc_headerItem_hover_border_bg);
- background-color: var(--_ui5_tc_headerItem_hover_border_bg);
-}
-
-/* the outline when hover and selected */
-.ui5-tab-strip-item--textOnly:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after {
- background-color: var(--_ui5_tc_headerItem_hover_selected_hover_border_bg);
-}
-
-/* the outline offset when hover and selected */
-.ui5-tab-strip-item--textOnly:hover .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover .ui5-tab-strip-itemContent::after,
+/* selection indicator offset in text only and mixed modes */
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after {
- left: var(--_ui5_tc_headerItemContent_offset);
- right: var(--_ui5_tc_headerItemContent_offset);
-}
-
-/* the outline offset when focused */
-.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after {
- left: var(--_ui5_tc_headerItemContent_focus_offset);
- right: var(--_ui5_tc_headerItemContent_focus_offset);
+ left: var(--_ui5_tc_headeritem_padding);
+ right: var(--_ui5_tc_headeritem_padding);
}
.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
@@ -292,7 +298,7 @@
/*** Semantic states ***/
.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer {
- color: var(--sapPositiveColor);
+ color: var(--_ui5_tc_headerItem_positive_color);
border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
}
@@ -323,7 +329,7 @@
.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer {
- color: var(--sapNegativeColor);
+ color: var(--_ui5_tc_headerItem_negative_color);
border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
}
@@ -347,7 +353,7 @@
.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer {
- color: var(--sapCriticalColor);
+ color: var(--_ui5_tc_headerItem_critical_color);
border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
}
@@ -371,7 +377,7 @@
.ui5-tab-strip-item--neutral.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
- color: var(--sapNeutralColor);
+ color: var(--_ui5_tc_headerItem_neutral_color);
border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
}
diff --git a/packages/main/src/themes/base/TabContainer-parameters.css b/packages/main/src/themes/base/TabContainer-parameters.css
index 0df772eb0200..1958c6f809dc 100644
--- a/packages/main/src/themes/base/TabContainer-parameters.css
+++ b/packages/main/src/themes/base/TabContainer-parameters.css
@@ -11,7 +11,7 @@
--_ui5_tc_content_background_translucent: var(--sapGroup_ContentBackground);
/* Header Item */
- --_ui5_tc_headeritem_padding: 0 1rem;
+ --_ui5_tc_headeritem_padding: 1rem;
--_ui5_tc_headerItem_color: var(--sapContent_LabelColor);
--_ui5_tc_headerItem_additional_text_color: var(--sapContent_LabelColor);
--_ui5_tc_headerItem_text_hover_color: var(--_ui5_tc_headerItem_color);
@@ -42,10 +42,7 @@
--_ui5_tc_headerItem_positive_border_bg: transparent;
--_ui5_tc_headerItem_negative_border_bg: transparent;
--_ui5_tc_headerItem_critical_border_bg: transparent;
- --_ui5_tc_headerItem_hover_border_bg: transparent;
- --_ui5_tc_headerItem_hover_selected_hover_border_bg: transparent;
--_ui5_tc_headerItemContent_border_height: 0;
- --_ui5_tc_headerItemContent_offset: 1rem;
--_ui5_tc_headerItemContent_focus_offset: 1rem;
--_ui5_tc_headerItem_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
--_ui5_tc_headerItem_text_focus_border_offset_left: 0px;
@@ -56,7 +53,6 @@
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_right: 0.625rem;
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_top: 0.75rem;
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom: 0.75rem;
- --_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;
@@ -67,10 +63,13 @@
--_ui5_tc_mixedMode_itemText_font_family: var(--sapFontFamily);
--_ui5_tc_mixedMode_itemText_font_size: var(--sapFontSmallSize);
--_ui5_tc_mixedMode_itemText_font_weight: normal;
+ --_ui5_tc_headerItem_expand_button_margin_inline_start: 0.625rem;
+ --_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.875rem;
+ --_ui5_tc_headerItem_expand_button_border_radius: var(--sapButton_BorderCornerRadius);
+ --_ui5_tc_headerItem_expand_button_separator_display: none;
/* Overflow Item */
- --_ui5_tc_overflowItem_neutral_color: var(--sapNeutralColor);
--_ui5_tc_overflowItem_positive_color: var(--sapPositiveColor);
--_ui5_tc_overflowItem_negative_color: var(--sapNegativeColor);
--_ui5_tc_overflowItem_critical_color: var(--sapCriticalColor);
@@ -95,6 +94,9 @@
--_ui5_tc_headerItem_focus_border_offset: -2px;
--_ui5_tc_headerItemIcon_focus_border_radius: 0;
+
+ /* Overflow Buttons*/
+ --_ui5_tc_overflow_text_color: var(--sapButton_TextColor);
}
[data-ui5-compact-size],
diff --git a/packages/main/src/themes/sap_belize_hcb/TabContainer-parameters.css b/packages/main/src/themes/sap_belize_hcb/TabContainer-parameters.css
index 62de67f81295..3331f6cee46f 100644
--- a/packages/main/src/themes/sap_belize_hcb/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_belize_hcb/TabContainer-parameters.css
@@ -35,7 +35,6 @@
/* Overflow Item */
- --_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
diff --git a/packages/main/src/themes/sap_belize_hcw/TabContainer-parameters.css b/packages/main/src/themes/sap_belize_hcw/TabContainer-parameters.css
index 62de67f81295..3331f6cee46f 100644
--- a/packages/main/src/themes/sap_belize_hcw/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_belize_hcw/TabContainer-parameters.css
@@ -35,7 +35,6 @@
/* Overflow Item */
- --_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css
index 62de67f81295..3331f6cee46f 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css
@@ -35,7 +35,6 @@
/* Overflow Item */
- --_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css
index 62de67f81295..3331f6cee46f 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css
@@ -35,7 +35,6 @@
/* Overflow Item */
- --_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
diff --git a/packages/main/src/themes/sap_horizon/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon/TabContainer-parameters.css
index 5fbe886d36e4..8eec10c17f9b 100644
--- a/packages/main/src/themes/sap_horizon/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon/TabContainer-parameters.css
@@ -9,6 +9,10 @@
--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
--_ui5_tc_overflowItem_current_color: CurrentColor;
--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+ --_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
+ --_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
+ --_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
+ --_ui5_tc_headerItem_expand_button_separator_display: inline-block;
/* Focus & Hover */
--_ui5_tc_headerItem_focus_border: 0.125rem solid var(--sapContent_FocusColor);
@@ -28,4 +32,7 @@
/* Mixed Mode */
--_ui5_tc_mixedMode_itemText_color: var(--sapTextColor);
+
+ /* Overflow Buttons*/
+ --_ui5_tc_overflow_text_color: var(--sapTextColor);
}
diff --git a/packages/main/src/themes/sap_horizon_dark/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_dark/TabContainer-parameters.css
index 53d992ca9d93..8eec10c17f9b 100644
--- a/packages/main/src/themes/sap_horizon_dark/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/TabContainer-parameters.css
@@ -6,17 +6,33 @@
/* 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_default_color: var(--sapTextColor);
--_ui5_tc_overflowItem_current_color: CurrentColor;
--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+ --_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
+ --_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
+ --_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
+ --_ui5_tc_headerItem_expand_button_separator_display: inline-block;
+ /* Focus & Hover */
+ --_ui5_tc_headerItem_focus_border: 0.125rem solid var(--sapContent_FocusColor);
--_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_focus_border_radius: 0.375rem;
--_ui5_tc_headeritem_text_font_weight: bold;
- --_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);
--_ui5_tc_headerItem_focus_offset: 1px;
+ --_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);
/* Header Item icons */
- --_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapHighlightColor);
+ --_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapContent_Selected_ForegroundColor);
+ --_ui5_tc_headerItemIcon_color: var(--sapContent_Selected_ForegroundColor);
+ --_ui5_tc_headerItemIcon_selected_background: var(--sapContent_Selected_ForegroundColor);
+ --_ui5_tc_headerItemIcon_background_color: var(--sapContent_Selected_Background);
+ --_ui5_tc_headerItemIcon_selected_color: var(--sapContent_ContrastIconColor);
+
+ /* Mixed Mode */
+ --_ui5_tc_mixedMode_itemText_color: var(--sapTextColor);
+
+ /* Overflow Buttons*/
+ --_ui5_tc_overflow_text_color: var(--sapTextColor);
}
diff --git a/packages/main/src/themes/sap_horizon_exp/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_exp/TabContainer-parameters.css
index 70eec1731450..b2956a5b8a20 100644
--- a/packages/main/src/themes/sap_horizon_exp/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon_exp/TabContainer-parameters.css
@@ -22,14 +22,10 @@
--_ui5_tc_headerItem_positive_border_bg: var(--_ui5_tc_headerItem_positive_color);
--_ui5_tc_headerItem_negative_border_bg: var(--_ui5_tc_headerItem_negative_color);
--_ui5_tc_headerItem_critical_border_bg: var(--_ui5_tc_headerItem_critical_color);
- --_ui5_tc_headerItem_hover_border_bg: var(--sapTile_TitleTextColor); /* #475E75; */
- --_ui5_tc_headerItem_hover_selected_hover_border_bg: var(--sapContent_Selected_TextColor); /* #0057D2; */
--_ui5_tc_headerItem_hover_border_visibility: visible;
--_ui5_tc_headerItemContent_border_height: 0.125rem;
- --_ui5_tc_headerItemContent_offset: 0.25rem;
--_ui5_tc_headerItemContent_focus_offset: 0.25rem;
- --_ui5_tc_headerItemContent_padding: 0.25rem 0.5rem;
--_ui5_tc_headerItemContent_focus_border: 0.125rem solid var(--sapContent_FocusColor);
--_ui5_tc_headerItemContent_default_focus_border: 0.125rem solid transparent;
--_ui5_tc_headerItemContent_focus_border_radius: 0.5rem;
diff --git a/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css
index 62de67f81295..425980b7f817 100644
--- a/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css
@@ -8,10 +8,10 @@
--_ui5_tc_headerItem_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
--_ui5_tc_headerItem_text_selected_color: var(--sapPageHeader_BorderColor);
--_ui5_tc_headerItem_text_selected_hover_color: var(--sapPageHeader_BorderColor);
- --_ui5_tc_headerItem_neutral_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_headerItem_positive_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_headerItem_negative_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_headerItem_critical_color: var(--sapGroup_TitleTextColor);
+ --_ui5_tc_headerItem_neutral_color: var(--sapTextColor);
+ --_ui5_tc_headerItem_positive_color: var(--sapTextColor);
+ --_ui5_tc_headerItem_negative_color: var(--sapTextColor);
+ --_ui5_tc_headerItem_critical_color: var(--sapTextColor);
--_ui5_tc_headerItem_neutral_border_color: var(--_ui5_tc_headerItem_neutral_color);
--_ui5_tc_headerItem_positive_border_color: var(--_ui5_tc_headerItem_positive_color);
--_ui5_tc_headerItem_negative_border_color: var(--_ui5_tc_headerItem_negative_color);
@@ -21,6 +21,9 @@
--_ui5_tc_headerItem_negative_selected_border_color: var(--_ui5_tc_headerItem_negative_color);
--_ui5_tc_headerItem_critical_selected_border_color: var(--_ui5_tc_headerItem_critical_color);
--_ui5_tc_headerItemSemanticIcon_display: inline-block;
+ --_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
+ --_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
+ --_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
/* Header Item icons */
--_ui5_tc_headerItemIcon_border: 1px solid var(--sapPageHeader_BorderColor);
@@ -34,12 +37,13 @@
--_ui5_tc_headerItemIcon_semantic_selected_color: var(--sapContent_IconColor);
/* Overflow Item */
-
- --_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_overflowItem_default_color: var(--sapGroup_TitleTextColor);
+ --_ui5_tc_overflowItem_positive_color: var(--sapTextColor);
+ --_ui5_tc_overflowItem_negative_color: var(--sapTextColor);
+ --_ui5_tc_overflowItem_critical_color: var(--sapTextColor);
+ --_ui5_tc_overflowItem_default_color: var(--sapTextColor);
--_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color);
--_ui5_tc_overflowItem_extraIndent: 1rem;
+
+ /* Overflow Buttons*/
+ --_ui5_tc_overflow_text_color: var(--sapTextColor);
}
diff --git a/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css
index 62de67f81295..425980b7f817 100644
--- a/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css
@@ -8,10 +8,10 @@
--_ui5_tc_headerItem_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
--_ui5_tc_headerItem_text_selected_color: var(--sapPageHeader_BorderColor);
--_ui5_tc_headerItem_text_selected_hover_color: var(--sapPageHeader_BorderColor);
- --_ui5_tc_headerItem_neutral_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_headerItem_positive_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_headerItem_negative_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_headerItem_critical_color: var(--sapGroup_TitleTextColor);
+ --_ui5_tc_headerItem_neutral_color: var(--sapTextColor);
+ --_ui5_tc_headerItem_positive_color: var(--sapTextColor);
+ --_ui5_tc_headerItem_negative_color: var(--sapTextColor);
+ --_ui5_tc_headerItem_critical_color: var(--sapTextColor);
--_ui5_tc_headerItem_neutral_border_color: var(--_ui5_tc_headerItem_neutral_color);
--_ui5_tc_headerItem_positive_border_color: var(--_ui5_tc_headerItem_positive_color);
--_ui5_tc_headerItem_negative_border_color: var(--_ui5_tc_headerItem_negative_color);
@@ -21,6 +21,9 @@
--_ui5_tc_headerItem_negative_selected_border_color: var(--_ui5_tc_headerItem_negative_color);
--_ui5_tc_headerItem_critical_selected_border_color: var(--_ui5_tc_headerItem_critical_color);
--_ui5_tc_headerItemSemanticIcon_display: inline-block;
+ --_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
+ --_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
+ --_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
/* Header Item icons */
--_ui5_tc_headerItemIcon_border: 1px solid var(--sapPageHeader_BorderColor);
@@ -34,12 +37,13 @@
--_ui5_tc_headerItemIcon_semantic_selected_color: var(--sapContent_IconColor);
/* Overflow Item */
-
- --_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
- --_ui5_tc_overflowItem_default_color: var(--sapGroup_TitleTextColor);
+ --_ui5_tc_overflowItem_positive_color: var(--sapTextColor);
+ --_ui5_tc_overflowItem_negative_color: var(--sapTextColor);
+ --_ui5_tc_overflowItem_critical_color: var(--sapTextColor);
+ --_ui5_tc_overflowItem_default_color: var(--sapTextColor);
--_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color);
--_ui5_tc_overflowItem_extraIndent: 1rem;
+
+ /* Overflow Buttons*/
+ --_ui5_tc_overflow_text_color: var(--sapTextColor);
}