Adwaita: popover menu styling

- match existing popover styling for menus

See https://gitlab.gnome.org/GNOME/gtk/-/issues/2675

gtk/theme/Adwaita/_colors.scss

@@ -18,7 +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%));
+$menu_color: $bg_color;
+$menu_selected_color: $base_color;
 $popover_bg_color: $bg_color;
 $popover_hover_color: lighten($bg_color, 5%);
 
@@ -73,8 +74,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));

gtk/theme/Adwaita/_common.scss

@@ -901,9 +901,9 @@ modelbutton.flat arrow {
 
   &: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 */
@@ -2263,9 +2263,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 +2285,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 +2320,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 +2331,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 +2341,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 +2487,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 {
@@ -4361,11 +4336,15 @@ menubar {
   .csd.popup decoration { border-radius:0; }
 }
 
+$_menu-padding: 12px;
+
+/* Popover menu is a popover more than it is a menu */
+
 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 +4356,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 +4383,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;
-    border-radius: 0;
+    margin: 0 $_menu-padding/2;
+    padding: 0 $_menu-padding;
 
-    &: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
   }
 }
 

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);
+  }
 }

gtk/theme/HighContrast/_colors-hc.scss

@@ -9,6 +9,7 @@ $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_selected_color: if($variant == 'light', $base_color, darken($bg_color,10%));
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);