[libadwaita/wip/exalm/borderless] Outline buttons

[Alexander Mikhaylenko <alexm src gnome org>]

commit 2617d27597de6c37b95703a689cbeaaddd0ff60c
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Jul 31 16:14:16 2021 +0500

    Outline buttons

 src/stylesheet/_colors.scss               |  8 +--
 src/stylesheet/widgets/_buttons.scss      | 82 +++++++++++--------------------
 src/stylesheet/widgets/_file-chooser.scss |  4 +-
 src/stylesheet/widgets/_header-bar.scss   |  7 +--
 src/stylesheet/widgets/_linked.scss       |  4 +-
 src/stylesheet/widgets/_menus.scss        |  2 -
 src/stylesheet/widgets/_spin-button.scss  |  4 +-
 src/stylesheet/widgets/_toolbars.scss     |  8 +--
 8 files changed, 44 insertions(+), 75 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 2a78e135..bdce870f 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -42,12 +42,7 @@ $trough_color: gtkalpha(currentColor, .15);
 $trough_hover_color: gtkalpha(currentColor, .2);
 $trough_active_color: gtkalpha(currentColor, .25);
 
-$button_color: gtkalpha(currentColor, .1);
-$button_hover_color: gtkalpha(currentColor, .15);
-$button_active_color: gtkalpha(currentColor, .25);
-$button_checked_color: gtkalpha(currentColor, .2);
-$button_checked_hover_color: gtkalpha(currentColor, .25);
-$button_checked_active_color: gtkalpha(currentColor, .35);
+$button_border_color: $view_selected_active_color;
 
 $fill_color: $accent_bg_color;
 $fill_text_color: $accent_fg_color;
@@ -93,6 +88,7 @@ $dim_label_opacity: 0.55;
   $thin_borders_color: gtkalpha(currentColor, .25);
 
   $headerbar_border_color: transparentize($fg_color, .5);
