[libadwaita/wip/exalm/background-colors: 5/8] stylesheet: Add .inline style class for tab bars

[Alexander Mikhaylenko <alexm src gnome org>]

commit 238acd667f692c94fc042af19f41087e4230ea9f
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Oct 20 01:00:35 2021 +0500

    stylesheet: Add .inline style class for tab bars
    
    We use header bar colors as background. Add a way to opt out of that, e.g.
    for libpanel.
    
    Introduce headerbar_shade_color, this will allow us to have separate shade
    colors for colored header bars.

 src/stylesheet/_colors.scss           |  1 +
 src/stylesheet/widgets/_tab-view.scss | 85 ++++++++++++++++++++++++++++-------
 2 files changed, 69 insertions(+), 17 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 31e9692b..923a1623 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -35,6 +35,7 @@ $card_border_color: if($variant == 'light', gtkalpha(currentColor, .18), gtkalph
 $scrollbar_outline_color: if($variant == 'light', white, transparentize(black, .5));
 
 $shade_color: if($variant == 'light', transparentize(black, .93), transparentize(black, .64));
+$headerbar_shade_color: $shade_color;
 
 $popover_bg_color: if($variant == 'light', #ffffff, #383838);
 $popover_fg_color: $fg_color;
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index 68b1585f..28990856 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -4,9 +4,9 @@ $tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
                                                gtkalpha($accent_bg_color, 0) 15%);
 
 
-@mixin undershoot-gradient($dir) {
+@mixin undershoot-gradient($dir, $color) {
   background: linear-gradient(to #{$dir},
-                              $shade_color,
+                              $color,
                               transparentize(black, 1) 20px);
 }
 
@@ -20,19 +20,12 @@ $tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
 tabbar {
   .box {
     min-height: 38px;
-    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;
-    }
+    border-bottom: 1px solid $borders_color;
   }
 
   scrolledwindow.pinned {
     undershoot {
-      border: 0 solid $headerbar_border_color;
+      border: 0 solid $borders_color;
     }
 
     &:dir(rtl) undershoot.left {
@@ -45,11 +38,11 @@ tabbar {
 
     tabbox > background {
       &:dir(ltr) {
-        box-shadow: inset -1px 0 $headerbar_border_color;
+        box-shadow: inset -1px 0 $borders_color;
       }
 
       &:dir(rtl) {
-        box-shadow: inset 1px 0 $headerbar_border_color;
+        box-shadow: inset 1px 0 $borders_color;
       }
     }
   }
@@ -58,11 +51,11 @@ tabbar {
     transition: background 150ms ease-in-out;
 
     &.left {
-      @include undershoot-gradient("right");
+      @include undershoot-gradient("right", $shade_color);
     }
 
     &.right {
-      @include undershoot-gradient("left");
+      @include undershoot-gradient("left", $shade_color);
     }
   }
 
@@ -80,7 +73,7 @@ tabbar {
 
   tab {
     border-style: solid;
-    border-color: $headerbar_border_color;
+    border-color: $borders_color;
     border-width: 0 1px 0 1px;
     transition: background 150ms ease-in-out, $focus_transition;
     background-color: gtkalpha($shade_color, .6);
@@ -109,7 +102,7 @@ tabbar {
   .end-action {
     background-color: gtkalpha($shade_color, .6);
     background-clip: padding-box;
-    border-color: $headerbar_border_color;
+    border-color: $borders_color;
     border-style: solid;
     transition: background 150ms ease-in-out;
 
@@ -128,6 +121,64 @@ tabbar {
   .end-action:dir(ltr) {
     border-left-width: 1px;
   }
+
+  &:not(.inline) {
+    .box {
+      background-color: $headerbar_bg_color;
+      color: $headerbar_fg_color;
+      border-color: $headerbar_border_color;
+    }
+
+    scrolledwindow.pinned {
+      undershoot {
+        border-color: $headerbar_border_color;
+      }
+
+      tabbox > background {
+        &:dir(ltr) {
+          box-shadow: inset -1px 0 $headerbar_border_color;
+        }
+
+        &:dir(rtl) {
+          box-shadow: inset 1px 0 $headerbar_border_color;
+        }
+      }
+    }
+
+    undershoot {
+      &.left {
+        @include undershoot-gradient("right", $headerbar_shade_color);
+      }
+
+      &.right {
+        @include undershoot-gradient("left", $headerbar_shade_color);
+      }
+    }
+
+    tabbox > background {
+      background-color: $headerbar_shade_color;
+    }
+
+    tab {
+      border-color: $headerbar_border_color;
+      background-color: gtkalpha($headerbar_shade_color, .6);
+
+      &:checked {
+        background-color: transparent;
+      }
+    }
+
+    .start-action,
+    .end-action {
+      background-color: gtkalpha($headerbar_shade_color, .6);
+      border-color: $headerbar_border_color;
+    }
+
+    &:backdrop .box {
+      background-color: $headerbar_backdrop_color;
+      transition: $backdrop_transition;
+    }
+  }
 }
 
 dnd tab {