[libadwaita/wip/snwh/buttons] buttons: fixes and rewrites - adjust to use border again instead of box-shadow - a toggled style t

[Sam Hewitt <snwh src gnome org>]

commit 8ff40bdb0af77896852306af5d8842d4ab0697a5
Author: Sam Hewitt <sam snwh org>
Date:   Mon Nov 15 14:10:50 2021 -0330

    buttons: fixes and rewrites
     - adjust to use border again instead of box-shadow
     - a toggled style that is inversion of the button colors

 src/stylesheet/widgets/_buttons.scss    | 37 ++++++++++++++++++++++-----------
 src/stylesheet/widgets/_header-bar.scss |  4 +++-
 2 files changed, 28 insertions(+), 13 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 8792d5de..29857124 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -1,9 +1,9 @@
 $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_checked_color: gtkalpha($window_fg_color, .55);
+$button_checked_hover_color: gtkalpha($window_fg_color, .35);
+$button_checked_active_color: gtkalpha($window_fg_color, .25);
 
 $opaque_button_default_bg: gtkmix($window_bg_color, $window_fg_color, 85%);
 
@@ -12,7 +12,7 @@ button {
   @at-root %button_basic, & {
     min-height: 24px;
     min-width: 16px;
-    padding: 5px 10px;
+    padding: 4px 8px;
     border-radius: $button_radius;
     font-weight: bold;
 
@@ -21,30 +21,43 @@ button {
 
     @at-root %button_basic_raised, & {
       background-color: $button_color;
+      border-width: 1px;
+      border-style: solid;
+      border-color: $button_color;
 
       @if $contrast == 'high' {
-        box-shadow: inset 0 0 0 1px $border_color;
+        // box-shadow: inset 0 0 0 1px $border_color;
+        border: 1px solid $button_color;
       }
 
       &:hover {
         background-color: $button_hover_color;
+        border-color: $button_hover_color;
       }
 
       &.keyboard-activating,
       &:active {
         background-color: $button_active_color;
+        border-color: $button_active_color;
       }
 
       &:checked {
         background-color: $button_checked_color;
+        // border-color: $button_checked_color;
+        border-color: transparent;
+        color: $window_bg_color;
 
         &:hover {
           background-color: $button_checked_hover_color;
+          // border-color: $button_checked_hover_color;
+          border-color: transparent;
         }
 
         &.keyboard-activating,
         &:active {
           background-color: $button_checked_active_color;
+          // border-color: $button_checked_hover_color;
+          border-color: transparent;
         }
       }
     }
@@ -149,6 +162,7 @@ button {
 
   @at-root %opaque_button {
     box-shadow: none;
+    border-color: transparent;
 
     @include focus-ring($outer: true, $offset: 1px);
     transition: $button_transition;
@@ -205,10 +219,11 @@ button {
 
   @at-root %button_basic_flat,
   &.flat {
-    background: transparent;
     @include focus-ring();
     transition: $button_transition;
 
+    background: transparent;
+    border-color: transparent;
     box-shadow: none;
 
     @if $contrast == 'high' {
@@ -363,14 +378,10 @@ button.outline {
   @extend %button_basic_flat;
 
   @if $contrast == 'high' {
-    box-shadow: inset 0 0 0 1px $border_color;
+    border-color: $border_color;
   }
   @else {
-    box-shadow: inset 0 0 0 1px gtkalpha(currentColor, .15);
-
-    &:hover, &:active, &:checked {
-      box-shadow: none;
-    }
+    border-color: gtkalpha(currentColor, .15);
   }
 
   // Specificity bump
@@ -493,6 +504,7 @@ splitbutton {
   // Reimplementing linked so we don't blow up css
   > button:dir(ltr),
   > menubutton > button:dir(rtl) {
+    border-right-width: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     margin-right: -1px;
@@ -500,6 +512,7 @@ splitbutton {
 
   > button:dir(rtl),
   > menubutton > button:dir(ltr) {
+    border-left-width: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     margin-left: -1px;
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 3bfee745..57a21e9b 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -95,9 +95,10 @@ windowcontrols {
 
   > button {
     min-width: 24px;
-    padding: 5px;
+    padding: 4px;
     margin: 0;
     box-shadow: none;
+    border-color: transparent;
 
     > image {
       background-color: $button_color;
@@ -111,6 +112,7 @@ windowcontrols {
 
     &, &:hover, &:active {
       background: none;
+      border-color: transparent;
     }
 
     &:hover > image { background-color: $button_hover_color; }