[libadwaita/wip/exalm/button-checked] stylesheet: Make checked toggle buttons more obvious

[Alexander Mikhaylenko <alexm src gnome org>]

commit 6536f25ceb4c633019742509d655c965958148f6
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Nov 1 20:18:15 2021 +0500

    stylesheet: Make checked toggle buttons more obvious
    
    As much as I don't want to do this because this makes recoloring harder,
    I think there's no way around it for now. If we had css variables, this
    could have been done cleanly.

 src/stylesheet/_common.scss             |  2 ++
 src/stylesheet/widgets/_buttons.scss    | 62 +++++++++++++++++++++++++++++----
 src/stylesheet/widgets/_header-bar.scss |  4 +++
 src/stylesheet/widgets/_lists.scss      |  4 +++
 src/stylesheet/widgets/_misc.scss       |  2 ++
 src/stylesheet/widgets/_popovers.scss   |  2 ++
 src/stylesheet/widgets/_tab-view.scss   |  4 +++
 src/stylesheet/widgets/_toolbars.scss   |  4 +++
 src/stylesheet/widgets/_views.scss      |  2 ++
 9 files changed, 80 insertions(+), 6 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 4b083b6d..b068e98c 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -33,6 +33,8 @@ dnd {
   border: none;
   background-color: $osd_bg_color;
   background-clip: padding-box;
+
+  button { @extend %osd_checked_button; }
 }
 
 /* Text selection */
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index d3ae7b13..ab341abe 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -36,19 +36,52 @@ button {
       }
 
       &:checked {
-        background-color: $button_checked_color;
+        background-color: gtkalpha(currentColor, .8);
+
+        @include focus-ring($outer: true, $offset: 1px);
+        transition: $button_transition;
+
+        @extend %checked_button;
 
         &:hover {
-          background-color: $button_checked_hover_color;
+          background-color: gtkalpha(gtkmix(currentColor, white, 80%), .9);
         }
 
         &.keyboard-activating,
         &:active {
-          background-color: $button_checked_active_color;
+          background-color: gtkalpha(gtkmix(currentColor, black, 90%), .9);
         }
       }
     }
 
