Fix shadow effect for popup controls

Also introduces "-color-shadow-default" color variables.

docs/colors/global-variables.md

@@ -31,10 +31,11 @@ Background colors.
 Border colors.
 
 | Color                   | Usage                                                                        |
-|-------|-------|
+|-------------------------|------------------------------------------------------------------------------|
 | `-color-border-default` | Default color to create bounds around content.                               |
 | `-color-border-muted`   | For dividers to emphasize the separation between items, columns or sections. |
 | `-color-border-subtle`  | Faint border color.                                                          |
+| `-color-shadow-default` | Color for creating shadow effects around controls.                           |
 
 The below colors are all accent colors. Use them according to their role. The variable names are self-explaining.
 

styles/src/components/_menu.scss

@@ -158,7 +158,7 @@ $separator-padding:       map-get(cfg.$separators, "small") !default;
   -fx-background-insets: 0, 1;
   -fx-padding: cfg.$popup-padding-y cfg.$popup-padding-x cfg.$popup-padding-y cfg.$popup-padding-x;
   -fx-background-radius: cfg.$border-radius;
-  @include effects.shadow($color-menuitem-bg, cfg.$popup-shadow);
+  @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
 
   // no idea what's that thing and how to trigger its appearance
   >.scroll-arrow {

styles/src/components/_popover.scss

@@ -11,11 +11,11 @@ $padding-y:     10px !default;
 
 .popover {
   -fx-background-color: $color-bg;
+  @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
 
   >.border {
     -fx-stroke: $color-border;
     -fx-stroke-width: cfg.$border-width;
-    @include effects.shadow($color-bg, cfg.$popup-shadow);
   }
 
   >.content {

styles/src/components/_tab-pane.scss

@@ -85,10 +85,6 @@ $tab-float-width:           150px !default;
             -fx-background-color: $color-fg;
             -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
             -fx-scale-shape: false;
-
-            &:hover {
-              @include effects.highlight($color-fg, 1);
-            }
           }
         }
 

styles/src/components/_titled-pane.scss

@@ -11,7 +11,7 @@ $margin-arrow:   10px !default;
 $margin-content: 20px !default;
 
 // for elevation darker than bg color should be used for both light and dark modes
-$elevation-color:       if(cfg.$darkMode, -color-bg-inset, -color-border-default) !default;
+$elevation-color:       -color-shadow-default      !default;
 $elevation-interactive: map-get(cfg.$elevation, 2) !default;
 
 .titled-pane {
@@ -21,7 +21,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
 
   @each $level,$radius in cfg.$elevation {
     &.elevated-#{$level} {
-      @include effects.elevate($elevation-color, $radius);
+      @include effects.shadow($elevation-color, $radius);
     }
   }
 
@@ -90,7 +90,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
   }
 
   &.interactive:hover {
-    @include effects.elevate($elevation-color, $elevation-interactive);
+    @include effects.shadow($elevation-color, $elevation-interactive);
   }
 
   &:show-mnemonics>.mnemonic-underline {

styles/src/components/_tooltip.scss

@@ -18,5 +18,5 @@ $padding-y: cfg.$padding-y !default;
   -fx-background-radius: cfg.$border-radius;
   -fx-padding: $padding-y $padding-x $padding-y $padding-x;
   -fx-opacity: $opacity;
-  @include effects.shadow($color-bg, cfg.$popup-shadow);
+  @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
 }

styles/src/general/_root.scss

@@ -81,6 +81,7 @@
   -color-border-default:        vars.$border-default;
   -color-border-muted:          vars.$border-muted;
   -color-border-subtle:         vars.$border-subtle;
+  -color-shadow-default:        vars.$shadow-default;
 
   -color-neutral-emphasis-plus: vars.$neutral-emphasisPlus;
   -color-neutral-emphasis:      vars.$neutral-emphasis;

styles/src/nord-dark.scss

@@ -98,6 +98,7 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
   $border-default:       color.change(scale.$base-6, $alpha: 0.65),
   $border-muted:         scale.$base-7,
   $border-subtle:        scale.$base-8,
+  $shadow-default:       scale.$dark,
 
   $neutral-emphasisPlus: scale.$base-7,
   $neutral-emphasis:     scale.$base-7,

styles/src/nord-light.scss

@@ -101,6 +101,7 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
   $border-default:       scale.$base-3,
   $border-muted:         lighten(scale.$base-3, 0.1),
   $border-subtle:        color.change(scale.$dark, $alpha: 0.15),
+  $shadow-default:       scale.$base-3,
 
   $neutral-emphasisPlus: scale.$base-8,
   $neutral-emphasis:     scale.$base-7,

styles/src/primer-dark.scss

@@ -73,13 +73,14 @@
   $fg-onEmphasis:        scale.$light,
 
   $canvas-default:       scale.$base-9,
-  $canvas-overlay:       scale.$base-8,
+  $canvas-overlay:       scale.$base-9,
   $canvas-inset:         scale.$dark,
   $canvas-subtle:        scale.$base-8,
 
   $border-default:       scale.$base-6,
   $border-muted:         scale.$base-7,
   $border-subtle:        color.change(scale.$base-0, $alpha: 0.1),
+  $shadow-default:       scale.$dark,
 
   $neutral-emphasisPlus: scale.$base-4,
   $neutral-emphasis:     scale.$base-4,

styles/src/settings/_color-vars.scss

@@ -16,6 +16,7 @@ $canvas-subtle:        scale.$base-0 !default;
 $border-default:       scale.$base-2 !default;
 $border-muted:         lighten(scale.$base-2, 0.03) !default;
 $border-subtle:        color.change(scale.$dark, $alpha: 0.15) !default;
+$shadow-default:       scale.$base-2 !default;
 
 $neutral-emphasisPlus: scale.$base-9 !default;
 $neutral-emphasis:     scale.$base-5 !default;

styles/src/settings/_config.scss

@@ -45,7 +45,8 @@ $checkbox-label-padding:  2px !default;
 // menu
 $popup-padding-x:     2px !default;
 $popup-padding-y:     2px !default;
-$popup-shadow:    2px !default;
+$popup-shadow-radius: if($darkMode, 8px, 6px) !default;
+$popup-shadow-spread: if($darkMode, 0.6, 0.3) !default;
 $menu-padding-x:      $padding-x !default;
 $menu-padding-y:      $padding-y !default;
 

styles/src/settings/_effects.scss

@@ -1,16 +1,6 @@
 // SPDX-License-Identifier: MIT
 
 // Adds shadow effect to popup menus.
-@mixin shadow($color, $radius) {
+@mixin shadow($color, $radius, $spread: 0.5, $offsetX: 0, $offsetY: 2) {
-  -fx-effect: unquote("dropshadow(gaussian, #{$color}, #{$radius}, 0.75, 0, 0)");
+  -fx-effect: unquote("dropshadow(three-pass-box, #{$color}, #{$radius}, #{$spread}, #{$offsetX}, #{$offsetY})");
-}
-
-// Adds elevation effect to boxes.
-@mixin elevate($color, $radius) {
-  -fx-effect: unquote("dropshadow(three-pass-box, #{$color}, #{$radius}, 0.5, 2, 2)");
-}
-
-// Adds hover (or active) effect to icons.
-@mixin highlight($color, $radius) {
-  -fx-effect: unquote("dropshadow(two-pass-box, #{$color}, #{$radius}, 0.125em, 0, 0)");
 }