refactor: update Lumo upload file list to use base styles (#10063)

Author: web-padawan

packages/upload/src/vaadin-upload-file-list.js

@@ -7,7 +7,6 @@ import './vaadin-upload-file.js';
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { uploadFileListStyles } from './styles/vaadin-upload-file-list-base-styles.js';
 import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
@@ -21,7 +20,7 @@ import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
  * @mixes UploadFileListMixin
  * @private
  */
-class UploadFileList extends UploadFileListMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
+class UploadFileList extends UploadFileListMixin(ThemableMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-upload-file-list';
   }

packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-clear.png

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @import '../src/mixins/field-button.css';
-@import '../src/components/upload-file-list.css';
 @import '../src/components/upload-file.css';
 @import '../src/components/upload-icon.css';
 @import '../src/components/upload.css';
@@ -22,7 +21,11 @@
   --vaadin-upload-file-lumo-inject-modules:
     lumo_mixins_field-button,
     lumo_components_upload-file;
+}
 
-  --vaadin-upload-file-list-lumo-inject: 1;
-  --vaadin-upload-file-list-lumo-inject-modules: lumo_components_upload-file-list;
+:where(:root, :host) {
+  --vaadin-upload-gap: 0;
+  --vaadin-upload-file-list-border-color: var(
+    --lumo-contrast-10pct
+  );
 }

packages/upload/test/visual/lumo/screenshots/upload/baseline/focus-file.png

@@ -12,9 +12,9 @@
   }
 
   :host(:focus-visible) {
-    outline: none;
     border-radius: var(--lumo-border-radius-s);
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: calc(var(--_focus-ring-width) * -1);
   }
 
   [part='status'],
@@ -49,7 +49,8 @@
   }
 
   [part$='button']:focus {
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: calc(var(--_focus-ring-width) * -1);
   }
 
   /* Vertically align icons / buttons with the first line of text */