refactor: improve aura theme for tooltip, add outline shadow (#10698)

Author: jouni

packages/aura/aura.css

@@ -33,6 +33,7 @@
 @import './src/components/select.css';
 @import './src/components/side-nav.css';
 @import './src/components/tabs.css';
+@import './src/components/tooltip.css';
 @import './src/components/upload.css';
 
 :where(:root),

packages/aura/src/components/overlay.css

@@ -10,9 +10,9 @@
     oklch(from var(--aura-background-color-dark) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast-level)))
   );
   --aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast-level)));
-  --aura-overlay-shadow:
-    inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color),
-    var(--aura-shadow-m);
+  --aura-overlay-outline-shadow:
+    inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color);
+  --aura-overlay-shadow: var(--aura-shadow-m);
   --aura-overlay-backdrop-filter: blur(20px) brightness(1.1) saturate(1.2);
   --aura-overlay-surface-opacity: 0.85;
 
@@ -26,7 +26,7 @@
   --vaadin-overlay-background: var(--aura-surface-color);
   --aura-surface-level: 4;
   --aura-surface-opacity: var(--aura-overlay-surface-opacity);
-  box-shadow: var(--aura-overlay-shadow);
+  box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-overlay-shadow, var(--aura-overlay-shadow));
   -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
   backdrop-filter: var(--aura-overlay-backdrop-filter);
   font-family: var(--aura-font-family);

packages/aura/src/components/tooltip.css

@@ -0,0 +1,7 @@
+vaadin-tooltip::part(overlay) {
+  color: var(--vaadin-tooltip-text-color, var(--vaadin-text-color));
+  font-size: var(--vaadin-tooltip-font-size, var(--aura-font-size-s));
+  font-weight: var(--vaadin-tooltip-font-weight, var(--aura-font-weight-medium));
+  line-height: var(--vaadin-tooltip-line-height, var(--aura-line-height-s));
+  box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-tooltip-shadow, var(--aura-shadow-s));
+}