[gtk/wip/exalm/window-shadow-dark-3] Adwaita: Use transparent black for window border in dark too

[Alexander Mikhaylenko <alexm src gnome org>]

commit d70fa89bdf5f00448a16b9a868097eb946c5a8d4
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Mar 5 22:42:52 2021 +0500

    Adwaita: Use transparent black for window border in dark too
    
    Avoid smear when the background behind the window is dark. Adjust opacity
    to make it appear roughly the same as before on white background.

 gtk/theme/Adwaita/_common.scss                   |  6 +++---
 gtk/theme/Adwaita/gtk-contained-dark.css         | 18 +++++++++---------
 gtk/theme/HighContrast/gtk-contained-inverse.css | 18 +++++++++---------
 3 files changed, 21 insertions(+), 21 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 97b253d213..57c9890bdb 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2324,7 +2324,7 @@ popover.background {
   }
 
   .csd & {
-    $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 
0.1));
+    $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
 
     background-clip: padding-box;
     border-color: $_popover_border;
@@ -4556,8 +4556,8 @@ decoration {
 
   // this needs to be transparent
   // see bug #722563
-  $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
-  $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 
0.1));
+  $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
+  $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize(black, 0.25));
 
   box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
               0 0 0 1px $_wm_border; //doing borders with box-shadow
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 4b07a0da06..32b7fb969e 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -822,7 +822,7 @@ popover.background { padding: 2px; background-color: #353535; box-shadow: 0 1px
 
 .csd popover.background, popover.background { border: 1px solid #1b1b1b; border-radius: 9px; }
 
-.csd popover.background { background-clip: padding-box; border-color: rgba(27, 27, 27, 0.9); }
+.csd popover.background { background-clip: padding-box; border-color: rgba(0, 0, 0, 0.75); }
 
 popover.background:backdrop { background-color: #353535; box-shadow: none; }
 
@@ -1834,27 +1834,27 @@ colorchooser .popover.osd { border-radius: 5px; }
 .scale-popup button:hover { background-color: rgba(238, 238, 236, 0.1); border-radius: 5px; }
 
 /********************** Window Decorations * */
-decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 
0 0 1px rgba(27, 27, 27, 0.9); margin: 10px; }
+decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 
0 0 1px rgba(0, 0, 0, 0.75); margin: 10px; }
 
-decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(27, 27, 27, 0.9); transition: 200ms ease-out; }
+decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(0, 0, 0, 0.75); transition: 200ms ease-out; }
 
 .maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
 
-.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(27, 27, 27, 0.9), 0 0 0 20px transparent; }
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 20px transparent; }
 
-.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(27, 27, 27, 0.9), 0 0 0 
20px transparent; }
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 20px 
transparent; }
 
 .popup decoration { box-shadow: none; }
 
-.ssd decoration { box-shadow: 0 0 0 1px rgba(27, 27, 27, 0.9); }
+.ssd decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75); }
 
-.ssd decoration:backdrop { box-shadow: 0 0 0 1px rgba(27, 27, 27, 0.9); }
+.ssd decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75); }
 
-.csd.popup decoration { border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(27, 27, 
27, 0.8); }
+.csd.popup decoration { border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 
0, 0.65); }
 
 tooltip.csd decoration { border-radius: 5px; box-shadow: none; }
 
-messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(27, 27, 27, 0.8); }
+messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(0, 0, 0, 0.65); }
 
 .solid-csd decoration { margin: 0; padding: 4px; background-color: #1b1b1b; border: solid 1px #1b1b1b; 
border-radius: 0; box-shadow: inset 0 0 0 3px #2d2d2d, inset 0 1px rgba(238, 238, 236, 0.07); }
 
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index c74a3df6bc..e35c2765ed 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -902,7 +902,7 @@ popover.background { padding: 2px; background-color: #353535; box-shadow: 0 1px
 
 .csd popover.background, popover.background { border: 1px solid #686868; border-radius: 9px; }
 
-.csd popover.background { background-clip: padding-box; border-color: rgba(104, 104, 104, 0.9); }
+.csd popover.background { background-clip: padding-box; border-color: rgba(0, 0, 0, 0.75); }
 
 popover.background:backdrop { background-color: #353535; box-shadow: none; }
 
@@ -1914,27 +1914,27 @@ colorchooser .popover.osd { border-radius: 5px; }
 .scale-popup button:hover { background-color: rgba(243, 243, 241, 0.1); border-radius: 5px; }
 
 /********************** Window Decorations * */
-decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 
0 0 1px rgba(104, 104, 104, 0.9); margin: 10px; }
+decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 
0 0 1px rgba(0, 0, 0, 0.75); margin: 10px; }
 
-decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(104, 104, 104, 0.9); transition: 200ms ease-out; }
+decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(0, 0, 0, 0.75); transition: 200ms ease-out; }
 
 .maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
 
-.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9), 0 0 0 20px transparent; }
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 20px transparent; }
 
-.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9), 0 0 0 
20px transparent; }
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 20px 
transparent; }
 
 .popup decoration { box-shadow: none; }
 
-.ssd decoration { box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9); }
+.ssd decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75); }
 
-.ssd decoration:backdrop { box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9); }
+.ssd decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75); }
 
-.csd.popup decoration { border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(104, 
104, 104, 0.8); }
+.csd.popup decoration { border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 
0, 0.65); }
 
 tooltip.csd decoration { border-radius: 5px; box-shadow: none; }
 
-messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(104, 104, 104, 0.8); }
+messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(0, 0, 0, 0.65); }
 
 .solid-csd decoration { margin: 0; padding: 4px; background-color: #686868; border: solid 1px #686868; 
border-radius: 0; box-shadow: inset 0 0 0 3px #2d2d2d, inset 0 1px rgba(238, 238, 236, 0.07); }