[libadwaita/wip/exalm/background-colors: 16/20] stylesheet: Extract window border and outline colors

[Alexander Mikhaylenko <alexm src gnome org>]

commit b7519c984667831ed012646267a51e681a02d4fb
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Oct 18 19:46:18 2021 +0500

    stylesheet: Extract window border and outline colors

 src/stylesheet/_colors.scss           |  6 ++++++
 src/stylesheet/widgets/_popovers.scss |  4 +---
 src/stylesheet/widgets/_tab-view.scss | 12 +++---------
 src/stylesheet/widgets/_window.scss   | 28 ++++++++++------------------
 4 files changed, 20 insertions(+), 30 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index c471d6e5..3c216e3c 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -19,6 +19,8 @@ $bg_color: if($variant == 'light', #fafafa, #242424);
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
 
 $border_opacity: if($contrast == 'high', .5, .15);
+$window_outline_opacity: if($contrast == 'high', .3, .1);
+
 $borders_color: gtkalpha(currentColor, $border_opacity);
 $thin_borders_color: gtkalpha(currentColor, .05);
 $link_color: $accent_color;
@@ -36,6 +38,10 @@ $scrollbar_outline_color: if($variant == 'light', white, transparentize(black, .
 $popover_bg_color: if($variant == 'light', #ffffff, #383838);
 $popover_fg_color: $fg_color;
 
+$window_outline_color: gtkalpha(if($variant == 'light', transparent, white), $window_outline_opacity);
+$window_border_color: if($variant == 'light', transparentize(black, 0.77), transparentize(black, 0.25));
+$window_border_backdrop_color: if($variant == 'light', transparentize(black, 0.82), transparentize(black, 
0.25));
+
 $view_hover_color: gtkalpha(currentColor, .07);
 $view_active_color: gtkalpha(currentColor, .16);
 $view_selected_color: gtkalpha(currentColor, .1);
diff --git a/src/stylesheet/widgets/_popovers.scss b/src/stylesheet/widgets/_popovers.scss
index aa2b1457..38d45c42 100644
--- a/src/stylesheet/widgets/_popovers.scss
+++ b/src/stylesheet/widgets/_popovers.scss
@@ -4,12 +4,10 @@ popover.background {
 
   > arrow,
   > contents {
-    $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
-
     background-color: $popover_bg_color;
     color: $popover_fg_color;
     background-clip: padding-box;
-    border: 1px solid $_popover_border;
+    border: 1px solid $window_border_color;
     box-shadow: 0 1px 2px transparentize(black, 0.7);
   }
 
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index e227c677..5b16b077 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -148,17 +148,11 @@ dnd tab {
     background-image: $tab_needs_attention_gradient;
   }
 
-  $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
-
   box-shadow: 0 3px 9px 1px transparentize(black, 0.75),
-              0 0 0 1px $_wm_border;
-
-  @if $variant == 'dark' {
-    $_wm_outline: if($contrast=='high', transparentize(white, .7), transparentize(white, .9));
+              0 0 0 1px $window_border_color;
 
-    outline: 1px solid $_wm_outline;
-    outline-offset: -1px;
-  }
+  outline: 1px solid $window_outline_color;
+  outline-offset: -1px;
 
   margin: 25px;
 }
diff --git a/src/stylesheet/widgets/_window.scss b/src/stylesheet/widgets/_window.scss
index 0c2ab457..2df5d1a9 100644
--- a/src/stylesheet/widgets/_window.scss
+++ b/src/stylesheet/widgets/_window.scss
@@ -2,25 +2,17 @@ window {
   // lamefun trick to get rounded borders regardless of CSD use
   border-width: 0px;
 
-  // this needs to be transparent
-  // see bug #722563
-  $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
-  $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize(black, 0.25));
-
   &.csd {
     box-shadow: 0 1px 3px 3px transparent,
                 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 $_wm_border; //doing borders with box-shadow
+                0 0 0 1px $window_border_color; //doing borders with box-shadow
     margin: 0px;
     border-radius: $window_radius;
 
-    @if $variant == 'dark' {
-      $_window_outline: if($contrast=='high', transparentize(white, .7), transparentize(white, .9));
-      outline: 1px solid $_window_outline;
-      outline-offset: -1px;
-    }
+    outline: 1px solid $window_outline_color;
+    outline-offset: -1px;
 
     &:backdrop {
       // the transparent shadow here is to enforce that the shadow extents don't
@@ -31,13 +23,13 @@ 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 $_wm_border_backdrop;
+                  0 0 0 1px $window_border_backdrop_color;
       transition: $backdrop_transition;
     }
 
     &.dialog.message {
       box-shadow: 0 1px 2px transparentize(black, 0.8),
-                  0 0 0 1px transparentize($_wm_border, 0.1);
+                  0 0 0 1px $window_border_color;
     }
 
     &.tiled,
@@ -48,11 +40,11 @@ window {
       border-radius: 0;
       outline: none;
 
-      box-shadow: 0 0 0 1px $_wm_border,
+      box-shadow: 0 0 0 1px $window_border_color,
                   0 0 0 20px transparent; //transparent control workaround -- #3670
 
       &:backdrop {
-        box-shadow: 0 0 0 1px $_wm_border_backdrop,
+        box-shadow: 0 0 0 1px $window_border_backdrop_color,
                     0 0 0 20px transparent;
       }
     }
@@ -72,15 +64,15 @@ window {
     border-radius: 0;
     box-shadow: inset 0 0 0 5px $borders_color,
                 inset 0 0 0 4px $headerbar_bg_color,
-                inset 0 0 0 1px $_wm_border;
+                inset 0 0 0 1px $window_border_color;
 
     &:backdrop {
       box-shadow: inset 0 0 0 5px $borders_color,
                   inset 0 0 0 4px $headerbar_backdrop_color,
-                  inset 0 0 0 1px $_wm_border_backdrop;
+                  inset 0 0 0 1px $window_border_backdrop_color;
     }
   }
 
   // server-side decorations as used by mutter
-  &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
+  &.ssd { box-shadow: 0 0 0 1px $window_border_color; } //just doing borders, wm draws actual shadows
 }