update #1257

src/sass/_colors.scss

@@ -146,7 +146,7 @@ $header_fg:                         if($variant == 'light', #575757, #FDFDFD);
 $dark_header_bg:                    if($trans == 'true', gtkalpha($base_color, 0.96), $base_color);
 $header_bg_backdrop:                if($variant == 'light', gtkmix(black, $header_bg, 2%), gtkmix(black, $header_bg, 1%));
 $header_border:                     if($variant == 'light', gtkmix(black, $header_bg, 12%), gtkmix(black, $header_bg, 75%));
-$header_border_backdrop:            if($variant == 'light', gtkmix(black, $header_bg, 8%), gtkmix(black, $header_bg, 35%));
+$header_border_backdrop:            if($variant == 'light', gtkmix(black, $header_bg, 8%), gtkmix(black, $header_bg, 45%));
 
 // Sidebar colors
 $dark_sidebar_bg: white;

src/sass/gtk/_colors-libadwaita.scss

@@ -268,6 +268,7 @@ $dark_5: #000000;
   $header_fg: gtkcolor(headerbar_fg_color);
   $header_border: gtkcolor(headerbar_darker_shade_color);
   $header_bg_backdrop: gtkcolor(headerbar_backdrop_color);
+  $header_border_backdrop: gtkcolor(headerbar_shade_color);
 
   $dialog_bg_color: gtkcolor(dialog_bg_color);
   $dialog_fg_color: gtkcolor(dialog_fg_color);
@@ -283,4 +284,10 @@ $dark_5: #000000;
   $wm_shadow_backdrop: gtkcolor(sidebar_shade_color);
   $wm_outline: 0 0 0 2px rgba(black, 0.03), 0 0 0 1px gtkcolor(headerbar_darker_shade_color);
   $wm_border: gtkcolor(headerbar_darker_shade_color);
+
+  @if $trans=='true' {
+    $bg_color: color-mix(in srgb, gtkcolor(window_bg_color) 95%, transparent);
+    $dark_sidebar_bg: color-mix(in srgb, gtkcolor(sidebar_bg_color) 95%, transparent);
+    $menu_bg: color-mix(in srgb, gtkcolor(popover_bg_color) 95%, transparent);
+  }
 }

src/sass/gtk/_colors-public.scss

@@ -17,14 +17,14 @@ $theme_text: currentColor;
 @define-color base_color #{"" + $base_color};
 @define-color selected_bg_color #{"" + $selected_bg_color};
 @define-color selected_fg_color #{"" + $selected_fg_color};
-@define-color insensitive_bg_color #{"" + color-mix(in srgb, $bg_color 60%, $base_color)};
+@define-color insensitive_bg_color #{"" + gtkmix($bg_color, $base_color, 60%)};
 @define-color insensitive_fg_color #{"" + $disabled_fg_color};
 @define-color insensitive_base_color #{"" + $base_color};
 @define-color theme_unfocused_fg_color #{"" + $fg_color};
 @define-color theme_unfocused_text_color #{"" + $theme_text};
 @define-color theme_unfocused_bg_color #{"" + $bg_color};
 @define-color theme_unfocused_base_color #{"" + $base_color};
-@define-color unfocused_insensitive_color #{"" + color-mix(in srgb, $fg_color 35%, $bg_color)};
+@define-color unfocused_insensitive_color #{"" + gtkmix($fg_color, $bg_color, 35%)};
 @define-color borders #{"" + $borders_color};
 @define-color unfocused_borders #{"" + $borders_color};
 

src/sass/gtk/_common-4.0.scss

