fix(ui5-upload-collection): correct drag and drop text and icon color (…

…#8863)

Downport ui5-upload-collection drag and drop overlay colors change

Related to #8616

packages/fiori/src/themes/UploadCollection.css

@@ -22,6 +22,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
+	border-radius: var(--ui5_upload_collection_drag_overlay_border_radius);
 }
 
 .uc-drag-overlay {
@@ -41,7 +42,8 @@
 	left: 0;
 	right: 0;
 	background-color: var(--sapGroup_ContentBackground);
-	opacity: 0.8;
+	opacity: var(--ui5_upload_collection_drag_overlay_opacity);
+	border-radius: var(--ui5_upload_collection_drag_overlay_border_radius);
 }
 
 /* use pseudo element to set opacity only for the content and not on the border */
@@ -54,19 +56,20 @@
 	right: 0;
 	background-color: var(--ui5_upload_collection_drop_overlay_background);
 	opacity: 0.05;
+	border-radius: var(--ui5_upload_collection_drag_overlay_border_radius);
 }
 
 .uc-dnd-overlay [ui5-icon] {
 	width: 4rem;
 	height: 4rem;
 	margin-bottom: 1rem;
-	color: var(--sapContent_NonInteractiveIconColor);
+	color: var(--ui5_upload_collection_drag_overlay_icon_color);
 }
 
 .uc-dnd-overlay .dnd-overlay-text {
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontHeader4Size);
-	color: var(--sapContent_NonInteractiveIconColor);
+	color: var(--ui5_upload_collection_drag_overlay_text_color);
 }
 
 .uc-dnd-overlay [ui5-icon],

packages/fiori/src/themes/base/UploadCollection-parameters.css

@@ -6,4 +6,8 @@
 	--ui5_upload_collection_thumbnail_margin_inline_end: 0.75rem;
 	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.75rem;
 	--ui5_upload_collection_small_size_buttons_margin_inline_start: 0;
+	--ui5_upload_collection_drag_overlay_text_color: var(--sapContent_NonInteractiveIconColor);
+	--ui5_upload_collection_drag_overlay_icon_color: var(--sapContent_NonInteractiveIconColor);
+	--ui5_upload_collection_drag_overlay_border_radius: 0;
+	--ui5_upload_collection_drag_overlay_opacity: 0.8;
 }

packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css

@@ -2,4 +2,10 @@
 
 :root {
 	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
+	--ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor);
+	--ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor);
+	--ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapField_BorderColor);
+	--ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor);
+	--ui5_upload_collection_drag_overlay_border_radius: 0.5rem;
+	--ui5_upload_collection_drag_overlay_opacity: 0.5;
 }

packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css

@@ -2,4 +2,10 @@
 
 :root {
 	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
+	--ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor);
+	--ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor);
+	--ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapField_BorderColor);
+	--ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor);
+	--ui5_upload_collection_drag_overlay_border_radius: 0.5rem;
+	--ui5_upload_collection_drag_overlay_opacity: 0.5;
 }

packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css

@@ -1,8 +1,11 @@
 @import "../base/UploadCollection-parameters.css";
 
 :root {
-	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
-	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
-	--ui5_upload_collection_drop_overlay_background: transparent;
+	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapField_BorderColor);
+	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_DragAndDropActiveColor);
+	--ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor);
 	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
+	--ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor);
+	--ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor);
+	--ui5_upload_collection_drag_overlay_opacity: 0.5;
 }

packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css

@@ -1,7 +1,11 @@
 @import "../base/UploadCollection-parameters.css";
 
 :root {
-	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
-	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
+	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapField_BorderColor);
+	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_DragAndDropActiveColor);
 	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
+	--ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor);
+	--ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor);
+	--ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor);
+	--ui5_upload_collection_drag_overlay_opacity: 0.5;
 }