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;
}