From 53450e27ca325927065ce1453b9e96cca212cd53 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Tue, 27 Jun 2023 16:32:19 +0300 Subject: [PATCH 1/4] feat(ui5-tabcontainer): implement latest SAP Horizon design --- packages/main/src/Tab.ts | 8 ++ packages/main/src/TabInStrip.hbs | 1 + packages/main/src/TabSeparator.ts | 2 +- packages/main/src/themes/TabContainer.css | 8 ++ packages/main/src/themes/TabInStrip.css | 85 ++++++++++--------- .../themes/base/TabContainer-parameters.css | 13 +-- .../sap_horizon/TabContainer-parameters.css | 7 ++ .../TabContainer-parameters.css | 24 +++++- .../TabContainer-parameters.css | 4 - .../TabContainer-parameters.css | 8 +- .../TabContainer-parameters.css | 8 +- 11 files changed, 113 insertions(+), 55 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]: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..90aae3f9d408 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,32 @@ .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 +75,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 +118,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 +142,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 { diff --git a/packages/main/src/themes/base/TabContainer-parameters.css b/packages/main/src/themes/base/TabContainer-parameters.css index 0df772eb0200..196fa9f78b5c 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,6 +63,10 @@ --_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 */ @@ -95,6 +95,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_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..96eb27a3e821 100644 --- a/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css @@ -21,6 +21,10 @@ --_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; + --_ui5_tc_headerItem_expand_button_separator_display: inline-block; /* Header Item icons */ --_ui5_tc_headerItemIcon_border: 1px solid var(--sapPageHeader_BorderColor); @@ -34,7 +38,6 @@ --_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); @@ -42,4 +45,7 @@ --_ui5_tc_overflowItem_default_color: var(--sapGroup_TitleTextColor); --_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..96eb27a3e821 100644 --- a/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css @@ -21,6 +21,10 @@ --_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; + --_ui5_tc_headerItem_expand_button_separator_display: inline-block; /* Header Item icons */ --_ui5_tc_headerItemIcon_border: 1px solid var(--sapPageHeader_BorderColor); @@ -34,7 +38,6 @@ --_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); @@ -42,4 +45,7 @@ --_ui5_tc_overflowItem_default_color: var(--sapGroup_TitleTextColor); --_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); } From 4c12f562feb07cc8b5be8feb8a1813628cb0f8b1 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Tue, 27 Jun 2023 17:15:12 +0300 Subject: [PATCH 2/4] fix: hide expand button separator in high contrast themes --- .../main/src/themes/sap_horizon_hcb/TabContainer-parameters.css | 1 - .../main/src/themes/sap_horizon_hcw/TabContainer-parameters.css | 1 - 2 files changed, 2 deletions(-) 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 96eb27a3e821..ee7131b902b8 100644 --- a/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css @@ -24,7 +24,6 @@ --_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; /* Header Item icons */ --_ui5_tc_headerItemIcon_border: 1px solid var(--sapPageHeader_BorderColor); 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 96eb27a3e821..ee7131b902b8 100644 --- a/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css @@ -24,7 +24,6 @@ --_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; /* Header Item icons */ --_ui5_tc_headerItemIcon_border: 1px solid var(--sapPageHeader_BorderColor); From 864ec643f7b8e6184407f486b4482c60edf408d7 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Wed, 5 Jul 2023 11:28:13 +0300 Subject: [PATCH 3/4] fix: semantic tabs colors in HC themes --- packages/main/src/themes/TabInStrip.css | 8 ++++---- .../src/themes/base/TabContainer-parameters.css | 1 - .../sap_belize_hcb/TabContainer-parameters.css | 1 - .../sap_belize_hcw/TabContainer-parameters.css | 1 - .../sap_fiori_3_hcb/TabContainer-parameters.css | 1 - .../sap_fiori_3_hcw/TabContainer-parameters.css | 1 - .../sap_horizon_hcb/TabContainer-parameters.css | 17 ++++++++--------- .../sap_horizon_hcw/TabContainer-parameters.css | 17 ++++++++--------- 8 files changed, 20 insertions(+), 27 deletions(-) diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index 90aae3f9d408..7cdc67d2b390 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -299,7 +299,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); } @@ -330,7 +330,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); } @@ -354,7 +354,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); } @@ -378,7 +378,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 196fa9f78b5c..1958c6f809dc 100644 --- a/packages/main/src/themes/base/TabContainer-parameters.css +++ b/packages/main/src/themes/base/TabContainer-parameters.css @@ -70,7 +70,6 @@ /* 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); 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_hcb/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css index ee7131b902b8..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); @@ -37,11 +37,10 @@ --_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; 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 ee7131b902b8..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); @@ -37,11 +37,10 @@ --_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; From 02c74878f6a6389b624e66ee2d80423feb5b1fdf Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Fri, 7 Jul 2023 16:30:20 +0300 Subject: [PATCH 4/4] fix: center two click area button and overflow button --- packages/main/src/themes/TabContainer.css | 1 - packages/main/src/themes/TabInStrip.css | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index c347b828a7a9..dd2aa81b5b07 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -74,7 +74,6 @@ } .ui5-tc__overflow > [ui5-button] { - margin-top: 0.25rem; border-radius: 0.75rem; height: 1.5rem; } diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index 7cdc67d2b390..6a770f0bb4b4 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -57,7 +57,6 @@ .ui5-tab-expand-button > [ui5-button] { height: 1.5rem; min-width: 1.5rem; - margin-top: 0.25rem; 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);