refactor: update upload Lumo CSS to use base styles (#10552)

Author: web-padawan

packages/upload/src/styles/vaadin-upload-base-styles.js

@@ -21,7 +21,8 @@ export const uploadStyles = css`
 
   :host([dragover-valid]) {
     --vaadin-upload-background: var(--vaadin-background-container);
-    --vaadin-upload-border: 1px dashed var(--vaadin-text-color);
+    --vaadin-upload-border-color: var(--vaadin-text-color);
+    border-style: dashed;
   }
 
   :host([hidden]) {

packages/upload/src/vaadin-upload.d.ts

@@ -147,6 +147,21 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
  * `dragover-valid`     | Set when the dragged file is valid with `maxFiles` and `accept` criteria
  * `max-files-reached`  | Set when maximum number of files that the user is allowed to add has been reached
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                      | Description
+ * -----------------------------------------|-------------
+ * `--vaadin-upload-background`             | The host element background
+ * `--vaadin-upload-border-color`           | The host element border color
+ * `--vaadin-upload-border-radius`          | The host element border radius
+ * `--vaadin-upload-border-width`           | The host element border width
+ * `--vaadin-upload-padding`                | The host element padding
+ * `--vaadin-upload-drop-label-color`       | The drop label color
+ * `--vaadin-upload-drop-label-font-size`   | The drop label font size
+ * `--vaadin-upload-drop-label-font-weight` | The drop label font weight
+ * `--vaadin-upload-drop-label-gap`         | The drop label gap
+ * `--vaadin-upload-drop-label-line-height` | The drop label line height
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} file-reject - Fired when a file cannot be added to the queue due to a constrain.

packages/upload/src/vaadin-upload.js

@@ -45,6 +45,21 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
  * `dragover-valid`     | Set when the dragged file is valid with `maxFiles` and `accept` criteria
  * `max-files-reached`  | Set when maximum number of files that the user is allowed to add has been reached
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                      | Description
+ * -----------------------------------------|-------------
+ * `--vaadin-upload-background`             | The host element background
+ * `--vaadin-upload-border-color`           | The host element border color
+ * `--vaadin-upload-border-radius`          | The host element border radius
+ * `--vaadin-upload-border-width`           | The host element border width
+ * `--vaadin-upload-padding`                | The host element padding
+ * `--vaadin-upload-drop-label-color`       | The drop label color
+ * `--vaadin-upload-drop-label-font-size`   | The drop label font size
+ * `--vaadin-upload-drop-label-font-weight` | The drop label font weight
+ * `--vaadin-upload-drop-label-gap`         | The drop label gap
+ * `--vaadin-upload-drop-label-line-height` | The drop label line height
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} file-reject - Fired when a file cannot be added to the queue due to a constrain.
@@ -75,6 +90,10 @@ class Upload extends UploadMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInj
     return uploadStyles;
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   /** @protected */
   render() {
     return html`

packages/upload/test/visual/base/screenshots/upload/baseline/ltr-dragover-valid.png

@@ -34,6 +34,11 @@ describe('upload', () => {
         await visualDiff(div, `${dir}-nodrop`);
       });
 
+      it('dragover-valid', async () => {
+        element.setAttribute('dragover-valid', '');
+        await visualDiff(div, `${dir}-dragover-valid`);
+      });
+
       it('files', async () => {
         element.files = [
           { name: 'Don Quixote.pdf', progress: 100, complete: true },