[libadwaita/wip/exalm/menu-checks] stylesheet: Simplify checks and radios

[Alexander Mikhaylenko <alexm src gnome org>]

commit 17aa424317697cae83087a4513821d889c8a42d0
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed May 19 18:19:13 2021 +0500

    stylesheet: Simplify checks and radios
    
    Use flatter checks, without borders. Use distinct enough background to make
    them visible in dark.
    
    Unify the appearance of regular and selection mode checks, at this point
    selection mode is not much more than a larger variant.
    
    Keep a border for high contrast.

 src/stylesheet/_colors.scss         |  3 --
 src/stylesheet/_drawing.scss        | 49 --------------------
 src/stylesheet/widgets/_checks.scss | 92 ++++++++++++++-----------------------
 src/stylesheet/widgets/_menus.scss  | 18 +++++---
 4 files changed, 45 insertions(+), 117 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 93af95e7..d06d6971 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -57,9 +57,6 @@ $suggested_bg_color: $selected_bg_color;
 $suggested_border_color: $selected_borders_color;
 $progress_bg_color: $selected_bg_color;
 $progress_border_color: $selected_borders_color;
-$checkradio_bg_color: $selected_bg_color;
-$checkradio_fg_color: $selected_fg_color;
-$checkradio_borders_color: if($variant == 
'light',darken($selected_bg_color,10%),darken($selected_bg_color,20%));
 $switch_bg_color: $selected_bg_color;
 $switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),darken($switch_bg_color,30%));
 $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), 
transparentize($selected_bg_color, 0.3));
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index d6d3fae9..d34a0de3 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -324,52 +324,3 @@ $_default_button_c: lighten($bg_color,2%);
   border: none;                  //
   box-shadow: none;              //
 }
-
-/***************************
- * Check and Radio buttons *
- ***************************/
-
- @mixin check($t, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $checked: false) {
-  // Check/Radio drawing function
-  //
-  // $t:        check/radio type,
-  // $c:        base button color for colored* types
-  // $tc:       optional text color for colored* types
-  // $checked:  bool to chose between checked/unchecked
-  //
-  // possible $t values:
-  // normal, hover, active, insensitive, menu
-
-  $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color);
-
-  @if $t==normal  {
-    background-clip: if($checked, border-box, padding-box);
-    background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
-    border-color: $_border_color;
-    box-shadow: 0 1px transparentize(black, 0.95);
-    color: $tc;
-  }
-
-  @if $t==hover {
-    background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%, 
lighten($c, 4%) 90%));
-  }
-
-  @if $t==active {
-    box-shadow: inset 0 1px if($variant == 'light', rgba(0, 0, 0, 0.2), black);
-    background-image: if($c == white, image(darken($c, 15%)), image(darken($c, 5%)));
-  }
-
-  @if $t==insensitive {
-    box-shadow: none;
-    color: transparentize($tc, 0.3);
-  }
-
-  @if $t==menu {
-   transform: scale(0.8);
-   border-width: 1.2px;
-   border-color: transparent;
-   box-shadow: none;
-   background-image: image(transparent);
-   color: $tc;
-  }
-}
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 1ec9e8ca..772a012f 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -15,52 +15,44 @@ check,
 radio {
   min-height: 14px;
   min-width: 14px;
-  border: 1px solid;
-  -gtk-icon-source: none;
-
-  & {
-    // for unchecked
-    $_c: if($variant=='light', white, $bg_color);
-
-    @each $state, $t in ("", "normal"),
-                        (":hover", "hover"),
-                        (":active", "active"),
-                        (":disabled", "insensitive") {
-      &#{$state} {
-        @include check($t, $_c);
-      }
+  -gtk-icon-size: 14px;
+  background-color: transparentize($text_color, .85);
+  border: 1px solid transparent;
+
+  @if $contrast == "high" {
+    border-color: $borders_color;
+  }
+
+  &:hover {
+    background-color: transparentize($text_color, .75);
+
+    &:active {
+      background-color: transparentize(black, .65);
     }
   }
 
-  & {
-    // for checked
-    @each $t in (':checked'), (':indeterminate') {
-      &#{$t} {
-        @each $state, $t in ("", "normal"),
-                            (":hover", "hover"),
-                            (":active", "active"),
-                            (":disabled", "insensitive") {
-          &#{$state} {
-            @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
-          }
-        }
+  &:checked,
+  &:indeterminate {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+    border-color: transparent;
+
+    &:hover {
+      background-color: mix($selected_bg_color, $text_color, 80%);
+
+      &:active {
+        background-color: mix($selected_bg_color, black, 60%);
       }
     }
   }
 
-  .osd & {
-    @include button(osd);
-
-    &:hover { @include button(osd); }
-    &:active { @include button(osd-active); }
-    &:disabled { @include button(osd-insensitive); }
+  &:disabled {
+    filter: opacity(.5);
   }
 }
 
-%check,
 check {
   border-radius: 3px;
-  -gtk-icon-size: 14px;
 
   &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
                                             -gtk-recolor(url("assets/check 2-symbolic symbolic png"))); }
@@ -69,10 +61,8 @@ check {
                                                   -gtk-recolor(url("assets/dash 2-symbolic symbolic png"))); 
}
 }
 
-%radio,
 radio {
   border-radius: 100%;
-  -gtk-icon-size: 14px;
 
   &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")),
                                             -gtk-recolor(url("assets/bullet 2-symbolic symbolic png"))); }
@@ -82,26 +72,12 @@ radio {
 }
 
 //selection-mode
-@each $check_state, $check_icon, $check_color, $check_background in
-  ('', 'none', 'transparent', $checkradio_bg_color),
-  (':hover', 'none', 'transparent', $checkradio_bg_color),
-  (':active', 'none', 'transparent', $checkradio_bg_color),
-  (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
-  (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
-  (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color), {
-
-  .view.content-view.check#{$check_state}:not(list),
-  .content-view .tile check#{$check_state}:not(list) {
-    margin: 4px;
-    min-width: 32px;
-    min-height: 32px;
-    color: #{$check_color};
-    background-color: #{$check_background};
-    border-radius: 5px;
-    background-image: none;
-    transition: 200ms;
-    box-shadow: none;
-    border-width: 0;
-    -gtk-icon-source: #{$check_icon};
-  }
+.view.content-view.check:not(list),
+.content-view .tile check:not(list) {
+  margin: 4px;
+  min-width: 32px;
+  min-height: 32px;
+  border-radius: 5px;
+
+  &:checked { -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); }
 }
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 0fd67a0b..a978bccc 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -51,14 +51,18 @@ popover.menu {
 
   check,
   radio {
-    &, &:hover, &:active, &:checked, &:disabled {
-      @include check('menu', 'transparent', $text_color);
+    &, &:hover, &:hover:active, &:checked, &:disabled {
+      background: none;
+      color: $text_color;
+
+      transform: scale(0.8);
+      border-width: 1.2px;
     }
   }
 
   //only menu radios have a border
   radio {
-    &, &:hover, &:active, &:checked, &:disabled {
+    &, &:hover, &:hover:active, &:checked, &:disabled {
       border-color: transparentize($text_color, if($contrast == "high", 0, 0.7));
     }
   }
@@ -75,10 +79,6 @@ popover.menu {
       margin-left: 6px;
       margin-right: -2px;
     }
-
-    &:disabled {
-      filter: opacity(0.5);
-    }
   }
 
   modelbutton {
@@ -109,6 +109,10 @@ popover.menu {
 
       &:hover { background: none; }
 
+      &:disabled {
+        filter: opacity(0.5);
+      }
+
       &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
 
       &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }