refactor: align card and dashboard-widget styles, add shadow props (#10659) (#10660)

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: vaadin-bot

packages/aura/src/components/card.css

@@ -10,7 +10,7 @@
 vaadin-card {
   background: var(--vaadin-card-background, var(--aura-surface-color) padding-box);
   background-clip: padding-box;
-  --aura-surface-level: 1;
+  --aura-surface-level: 2;
   --aura-surface-opacity: 0.5;
   border: var(--vaadin-card-border-width) solid transparent;
   --_padding: calc(var(--vaadin-card-padding) - var(--vaadin-card-border-width, 1px));

packages/aura/src/components/dashboard.css

@@ -3,12 +3,13 @@
   --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium);
   --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
   --vaadin-dashboard-widget-header-gap: var(--vaadin-gap-xs);
-  --vaadin-dashboard-widget-border-color: var(--vaadin-border-color-secondary);
-  --vaadin-dashboard-widget-background: var(--aura-surface-color) padding-box;
   --vaadin-dashboard-widget-border-radius: var(--vaadin-radius-m);
 }
 
 vaadin-dashboard-widget {
+  --aura-surface-level: 2;
+  --aura-surface-opacity: 0.5;
+  background: var(--vaadin-dashboard-widget-background, var(--aura-surface-color) padding-box);
   border-radius: calc(var(--vaadin-dashboard-widget-border-radius) - var(--vaadin-dashboard-widget-border-width, 1px));
 
   &::before {
@@ -27,6 +28,20 @@ vaadin-dashboard-widget {
     clip-path: inset(0);
     transition-duration: 50ms;
   }
+
+  &[theme~='outlined'] {
+    --vaadin-dashboard-widget-border-color: var(--vaadin-border-color);
+  }
+
+  &[theme~='elevated'] {
+    --aura-surface-opacity: 0.7;
+    --aura-surface-level: 3;
+    box-shadow: var(--vaadin-dashboard-widget-shadow, var(--aura-shadow-s));
+  }
+
+  &[editable] {
+    --vaadin-dashboard-widget-shadow: var(--aura-shadow-s);
+  }
 }
 
 vaadin-dashboard-section {

packages/aura/src/shadow.css

@@ -4,5 +4,7 @@
     oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h / 0.2),
     oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
   );
+  --aura-shadow-xs: 0 1px 4px -2px var(--aura-shadow-color);
+  --aura-shadow-s: 0 2px 5px -1px var(--aura-shadow-color);
   --aura-shadow-m: 0 8px 16px -3px var(--aura-shadow-color);
 }