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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 40109b03e1c61d2291da77301fc0bc0b0cf398f9
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   | 71 ++++++++++++++++++++++++++++++---
 3 files changed, 68 insertions(+), 27 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 541df798..1a2d540a 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -444,6 +444,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 f5a67d6e..1b100295 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;
 
@@ -80,27 +82,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..7b1fe6f4 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -1,11 +1,73 @@
+%toolbar {
+  button.image-button:not(.raised):not(.suggested-action):not(.destructive-action),
+  button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action) {
+    @extend %button_basic_flat;
+  }
+
+  .linked button {
+    &.image-button:not(.raised):not(.suggested-action):not(.destructive-action),
+    &.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action) {
+      @extend %button_basic_raised;
+    }
+  }
+
+  menubutton.raised {
+    > button.image-button,
+    > button.image-text-button {
+      @extend %button_basic_raised;
+    }
+  }
+
+  splitbutton {
+    // Specificity bump
+    > separator.vertical {
+      margin-top: 7px;
+      margin-bottom: 7px;
+    }
+
+    &.image-button:not(.raised):not(.suggested-action):not(.destructive-action),
+    &.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action) {
+      @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 +84,6 @@
   // toolbar separators
   &.horizontal > separator { margin: 6px 0; }
   &.vertical > separator { margin: 0 6px; }
-
-  button {
-    @extend %button_basic_flat;
-  }
 }
 
 /****************
@@ -53,8 +111,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;