New upstream snapshot for GTK4

Author: hsbasu

gtk/upstream/gtk-4.0/Yaru/_colors-public.scss

@@ -82,6 +82,7 @@ these are pretty self explicative */
 @define-color warning_color #{"" +$warning_color};
 @define-color error_color #{"" +$error_color};
 @define-color success_color #{"" +$success_color};
+@define-color accent_color #{"" +$accent_color};
 //@define-color destructive_color #{$destructive_color}
 
 //WM

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

@@ -3,9 +3,12 @@
 
 @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);
-$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;
@@ -83,3 +86,6 @@ $contrast_target: if($variant=='light', 6, 5.5);
 $link_color: optimize-contrast($bg_color, $accent_bg_color, $target: $contrast_target);
 $link_visited_color: if($variant=='light', darken($link_color, 10%),
                         optimize-contrast($bg_color, $accent_bg_color));
+
+// Yaru: Used by upstream scss code.
+$accent_color: $accent_bg_color;

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

@@ -4,13 +4,14 @@
 
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $asset_suffix: if($variant=='dark', '-dark', '');
-$assets: if($contrast=='normal', 'assets', 'assets-hc');
+$asset_prefix: if($contrast=='normal', '', 'hc-');
+$assets: 'assets';
 $backdrop_transition: 200ms ease-out;
 $button_transition: all 200ms $ease-out-quad;
 $focus_transition: outline-width 200ms $ease-out-quad, outline-offset 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; // Yaru change: ↑↑↑
+$window_radius: 15px; // Yaru change: ↑↑↑
 $popover_radius: $window_radius; // Yaru change: ↑↑↑
 $menu_margin: $menu_radius; //margin around menuitems & sidebar items
 
@@ -86,6 +87,35 @@ textview {
   }
 }
 
+preedit {
+  &.whole {
+    text-decoration: underline;
+  }
+
+  &.selection {
+    background-color: $backdrop_selected_bg_color;
+    color: transparent;
+  }
+
+  &.prediction {
+    font-style: italic;
+  }
+
+  &.prefix, &.suffix {
+    color: gtkalpha(currentColor, 0.5);
+  }
+
+  &.spelling-error {
+    text-decoration: $error_color underline wavy;
+  }
+
+  &.compose-error {
+    text-decoration: $error_color line-through;
+  }
+}
+
+textview > text > preedit { @extend preedit; }
+
 textview > border { background-color: mix($bg_color, $base_color, 50%); }
 
 iconview {
@@ -355,6 +385,10 @@ entry {
       }
     }
 
+    > text > preedit {
+      @extend preedit;
+    }
+
     // entry error and warning style
     @each $e_type, $e_color in (error, $error_color),
                                (warning, $warning_color) {
@@ -1622,13 +1656,10 @@ headerbar {
       margin: 0;
     }
 
-    &.start {
-      margin-left: -6px;
-
-      > button:first-child {
-        padding-left: 6px;
-      }
+    &.start > image.icon {
+      -gtk-icon-size: 20px;
     }
+
     &.end {
       margin-right: -6px;
 
@@ -2642,23 +2673,19 @@ 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"))); }
+  &:checked { -gtk-icon-source: -gtk-recolor(url("#{$assets}/#{$asset_prefix}check-symbolic.svg")); }
 
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("#{$assets}/dash@2-symbolic.symbolic.png"))); }
+  &:indeterminate { -gtk-icon-source: -gtk-recolor(url("#{$assets}/#{$asset_prefix}dash-symbolic.svg")); }
 }
 
 %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"))); }
+  &:checked { -gtk-icon-source: -gtk-recolor(url("#{$assets}/#{$asset_prefix}bullet-symbolic.svg")); }
 
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("#{$assets}/dash@2-symbolic.symbolic.png"))); }
+  &:indeterminate { -gtk-icon-source: -gtk-recolor(url("#{$assets}/#{$asset_prefix}dash-symbolic.svg")); }
 }
 
 treeview.view check,
@@ -2911,7 +2938,6 @@ scale {
   // *WARNING* scale with marks madness following
 
   // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
-  $suffix: if($variant == 'light', '', '-dark');
 
   @each $dir_class, $dir_infix in ('horizontal', 'horz'),
                                   ('vertical', 'vert') {
@@ -2928,7 +2954,7 @@ scale {
               // an asymmetric slider asset is used here, so the margins are uneven, the smaller
               // margin is set on the point side.
               margin: -10px;
-              $_scale_asset: '#{$assets}/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
+              $_scale_asset: '#{$assets}/#{$asset_prefix}slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$asset_suffix}';
               border-style: none;
               border-radius: 0;
 
@@ -4315,19 +4341,19 @@ cursor-handle {
                   (':hover','-hover'),
                   (':active','-active') { //no need for insensitive and backdrop
     &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
-      $_url: '#{$assets}/text-select-start#{$as}#{$asset_suffix}';
+      $_url: '#{$assets}/#{$asset_prefix}text-select-start#{$as}#{$asset_suffix}';
       -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
                                     url('#{$_url}@2.png'));
     }
 
     &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
-      $_url: '#{$assets}/text-select-end#{$as}#{$asset_suffix}';
+      $_url: '#{$assets}/#{$asset_prefix}text-select-end#{$as}#{$asset_suffix}';
       -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
                                     url('#{$_url}@2.png'));
     }
 
     &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
-      $_url: '#{$assets}/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
+      $_url: '#{$assets}/#{$asset_prefix}slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
       -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
                                     url('#{$_url}@2.png'));
     }

gtk/upstream/gtk-4.0/Yaru/_tweaks.scss

@@ -76,28 +76,35 @@ spinbutton:not(.vertical) {
 // titlebutton
 windowcontrols {
     button {
-      min-width: 24px;
-    }
+        min-width: 24px;
 
-    button > image {
         $_base_button_color: transparentize($fg_color, 0.9);
         $_base_hover_color: transparentize($fg_color, 0.85);
         $_base_active_color: transparentize($fg_color, 0.75);
 
-        min-height: 20px;
-        min-width: 20px;
-        padding: 2px;
-        margin: 0 3px;
+        > image {
+          min-height: 20px;
+          min-width: 20px;
+          padding: 2px;
+          margin: 0 3px;
+
+          background: $_base_button_color;
+        }
 
-        background: $_base_button_color;
+        &:hover > image {
+            //special case hover colors inside a headerbar
+            @include button(undecorated-hover,$c:$_base_hover_color);
+        }
 
-        &:hover {
-            background: $_base_hover_color;
+        &:active > image,
+        &:checked > image {
+            @include button(undecorated-active,$c:$_base_active_color);
         }
 
+        &:hover,
         &:active,
         &:checked {
-            background: $_base_active_color;
+            background: none;
         }
     }
 }