fix(file-picker): add background color to uploaded items in list (VIV…

…-1823) (#1857)

libs/components/src/lib/file-picker/README.md

@@ -141,6 +141,13 @@ The `helper-text` slot allows you to use rich content as the file picker's helpe
 </vwc-file-picker>
 ```
 
+## CSS Variables
+
+### file-picker-list-item-background-color
+
+Each added file in the preview list has a default background-color of `vvd-color-canvas` (`#fff` in light theme, `#000` in dark).  
+If needed, the background of the item can be changed using the `--file-picker-list-item-background-color` CSS variable.
+
 ## Properties
 
 <div class="table-wrapper">

libs/components/src/lib/file-picker/file-picker.scss

@@ -6,6 +6,7 @@
 @use '../../../../shared/src/lib/sass/mixins/focus' as focus-variables;
 
 $low-ink-color: --_low-ink-color;
+$file-picker-list-item-background-color: --file-picker-list-item-background-color;
 
 :host {
 	display: block;
@@ -55,8 +56,12 @@ $low-ink-color: --_low-ink-color;
 .dz-preview {
 	display: grid;
 	box-sizing: border-box;
-	padding: 6px 12px;
+	padding: 8px;
 	border-radius: #{border-radius-variables.$border-radius-normal};
+	background-color: var(
+		#{$file-picker-list-item-background-color},
+		var(#{constants.$vvd-color-canvas})
+	);
 	grid-template-columns: 1fr auto;
 	grid-template-rows: auto auto;
 	inline-size: 100%;
@@ -116,13 +121,13 @@ $low-ink-color: --_low-ink-color;
 }
 
 .preview-list {
-	&:empty {
-		display: none;
-	}
-
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	margin-block-start: 12px;
 	overflow-y: auto;
+
+	&:empty {
+		display: none;
+	}
 }

libs/components/src/lib/file-picker/ui.test.ts

@@ -32,10 +32,11 @@ const addFile = async (
 };
 
 test('should show the component', async ({ page }: { page: Page }) => {
-	const template = `<vwc-layout column-basis="block">
+	const template = `<div style="background-color: var(--vvd-color-neutral-50); padding: 8px;"><vwc-layout column-basis="block">
 	  <vwc-file-picker label="Pick files" helper-text="multiple files of any type" max-file-size="0.001" accept="image/*">
 	  	Drag & Drop or click to upload
 		</vwc-file-picker>
+		</div>
 	  <vwc-file-picker label="Pick files" helper-text="multiple files of any type" size="expanded">
 	  	Drag & Drop or click to upload
 		</vwc-file-picker>