From f4cfb094c40e7019060858b416191f0886ce465e Mon Sep 17 00:00:00 2001
From: mkpaz <quizynox@gmail.com>
Date: Wed, 31 Aug 2022 14:09:21 +0400
Subject: [PATCH] Improve tooltip/popover borders

* uniform tooltip and popover border styling
* expose SASS variables
---
 styles/src/components/_popover.scss | 17 ++++++++++-------
 styles/src/components/_tooltip.scss | 14 +++++++-------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/styles/src/components/_popover.scss b/styles/src/components/_popover.scss
index b7bf8c7..9d74db6 100644
--- a/styles/src/components/_popover.scss
+++ b/styles/src/components/_popover.scss
@@ -3,16 +3,19 @@
 @use "../settings/config" as cfg;
 @use "../settings/effects";
 
-$padding-x: 1em !default;
-$padding-y: 1em !default;
+$color-bg:     -color-bg-overlay !default;
+$color-fg:     -color-fg-default !default;
+$color-border: -color-border-default !default;
+$padding-x: 10px !default;
+$padding-y: 10px !default;
 
 .popover {
-  -fx-background-color: -color-bg-overlay;
+  -fx-background-color: $color-bg;
 
   >.border {
-    -fx-stroke: -color-border-default;
+    -fx-stroke: $color-border;
     -fx-stroke-width: cfg.$border-width;
-    @include effects.shadow(-color-bg-inset, cfg.$popup-shadow);
+    @include effects.shadow($color-bg, cfg.$popup-shadow);
   }
 
   >.content {
@@ -22,7 +25,7 @@ $padding-y: 1em !default;
       -fx-padding: 0 0 1em 0;
 
       >.text {
-        -fx-text-fill: -color-fg-default;
+        -fx-text-fill: $color-fg;
         -fx-font-size: cfg.$font-title-4;
         -fx-alignment: CENTER_LEFT;
       }
@@ -34,7 +37,7 @@ $padding-y: 1em !default;
           }
 
           >.line {
-            -fx-stroke: -color-fg-default;
+            -fx-stroke: $color-fg;
             -fx-stroke-width: cfg.$border-width;
           }
         }
diff --git a/styles/src/components/_tooltip.scss b/styles/src/components/_tooltip.scss
index 0b675b4..1c9a1e7 100755
--- a/styles/src/components/_tooltip.scss
+++ b/styles/src/components/_tooltip.scss
@@ -3,20 +3,20 @@
 @use "../settings/config" as cfg;
 @use "../settings/effects";
 
-$color-bg:      -color-bg-overlay !default;
-$color-fg:      -color-fg-default !default;
-$color-shadow:  -color-bg-overlay !default;
-$opacity:       0.85 !default;
+$color-bg:     -color-bg-overlay !default;
+$color-fg:     -color-fg-default !default;
+$color-border: -color-border-default !default;
+$opacity:      0.85 !default;
 
 $padding-x: cfg.$padding-x !default;
 $padding-y: cfg.$padding-y !default;
 
 .tooltip {
-  -fx-background-color: $color-bg;
-  -fx-background-insets: 0;
+  -fx-background-color: $color-border, $color-bg;
+  -fx-background-insets: 0, cfg.$border-width;
   -fx-text-fill: $color-fg;
   -fx-background-radius: cfg.$border-radius;
   -fx-padding: $padding-y $padding-x $padding-y $padding-x;
   -fx-opacity: $opacity;
-  @include effects.shadow(-color-bg-inset, 8);
+  @include effects.shadow($color-bg, cfg.$popup-shadow);
 }
\ No newline at end of file