[libadwaita/wip/exalm/buttons-v2: 9/9] stylesheet: Use selected/hover/active view styles for flat buttons

[Alexander Mikhaylenko <alexm src gnome org>]

commit 8931fa336dc809d4f8977073fde9d8b152ed79a2
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun May 23 15:30:26 2021 +0500

    stylesheet: Use selected/hover/active view styles for flat buttons
    
    Less redundancy, and this allows us to remove headerbar overrides for .flat
    and also fixes the concerns from 
https://gitlab.gnome.org/GNOME/libadwaita/-/merge_requests/91#note_1093606

 src/stylesheet/_drawing.scss            | 25 ++++++++++++++-----------
 src/stylesheet/widgets/_buttons.scss    | 17 +++++++++++++++--
 src/stylesheet/widgets/_header-bar.scss | 13 +------------
 3 files changed, 30 insertions(+), 25 deletions(-)
---
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index d34a0de3..7018cdc1 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -256,22 +256,25 @@ $_default_button_c: lighten($bg_color,2%);
     border-color: transparent;
     background-image: none;
     box-shadow: none;
-    @if $variant == 'light' {
-      background-color: darken($c,14%);
-    } @else {
-      background-color: darken($c,1%);
-    }
+    background-color: $view_hover_color;
   }
   @else if $t==undecorated-active {
     border-color: transparent;
     background-image: none;
     box-shadow: none;
-    @if $variant == 'light' {
-      background-color: darken($c,20%);
-    }
-    @else {
-      background-color: darken($c,5%);
-    }
+    background-color: $view_active_color;
+  }
+  @else if $t==undecorated-checked {
+    border-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    background-color: $view_selected_color;
+  }
+  @else if $t==undecorated-checked-hover {
+    border-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    background-color: $view_selected_hover_color;
   }
 }
 
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index d248c3f3..c24000bd 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -55,12 +55,25 @@ button {
         @include button(undecorated-hover);
         transition: $button_transition;
         transition-duration: 500ms;
+
+        &:active {
+          @include button(undecorated-active);
+        }
       }
-      &:active,
+
       &:checked {
-        @include button(undecorated-active);
+        @include button(undecorated-checked);
         transition: $button_transition;
+
+        &:hover {
+          @include button(undecorated-checked-hover);
+
+          &:active {
+            @include button(undecorated-active);
+          }
+        }
       }
+
       &:disabled { @include button(undecorated); }
     }
 
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index 4ea84f4e..9a834c6f 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -36,7 +36,7 @@ headerbar {
 
   /* Darken switchbuttons for headerbars. issue #1588 */
   stackswitcher > button:checked,
-  button.toggle:checked {
+  button:not(.flat).toggle:checked {
 
     background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
     border-color: darken($borders_color, 3%);
@@ -109,7 +109,6 @@ windowcontrols {
   border-spacing: 6px;
 
   button {
-    @extend %button_basic;
     @extend %button_basic_flat;
 
     border-radius: 9999px;
@@ -120,16 +119,6 @@ windowcontrols {
   }
 }
 
-// special case hover colors inside a headerbar
-headerbar button.flat,
-headerbar windowcontrols button {
-  &:hover {
-    @include button(undecorated-hover,$c:darken($headerbar_bg_color,6%));
-  }
-  &:active,
-  &:checked { @include button(undecorated-active,$c:darken($headerbar_bg_color,10%)); }
-}
-
 /******************
  * AdwWindowTitle *
  ******************/