Styles/lighting: toplevel shadows

lib/Styles/Common/_borders.scss

@@ -15,3 +15,7 @@
 @mixin border-interactive-roundrect {
     border-radius: calc(var(--window-radius) / 2);
 }
+
+.toplevel {
+    border-radius: var(--window-radius);
+}

lib/Styles/Common/_lighting.scss

@@ -40,11 +40,6 @@
                 0 3px 8px 2px rgba(black, 0.1),
                 0 5px 5px -3px rgba(black, 0.4),
                 0 8px 5px 1px rgba(black, 0.1);
-        } @else if $level == 4 {
-            @return
-                0 2px 4px 2px rgba(black, 0.1),
-                0 15px 12px -10px rgba(black, 0.4),
-                0 8px 14px 4px rgba(black, 0.15);
         }
     } @else if $color-scheme == "dark" {
         @if $level == 1 {
@@ -60,11 +55,6 @@
                 0 3px 8px 2px rgba(black, 0.2),
                 0 5px 5px -3px rgba(black, 0.5),
                 0 8px 5px 1px rgba(black, 0.2);
-        } @else if $level == 4 {
-            @return
-                0 2px 4px 2px rgba(black, 0.2),
-                0 15px 12px -10px rgba(black, 0.5),
-                0 8px 14px 4px rgba(black, 0.25);
         }
     }
 }
@@ -115,3 +105,29 @@
         inset 0 1px 1px rgba(black, 0.05),
         inset 0 0 1px 1px rgba(black, 0.05);
 }
+
+.toplevel {
+    --shadow-multiplier: 0%;
+    @media (prefers-color-scheme: dark) {
+        --shadow-multiplier: 10%;
+    }
+
+    --shadow-offset: calc(var(--shadow-level) * 2px + 2px);
+    --shadow-radius: calc(var(--shadow-level) * 3px);
+    --shadow-spread: calc(var(--shadow-radius) * -0.5);
+    --shadow-color: color-mix(in srgb, black calc(var(--shadow-level) * 4% + 10% + var(--shadow-multiplier)), transparent);
+
+    --bloom-shadow-offset: calc(var(--shadow-offset) * 1.1);
+    --bloom-shadow-radius: calc(var(--shadow-radius) * 1.05 + 5px);
+    --bloom-shadow-spread: calc(var(--shadow-radius) * 0.6);
+    --bloom-shadow-color: color-mix(in srgb, var(--shadow-color) 50%, transparent);
+
+    box-shadow:
+        inset 0 2px 0 -1px color-mix(in srgb, var(--highlight-color) 30%, transparent),
+        inset 0 -2px 0 -1px color-mix(in srgb, var(--highlight-color) 20%, transparent),
+        inset 1px 0 0 0 color-mix(in srgb, var(--highlight-color) 5%, transparent),
+        inset -1px 0 0 0 color-mix(in srgb, var(--highlight-color) 5%, transparent),
+        0 0 0 1px var(--toplevel-border-color),
+        0 var(--shadow-offset) var(--shadow-radius) var(--shadow-spread) var(--shadow-color),
+        0 var(--bloom-shadow-offset) var(--bloom-shadow-radius) var(--bloom-shadow-spread) var(--bloom-shadow-color);
+}

lib/Styles/Granite/Dialog.scss

@@ -1,14 +1,10 @@
 window.csd.dialog {
-    box-shadow:
-        highlight(),
-        0 0 0 1px var(--toplevel-border-color),
-        shadow(3);
+    @extend .toplevel;
+
+    --shadow-level: 2;
 
     &:backdrop {
-        box-shadow:
-            highlight(),
-            0 0 0 1px var(--toplevel-border-color),
-            shadow(2);
+        --shadow-level: 1;
     }
 
     .dialog-content-area {

lib/Styles/Gtk/Popover.scss

@@ -11,11 +11,12 @@ popover {
     }
 
     > contents {
+        @extend .toplevel;
+
         box-shadow:
             // No highlight because of the arrow
             0 0 0 1px var(--toplevel-border-color),
             shadow(2);
-        border-radius: var(--window-radius);
 
         undershoot {
             &.top {
@@ -29,10 +30,10 @@ popover {
     }
 
     &.menu > contents {
-        box-shadow:
-            highlight(),
-            0 0 0 1px var(--toplevel-border-color),
-            shadow(2);
+        @extend .toplevel;
+
+        --shadow-level: 1;
+
         padding: $button-spacing;
     }
 

lib/Styles/Gtk/Window.scss

@@ -3,17 +3,12 @@ window {
     color: var(--fg-color);
 
     &.csd {
-        border-radius: var(--window-radius);
-        box-shadow:
-            highlight(),
-            0 0 0 1px var(--toplevel-border-color),
-            shadow(4);
+        @extend .toplevel;
+
+        --shadow-level: 3;
 
         &:backdrop {
-            box-shadow:
-                highlight(),
-                0 0 0 1px var(--toplevel-border-color),
-                shadow(2);
+            --shadow-level: 1;
         }
 
         // black behind corners