Focus improvementswip/jimmac/gtk-Gtk4_blue_focus_rings

- add tab and treeview
- change focus variables: use alt_ prefix instead of coloured_ and descend focus_border_color from selected_bg_color

2 files changed, 24 insertions, 11 deletions

diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 6ce87619a5..6c7f211ad1 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -76,5 +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);
+$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 047c23b6e3..941ef6a707 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -53,7 +53,7 @@ flowboxchild:focus(visible) {
   outline-style: solid;
   outline-offset: -1px;
   outline-width: 2px;
-  :selected & { outline-color: $coloured_focus_border_color; }
+  :selected & { outline-color: $alt_focus_border_color; }
 }
 
 // Widgets that draw their focus indicator outset and not inset
@@ -70,9 +70,9 @@ button:focus(visible), modelbutton:focus(visible) {
   outline-offset: -2px;
   outline-width: 2px;
 
-  row:selected & { outline-color: $coloured_focus_border_color; }
+  row:selected & { outline-color: $alt_focus_border_color; }
 
-  &.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color: $coloured_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
@@ -81,16 +81,17 @@ switch:focus(visible) {
   &: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; }
+  row:selected & { outline-color: $alt_focus_border_color; }
 }
 
 checkbutton:focus(visible),
 radiobutton:focus(visible) {
   outline-color: $focus_border_color;
   outline-style: solid;
-  outline-offset: 1px;
+  outline-offset: 3px;
   outline-width: 2px;
-  row:selected & , treeview:selected & { outline-color: $coloured_focus_border_color; }
+  border-radius: 3px;
+  row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; }
 }
 
 row:focus(visible) {
@@ -98,15 +99,28 @@ row:focus(visible) {
   outline-offset: -2px;
   outline-style: solid;
   &:selected {
-    outline-color: $coloured_focus_border_color;
+    outline-color: $alt_focus_border_color;
   }
 }
 
 treeview:focus(visible) {
   outline-color: $focus_border_color;
   outline-style: solid;
+  outline-width: 2px;
   &:selected {
-    outline-color: $coloured_focus_border_color;
+    outline-color: $alt_focus_border_color;
+  }
+}
+
+notebook > header {
+  tabs {
+    &, &:hover, &:backdrop {
+      &, &.right, &.left, &.top, &.bottom {
+        tab:focus(visible), tab:checked:focus(visible) {
+          color: $focus_border_color;
+        }
+      }
+    }
   }
 }
 
@@ -2428,7 +2442,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;
 }