New upstream snapshot for GTK3

Author: hsbasu

gtk/upstream/gtk-3.0/Yaru/README

@@ -3,9 +3,12 @@ Summary
 
 * Do not edit the CSS directly, edit the source SCSS files
 * To be able to use the latest/adequate version of SASS, install sassc
-* The configure script will detect whether or not you have sassc installed;
+* Meson will detect whether or not you have sassc installed;
   if you do, it will regenerate the CSS every time you modify the SCSS files
   and rebuild GTK+.
+* When submitting a MR with SCSS changes remember to also include the
+  corresponding CSS changes (generated locally by Meson as described earlier
+  or manually generated by running parse-sass.sh script).
 
 How to tweak the theme
 ----------------------

gtk/upstream/gtk-3.0/Yaru/_colors.scss

@@ -2,10 +2,13 @@
 // it gets @if ed depending on $variant
 @import 'palette';
 
+$light_bg_color: #FAFAFA;
+$dark_bg_color: lighten($jet, 8%);
+
 $base_color: if($variant == 'light', #ffffff, lighten($jet, 6%));
 $text_color: if($variant == 'light', black, white);
 $caret_color: if($variant == 'light', lighten($text_color, 5%), darken($text_color, 3%));
-$bg_color: if($variant == 'light', #FAFAFA, lighten($jet, 8%));
+$bg_color: if($variant =='light', $light_bg_color, $dark_bg_color);
 $fg_color: if($variant == 'light', $inkstone, $porcelain);
 
 $selected_fg_color: $accent_fg_color;

gtk/upstream/gtk-3.0/Yaru/_common.scss

@@ -7,8 +7,8 @@ $asset_suffix: if($variant=='dark', '-dark', '');
 $backdrop_transition: 200ms ease-out;
 $button_transition: all 200ms $ease-out-quad;
 $button_radius: 6px; // Yaru change: sync radius with Gtk4
-$menu_radius: 6px; // Yaru change: ↑↑↑
-$window_radius: $button_radius + 6; // Yaru change: ↑↑↑
+$menu_radius: 8px;
+$window_radius: 15px; // Yaru change: ↑↑↑
 $popover_radius: $window_radius; // Yaru change: ↑↑↑
 
 // Optional compact sizes for buttons, headerbar and headerbar widgets
@@ -3064,21 +3064,21 @@ check {
   border-radius: 3px;
 
   &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
-                                      -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+                                      url("assets/check-symbolic.symbolic.png")); }
 
   &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-                                            -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+                                            url("assets/dash-symbolic.symbolic.png")); }
 }
 
 %radio,
 radio {
   border-radius: 100%;
 
   &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
-                                      -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+                                      url("assets/bullet-symbolic.symbolic.png")); }
 
   &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-                                            -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+                                            url("assets/dash-symbolic.symbolic.png")); }
 }
 
 // ANIMATION:

gtk/upstream/gtk-3.0/Yaru/apps/_ding.scss

@@ -1,13 +1,71 @@
 // Style DING (Desktop Icons NG) menus like GS ones
 
+// These definitions match the gnome shell ones.
+$base_border_radius: 8px;
+$modal_radius: $base_border_radius * 2;
+$menuitem_border_radius: $base_border_radius * 1.5;
+$shell_menu_radius: $modal_radius * 1.25;
+
+$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
+$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
+
 menu.desktopmenu {
+    .csd & {
+        border: 1px solid $outer_borders_color;
+        border-radius: $shell_menu_radius;
+    }
+
     menuitem {
-        margin: 0 .25rem;
-        padding: .5rem;
-        border-radius: $menu_radius - 1px;
+        margin: 0 6px;
+        &:first-child {
+            margin-top: 2px;
+        }
+        &:last-child {
+            margin-bottom: 2px;
+        }
+
+        padding: 10px 0;
+
+        &:dir(ltr) {
+            padding-left: 5px;
+            padding-right: 10px;
+        }
+        &:dir(rtl) {
+            padding-left: 10px;
+            padding-right: 5px;
+        }
+
+        border-radius: $menuitem_border_radius;
     }
-    
+
     separator {
-        margin: .25rem 1rem;
+        margin: 8px 1rem;
+
+        &:dir(ltr) {
+            margin-left: 2.5em;
+        }
+        &:dir(rtl) {
+            margin-right: 2.5em;
+        }
+    }
+
+    > arrow {
+        &.top {
+            border-top-right-radius: $menuitem_border_radius;
+            border-top-left-radius: $menuitem_border_radius;
+    }
+
+        &.bottom {
+            border-bottom-right-radius: $menuitem_border_radius;
+            border-bottom-left-radius: $menuitem_border_radius;
+        }
+    }
+}
+
+decoration {
+    .desktopmenu.csd.popup & {
+        border-radius: $shell_menu_radius;
+        box-shadow: 0 1px 2px transparentize(black, 0.8),
+                    0 2px 4px 0 $shadow_color;
     }
 }