fix(ui5-popover): correct opacity (#9839)

The background of the modal popover was black which made the context page not visible. So opacity was added to grey out the background Fixes: #9823
SAP · Sep 16, 2024 · 371c547 · 371c547
1 parent 7d88950
commit 371c547
Show file tree

Hide file tree

Showing 16 changed files with 27 additions and 10 deletions.
diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
@@ -152,7 +152,7 @@
 
 :host::backdrop {
 	background-color: var(--_ui5_popup_block_layer_background);
-	opacity: var(--_ui5_dialog_block_layer_opacity);
+	opacity: var(--_ui5_popup_block_layer_opacity);
 }
 
 .ui5-block-layer {

diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css
@@ -92,6 +92,7 @@
 
 :host([modal])::backdrop {
 	background-color: var(--_ui5_popup_block_layer_background);
+	opacity: var(--_ui5_popup_block_layer_opacity);
 }
 
 :host([modal]) .ui5-block-layer {

diff --git a/packages/main/src/themes/base/Dialog-parameters.css b/packages/main/src/themes/base/Dialog-parameters.css
@@ -9,5 +9,4 @@
 	--_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;
-	--_ui5_dialog_block_layer_opacity: 0.2;
 }
diff --git a/packages/main/src/themes/base/PopupBlockLayer-parameters.css b/packages/main/src/themes/base/PopupBlockLayer-parameters.css
@@ -1,3 +1,4 @@
 :root {
 	--_ui5_popup_block_layer_background: var(--sapBlockLayer_Background);
+	--_ui5_popup_block_layer_opacity: 0.2;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css
@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_dialog_header_state_line_height: 0.125rem;
-	--_ui5_dialog_block_layer_opacity: 0.3;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/PopupBlockLayer-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/PopupBlockLayer-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/PopupBlockLayer-parameters.css";
+
+:root {
+	--_ui5_popup_block_layer_opacity: 0.3;
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -30,8 +30,8 @@
 @import "./MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
+@import "./PopupBlockLayer-parameters.css";
 @import "./PopupsCommon-parameters.css";
-@import "../base/PopupBlockLayer-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css
@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_dialog_header_state_line_height: 0.125rem;
-	--_ui5_dialog_block_layer_opacity: 0.3;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/PopupBlockLayer-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/PopupBlockLayer-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/PopupBlockLayer-parameters.css";
+
+:root {
+	--_ui5_popup_block_layer_opacity: 0.3;
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -29,8 +29,8 @@
 @import "./MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
+@import "./PopupBlockLayer-parameters.css";
 @import "./PopupsCommon-parameters.css";
-@import "../base/PopupBlockLayer-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "../base/RatingIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css
@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_dialog_header_state_line_height: 0.125rem;
-	--_ui5_dialog_block_layer_opacity: 0.3;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/PopupBlockLayer-parameters.css b/packages/main/src/themes/sap_horizon_hcb/PopupBlockLayer-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/PopupBlockLayer-parameters.css";
+
+:root {
+	--_ui5_popup_block_layer_opacity: 0.3;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -30,8 +30,8 @@
 @import "./MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
+@import "./PopupBlockLayer-parameters.css";
 @import "./PopupsCommon-parameters.css";
-@import "../base/PopupBlockLayer-parameters.css";
 @import "./ProgressIndicator-parameters";
 @import "./RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css
@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_dialog_header_state_line_height: 0.125rem;
-	--_ui5_dialog_block_layer_opacity: 0.3;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/PopupBlockLayer-parameters.css b/packages/main/src/themes/sap_horizon_hcw/PopupBlockLayer-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/PopupBlockLayer-parameters.css";
+
+:root {
+	--_ui5_popup_block_layer_opacity: 0.3;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -29,8 +29,8 @@
 @import "./MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
 @import "../base/Popover-parameters.css";
+@import "./PopupBlockLayer-parameters.css";
 @import "./PopupsCommon-parameters.css";
-@import "../base/PopupBlockLayer-parameters.css";
 @import "../sap_horizon_hcb/ProgressIndicator-parameters";
 @import "./RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";