[libadwaita/wip/exalm/borders: 38/40] stylesheet: Overhaul header bar and tab bar borders

[Alexander Mikhaylenko <alexm src gnome org>]

commit 8bdb26e921fe39c99d13dde1b7f99124c120bed8
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Jul 26 21:32:56 2021 +0500

    stylesheet: Overhaul header bar and tab bar borders
    
    Use the same trick with negative margins as we've been using with solid-csd.
    It's not particularly good but since nobody had complained about it for
    years, should be good enough.
    
    This should also fix the long-standing issue of discolored separators between
    recolored header bars.
    
    Use an explicitly opaque color for tab bar, we'll need this later as tab bar
    cannot work with transparent borders at the moment because of the darker tab
    bar background.

 src/stylesheet/_colors.scss             |  3 +++
 src/stylesheet/widgets/_header-bar.scss | 15 +++++++++------
 src/stylesheet/widgets/_tab-view.scss   | 13 +++++++------
 3 files changed, 19 insertions(+), 12 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 62130efe..8bd9ff53 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -28,6 +28,7 @@ $link_color: $accent_color;
 $link_visited_color: gtkmix($accent_color, $text_color, 80%);
 $dark_fill: if($variant == 'light', darken($bg_color, 9%), darken($bg_color, 5%));
 $headerbar_bg_color: darken($bg_color, if($variant == 'dark', 5%, 10%));
+$headerbar_border_color: transparentize($fg_color, .85);
 $menu_color: $base_color;
 
 $view_hover_color: gtkalpha(currentColor, .07);
@@ -89,6 +90,8 @@ $dim_label_opacity: 0.55;
   $bg_color: if($variant == 'light', lighten($bg_color, 3%), darken($bg_color, 2%));
   $borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%));
 
+  $headerbar_border_color: transparentize($fg_color, .5);
+
   //insensitive state derived colors
   $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
   $insensitive_bg_color: mix($bg_color, $base_color, 60%);
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 5cfe0cc9..fa813ada 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -1,12 +1,15 @@
 headerbar {
   min-height: 46px;
-  border-width: 0 0 1px;
-  border-style: solid;
-  border-color: $borders_color;
   background-color: $headerbar_bg_color;
+  box-shadow: inset 0 -1px $headerbar_border_color,
+              inset  1px 0 $headerbar_border_color,
+              inset -1px 0 $headerbar_border_color;
+
+  margin-left: -1px;
+  margin-right: -1px;
 
   > windowhandle > box {
-    padding: 0 6px;
+    padding: 0 7px 1px 7px;
 
     &,
     > box.start,
@@ -56,9 +59,9 @@ headerbar {
   .solid-csd & {
     &:backdrop, & {
       &:dir(rtl), &:dir(ltr) { // specificity bump
-        margin-left: -1px;
-        margin-right: -1px;
         margin-top: -1px;
+
+        > windowhandle > box { padding-top: 1px; }
       }
     }
   }
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index ef4b4af7..8b1da141 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -1,4 +1,5 @@
 $tab_bg: $headerbar_bg_color;
+$tab_border: mix(opacify($headerbar_border_color, 1), $headerbar_bg_color, 100% * 
alpha($headerbar_border_color));
 
 @mixin undershoot-gradient($dir) {
   @if $variant == 'dark' {
@@ -24,12 +25,12 @@ tabbar {
   .box {
     min-height: 38px;
     background: darken($tab_bg, 3%);
-    border-bottom: 1px solid $borders_color;
+    border-bottom: 1px solid $tab_border;
   }
 
   scrolledwindow.pinned {
     undershoot {
-      border: 0 solid $borders_color;
+      border: 0 solid $tab_border;
     }
 
     &:dir(rtl) undershoot.left {
@@ -42,11 +43,11 @@ tabbar {
 
     tabbox {
       &:dir(ltr) {
-        box-shadow: inset -1px 0 $borders_color;
+        box-shadow: inset -1px 0 $tab_border;
       }
 
       &:dir(rtl) {
-        box-shadow: inset 1px 0 $borders_color;
+        box-shadow: inset 1px 0 $tab_border;
       }
     }
   }
@@ -73,7 +74,7 @@ tabbar {
 
   tab {
     border-style: solid;
-    border-color: $borders_color;
+    border-color: $tab_border;
     border-width: 0 1px 0 1px;
     transition: background 150ms ease-in-out, $focus_transition;
     background-color: $tab_bg;
@@ -96,7 +97,7 @@ tabbar {
   .start-action,
   .end-action {
     background: $tab_bg;
-    border-color: $borders_color;
+    border-color: $tab_border;
     border-style: solid;
     transition: background 150ms ease-in-out;