Use overlay color variable for popover and tooltip

sampler/src/main/resources/assets/styles/index.css

@@ -306,6 +306,11 @@
     -fx-background-color: #388e3c;
 }
 
+.popover .date-picker-popup {
+    -fx-background-color: transparent;
+    -fx-background-insets: 0;
+}
+
 .bordered {
     -fx-border-width: 1px;
     -fx-border-color: -color-border-muted;

styles/src/components/_popover.scss

@@ -7,7 +7,7 @@ $padding-x: 1em !default;
 $padding-y: 1em !default;
 
 .popover {
-  -fx-background-color: -color-bg-default;
+  -fx-background-color: -color-bg-overlay;
 
   >.border {
     -fx-stroke: -color-border-default;

styles/src/components/_tooltip.scss

@@ -3,9 +3,9 @@
 @use "../settings/config" as cfg;
 @use "../settings/effects";
 
-$color-bg:     -color-neutral-emphasis-plus !default;
-$color-fg:     -color-fg-emphasis   !default;
-$color-shadow: -color-bg-inset      !default;
+$color-bg:      -color-bg-overlay !default;
+$color-fg:      -color-fg-default !default;
+$color-shadow:  -color-bg-overlay !default;
 $opacity:       0.85 !default;
 
 $padding-x: cfg.$padding-x !default;

styles/src/general/_root.scss

@@ -11,6 +11,7 @@
   -color-fg-emphasis:           palette.$fg-onEmphasis;
 
   -color-bg-default:            palette.$canvas-default;
+  -color-bg-overlay:            palette.$canvas-overlay;
   -color-bg-subtle:             palette.$canvas-subtle;
   -color-bg-inset:              palette.$canvas-inset;
 

styles/src/nord-dark.scss

@@ -78,9 +78,4 @@ $nord16: #B48EAD;
   $elevation-color: -color-bg-inset
 );
 
-@forward "components/tooltip" as tooltip-* with (
-  $color-bg: -color-bg-inset,
-  $color-fg: -color-fg-default
-);
-
 @use "components";

styles/src/primer-dark.scss

@@ -59,9 +59,4 @@
   $elevation-color: -color-bg-inset
 );
 
-@forward "components/tooltip" as tooltip-* with (
-  $color-bg: -color-bg-inset,
-  $color-fg: -color-fg-default
-);
-
 @use "components";