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

[Alexander Mikhaylenko <alexm src gnome org>]

commit cfa1bccd7e924cade3675d8f29ad979a36c1582d
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.
    
    Don't bother with the check() mixin, just inline the styles as they are
    only used once and it's simpler that way. The number of added/removed lines
    speaks for itself.

 src/stylesheet/_colors.scss         |  3 --
 src/stylesheet/_drawing.scss        | 49 -------------------
 src/stylesheet/widgets/_checks.scss | 95 +++++++++++++++----------------------
 src/stylesheet/widgets/_menus.scss  | 20 ++++----
 4 files changed, 48 insertions(+), 119 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..c27d812d 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -15,52 +15,47 @@ 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);
-      }
+  padding: 1px;
+  -gtk-icon-size: 14px;
+  background-color: transparentize($text_color, .85);
+
+  @if $contrast == "high" {
+    box-shadow: inset 0 0 0 1px $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;
+
+    @if $contrast == "high" {
+      box-shadow: none;
+    }
+
+    &: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 +64,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 +75,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..4eef1d32 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -51,16 +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);
     }
   }
 
   //only menu radios have a border
   radio {
-    &, &:hover, &:active, &:checked, &:disabled {
-      border-color: transparentize($text_color, if($contrast == "high", 0, 0.7));
-    }
+    padding: 0;
+    border: 1.2px solid transparentize($text_color, if($contrast == "high", 0, 0.7));
   }
 
   check,
@@ -75,10 +77,6 @@ popover.menu {
       margin-left: 6px;
       margin-right: -2px;
     }
-
-    &:disabled {
-      filter: opacity(0.5);
-    }
   }
 
   modelbutton {
@@ -109,6 +107,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"); }