diff --git a/packages/fiori/test/pages/DialogWithBar.html b/packages/fiori/test/pages/DialogWithBar.html index 6ff4eeb816be..52c55448db7f 100644 --- a/packages/fiori/test/pages/DialogWithBar.html +++ b/packages/fiori/test/pages/DialogWithBar.html @@ -4,7 +4,7 @@ - Dialog test page + Dialog with Bar/Toolbar test page @@ -16,6 +16,12 @@ #dialog-bar::part(footer) { padding-inline: 0; } + + #dialog-custom-colors::part(header) { + --sapPageHeader_TextColor: blue; + --sapPageHeader_Background: lightblue; + --sapNegativeElementColor: blue; + } @@ -59,6 +65,14 @@ + Open Dialog with Toolbar and overstyled Header + + Dialog with state + + + + + diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css index 4f18624a43ab..0e3026922293 100644 --- a/packages/main/src/themes/Dialog.css +++ b/packages/main/src/themes/Dialog.css @@ -84,18 +84,18 @@ } :host([state="Negative"]) .ui5-dialog-value-state-icon { - color: var(--_ui5_dialog_header_error_state_icon_color); + color: var(--sapNegativeElementColor); } :host([state="Information"]) .ui5-dialog-value-state-icon { - color: var(--_ui5_dialog_header_information_state_icon_color); + color: var(--sapInformativeElementColor); } :host([state="Positive"]) .ui5-dialog-value-state-icon { - color: var(--_ui5_dialog_header_success_state_icon_color); + color: var(--sapPositiveElementColor); } :host([state="Critical"]) .ui5-dialog-value-state-icon { - color: var(--_ui5_dialog_header_warning_state_icon_color); + color: var(--sapCriticalElementColor); } .ui5-popup-header-root { diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css index 2e17cdc0a042..450f6b3bde82 100644 --- a/packages/main/src/themes/PopupsCommon.css +++ b/packages/main/src/themes/PopupsCommon.css @@ -104,7 +104,7 @@ } .ui5-popup-header-root { - background: var(--_ui5_popup_header_background); + background: var(--sapPageHeader_Background); } /*** Responsive paddings for the Header and Footer ***/ diff --git a/packages/main/src/themes/base/Dialog-parameters.css b/packages/main/src/themes/base/Dialog-parameters.css index 8f647b107918..9109b40e61a4 100644 --- a/packages/main/src/themes/base/Dialog-parameters.css +++ b/packages/main/src/themes/base/Dialog-parameters.css @@ -4,9 +4,5 @@ --_ui5_dialog_header_focus_left_offset: 2px; --_ui5_dialog_header_focus_right_offset: 2px; --_ui5_dialog_header_border_radius: 0px; - --_ui5_dialog_header_error_state_icon_color: var(--sapNegativeElementColor); - --_ui5_dialog_header_information_state_icon_color: var(--sapInformativeElementColor); - --_ui5_dialog_header_success_state_icon_color: var(--sapPositiveElementColor); - --_ui5_dialog_header_warning_state_icon_color: var(--sapCriticalElementColor); --_ui5_dialog_header_state_line_height: 0.0625rem; } diff --git a/packages/main/src/themes/base/PopupsCommon-parameters.css b/packages/main/src/themes/base/PopupsCommon-parameters.css index 44ca594b9e7e..1d416053ed41 100644 --- a/packages/main/src/themes/base/PopupsCommon-parameters.css +++ b/packages/main/src/themes/base/PopupsCommon-parameters.css @@ -8,7 +8,6 @@ --_ui5_popup_viewport_margin: 10px; --_ui5_popup_header_prop_header_text_alignment: flex-start; --_ui5_popup_border_radius: var(--sapElement_BorderCornerRadius); - --_ui5_popup_header_background: var(--sapPageHeader_Background); --_ui5_popup_header_shadow: var(--sapContent_HeaderShadow); --_ui5_popup_header_border: none; }