[gtk/wip/jimmac/gtk-Gtk4_blue_focus_rings] Blue outlines / focus rings

[Jakub Steiner <jimmac src gnome org>]

commit f05b242df04d62d9a97f6adad998fc6d6a43b0c2
Author: frederik.feichtmeier <frederik feichtmeier gmail com>
Date:   Sat Apr 4 20:18:42 2020 +0200

    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
    
    WIP https://gitlab.gnome.org/GNOME/gtk/-/merge_requests/1629

 gtk/theme/Adwaita/_colors.scss  |   2 +
 gtk/theme/Adwaita/_common.scss  | 100 +++++++++++++++++++++++++++++-----------
 gtk/theme/Adwaita/_drawing.scss |  17 ++-----
 3 files changed, 79 insertions(+), 40 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 039c1e0515..6c7f211ad1 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: if($variant == 'light', transparentize($selected_bg_color, 0.5), 
transparentize($selected_bg_color, 0.3));
+$alt_focus_border_color: transparentize(white, 0.5);
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 692af6dc79..1c58245d01 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,79 @@ 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: $alt_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: $alt_focus_border_color; }
+
+  &.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color: $alt_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: $alt_focus_border_color; }
+}
+
+checkbutton:focus(visible),
+radiobutton:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  outline-offset: 3px;
+  outline-width: 2px;
+  -gtk-outline-radius: 3px; /* not even in inspector */
+  row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; }
+}
+
+row:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-offset: -2px;
+  outline-style: solid;
+  &:selected {
+    outline-color: $alt_focus_border_color;
+  }
+}
+
+treeview:focus(visible) {
+  outline-color: $focus_border_color;
+  outline-style: solid;
+  &:selected {
+    outline-color: $alt_focus_border_color;
+  }
+}
+
 /*
    These wildcard seems unavoidable, need to investigate.
    Wildcards are bad and troublesome, use them with care,
@@ -2382,7 +2429,6 @@ switch {
 checkbutton.text-button, radiobutton.text-button {
   // this is for a nice focus on check and radios text
   padding: 2px 0;
-  outline-offset: 0;
   border-spacing: 4px;
 }
 
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 {