[gtk: 1/2] Adwaita: use thinner arrows for navigation

[Matthias Clasen <matthiasc src gnome org>]

commit 69ee1e1b86d42822dde6e25851c0cf6fcfca27c1
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed May 13 17:18:45 2020 +0000

    Adwaita: use thinner arrows for navigation
    
    - go-next go-previous instead of pan-end pan-start
    
    See https://gitlab.gnome.org/GNOME/gtk/-/issues/2675

 gtk/theme/Adwaita/_colors.scss         |  11 +--
 gtk/theme/Adwaita/_common.scss         | 140 +++++++++++++++++----------------
 gtk/theme/Adwaita/_drawing.scss        |  23 +++++-
 gtk/theme/HighContrast/_colors-hc.scss |   2 +
 4 files changed, 101 insertions(+), 75 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index be1215d795..32c6998696 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -18,9 +18,8 @@ $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), li
 $top_hilight: $borders_edge;
 $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
-$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%));
-$popover_bg_color: $bg_color;
-$popover_hover_color: lighten($bg_color, 5%);
+$menu_color: $base_color;
+$menu_selected_color: if($variant == 'light', darken($bg_color, 3%), $bg_color);
 
 $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 
50%));
 $scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
@@ -73,8 +72,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: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index f240346b89..17774ede72 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -880,7 +880,7 @@ modelbutton.flat {
 
   @extend %undecorated_button;
 
-  &:hover { background-color: $popover_hover_color; }
+  &:hover { background-color: $menu_selected_color; }
 
   &:disabled {
     color: $insensitive_fg_color;
@@ -898,12 +898,13 @@ modelbutton.flat arrow {
   background: none;
   min-width: 16px;
   min-height: 16px;
+  opacity: 0.3; //dim icon
 
   &:hover { background: none; }
 
-  &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+  &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
 
-  &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
+  &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
 }
 
 /* oldstyle toolbar buttons */
@@ -1828,7 +1829,7 @@ popover.background {
   > contents {
     $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 
0.1));
 
-    background-color: $popover_bg_color;
+    background-color: $menu_color;
     background-clip: padding-box;
     border: 1px solid $_popover_border;
     box-shadow: 0 1px 2px transparentize(black, 0.7);
@@ -2263,9 +2264,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);
   }
 
@@ -2285,9 +2286,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 {
@@ -2320,7 +2321,7 @@ switch {
     }
   }
 
-  &:checked > slider { border: 1px solid $checkradio_borders_color; }
+  &:checked > slider { border: 1px solid $switch_borders_color; }
 
   &:disabled > slider { @include button(insensitive); }
 
@@ -2331,7 +2332,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); }
   }
@@ -2341,11 +2342,11 @@ switch {
 
     @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; } }
     }
   }
 }
@@ -2487,31 +2488,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 {
@@ -4329,7 +4305,7 @@ emoji-completion-row:hover {
 
 emoji-completion-row emoji:focus,
 emoji-completion-row emoji:hover {
-  background-color: $popover_hover_color;
+  background-color: $menu_selected_color;
 }
 
 popover.entry-completion > contents {
@@ -4359,13 +4335,27 @@ menubar {
   }
   // remove padding and rounding from menubar submenu decoration
   .csd.popup decoration { border-radius:0; }
+  // only bottom part rounded for menubar menus
+  & > item popover.menu.background > contents {
+    margin-top: -1px; //nudge it into the menubar
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    padding: 0 0 $menu_radius 0;
+  }
+  //nested submenus
+  & > item popover.menu.background popover.menu.background > contents {
+    margin: 0;
+    border-radius: 0;
+  }
 }
 
+$_menu-padding: 12px;
+
 popover.menu {
   padding: 0px;
 
-  & box.inline-buttons {
-    padding: 0 20px;
+  box.inline-buttons {
+    padding: 0 $_menu-padding;
 
     button.image-button.model {
       @include button(undecorated);
@@ -4377,12 +4367,12 @@ popover.menu {
       outline: none;
       transition: none;
 
-      &:selected { @extend %selected_items; }
+      &:selected { background: image($menu_selected_color); }
     }
   }
 
-  & box.circular-buttons {
-    padding: 6px 20px;
+  box.circular-buttons {
+    padding: 6px $_menu-padding;
 
     button.circular.image-button.model {
       @extend %list_button;
@@ -4404,44 +4394,60 @@ popover.menu {
     margin: 6px 0;
   }
 
-  & accelerator {
+  accelerator {
     color: gtkalpha(currentColor,0.55);
 
-    &:dir(ltr) { margin-left: 20px; }
-    &:dir(rtl) { margin-right: 20px; }
+    &: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 { @include check('menu-active', 'transparent', $text_color); }
+    &:active { @include check('menu-active', 'transparent', $text_color); }
   }
 
-  & arrow.left,
-  & radio.left,
-  & check.left {
-    margin-left: 0;
-    margin-right: 8px;
+  //only menu radios have a border
+  radio { border-color: $borders_color;
+    &:active { border-color: transparentize($borders_color,0.5); }
   }
 
-  & arrow.right,
-  & radio.right,
-  & check.right {
-    margin-left: 8px;
-    margin-right: 0;
+  arrow.left,
+  radio.left,
+  check.left {
+    margin-left: -2px;
+    margin-right: 6px;
   }
 
-  & modelbutton {
+  arrow.right,
+  radio.right,
+  check.right {
+    margin-left: 6px;
+    margin-right: -2px;
+  }
+
+  modelbutton {
     min-height: 30px;
     min-width: 40px;
-    padding: 0 20px;
+    padding: $_menu-padding/6 $_menu-padding;
     border-radius: 0;
 
-    &:selected { @extend %selected_items; }
+    &:selected {
+      color: $text-color;
+      background-color: $menu_selected_color;
+    }
+    &:selected:active {
+      //@extend %selected_items;
+      //color: $selected_fg_color;
+      background-color: darken($bg_color,14%); // matching buttons
+    }
   }
 
-  & label.title {
+  label.title {
     font-weight: bold;
-    padding: 4px 20px;
+    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 7e9e68ca31..467be6c817 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -537,7 +537,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,
@@ -546,9 +546,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  {
@@ -583,4 +583,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);
+  }
 }
diff --git a/gtk/theme/HighContrast/_colors-hc.scss b/gtk/theme/HighContrast/_colors-hc.scss
index d9dfc278cd..3533b6e90b 100644
--- a/gtk/theme/HighContrast/_colors-hc.scss
+++ b/gtk/theme/HighContrast/_colors-hc.scss
@@ -9,6 +9,8 @@ $selected_bg_color: darken($selected_bg_color,10%);
 $selected_borders_color: darken($selected_borders_color, 10%);
 $borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%));
 $alt_borders_color: if($variant == 'light', darken($alt_borders_color, 33%), lighten($alt_borders_color, 
28%));
+$menu_color: $base_color;
+$menu_selected_color: darken($bg_color,10%);
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);