[libadwaita/wip/snwh/buttons] buttons: more attempts at a raised style

[Sam Hewitt <snwh src gnome org>]

commit 8762708cf6d3637c720cc8a518b32e5511a21c0a
Author: Sam Hewitt <sam snwh org>
Date:   Mon Nov 22 14:03:46 2021 -0330

    buttons: more attempts at a raised style

 src/stylesheet/_colors.scss          | 10 +++---
 src/stylesheet/widgets/_buttons.scss | 59 +++++++++++++++++++++---------------
 src/stylesheet/widgets/_linked.scss  |  1 +
 3 files changed, 41 insertions(+), 29 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 54e1d9d5..6ff2eb86 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -1,5 +1,5 @@
-$border_strength: if($contrast == 'high', 5%, 15%);
-$thin_border_strength: if($contrast == 'high', 25%, 5%);
+$border_opacity: if($contrast == 'high', .5, .15);
+$thin_border_opacity: if($contrast == 'high', .25, .05);
 $focus_border_opacity: if($contrast == 'high', 0.8, 0.5);
 $window_outline_opacity: if($contrast == 'high', .3, .1);
 
@@ -25,7 +25,7 @@ $view_fg_color: gtkcolor(view_fg_color);
 
 $headerbar_bg_color: gtkcolor(headerbar_bg_color);
 $headerbar_fg_color: gtkcolor(headerbar_fg_color);
-$headerbar_border_color: gtkmix(gtkcolor(headerbar_border_color), $headerbar_bg_color, $border_strength);
+$headerbar_border_color: gtkalpha(gtkcolor(headerbar_border_color), $border_opacity);
 $headerbar_backdrop_color: gtkcolor(headerbar_backdrop_color);
 $headerbar_shade_color: gtkcolor(headerbar_shade_color);
 
@@ -44,8 +44,8 @@ $window_border_backdrop_color: gtkcolor(window_border_backdrop_color);
 
 // Other colors
 
-$border_color: gtkmix(currentColor, $window_bg_color, $border_strength);
-$thin_border_color: gtkmix(currentColor, $window_bg_color, $thin_border_strength);
+$border_color: gtkalpha(currentColor, $border_opacity);
+$thin_border_color: gtkalpha(currentColor, $thin_border_opacity);
 $link_color: $accent_color;
 $link_visited_color: gtkmix($accent_color, $view_fg_color, 80%);
 
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 63d9a98e..934797c6 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($window_fg_color, .45);
-$button_checked_hover_color: gtkalpha($window_fg_color, .25);
-$button_checked_active_color: gtkalpha($window_fg_color, .15);
+$button_checked_color: gtkalpha(currentColor, .2);
+$button_checked_hover_color: gtkalpha(currentColor, .3);
+$button_checked_active_color: gtkalpha(currentColor, .45);
 
 $opaque_button_default_bg: gtkmix($window_bg_color, $window_fg_color, 85%);
 
@@ -15,49 +15,50 @@ button {
     padding: 4px 8px;
     border-radius: $button_radius;
     font-weight: bold;
+    box-shadow: inset 0 -1px 0 0 $button_color;
+    border-width: 1px;
+    border-style: solid;
+    border-color: gtkalpha($button_color, 0.5);
+    > * {transform: translateY(-1px);}
 
     @include focus-ring();
     transition: $button_transition;
 
     @at-root %button_basic_raised, & {
       background-color: $button_color;
-      border-width: 1px;
-      border-style: solid;
-      border-color: $border_color;
 
       @if $contrast == 'high' {
         // box-shadow: inset 0 0 0 1px $border_color;
-        border: 1px solid $border_color;
+        border-color: $border_color;
       }
 
       &:hover {
         background-color: $button_hover_color;
-        border-color: gtkmix($border_color, $button_hover_color, 50%);
       }
 
       &.keyboard-activating,
-      &:active {
+      &: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;
+        box-shadow: none;
+        > * {transform: translateY(0px);}
 
         &:hover {
           background-color: $button_checked_hover_color;
-          // border-color: $button_checked_hover_color;
-          border-color: transparent;
+          border-color: $button_checked_hover_color;
         }
+      }
+
+      &:checked {
+        background-color: $button_checked_color;
+        border-color: $button_checked_color;
+        box-shadow: none;
+        > * {transform: translateY(0px);}
 
         &.keyboard-activating,
         &:active {
           background-color: $button_checked_active_color;
-          // border-color: $button_checked_hover_color;
-          border-color: transparent;
+          border-color: $button_checked_active_color;
         }
       }
     }
@@ -122,12 +123,13 @@ button {
     min-height: 32px;
     @include focus-ring($outer: true, $offset: 1px);
     transition: $button_transition;
+    > * {transform: translateY(0px);}
 
     color: $osd_fg_color;
     background-color: transparentize(black, .35);
 
     @if $contrast == 'high' {
-      border-color: currentColor;
+      box-shadow: inset 0 0 0 1px currentColor;
     }
 
     &:hover {
@@ -163,29 +165,35 @@ button {
   @at-root %opaque_button {
     box-shadow: none;
     border-color: transparent;
+    > * {transform: translateY(0px);}
 
     @include focus-ring($outer: true, $offset: 1px);
     transition: $button_transition;
 
     &:hover {
       background-image: image(gtkalpha(currentColor, .1));
+      border-color: transparent;
     }
 
     &.keyboard-activating,
     &:active {
       background-image: image(transparentize(black, .8));
+      border-color: transparent;
     }
 
     &:checked {
       background-image: image(transparentize(black, .85));
+      border-color: transparent;
 
       &:hover {
         background-image: image(transparentize(black, .95));
+        border-color: transparent;
       }
 
       &.keyboard-activating,
       &:active {
         background-image: image(transparentize(black, .7));
+        border-color: transparent;
       }
     }
   }
@@ -226,12 +234,15 @@ button {
     border-color: transparent;
     box-shadow: none;
 
+    > * { transform: translateY(0px);}
+
     @if $contrast == 'high' {
       &:hover,
       &.keyboard-activating,
       &:active,
       &:checked {
-        box-shadow: inset 0 0 0 1px $border_color;
+        // box-shadow: inset 0 0 0 1px $border_color;
+        border-color: $border_color;
       }
     }
 
@@ -381,7 +392,7 @@ button.outline {
     border-color: $border_color;
   }
   @else {
-    border-color: gtkalpha(currentColor, .15);
+    border-color: $button_color;
   }
 
   // Specificity bump
@@ -519,7 +530,7 @@ splitbutton {
   @at-root %flat_split_button,
   &.flat {
     > separator {
-      background: gtkalpha(currentColor, $dimmer_opacity);
+      background: $border_color;
     }
 
     &:hover,
diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index 1e29c3bc..16a550a6 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -39,6 +39,7 @@ $_linked_widgets: ("%button",          ""),
       &:not(:last-child) #{$child} {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
+        box-shadow: none;
       }
     }
   }