[libadwaita/wip/exalm/background-colors2: 13/18] stylesheet: Refresh tab bar styles

[Alexander Mikhaylenko <alexm src gnome org>]

commit f081d24c2f4bfe66114b5ff334d62a218c14b198
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Oct 1 17:27:58 2021 +0500

    stylesheet: Refresh tab bar styles
    
    Make it fully recolorable taking advantage of the clipping added earlier.
    Darken inactive tabs rather than lightening active, use currentColor for
    hover.
    
    This will make more sense when the header bar becomes lighter.

 src/stylesheet/widgets/_tab-view.scss | 51 +++++++++++++++++++++--------------
 1 file changed, 31 insertions(+), 20 deletions(-)
---
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index 7971365b..e227c677 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -1,4 +1,10 @@
-$tab_bg: $headerbar_bg_color;
+$shade_color: if($variant == 'light', transparentize(black, .93), transparentize(black, .64));
+
+$tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
+                                               transparentize(white, .2),
+                                               gtkalpha($accent_bg_color, .2) 15%,
+                                               gtkalpha($accent_bg_color, 0) 15%);
+
 
 @mixin undershoot-gradient($dir) {
   @if $variant == 'dark' {
@@ -23,9 +29,14 @@ $tab_bg: $headerbar_bg_color;
 tabbar {
   .box {
     min-height: 38px;
-    background: $headerbar_bg_color;
+    background-color: $headerbar_bg_color;
     color: $headerbar_fg_color;
     border-bottom: 1px solid $headerbar_border_color;
+
+    &:backdrop {
+      background-color: $headerbar_backdrop_color;
+      transition: $backdrop_transition;
+    }
   }
 
   scrolledwindow.pinned {
@@ -73,7 +84,7 @@ tabbar {
   }
 
   tabbox > background {
-    background: gtkshade($tab_bg, .97);
+    background-color: $shade_color;
   }
 
   tab {
@@ -81,27 +92,31 @@ tabbar {
     border-color: $headerbar_border_color;
     border-width: 0 1px 0 1px;
     transition: background 150ms ease-in-out, $focus_transition;
-    background-color: $tab_bg;
+    background-color: gtkalpha($shade_color, .6);
     background-clip: padding-box;
 
     @include focus-ring();
 
     &:checked {
-      background-color: gtkshade($tab_bg, 1.06);
-
-      &:hover {
-        background-color: gtkshade($tab_bg, 1.09);
-      }
+      background-color: transparent;
     }
 
     &:hover {
-      background-color: gtkshade($tab_bg, 1.03);
+      background-image: image(gtkalpha(currentColor, .03));
+    }
+
+    &.needs-attention {
+      background-image: $tab_needs_attention_gradient;
+
+      &:hover {
+        background-image: image(gtkalpha(currentColor, .03)), $tab_needs_attention_gradient;
+      }
     }
   }
 
   .start-action,
   .end-action {
-    background-color: $tab_bg;
+    background-color: gtkalpha($shade_color, .6);
     background-clip: padding-box;
     border-color: $headerbar_border_color;
     border-style: solid;
@@ -126,9 +141,13 @@ tabbar {
 
 dnd tab {
   min-height: 26px;
-  background-color: gtkshade($tab_bg, 1.09);
+  background-color: $headerbar_bg_color;
   color: $headerbar_fg_color;
 
+  &.needs-attention {
+    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),
@@ -149,14 +168,6 @@ dnd {
   tab {
     padding: 6px;
 
-    &.needs-attention {
-      background-image:
-        radial-gradient(ellipse at bottom,
-                        transparentize(white, .2),
-                        gtkalpha($accent_bg_color, .2) 15%,
-                        gtkalpha($accent_bg_color, 0) 15%);
-    }
-
     button.image-button {
       padding: 0;
       margin: 0;