+  $button_border_color: $borders_color;
 
   //insensitive state derived colors
   $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 034c3398..8375c794 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -9,36 +9,33 @@ button {
   @at-root %button_basic, & {
     min-height: 24px;
     min-width: 16px;
-    padding: 5px 10px;
+    padding: 4px 9px;
     border-radius: $button_radius;
-    background-color: $button_color;
-
-    @if $contrast == 'high' {
-      box-shadow: inset 0 0 0 1px $borders_color;
-    }
+    border: 1px solid $button_border_color;
+    background-clip: padding-box;
 
     @include focus-ring();
     transition: $button_transition;
 
     &:hover {
-      background-color: $button_hover_color;
+      background-color: $view_hover_color;
     }
 
     &.keyboard-activating,
     &:active {
-      background-color: $button_active_color;
+      background-color: $view_active_color;
     }
 
     &:checked {
-      background-color: $button_checked_color;
+      background-color: $view_selected_color;
 
       &:hover {
-        background-color: $button_checked_hover_color;
+        background-color: $view_selected_hover_color;
       }
 
       &.keyboard-activating,
       &:active {
-        background-color: $button_checked_active_color;
+        background-color: $view_selected_active_color;
       }
     }
 
@@ -57,13 +54,13 @@ button {
     }
 
     &.text-button {
-      padding-left: 17px;
-      padding-right: 17px;
+      padding-left: 16px;
+      padding-right: 16px;
     }
 
     &.text-button.image-button {
-      padding-left: 9px;
-      padding-right: 9px;
+      padding-left: 8px;
+      padding-right: 8px;
 
       label {
         padding-left: 8px;
@@ -78,7 +75,6 @@ button {
     }
   }
 
-  // big standalone buttons like in Documents pager
   @at-root %osd_button,
   &.osd {
     min-width: 32px;
@@ -128,6 +124,8 @@ button {
 
     @include focus-ring($outer: true, $offset: 1px);
     transition: $button_transition;
+    // FIXME messes up sizing
+    border: none;
 
     &:hover {
       background-image: image(gtkalpha(currentColor, .1));
@@ -177,15 +175,14 @@ button {
     background: transparent;
     @include focus-ring();
     transition: $button_transition;
-
-    box-shadow: none;
+    border-color: transparent;
 
     @if $contrast == 'high' {
       &:hover,
       &.keyboard-activating,
       &:active,
       &:checked {
-        box-shadow: inset 0 0 0 1px $borders_color;
+        border-color: $button_border_color;
       }
     }
 
@@ -255,8 +252,8 @@ button {
 
   @at-root %circular_button,
   &.circular { // force circular button shape
-    min-width: 34px;
-    min-height: 34px;
+    min-width: 32px;
+    min-height: 32px;
     padding: 0;
     border-radius: 9999px;
 
@@ -289,7 +286,7 @@ button {
 }
 
 button.color {
-  padding: 5px;
+  padding: 4px;
 
   > colorswatch:only-child {
     border-radius: 2.5px;
@@ -310,29 +307,6 @@ button.color {
   }
 }
 
-/* list buttons */
-/* tone down as per new designs, see issue #1473 */
-%outline_button,
-button.outline {
-  @extend %button_basic_flat;
-
-  @if $contrast == 'high' {
-    box-shadow: inset 0 0 0 1px $borders_color;
-  }
-  @else {
-    box-shadow: inset 0 0 0 1px gtkalpha(currentColor, .15);
-
-    &:hover, &:active, &:checked {
-      box-shadow: none;
-    }
-  }
-
-  // Specificity bump
-  &:drop(active) {
-    @extend %button_basic_drop_active;
-  }
-}
-
 menubutton {
   > button > box {
     border-spacing: 6px;
@@ -351,7 +325,6 @@ menubutton {
 
   &.circular > button { @extend %circular_button; }
   &.flat > button { @extend %button_basic_flat; }
-  &.outline > button { @extend %outline_button; }
 
   arrow {
     min-height: 16px;
@@ -398,14 +371,22 @@ splitbutton {
   > menubutton > button:dir(rtl) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    margin-right: -1px;
   }
 
   > button:dir(rtl),
   > menubutton > button:dir(ltr) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+  }
+
+  > menubutton > button:dir(rtl) {
+    margin-right: -1px;
+    border-right: none;
+  }
+
+  > menubutton > button:dir(ltr) {
     margin-left: -1px;
+    border-left: none;
   }
 
   @at-root %flat_split_button,
@@ -436,13 +417,6 @@ splitbutton {
     }
   }
 
-  &.outline {
-    > button,
-    > menubutton > button {
-      @extend %outline_button;
-    }
-  }
-
   > menubutton > button > arrow.none {
     -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
   }
diff --git a/src/stylesheet/widgets/_file-chooser.scss b/src/stylesheet/widgets/_file-chooser.scss
index b5f89abd..0608e994 100644
--- a/src/stylesheet/widgets/_file-chooser.scss
+++ b/src/stylesheet/widgets/_file-chooser.scss
@@ -23,8 +23,8 @@ filechooser {
 
   pathbar > button {
     &.text-button, &.image-button, & {
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-left: 4px;
+      padding-right: 4px;
     }
 
     &.text-button.image-button label {
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 35930c00..da82767a 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -93,9 +93,10 @@ windowcontrols {
     min-width: 24px;
     padding: 5px;
     margin: 0;
+    border: none;
 
     > image {
-      background-color: $button_color;
+      background-color: $view_selected_color;
       border-radius: 100%;
       padding: 2px;
       transition: $button_transition;
@@ -105,8 +106,8 @@ windowcontrols {
       background: none;
     }
 
-    &:hover > image { background-color: $button_hover_color; }
-    &:hover:active > image { background-color: $button_active_color; }
+    &:hover > image { background-color: $view_selected_hover_color; }
+    &:hover:active > image { background-color: $view_selected_active_color; }
   }
 }
 
diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index 1e29c3bc..785fb80d 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -17,7 +17,7 @@ $_linked_widgets: ("%button",          ""),
       &:dir(rtl):not(:last-child) #{$child} {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
-        margin-left: -1px;
+        border-left: none;
       }
 
       &:dir(ltr):not(:last-child) #{$child},
@@ -33,7 +33,7 @@ $_linked_widgets: ("%button",          ""),
       &:not(:first-child) #{$child} {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
-        margin-top: -1px;
+        border-top: none;
       }
 
       &:not(:last-child) #{$child} {
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 3f7c579b..b27d1827 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -28,8 +28,6 @@ popover.menu {
     padding: $menu_padding $menu_padding 6px;
 
     button.circular.image-button.model {
-      @extend %outline_button;
-
       outline: none;
       padding: 11px;
       &:selected {
diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
index ddcb5620..cab69318 100644
--- a/src/stylesheet/widgets/_spin-button.scss
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -50,8 +50,8 @@ spinbutton {
 
   &.vertical {
     > text {
-      min-height: 30px;
-      min-width: 30px;
+      min-height: 32px;
+      min-width: 32px;
     }
 
     /* :not here just to bump specificity above that of the list button styling */
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 83356d02..e7178393 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -115,8 +115,8 @@ searchbar > revealer > box {
   box-shadow: inset 0 -1px $borders_color;
 
  .close {
-    min-width: 18px;
-    min-height: 18px;
+    min-width: 16px;
+    min-height: 16px;
     padding: 4px;
     border-radius: 50%;
     @extend %button_basic_flat;
@@ -166,8 +166,8 @@ infobar {
   }
 
  .close {
-    min-width: 18px;
-    min-height: 18px;
+    min-width: 16px;
+    min-height: 16px;
     padding: 4px;
     border-radius: 50%;
     @extend %button_basic_flat;