[libadwaita/wip/exalm/background-colors2: 12/17] stylesheet: Refresh tab bar styles

[Alexander Mikhaylenko <alexm src gnome org>]

commit 51136d5a7993815946bf23a65fcc9eaf2d9f4807
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;