[libadwaita/wip/exalm/window-border] stylesheet: Simplify window borders and outline

[Alexander Mikhaylenko <alexm src gnome org>]

commit 1a3516cc8541a720320a4c485fb7bf4aca6554ad
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Nov 25 12:44:30 2021 +0500

    stylesheet: Simplify window borders and outline
    
    Use a similar style to popovers, hardcode the outline from dark variant.
    
    This way we don't need to vary anything here for light and dark at all,
    and can remove those variables, while also better catering to recoloring
    or cases like App Icon Preview where half of the window is dark.

 src/stylesheet/_colors.scss           |  9 ++++-----
 src/stylesheet/_defaults.scss         |  3 ---
 src/stylesheet/widgets/_tab-view.scss |  5 +++--
 src/stylesheet/widgets/_window.scss   | 22 +++++++++++++---------
 4 files changed, 20 insertions(+), 19 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 6ff2eb86..e5015d48 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -1,7 +1,6 @@
 $border_opacity: if($contrast == 'high', .5, .15);
 $thin_border_opacity: if($contrast == 'high', .25, .05);
 $focus_border_opacity: if($contrast == 'high', 0.8, 0.5);
-$window_outline_opacity: if($contrast == 'high', .3, .1);
 
 // Colors from _defaults.scss
 
@@ -38,9 +37,6 @@ $popover_fg_color: gtkcolor(popover_fg_color);
 
 $shade_color: gtkcolor(shade_color);
 $scrollbar_outline_color: gtkcolor(scrollbar_outline_color);
-$window_outline_color: gtkalpha(gtkcolor(window_outline_color), $window_outline_opacity);
-$window_border_color: gtkcolor(window_border_color);
-$window_border_backdrop_color: gtkcolor(window_border_backdrop_color);
 
 // Other colors
 
@@ -74,8 +70,10 @@ $shadow_color: transparentize(black, 0.9);
 
 $drop_target_color: $accent_bg_color;
 
+$window_outline_color: transparentize(white, .9);
+
 //special cased widget colors
-$focus_border_color:  gtkalpha($accent_bg_color, $focus_border_opacity);
+$focus_border_color:  gtkalpha($accent_color, $focus_border_opacity);
 $dim_label_opacity: 0.55;
 $dimmer_opacity: 0.3;
 $disabled_opacity: 0.5;
@@ -90,4 +88,5 @@ $strong_disabled_opacity: 0.3;
   $trough_color: gtkalpha(currentColor, .3);
   $trough_hover_color: gtkalpha(currentColor, .4);
   $trough_active_color: gtkalpha(currentColor, .5);
+  $window_outline_color: transparentize(white, .7);
 }
diff --git a/src/stylesheet/_defaults.scss b/src/stylesheet/_defaults.scss
index 5256ffe3..fdfffdba 100644
--- a/src/stylesheet/_defaults.scss
+++ b/src/stylesheet/_defaults.scss
@@ -50,6 +50,3 @@
 // Miscellaneous
 @define-color shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .64))};
 @define-color scrollbar_outline_color #{if($variant == 'light', white, transparentize(black, .5))};
-@define-color window_outline_color #{if($variant == 'light', transparent, white)};
-@define-color window_border_color #{if($variant == 'light', transparentize(black, 0.77), 
transparentize(black, 0.25))};
-@define-color window_border_backdrop_color #{if($variant == 'light', transparentize(black, 0.82), 
transparentize(black, 0.25))};
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index aa3badf9..8a5538eb 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -190,8 +190,9 @@ dnd tab {
     background-image: $tab_needs_attention_gradient;
   }
 
-  box-shadow: 0 3px 9px 1px transparentize(black, 0.75),
-              0 0 0 1px $window_border_color;
+  box-shadow: 0 1px 5px 1px transparentize(black, .91),
+              0 2px 14px 3px transparentize(black, .95),
+              0 0 0 1px transparentize(black, if($contrast == 'high', .2, .95));
 
   outline: 1px solid $window_outline_color;
   outline-offset: -1px;
diff --git a/src/stylesheet/widgets/_window.scss b/src/stylesheet/widgets/_window.scss
index ef1a30a7..aed07b59 100644
--- a/src/stylesheet/widgets/_window.scss
+++ b/src/stylesheet/widgets/_window.scss
@@ -7,7 +7,7 @@ window {
                 0 2px 8px 2px transparentize(black, 0.87),
                 0 3px 20px 10px transparentize(black, 0.91),
                 0 6px 32px 16px transparentize(black, 0.96),
-                0 0 0 1px $window_border_color; //doing borders with box-shadow
+                0 0 0 1px transparentize(black, if($contrast == 'high', .2, .95));
     margin: 0px;
     border-radius: $window_radius;
 
@@ -23,13 +23,14 @@ window {
                   0 2px 14px 5px transparentize(black, 0.95),
                   0 4px 28px 12px transparentize(black, 0.97),
                   0 6px 32px 16px transparent,
-                  0 0 0 1px $window_border_backdrop_color;
+                  0 0 0 1px transparentize(black, if($contrast == 'high', .2, .98));
       transition: $backdrop_transition;
     }
 
     &.dialog.message {
-      box-shadow: 0 1px 2px transparentize(black, 0.8),
-                  0 0 0 1px $window_border_color;
+      box-shadow: 0 1px 5px 1px transparentize(black, .91),
+                  0 2px 14px 3px transparentize(black, .95),
+                  0 0 0 1px transparentize(black, if($contrast == 'high', .2, .95));
     }
 
     &.tiled,
@@ -40,11 +41,11 @@ window {
       border-radius: 0;
       outline: none;
 
-      box-shadow: 0 0 0 1px $window_border_color,
+      box-shadow: 0 0 0 1px $border_color,
                   0 0 0 20px transparent; //transparent control workaround -- #3670
 
       &:backdrop {
-        box-shadow: 0 0 0 1px $window_border_backdrop_color,
+        box-shadow: 0 0 0 1px $border_color,
                     0 0 0 20px transparent;
       }
     }
@@ -64,15 +65,18 @@ window {
     border-radius: 0;
     box-shadow: inset 0 0 0 5px $border_color,
                 inset 0 0 0 4px $headerbar_bg_color,
-                inset 0 0 0 1px $window_border_color;
+                inset 0 0 0 1px $border_color;
 
     &:backdrop {
       box-shadow: inset 0 0 0 5px $border_color,
                   inset 0 0 0 4px $headerbar_backdrop_color,
-                  inset 0 0 0 1px $window_border_backdrop_color;
+                  inset 0 0 0 1px $border_color;
     }
   }
 
   // server-side decorations as used by mutter
-  &.ssd { box-shadow: 0 0 0 1px $window_border_color; } //just doing borders, wm draws actual shadows
+  &.ssd {
+    // just doing borders, wm draws actual shadows
+    box-shadow: 0 0 0 1px transparentize(black, if($contrast == 'high', .2, .95));
+  }
 }