[libadwaita/wip/exalm/buttons-again: 3/4] stylesheet: Use outline buttons as default

[Alexander Mikhaylenko <alexm src gnome org>]

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

    stylesheet: Use outline buttons as default
    
    Add back border instead of box-shadow, adjust sizes everywhere.
    
    Remove .outline since it's redundant now.

 src/stylesheet/_colors.scss               |  8 +--
 src/stylesheet/widgets/_buttons.scss      | 87 ++++++++++++-------------------
 src/stylesheet/widgets/_file-chooser.scss |  4 +-
 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 +--
 7 files changed, 45 insertions(+), 72 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 255c0cf4..a3620fe1 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 fd712737..bb9fd929 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -9,37 +9,34 @@ 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;
     font-weight: bold;
-
-    @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;
       }
     }
 
@@ -53,18 +50,18 @@ button {
 
     &.image-button {
       min-width: 24px;
-      padding-left: 6px;
-      padding-right: 6px;
+      padding-left: 5px;
+      padding-right: 5px;
     }
 
     &.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;
@@ -75,11 +72,11 @@ button {
     @at-root %button_basic_drop_active,
     &:drop(active) {
       color: $drop_target_color;
-      box-shadow: inset 0 0 0 2px $drop_target_color;
+      border-color: $drop_target_color;
+      box-shadow: none;
     }
   }
 
-  // big standalone buttons like in Documents pager
   @at-root %osd_button,
   &.osd {
     min-width: 32px;
@@ -90,9 +87,10 @@ button {
     color: $osd_fg_color;
     background-color: $osd_bg_color;
 
-    @if $contrast == 'high' {
-      box-shadow: 0 0 0 1px currentColor;
-    }
+    // border-color is not enough since non-button .osd overrides borders
+    border: 1px solid if($contrast == 'high', currentColor, transparent);
+    background-clip: border-box;
+    background-origin: border-box;
 
     &:hover {
       color: white;
@@ -125,10 +123,11 @@ button {
   }
 
   @at-root %filled_button {
-    box-shadow: none;
-
     @include focus-ring($outer: true, $offset: 1px);
     transition: $button_transition;
+    border-color: transparent;
+    background-clip: border-box;
+    background-origin: border-box;
 
     &:hover {
       background-image: image(gtkalpha(currentColor, .1));
@@ -151,6 +150,11 @@ button {
         background-image: image(transparentize(black, .7));
       }
     }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
+    }
   }
 
   &.destructive-action {
@@ -178,15 +182,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;
       }
     }
 
@@ -256,8 +259,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;
 
@@ -290,7 +293,7 @@ button {
 }
 
 button.color {
-  padding: 5px;
+  padding: 4px;
 
   > colorswatch:only-child {
     border-radius: 2.5px;
@@ -311,29 +314,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;
@@ -352,7 +332,6 @@ menubutton {
 
   &.circular > button { @extend %circular_button; }
   &.flat > button { @extend %button_basic_flat; }
-  &.outline > button { @extend %outline_button; }
 
   arrow {
     min-height: 16px;
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/_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 7888a312..9f7a4024 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -40,8 +40,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;
@@ -90,8 +90,8 @@ infobar {
   }
 
  .close {
-    min-width: 18px;
-    min-height: 18px;
+    min-width: 16px;
+    min-height: 16px;
     padding: 4px;
     border-radius: 50%;
     @extend %button_basic_flat;