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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 42f084b3788b2c44c8f1e8ec5098b9a4638dedcc
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 b19f9c2a..885abd80 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -5,6 +5,8 @@ headerbar {
   border-color: $alt_borders_color;
   background-color: $headerbar_bg_color;
 
+  @extend %toolbar;
+
   > windowhandle > box {
     padding: 0 6px;
 
@@ -64,27 +66,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 b7957180..4fec6100 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;
-  }
 }
 
 /****************
@@ -56,8 +113,9 @@ searchbar > revealer > box {
  ****************/
 
 actionbar > revealer > box {
-  padding: 6px;
+  padding: 0 6px;
   border-top: 1px solid $borders_color;
+  @extend %toolbar;
 
   &, > box.start, > box.end {
     border-spacing: 6px;