refactor: remove shorthand border props, rename border to divider (#10287)

Author: jouni

packages/aura/src/components/upload.css

@@ -2,8 +2,8 @@
   --vaadin-upload-background: var(--aura-surface) padding-box;
   --vaadin-upload-border: 1px solid var(--vaadin-border-color-secondary);
   --vaadin-upload-padding: var(--vaadin-padding-s);
-  --vaadin-upload-file-list-border-color: var(--vaadin-border-color-secondary);
-  --vaadin-upload-file-list-border-width: 1px;
+  --vaadin-upload-file-list-divider-color: var(--vaadin-border-color-secondary);
+  --vaadin-upload-file-list-divider-width: 1px;
   --vaadin-upload-file-error-color: var(--vaadin-text-color-secondary);
   --vaadin-upload-file-warning-color: var(--aura-red);
   --vaadin-upload-file-done-color: var(--aura-green);
@@ -124,7 +124,7 @@ vaadin-upload[theme~='no-border'] {
   --vaadin-upload-padding: 0;
   --vaadin-upload-background: transparent;
   --vaadin-upload-border: none;
-  --vaadin-upload-file-list-border-width: 0;
+  --vaadin-upload-file-list-divider-width: 0;
   --_divider-offset-start: 0px;
   --_divider-offset-end: 0px;
   outline-offset: 2px;

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

@@ -9,11 +9,8 @@ import { css } from 'lit';
 export const uploadStyles = css`
   :host {
     background: var(--vaadin-upload-background, transparent);
-    border: var(
-      --vaadin-upload-border,
-      var(--vaadin-upload-border-width, 1px) solid
-        var(--vaadin-upload-border-color, var(--vaadin-border-color-secondary))
-    );
+    border: var(--vaadin-upload-border-width, 1px) solid
+      var(--vaadin-upload-border-color, var(--vaadin-border-color-secondary));
     border-radius: var(--vaadin-upload-border-radius, var(--vaadin-radius-m));
     box-sizing: border-box;
     display: flex;

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

@@ -84,11 +84,8 @@ export const uploadFileStyles = css`
 
   button {
     background: var(--vaadin-upload-file-button-background, transparent);
-    border: var(
-      --vaadin-upload-file-button-border,
-      var(--vaadin-upload-file-button-border-width, 1px) solid
-        var(--vaadin-upload-file-button-border-color, transparent)
-    );
+    border: var(--vaadin-upload-file-button-border-width, 1px) solid
+      var(--vaadin-upload-file-button-border-color, transparent);
     border-radius: var(--vaadin-upload-file-button-border-radius, var(--vaadin-radius-m));
     color: var(--vaadin-upload-file-button-text-color, var(--vaadin-text-color));
     cursor: var(--vaadin-clickable-cursor);

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

@@ -27,10 +27,7 @@ export const uploadFileListStyles = css`
   }
 
   ::slotted(li:not(:last-of-type)) {
-    border-bottom: var(
-      --vaadin-upload-file-list-border,
-      var(--vaadin-upload-file-list-border-width, 1px) solid
-        var(--vaadin-upload-file-list-border-color, var(--vaadin-border-color-secondary))
-    );
+    border-bottom: var(--vaadin-upload-file-list-divider-width, 1px) solid
+      var(--vaadin-upload-file-list-divider-color, var(--vaadin-border-color-secondary));
   }
 `;

packages/vaadin-lumo-styles/components/upload.css

@@ -25,7 +25,7 @@
 
 :where(:root, :host) {
   --vaadin-upload-gap: 0;
-  --vaadin-upload-file-list-border-color: var(
+  --vaadin-upload-file-list-divider-color: var(
     --lumo-contrast-10pct
   );
 }