[gtk/wip/jimmac/menu-styling-adjustments] Adwaita: radios and checks for menus

[Jakub Steiner <jimmac src gnome org>]

commit ab9436d287ad5e0a3504d876bc56584efdcfe499
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed Apr 29 14:16:38 2020 +0200

    Adwaita: radios and checks for menus
    
    - smaller, no border for checks, different alignments
    
    See https://gitlab.gnome.org/GNOME/gtk/-/issues/2675

 gtk/theme/Adwaita/_colors.scss  |  6 ++-
 gtk/theme/Adwaita/_common.scss  | 96 ++++++++++++++++++-----------------------
 gtk/theme/Adwaita/_drawing.scss | 23 ++++++++--
 3 files changed, 65 insertions(+), 60 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 6c7f211ad1..ae5bef174f 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -73,8 +73,10 @@ $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: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
+$checkradio_bg_color: $selected_bg_color;
 $checkradio_fg_color: $selected_fg_color;
-$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), 
darken($checkradio_bg_color,40%));
+$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));
 $alt_focus_border_color: transparentize(white, 0.5);
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 0d729370ba..595b10a3a2 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2335,9 +2335,9 @@ switch {
 
   &:checked {
     color: $selected_fg_color;
-    border-color: $checkradio_borders_color;
-    background-color: $checkradio_bg_color;
-    text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
+    border-color: $switch_borders_color;
+    background-color: $switch_bg_color;
+    text-shadow: 0 1px transparentize($switch_borders_color, 0.5),
                  0 0 2px transparentize(white, 0.4);
   }
 
@@ -2357,9 +2357,9 @@ switch {
 
     &:checked {
       @if $variant == 'light' { color: $backdrop_bg_color; }
-      border-color: if($variant == 'light', $checkradio_borders_color,
-                                            $selected_borders_color);
-      background-color: $checkradio_bg_color;
+      border-color: if($variant == 'light', $switch_borders_color,
+                                            $switch_borders_color);
+      background-color: $switch_bg_color;
     }
 
     &:disabled {
@@ -2392,7 +2392,7 @@ switch {
     }
   }
 
-  &:checked > slider { border: 1px solid $checkradio_borders_color; }
+  &:checked > slider { border: 1px solid $switch_borders_color; }
 
   &:disabled > slider { @include button(insensitive); }
 
@@ -2403,7 +2403,7 @@ switch {
       @include button(backdrop);
     }
 
-    &:checked > slider { border-color: $checkradio_borders_color; }
+    &:checked > slider { border-color: $switch_borders_color; }
 
     &:disabled > slider { @include button(backdrop-insensitive); }
   }
@@ -2411,11 +2411,11 @@ switch {
   row:selected & {
     @if $variant == 'light' {
       box-shadow: none;
-      border-color: $checkradio_borders_color;
+      border-color: $switch_borders_color;
 
-      &:backdrop { border-color: $checkradio_borders_color; }
+      &:backdrop { border-color: $switch_borders_color; }
 
-      > slider { &:checked, & { border-color: $checkradio_borders_color; } }
+      > slider { &:checked, & { border-color: $switch_borders_color; } }
     }
   }
 }
@@ -2549,31 +2549,6 @@ radio {
                                                   -gtk-recolor(url("assets/dash 2-symbolic symbolic png"))); 
}
 }
 
-// ANIMATION:
-// this is made with those pretty convoluted transitions, since checks and radios have to animate only on 
state changes,
-// the transformation is set on the active state and it get reset on the checked state.
-radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }
-
-check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) 
rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
-
-radio,
-check {
-  &:active { -gtk-icon-transform: scale(0, 1); } // should tackle the indeterminate state, untested
-
-  &:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
-    -gtk-icon-transform: unset;
-    transition: 400ms;
-  }
-}
-
-menu menuitem {
-  @at-root %menu_check_radio,
-  radio,
-  check {
-     &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; }
-  }
-}
-
 treeview.view check,
 treeview.view radio {
   &:selected {
@@ -4393,7 +4368,7 @@ $_menu-padding: 12px;
 popover.menu {
   padding: 0px;
 
-  & box.inline-buttons {
+  box.inline-buttons {
     padding: 0 $_menu-padding;
 
     button.image-button.model {
@@ -4410,7 +4385,7 @@ popover.menu {
     }
   }
 
-  & box.circular-buttons {
+  box.circular-buttons {
     padding: 6px $_menu-padding;
 
     button.circular.image-button.model {
@@ -4433,33 +4408,44 @@ popover.menu {
     margin: 6px 0;
   }
 
-  & accelerator {
+  accelerator {
     color: gtkalpha(currentColor,0.55);
 
     &:dir(ltr) { margin-left: $_menu-padding; }
     &:dir(rtl) { margin-right: $_menu-padding; }
   }
 
-  & check,
-  & radio {
-    @extend %menu_check_radio;
+  check,
+  radio {
+    @include check('menu', 'transparent', $text_color);
+
+    &:hover, &:active {
+      @include check('menu-active', 'transparent', $selected_fg_color);
+    }
+  }
+
+  //only menu radios have a border
+  radio { border-color: $borders_color;
+    &:active, &:hover {
+       border-color: transparentize($selected_fg_color,0.5);
+    }
   }
 
-  & arrow.left,
-  & radio.left,
-  & check.left {
-    margin-left: 0;
-    margin-right: 8px;
+  arrow.left,
+  radio.left,
+  check.left {
+    margin-left: -2px;
+    margin-right: 6px;
   }
 
-  & arrow.right,
-  & radio.right,
-  & check.right {
-    margin-left: 8px;
-    margin-right: 0;
+  arrow.right,
+  radio.right,
+  check.right {
+    margin-left: 6px;
+    margin-right: -2px;
   }
 
-  & modelbutton {
+  modelbutton {
     min-height: 30px;
     min-width: 40px;
     padding: 0 $_menu-padding;
@@ -4468,9 +4454,9 @@ popover.menu {
     &:selected { @extend %selected_items; }
   }
 
-  & label.title {
+  label.title {
     font-weight: bold;
-    padding: 4px $_menu-padding;
+    padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing
   }
 }
 
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index e6fd259074..77772e8a44 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -524,7 +524,7 @@
  * Check and Radio buttons *
  ***************************/
 
- @mixin check($t, $c:$bg_color, $tc:$fg_color, $checked: false) {
+ @mixin check($t, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $checked: false) {
   // Check/Radio drawing function
   //
   // $t:        check/radio type,
@@ -533,9 +533,9 @@
   // $checked:  bool to chose between checked/unchecked
   //
   // possible $t values:
-  // normal, hover, active, insensitive, backdrop, backdrop-insensitive
+  // normal, hover, active, insensitive, backdrop, backdrop-insensitive, menu
 
-  $_border_color: if($c==$checkradio_bg_color, $c, $alt_borders_color);
+  $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color);
   $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7));
 
   @if $t==normal  {
@@ -570,4 +570,21 @@
     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;
+  }
+
+  @if $t==menu-active {
+   transform: scale(0.8);
+   border-width: 1.2px;
+   color: $tc;
+   box-shadow: none;
+   background-image: image(transparent);
+  }
 }