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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 192bf949bafaceabd6004defd52c9049c9bfd2cc
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 | 97 +++++++++++++++----------------------
 src/stylesheet/widgets/_menus.scss  | 10 ++--
 4 files changed, 47 insertions(+), 112 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..86a288a7 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -15,52 +15,51 @@ 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($fg_color, .85);
+  border: 1px solid transparent;
+
+  @if $contrast == "high" {
+    border-color: $borders_color;
+  }
+
+  &:hover {
+    background-color: transparentize($fg_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, $fg_color, 80%);
+
+      &:active {
+        background-color: mix($selected_bg_color, black, 60%);
       }
     }
   }
 
-  .osd & {
-    @include button(osd);
+  &:disabled {
+    background-color: transparentize($fg_color, .85);
 
-    &:hover { @include button(osd); }
-    &:active { @include button(osd-active); }
-    &:disabled { @include button(osd-insensitive); }
+    &:checked,
+    &:indeterminate {
+      background-color: transparentize($selected_bg_color, .5);
+      color: transparentize($selected_fg_color, .5);
+      border-color: transparent;
+    }
   }
 }
 
-%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 +68,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 +79,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..88a1ce7a 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));
     }
   }