@@ -2314,6 +2314,8 @@ headerbar {
         margin: 0;
         background-color: transparent;
         background-image: none;
+        color: transparent;
+        -gtk-icon-size: 0;
       }
 
       &.close, &.maximize, &.minimize {
@@ -4817,10 +4819,8 @@ calendar {
 // Dialogs
 //
 
-$messagedialog_bg: if($trans == 'true', gtkalpha($bg_color, 0.95), $bg_color);
-
 window.dialog.message { // Message Dialog styling
-  &.background { background-color: $messagedialog_bg; }
+  &.background { background-color: $dialog_bg_color; }
 
   .titlebar {
     min-height: 28px;
@@ -5003,7 +5003,7 @@ stacksidebar {
 
 // Navigation Sidebar
 .navigation-sidebar {
-  background-color: $dark_sidebar_bg;
+  background-color: transparent;
   padding: $container_padding; //only vertical padding. horizontal row size would clip
 
   > separator {

src/sass/gtk/apps/_gnome-40.0.scss

@@ -1333,4 +1333,65 @@ dialog-host > widget > widget > toolbarview {
       border-top: 1px solid $header_border;
     }
   }
+}
+
+//
+// Chrome
+//
+
+$chrome_bg_color: if($variant == 'light', #dedede, #242424);
+$chrome_fg_color: if($variant == 'light', #242424, #dedede);
+
+window.background.chromium {
+  box-shadow: 0 12px 20px rgba(black, 0.35),
+              0 0 0 1px rgba(black, 0.75);
+
+  &:backdrop {
+    transition: $shadow_transition;
+    box-shadow: 0 7px 12px rgba(black, 0.15),
+                0 0 0 1px rgba(black, 0.65);
+  }
+
+  &, headerbar {
+    &, &:backdrop {
+      background-color: $chrome_bg_color;
+      color: $chrome_fg_color;
+    }
+  }
+
+  headerbar.header-bar.titlebar {
+    padding: 0 $container_padding * 2;
+    color: currentColor;
+    box-shadow: inset 0 1px rgba(white, 0.1);
+    border-radius: $wm_radius $wm_radius 0 0;
+
+    button.titlebutton { // title-buttons
+      // define global titlebutton class sizing
+      min-width: 22px;
+      min-height: 22px;
+      margin: 0 3px; // unset margins
+      padding: 0;
+      color: currentColor; // hide stock icons
+      border: none;
+      border-radius: $circular_radius;
+      background-image: none;
+      background-color: gtkalpha(currentColor, 0.12);
+
+      &:hover {
+        background-color: gtkalpha(currentColor, 0.2);
+        transition-duration: $shorter_duration;
+      }
+
+      &:active {
+        background-color: gtkalpha(currentColor, 0.3);
+        transition-duration: $shorter_duration;
+      }
+    }
+  }
+
+  // internal region of toolbar's entry widget
+  > textview.view, textview {
+    background-color: gtkalpha(currentColor, 0.1);
+    color: $chrome_fg_color;
+  }
 }

src/sass/gtk/apps/_libadwaita.scss

@@ -586,11 +586,11 @@ toolbarview.undershoot-bottom scrolledwindow {
 .unfolded stacksidebar.sidebar { border: none; }
 
 .sidebar-pane {
-  background-color: $dark_sidebar_bg;
+  background-color: transparent;
   color: $dark_sidebar_fg;
 
   &:backdrop {
-    background-color: $dark_sidebar_bg;
+    background-color: transparent;
     // transition: background-color $longer_duration $deceleration_curve;
   }
 

src/sass/gtk/apps/_misc.scss

@@ -195,7 +195,7 @@ $chrome_menu_fg_color: $fg_color;
 
 window.background.chromium {
   // checked-tab & toolbar & button widgets
-  background-color: $bg_color;
+  background-color: $chrome_bg_color;
   color: $text_color;
 
   headerbar.titlebar {
@@ -216,7 +216,7 @@ window.background.chromium {
       min-width: 16px;
       min-height: 16px;
       margin: 0; // unset margins
-      padding: 0 0;
+      padding: 0;
       background-size: 16px 16px;
       color: transparent; // hide stock icons
       border: none;