[libadwaita/wip/exalm/borderless: 40/46] stylesheet: Use toolbar style for header bars and action bars

[Alexander Mikhaylenko <alexm src gnome org>]

commit a21344015a91da178b8cd8e8a6810682ab2b7a7b
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Jul 4 19:10:34 2021 +0500

    stylesheet: Use toolbar style for header bars and action bars
    
    Unify the style of the 3 widgets.
    
    - Flat buttons from toolbar
    - Per-widget vertical margins from header bar
    
    Make sure GtkMenuButton and AdwSplitButton are supported.
    
    Don't make text or custom content buttons flat. Don't make linked buttons
    flat either. Add a .raised style class to opt-out a widget from being flat
    when placed in a toolbar/header bar/action bar.
    
    This way raised by default buttons can always be made flat with .flat, and
    flat by default buttons can always be made raised with .raised. This also
    matches what elementary has been doing.

 src/stylesheet/widgets/_buttons.scss    |  1 +
 src/stylesheet/widgets/_header-bar.scss | 23 +----------
 src/stylesheet/widgets/_toolbars.scss   | 70 ++++++++++++++++++++++++++++++---
 3 files changed, 67 insertions(+), 27 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index d0d407c3..4ff568b1 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -409,6 +409,7 @@ splitbutton {
     margin-left: -1px;
   }
 
+  @at-root %flat_split_button,
   &.flat {
     > separator {
       background: gtkalpha(currentColor, .2);
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 193fdf41..c2395d1f 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -8,6 +8,8 @@ headerbar {
   margin-left: -1px;
   margin-right: -1px;
 
+  @extend %toolbar;
+
   > windowhandle > box {
     padding: 0 7px 1px 7px;
 
@@ -82,27 +84,6 @@ headerbar {
       }
     }
   }
-
-  // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
-  entry,
-  spinbutton,
-  separator:not(.sidebar),
-  button,
-  menubutton {
-    margin-top: 6px;
-    margin-bottom: 6px;
-  }
-
-  // Reset margins for buttons inside menubutton
-  menubutton > button {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-
-  switch {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
 }
 
 .titlebar:not(headerbar) {
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 7888a312..046453a8 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -1,11 +1,72 @@
+%toolbar {
+  button.image-button:not(.raised),
+  button.arrow-button:not(.raised) {
+    @extend %button_basic_flat;
+  }
+
+  .linked button {
+    &.image-button:not(.raised),
+    &.arrow-button:not(.raised) {
+      @extend %button;
+    }
+  }
+
+  menubutton.raised {
+    > button.image-button,
+    > button.arrow-button {
+      @extend %button;
+    }
+  }
+
+  splitbutton {
+    // Specificity bump
+    > separator.vertical {
+      margin-top: 7px;
+      margin-bottom: 7px;
+    }
+
+    &.image-button:not(.raised) {
+      @extend %flat_split_button;
+    }
+  }
+
+  // add vertical margins to common widgets on toolbars to avoid them spanning
+  // the whole height
+  entry,
+  spinbutton,
+  splitbutton,
+  separator:not(.sidebar),
+  button,
+  menubutton,
+  .linked2 {
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+
+  // Reset margins for buttons inside menubutton
+  menubutton > button,
+  splitbutton > button,
+  splitbutton > menubutton {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
+  switch {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+
 .toolbar {
-  padding: 6px;
+  padding: 0 6px;
   border-spacing: 6px;
   background-color: $bg_color;
 
   // on OSD
   .osd & { background-color: transparent; }
 
+  @extend %toolbar;
+
   // stand-alone OSD toolbars
   &.osd {
     padding: 14px;
@@ -22,10 +83,6 @@
   // toolbar separators
   &.horizontal > separator { margin: 6px 0; }
   &.vertical > separator { margin: 0 6px; }
-
-  button {
-    @extend %button_basic_flat;
-  }
 }
 
 /****************
@@ -53,8 +110,9 @@ searchbar > revealer > box {
  ****************/
 
 actionbar > revealer > box {
-  padding: 7px 6px 6px 6px;
+  padding: 1px 6px 0px 6px;
   box-shadow: inset 0 1px $borders_color;
+  @extend %toolbar;
 
   &, > box.start, > box.end {
     border-spacing: 6px;