refactor: rename shadow custom CSS properties in base styles (#10258)

Author: web-padawan

packages/app-layout/src/styles/vaadin-app-layout-base-styles.js

@@ -146,7 +146,7 @@ export const appLayoutStyles = css`
   :host([overlay]) [part='drawer'] {
     top: 0;
     bottom: 0;
-    box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
+    box-shadow: var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
     background: var(--vaadin-app-layout-drawer-background, var(--vaadin-background-color));
   }
 

packages/dialog/src/styles/vaadin-dialog-overlay-base-styles.js

@@ -33,7 +33,7 @@ export const dialogOverlayBase = css`
     background-origin: border-box;
     border: var(--vaadin-dialog-border-width, var(--vaadin-overlay-border-width, 1px)) solid
       var(--vaadin-dialog-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary)));
-    box-shadow: var(--vaadin-dialog-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
+    box-shadow: var(--vaadin-dialog-shadow, var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
     border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
     width: max-content;
     min-width: min(var(--vaadin-dialog-min-width, 4em), 100%);

packages/login/src/styles/vaadin-login-overlay-wrapper-base-styles.js

@@ -16,10 +16,7 @@ const loginOverlayWrapper = css`
     border: var(--vaadin-login-overlay-border-width, var(--vaadin-overlay-border-width, 1px)) solid
       var(--vaadin-login-overlay-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary)));
     border-radius: var(--vaadin-login-overlay-border-radius, var(--vaadin-radius-l));
-    box-shadow: var(
-      --vaadin-login-overlay-box-shadow,
-      var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3))
-    );
+    box-shadow: var(--vaadin-login-overlay-shadow, var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
   }
 
   [part='card'] {

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

@@ -58,7 +58,7 @@ export const overlayStyles = css`
     border: var(--vaadin-overlay-border-width, 1px) solid
       var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary));
     border-radius: var(--vaadin-overlay-border-radius, var(--vaadin-radius-m));
-    box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
+    box-shadow: var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
     box-sizing: border-box;
     max-width: 100%;
     overflow: auto;

packages/popover/src/styles/vaadin-popover-overlay-base-styles.js

@@ -38,7 +38,7 @@ const popoverOverlay = css`
     border: var(--_border-width) solid
       var(--vaadin-popover-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary)));
     background: var(--vaadin-popover-background, var(--vaadin-overlay-background, var(--vaadin-background-color)));
-    box-shadow: var(--vaadin-popover-box-shadow, var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
+    box-shadow: var(--vaadin-popover-shadow, var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
     border-radius: var(--vaadin-popover-border-radius, var(--vaadin-overlay-border-radius, var(--vaadin-radius-m)));
   }
 

packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js

@@ -25,7 +25,7 @@ export const tooltipOverlayStyles = css`
     box-shadow:
       0 0 0 var(--vaadin-tooltip-border-width, 1px)
         var(--vaadin-tooltip-border-color, var(--vaadin-border-color-secondary)),
-      var(--vaadin-tooltip-box-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2));
+      var(--vaadin-tooltip-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2));
   }
 
   [part='content'] {