+    @at-root %checked_button:checked > * {
+      color: $window_bg_color;
+    }
+
+    @at-root %osd_checked_button:checked > * {
+      color: transparentize(black, .2);
+    }
+
+    @at-root %view_checked_button:checked > * {
+      color: $view_bg_color;
+    }
+
+    @at-root %headerbar_checked_button:checked > * {
+      color: $headerbar_bg_color;
+    }
+
+    @at-root %headerbar_backdrop_checked_button:checked > * {
+      color: $headerbar_backdrop_color;
+    }
+
+    @at-root %popover_checked_button:checked > * {
+      color: $popover_bg_color;
+    }
+
+    @at-root %card_checked_button:checked > * {
+      color: $card_bg_color;
+    }
+
     &:disabled {
       filter: opacity($disabled_opacity);
 
@@ -129,15 +162,20 @@ button {
     }
 
     &:checked {
-      background-color: gtkalpha(gtkmix(black, currentColor, 80%), .65);
+      background-color: gtkalpha(currentColor, .9);
+      color: white;
+
+      > * {
+        color: black;
+      }
 
       &:hover {
-        background-color: gtkalpha(gtkmix(black, currentColor, 75%), .65);
+        background-color: currentColor;
       }
 
       &.keyboard-activating,
       &:active {
-        background-color: gtkalpha(gtkmix(black, currentColor, 65%), .65);
+        background-color: gtkalpha(currentColor, .8);
       }
     }
 
@@ -165,6 +203,10 @@ button {
     &:checked {
       background-image: image(transparentize(black, .85));
 
+      > * {
+        color: inherit;
+      }
+
       &:hover {
         background-image: image(transparentize(black, .95));
       }
@@ -232,6 +274,10 @@ button {
     &:checked {
       background: $view_selected_color;
 
+      > * {
+        color: inherit;
+      }
+
       &:hover {
         background: $view_selected_hover_color;
       }
@@ -318,6 +364,10 @@ button {
       background-color: $card_bg_color;
       background-image: image($view_selected_color);
 
+      > * {
+        color: inherit;
+      }
+
       &:hover { background-image: image($view_selected_hover_color); }
 
       &.keyboard-activating,
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index c803904f..4db93fb0 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -11,6 +11,8 @@ headerbar {
 
   @extend %toolbar;
 
+  &:not(.flat) button { @extend %headerbar_checked_button; }
+
   > windowhandle > box {
     padding: 0 7px 1px 7px;
 
@@ -24,6 +26,8 @@ headerbar {
   &:backdrop {
     background-color: $headerbar_backdrop_color;
 
+    &:not(.flat) button { @extend %headerbar_backdrop_checked_button; }
+
     transition: $backdrop_transition;
 
     > windowhandle {
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index f40974ef..5688a13b 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -5,6 +5,8 @@ list {
   background-clip: padding-box;
   border-color: $border_color;
 
+  button { @extend %view_checked_button; }
+
   > row {
     padding: 2px;
     background-clip: padding-box;
@@ -219,6 +221,8 @@ list.boxed-list {
   border: 1px solid $card_border_color;
   border-radius: $card_radius;
 
+  button { @extend %card_checked_button; }
+
   > row {
     // Regular rows and expander header rows background
     &, &.expander row.header {
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index fbf5fdd6..d5ee81c3 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -127,6 +127,8 @@ statuspage {
   border: 1px solid $card_border_color;
   border-radius: $card_radius;
 
+  button { @extend %card_checked_button; }
+
   @include focus-ring($offset: -2px);
 
   &.activatable {
diff --git a/src/stylesheet/widgets/_popovers.scss b/src/stylesheet/widgets/_popovers.scss
index 38d45c42..128efc6c 100644
--- a/src/stylesheet/widgets/_popovers.scss
+++ b/src/stylesheet/widgets/_popovers.scss
@@ -15,6 +15,8 @@ popover.background {
     padding: 8px;
     border-radius: $popover_radius;
 
+    button { @extend %popover_checked_button; }
+
     > list,
     > .view,
     > toolbar {
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index aa3badf9..e942f224 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -127,6 +127,8 @@ tabbar {
       background-color: $headerbar_bg_color;
       color: $headerbar_fg_color;
       border-color: $headerbar_border_color;
+
+      button { @extend %headerbar_checked_button; }
     }
 
     scrolledwindow.pinned {
@@ -177,6 +179,8 @@ tabbar {
     &:backdrop .box {
       background-color: $headerbar_backdrop_color;
       transition: $backdrop_transition;
+
+      button { @extend %headerbar_backdrop_checked_button; }
     }
   }
 }
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 3e14afcf..a0dca2b1 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -137,9 +137,13 @@ searchbar {
     color: $headerbar_fg_color;
     box-shadow: inset 0 -1px $headerbar_border_color;
 
+    button { @extend %headerbar_checked_button; }
+
     &:backdrop {
       background-color: $headerbar_backdrop_color;
       transition: $backdrop_transition;
+
+      button { @extend %headerbar_backdrop_checked_button; }
     }
   }
 
diff --git a/src/stylesheet/widgets/_views.scss b/src/stylesheet/widgets/_views.scss
index b595eeff..18da622d 100644
--- a/src/stylesheet/widgets/_views.scss
+++ b/src/stylesheet/widgets/_views.scss
@@ -3,6 +3,8 @@
   color: $view_fg_color;
   background-color: $view_bg_color;
 
+  button { @extend %view_checked_button; }
+
   &:disabled {
     color: gtkalpha(currentColor, .5);
     background-color: gtkmix($window_bg_color, $view_bg_color, 60%);