[gtk+/gtk-3-22] Adwaita: Fix color of focus outline on colorswatch

[Daniel Boles <dboles src gnome org>]

commit 30cb5b07544764059aaa211cb733bfeb31fa0265
Author: Daniel Boles <dboles src gnome org>
Date:   Sat Sep 16 17:02:24 2017 +0100

    Adwaita: Fix color of focus outline on colorswatch
    
    The focus outline disappeared as the colour of the swatch got close to
    the normal focus outline colour, which is alpha(currentColor, 0.3).
    
    Fix by making the outline an alpha’d version of the tick colour, but
    more opaque than normal outlines. 0.6 seems good enough; feel free to
    improve it, but at least this ensures the outline can’t vanish anymore.
    
    HighContrast achieves this already because it applies the color property
    to the main node, not the overlay. Doing that means the outline is fully
    opaque, which is fine for HC obviously but was excessive for Adwaita.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=787757

 gtk/theme/Adwaita/_common.scss           |   24 ++++++++++++++++--------
 gtk/theme/Adwaita/gtk-contained-dark.css |    4 ++++
 gtk/theme/Adwaita/gtk-contained.css      |    4 ++++
 3 files changed, 24 insertions(+), 8 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index f0041c8..3dd8832 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4116,20 +4116,28 @@ colorswatch {
     }
   }
 
-  &.dark overlay {
-    color: white;
+  &.dark {
+    outline-color: transparentize(white, 0.4);
+
+    overlay {
+      color: white;
 
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
+      &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
 
-    &:backdrop { color: transparentize(white, 0.5); }
+      &:backdrop { color: transparentize(white, 0.5); }
+    }
   }
 
-  &.light overlay {
-    color: black;
+  &.light {
+    outline-color: transparentize(black, 0.4);
 
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
+    overlay {
+      color: black;
+
+      &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
 
-    &:backdrop { color: transparentize(black, 0.5); }
+      &:backdrop { color: transparentize(black, 0.5); }
+    }
   }
 
   &:drop(active) {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index be1d69a..8596f6f 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1764,12 +1764,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius
 
 colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; }
 
+colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); }
+
 colorswatch.dark overlay { color: white; }
 
 colorswatch.dark overlay:hover { border-color: #1b1f20; }
 
 colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); }
 
+colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); }
+
 colorswatch.light overlay { color: black; }
 
 colorswatch.light overlay:hover { border-color: #1b1f20; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 2ad07d0..2ff271f 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1784,12 +1784,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius
 
 colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; }
 
+colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); }
+
 colorswatch.dark overlay { color: white; }
 
 colorswatch.dark overlay:hover { border-color: rgba(0, 0, 0, 0.8); }
 
 colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); }
 
+colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); }
+
 colorswatch.light overlay { color: black; }
 
 colorswatch.light overlay:hover { border-color: rgba(0, 0, 0, 0.5); }