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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 14c528de980986c5699c5d7474d2c834a23bf0fb
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 9225c85d..cb0028dc 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, .3);
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..312622e4 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: 6px;
+      margin-bottom: 6px;
+    }
+
+    &.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;