From dfd4eef39eaffb5e8f0830ee188c34d871c69dab Mon Sep 17 00:00:00 2001
From: "frederik.feichtmeier" <frederik.feichtmeier@gmail.com>
Date: Sat, 4 Apr 2020 20:18:42 +0200
Subject: [PATCH] Blue outlines / focus rings

- introduce two new colors: $focus_border_color for focused / outlined elements and $_coloured_focus_border_color for focused / outlined elements with a colored background color, like suggested/destructive buttons or selected elements
- set outline / focus color, offset and style accordingly for all widgets
- adapt entry focus color
---
 gtk/theme/Adwaita/_colors.scss  |  2 +
 gtk/theme/Adwaita/_common.scss  | 98 ++++++++++++++++++++++++---------
 gtk/theme/Adwaita/_drawing.scss | 17 ++----
 3 files changed, 78 insertions(+), 39 deletions(-)

diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 039c1e0515..6ce87619a5 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -76,3 +76,5 @@ $progress_border_color: $selected_borders_color;
 $checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
 $checkradio_fg_color: $selected_fg_color;
 $checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%));
+$focus_border_color: transparentize(#3584e4, 0.3);
+$coloured_focus_border_color: transparentize(white, 0.3);
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 692af6dc79..047c23b6e3 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -11,32 +11,6 @@ $menu_radius: 5px;
 $window_radius: $button_radius + 3;
 $popover_radius: $button_radius + 4;
 
-button:focus(visible),
-checkbutton:focus(visible),
-radiobutton:focus(visible),
-switch:focus(visible),
-label:focus(visible),
-row:focus(visible),
-flowboxchild:focus(visible) {
-  // We use the outline properties to signal the focus properties
-  // to the adwaita engine: using real CSS properties is faster,
-  // and we don't use any outlines for now.
-
-  outline-color: gtkalpha(currentColor, 0.3);
-  outline-style: dashed;
-  outline-offset: -3px;
-  outline-width: 1px;
-}
-
-// Widgets that draw their focus indicator outset and not inset
-scale:focus(visible) > trough {
-  outline-color: gtkalpha(currentColor, 0.3);
-  outline-style: dashed;
-  outline-offset: 2px;
-  outline-width: 1px;
-}
-
-
 /***************
  * Base States *
  ***************/
@@ -64,6 +38,78 @@ dnd {
   -gtk-icon-size: 32px;
 }
 
+/*********
+ * Outlines *
+ ********/
+
+label:focus(visible),
+row:focus(visible),
+flowboxchild:focus(visible) {
+  // We use the outline properties to signal the focus properties
+  // to the adwaita engine: using real CSS properties is faster,
+  // and we don't use any outlines for now.
+
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: -1px;
+  outline-width: 2px;
+  :selected & { outline-color: $coloured_focus_border_color; }
+}
+
+// Widgets that draw their focus indicator outset and not inset
+scale:focus(visible) > trough {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: 10px;
+  outline-width: 2px;
+}
+
+button:focus(visible), modelbutton:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: -2px;
+  outline-width: 2px;
+
+  row:selected & { outline-color: $coloured_focus_border_color; }
+
+  &.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color: $coloured_focus_border_color; } }
+}
+
+// Draw the "outline" around the whole switch not the slider
+switch:focus(visible) {
+  &, &:hover { slider { outline-color: transparent; } }
+  &:focus {
+    box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color);
+  }
+  row:selected & { outline-color: $coloured_focus_border_color; }
+}
+
+checkbutton:focus(visible),
+radiobutton:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: 1px;
+  outline-width: 2px;
+  row:selected & , treeview:selected & { outline-color: $coloured_focus_border_color; }
+}
+
+row:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-offset: -2px;
+  outline-style: solid;
+  &:selected {
+    outline-color: $coloured_focus_border_color;
+  }
+}
+
+treeview:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  &:selected {
+    outline-color: $coloured_focus_border_color;
+  }
+}
+
 /*
    These wildcard seems unavoidable, need to investigate.
    Wildcards are bad and troublesome, use them with care,
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 9d95c60857..3c1de0e34e 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -22,14 +22,13 @@
 }
 
 // entries
-@function entry_focus_border($fc:$selected_bg_color) {
-  @if $variant == 'light' { @return $fc; }
-  @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); }
+@function entry_focus_border($fc:$focus_border_color) {
+  @return $fc;
 }
 
-@function entry_focus_shadow($fc:$selected_bg_color) { @return inset 0 0 0 1px $fc; }
+@function entry_focus_shadow($fc:$focus_border_color) { @return inset 0 0 0 1px $fc; }
 
-@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
+@mixin entry($t, $fc:$focus_border_color, $edge: none) {
 //
 // Entries drawing function
 //
@@ -198,7 +197,6 @@
   // normal button
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
     border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     $button_fill: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
@@ -213,7 +211,6 @@
   // hovered button
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
     border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
@@ -234,7 +231,6 @@
   // normal button alternative look
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @include _button_text_shadow($tc, $c);
     @if $variant == 'light' {
@@ -254,7 +250,6 @@
   // hovered button alternative look
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
       $button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
@@ -274,7 +269,6 @@
   // pushed button
   //
     color: $tc;
-    outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
     $button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global;
     background-image: $button_fill;
@@ -396,7 +390,6 @@
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: none;
     -gtk-icon-shadow: none;
-    outline-color: transparentize($osd_fg_color, 0.7);
   }
 
   @else if $t==osd-hover {
@@ -414,7 +407,6 @@
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: none;
     -gtk-icon-shadow: none;
-    outline-color: transparentize($osd_fg_color, 0.7);
   }
 
   @else if $t==osd-active {
@@ -432,7 +424,6 @@
     box-shadow: none;
     text-shadow: none;
     -gtk-icon-shadow: none;
-    outline-color: transparentize($osd_fg_color, 0.7);
   }
 
   @else if $t==osd-insensitive {