Rework Helium shadow system

Author: lainsce

Helium/gtk-3.0/_functions.scss

@@ -30,4 +30,45 @@
   } @else {
       @return (calc($pixels / $text-size) * 1rem) - 0.000000001rem;
   }
+}
+
+@function shadow($level) {
+  // Sunken controls
+  @if $level == -1 {
+    @return
+        0 -2px 0  0   rgb(0, 0, 0, 0.1),
+        0 -1px 2px  0   rgb(0, 0, 0, 0.05),
+        0  1px 2px  0   rgb(255, 255, 255, 0.05),
+        0  2px 0  0   rgb(255, 255, 255, 0.1);
+  // Outline border
+  } @else if $level == 0 {
+      @return
+          0 1px  2px   0px rgb(0, 0, 0, 0.14),
+          0 1px  2px   0px rgb(0, 0, 0, 0.14);
+  // Elevation 1
+  } @else if $level == 1 {
+      @return
+          0 2px  4px   0px rgb(0, 0, 0, 0.14),
+          0 2px  4px   0px rgb(0, 0, 0, 0.14);
+  // Elevation 2
+  } @else if $level == 2 {
+      @return
+          0 4px  8px   0px rgb(0, 0, 0, 0.14),
+          0 4px  8px   0px rgb(0, 0, 0, 0.14);
+  // Elevation 3
+  } @else if $level == 3 {
+      @return
+          0 8px  16px   0px rgb(0, 0, 0, 0.14),
+          0 8px  16px   0px rgb(0, 0, 0, 0.14);
+  // Elevation 4
+  } @else if $level == 4 {
+      @return
+          0 0    8px    0px rgb(0, 0, 0, 0.20),
+          0 14px 28px   0px rgb(0, 0, 0, 0.24);
+  // Elevation 5
+  } @else if $level == 5 {
+      @return
+          0 0    8px   0px rgb(0, 0, 0, 0.20),
+          0 32px 64px  0px rgb(0, 0, 0, 0.24);
+  }
 }

Helium/gtk-3.0/widgets/_headerbar.scss

@@ -351,14 +351,8 @@ window.devel {
 decoration {
   border-radius: $window_radius $window_radius 0 0;
   border-width: 0px;
-
-  // this needs to be transparent
-  // see bug #722563
-  $_wm_border: if($variant=='light', transparentize(black, 0.9), gtkshade($borders_color, 0.88));
-  $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.9), gtkshade($borders_color, 0.88));
-
-  box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
-              0 0 0 1px $_wm_border; //doing borders with box-shadow
+  box-shadow: shadow(5),
+              0 0 0 1px gtkalpha($border_color, 0.4); //doing borders with box-shadow
 
   // this is used for the resize cursor area
   margin: 10px;
@@ -368,9 +362,9 @@ decoration {
     // change when we go to backdrop, to prevent jumping windows.
     // The biggest shadow should be in the same order than in the active state
     // or the jumping will happen during the transition.
-    box-shadow: 0 3px 9px 1px transparent,
-                0 2px 6px 2px transparentize(black, 0.8),
-                0 0 0 1px $_wm_border_backdrop;
+    box-shadow: 0 14px 28px 0 transparent,
+                shadow(4),
+                0 0    0    1px gtkalpha($border_color, 0.12);
   }
 
   .maximized &,
@@ -382,11 +376,11 @@ decoration {
   .tiled-bottom &,
   .tiled-left & {
     border-radius: 0;
-    box-shadow: 0 0 0 1px $_wm_border,
-                0 0 0 20px transparent; //transparent control workaround -- #3670
+    box-shadow: 0 0 0 1px gtkalpha($border_color, 0.4),
+                0 0 0 20px transparent;
 
-    &:backdrop { box-shadow: inset 1px 0 $_wm_border_backdrop,
-                             0 0 0 20px transparent; // #3670
+    &:backdrop { box-shadow: inset 1px 0 gtkalpha($border_color, 0.12),
+                             0 0 0 20px transparent;
     }
   }
 

Helium/gtk-4.0/_functions.scss

@@ -76,39 +76,33 @@
   // Outline border
   } @else if $level == 0 {
       @return
-          0 0 0 0 rgb(0, 0, 0, 0.2),
-          0 0 0 0 rgb(0, 0, 0, 0.14),
-          0 0 0 0 rgb(0, 0, 0, 0.12);
+          0 1px  2px   0px rgb(0, 0, 0, 0.14),
+          0 1px  2px   0px rgb(0, 0, 0, 0.14);
   // Elevation 1
   } @else if $level == 1 {
       @return
-          0 3px 1px -2px rgb(0, 0, 0, 0.2),
-          0 2px 2px  0   rgb(0, 0, 0, 0.14),
-          0 1px 5px  0   rgb(0, 0, 0, 0.12);
+          0 2px  4px   0px rgb(0, 0, 0, 0.14),
+          0 2px  4px   0px rgb(0, 0, 0, 0.14);
   // Elevation 2
   } @else if $level == 2 {
       @return
-          0 2px 4px -1px rgb(0, 0, 0, 0.2),
-          0 4px 5px  0   rgb(0, 0, 0, 0.14),
-          0 1px 10px 0   rgb(0, 0, 0, 0.12);
+          0 4px  8px   0px rgb(0, 0, 0, 0.14),
+          0 4px  8px   0px rgb(0, 0, 0, 0.14);
   // Elevation 3
   } @else if $level == 3 {
       @return
-          0 5px 5px -3px rgb(0, 0, 0, 0.2),
-          0 8px 10px 1px rgb(0, 0, 0, 0.14),
-          0 3px 14px 2px rgb(0, 0, 0, 0.12);
+          0 8px  16px   0px rgb(0, 0, 0, 0.14),
+          0 8px  16px   0px rgb(0, 0, 0, 0.14);
   // Elevation 4
   } @else if $level == 4 {
       @return
-          0 5px 5px -3px rgb(0, 0, 0, 0.2),
-          0 8px 10px 1px rgb(0, 0, 0, 0.14),
-          0 3px 14px 2px rgb(0, 0, 0, 0.12);
+          0 0    8px    0px rgb(0, 0, 0, 0.20),
+          0 14px 28px   0px rgb(0, 0, 0, 0.24);
   // Elevation 5
   } @else if $level == 5 {
       @return
-          0 8px  10px -6px rgb(0, 0, 0, 0.2),
-          0 16px 24px  2px rgb(0, 0, 0, 0.14),
-          0 6px  30px  5px rgb(0, 0, 0, 0.12);
+          0 0    8px   0px rgb(0, 0, 0, 0.20),
+          0 32px 64px  0px rgb(0, 0, 0, 0.24);
   }
 }