From 67565d56434dd436ff099606568cbd0d5901ead9 Mon Sep 17 00:00:00 2001 From: Elena Stoyanova Date: Tue, 19 Apr 2022 11:37:57 +0300 Subject: [PATCH] feat(ui5-panel): implement SAP Horizon themes (#5058) * feat(ui5-panel): implement SAP Horizon themes - existing themes adjustments - implementation of Horizon themes Related to: #5007 * remove font-weight * additional fixes --- packages/main/src/themes/Panel.css | 29 +++++++++++++------ .../main/src/themes/base/Panel-parameters.css | 8 ++--- .../main/src/themes/base/sizes-parameters.css | 5 +++- .../themes/sap_belize/Panel-parameters.css | 12 ++++++++ .../themes/sap_belize/parameters-bundle.css | 2 +- .../sap_belize_hcb/Panel-parameters.css | 8 +++++ .../sap_belize_hcw/Panel-parameters.css | 8 +++++ .../themes/sap_fiori_3/Panel-parameters.css | 1 - .../sap_fiori_3_dark/Panel-parameters.css | 1 - .../themes/sap_horizon/Panel-parameters.css | 5 ++-- .../sap_horizon_dark/Panel-parameters.css | 5 ++-- .../sap_horizon_exp/Panel-parameters.css | 1 - .../sap_horizon_hcb/Panel-parameters.css | 3 ++ .../sap_horizon_hcw/Panel-parameters.css | 4 +++ 14 files changed, 68 insertions(+), 24 deletions(-) create mode 100644 packages/main/src/themes/sap_belize/Panel-parameters.css diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css index 43a35f361cd2..08869ed5c707 100644 --- a/packages/main/src/themes/Panel.css +++ b/packages/main/src/themes/Panel.css @@ -6,8 +6,11 @@ :host { font-family: "72override", var(--sapFontFamily); - background-color: var(--_ui5_panel_background_color); + background-color: var(--sapGroup_TitleBackground); border-radius: var(--_ui5_panel_border_radius); +} + +:host(:not([collapsed])) { border-bottom: var(--_ui5_panel_border_bottom); } @@ -16,20 +19,18 @@ } .ui5-panel-header { - height: var(--_ui5_panel_header_height); + min-height: var(--_ui5_panel_header_height); width: 100%; display: flex; justify-content: flex-start; align-items: center; outline: none; box-sizing: border-box; - padding-right: 1rem; - padding-left: .25rem; - border-bottom: 1px solid transparent; + padding-right: var(--_ui5_panel_header_padding_right); } .ui5-panel-header-icon { - color: var(--sapContent_IconColor); + color: var(--_ui5_panel_icon_color); } .ui5-panel-header-button-animated { @@ -68,10 +69,10 @@ text-overflow: ellipsis; white-space: nowrap; font-family: "72override", var(--sapFontHeaderFamily); - font-size: var(--sapFontHeader5Size); + font-size: var(--sapGroup_TitleFontSize); font-weight: normal; color: var(--sapGroup_TitleTextColor); - font-weight: var(--_ui5_panel_title_font_weight); + font-weight: normal; } .ui5-panel-content { @@ -91,6 +92,16 @@ margin-right: .25rem; } -:host([fixed]:not([collapsed]):not([_has-header])) .ui5-panel-header { +:host([fixed]:not([collapsed]):not([_has-header])) .ui5-panel-header, +:host([collapsed]) .ui5-panel-header { border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor); +} + +:host([collapsed]) .ui5-panel-header { + border-bottom-left-radius: var(--_ui5_panel_border_radius); + border-bottom-right-radius: var(--_ui5_panel_border_radius); +} + +:host(:not([fixed]):not([collapsed])) .ui5-panel-header { + border-bottom: var(--_ui5_panel_default_header_border); } \ No newline at end of file diff --git a/packages/main/src/themes/base/Panel-parameters.css b/packages/main/src/themes/base/Panel-parameters.css index c31cbdf214a0..3260bb9983e1 100644 --- a/packages/main/src/themes/base/Panel-parameters.css +++ b/packages/main/src/themes/base/Panel-parameters.css @@ -1,11 +1,11 @@ :root { --_ui5_panel_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); - --_ui5_panel_header_height: 3rem; --_ui5_panel_button_root_width: 3rem; - --_ui5_panel_background_color: var(--sapGroup_TitleBackground); --_ui5_panel_border_radius: 0px; --_ui5_panel_border_radius_expanded: 0; - --_ui5_panel_border_bottom: 1px solid var(--sapGroup_TitleBorderColor); + --_ui5_panel_default_header_border: none; + --_ui5_panel_border_bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor); --_ui5_panel_outline_offset: -3px; - --_ui5_panel_title_font_weight: normal; + --_ui5_panel_icon_color: var(--sapContent_IconColor); + --_ui5_panel_header_padding_right: 0.5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index ebb976b1b612..4c9504227e22 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -92,6 +92,9 @@ --_ui5_textarea_padding: 0.5rem 0.625rem; --_ui5_textarea_margin: .25rem 0; + /* Panel */ + --_ui5_panel_header_height: 2.75rem; + /* Radio Button */ --_ui5_radio_button_height: 2.75rem; --_ui5_radio_button_label_side_padding: .875rem; @@ -232,8 +235,8 @@ --_ui5_list_busy_row_height: 2rem; --_ui5_month_picker_item_height: 2rem; - --_ui5_panel_header_height: 2rem; --_ui5_year_picker_item_height: 2rem; + --_ui5_panel_header_height: 2.5rem; --_ui5_tokenizer_root_padding: 0.125rem; --_ui5_token_height: 1.125rem; diff --git a/packages/main/src/themes/sap_belize/Panel-parameters.css b/packages/main/src/themes/sap_belize/Panel-parameters.css new file mode 100644 index 000000000000..b2d67e781638 --- /dev/null +++ b/packages/main/src/themes/sap_belize/Panel-parameters.css @@ -0,0 +1,12 @@ +@import "../base/Panel-parameters.css"; + +:root { + --_ui5_panel_header_padding_right: 1rem; + --_ui5_panel_header_height: 3rem; +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_panel_header_height: 2rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index bcd6f0217a5c..2e53520fbf0e 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -22,7 +22,7 @@ @import "../base/ListItemBase-parameters.css"; @import "../base/MessageStrip-parameters.css"; @import "../base/MonthPicker-parameters.css"; -@import "../base/Panel-parameters.css"; +@import "./Panel-parameters.css"; @import "./PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters.css"; @import "../base/RadioButton-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/Panel-parameters.css b/packages/main/src/themes/sap_belize_hcb/Panel-parameters.css index 0b4ea69df1a4..e507abefb656 100644 --- a/packages/main/src/themes/sap_belize_hcb/Panel-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/Panel-parameters.css @@ -2,4 +2,12 @@ :root { --_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor); + --_ui5_panel_header_padding_right: 1rem; + --_ui5_panel_header_height: 3rem; +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_panel_header_height: 2rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/Panel-parameters.css b/packages/main/src/themes/sap_belize_hcw/Panel-parameters.css index 0b4ea69df1a4..e507abefb656 100644 --- a/packages/main/src/themes/sap_belize_hcw/Panel-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/Panel-parameters.css @@ -2,4 +2,12 @@ :root { --_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor); + --_ui5_panel_header_padding_right: 1rem; + --_ui5_panel_header_height: 3rem; +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_panel_header_height: 2rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3/Panel-parameters.css index 9e9545d4536c..09a5df458a66 100644 --- a/packages/main/src/themes/sap_fiori_3/Panel-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/Panel-parameters.css @@ -1,6 +1,5 @@ @import "../base/Panel-parameters.css"; :root { - --_ui5_panel_header_height: 2.75rem; --_ui5_panel_button_root_width: 2.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css index 9e9545d4536c..09a5df458a66 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css @@ -1,6 +1,5 @@ @import "../base/Panel-parameters.css"; :root { - --_ui5_panel_header_height: 2.75rem; --_ui5_panel_button_root_width: 2.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/Panel-parameters.css b/packages/main/src/themes/sap_horizon/Panel-parameters.css index 113937efa3e7..3f63f79bb66d 100644 --- a/packages/main/src/themes/sap_horizon/Panel-parameters.css +++ b/packages/main/src/themes/sap_horizon/Panel-parameters.css @@ -1,12 +1,11 @@ @import "../base/Panel-parameters.css"; :root { - --_ui5_panel_header_height: 2.75rem; --_ui5_panel_button_root_width: 2.75rem; - --_ui5_panel_background_color: var(--sapGroup_ContentBackground); --_ui5_panel_border_radius: var(--sapElement_BorderCornerRadius); --_ui5_panel_border_bottom: none; + --_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor); --_ui5_panel_outline_offset: -0.125rem; - --_ui5_panel_title_font_weight: bold; --_ui5_panel_border_radius_expanded: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0; + --_ui5_panel_icon_color: var(--sapButton_Lite_TextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css b/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css index 113937efa3e7..3f63f79bb66d 100644 --- a/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css @@ -1,12 +1,11 @@ @import "../base/Panel-parameters.css"; :root { - --_ui5_panel_header_height: 2.75rem; --_ui5_panel_button_root_width: 2.75rem; - --_ui5_panel_background_color: var(--sapGroup_ContentBackground); --_ui5_panel_border_radius: var(--sapElement_BorderCornerRadius); --_ui5_panel_border_bottom: none; + --_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor); --_ui5_panel_outline_offset: -0.125rem; - --_ui5_panel_title_font_weight: bold; --_ui5_panel_border_radius_expanded: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0; + --_ui5_panel_icon_color: var(--sapButton_Lite_TextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/Panel-parameters.css b/packages/main/src/themes/sap_horizon_exp/Panel-parameters.css index 9e9545d4536c..09a5df458a66 100644 --- a/packages/main/src/themes/sap_horizon_exp/Panel-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/Panel-parameters.css @@ -1,6 +1,5 @@ @import "../base/Panel-parameters.css"; :root { - --_ui5_panel_header_height: 2.75rem; --_ui5_panel_button_root_width: 2.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/Panel-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Panel-parameters.css index 0b4ea69df1a4..3c61a5115ee0 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Panel-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Panel-parameters.css @@ -2,4 +2,7 @@ :root { --_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor); + --_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor); + --_ui5_panel_outline_offset: -0.125rem; + --_ui5_panel_icon_color: var(--sapButton_Lite_TextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css index 0b4ea69df1a4..ab521137a433 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css @@ -2,4 +2,8 @@ :root { --_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor); + --_ui5_panel_button_root_width: 2.75rem; + --_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor); + --_ui5_panel_outline_offset: -0.125rem; + --_ui5_panel_icon_color: var(--sapButton_Lite_TextColor); } \ No newline at end of file