Merge pull request vinceliuice#271 from jere-ortega24/fix-focus-outline

Fix focus outline

src/_sass/gnome-shell/_common.scss

@@ -102,12 +102,14 @@ $bubble_button_radius: $material_radius - 1px;
  @extend %icon_tile;
  }
 
+ &:focus .overview-icon,
  &:hover .overview-icon {
  background-color: rgba($selected_bg_color, 0.5);
  border: 1px solid $selected_bg_color;
  }
 
  &:active .overview-icon,
+ &:active:focus .overview-icon,
  &:active:hover .overview-icon {
  background-color: rgba($selected_bg_color, 0.75);
  border: 1px solid $selected_bg_color;

src/_sass/gnome-shell/widgets-common/_app-grid.scss

@@ -21,6 +21,7 @@
  border: 1px solid darken($dark_sidebar_icon_bg, 3%);
  border-radius: $material_radius;
 
+ &:focus,
  &:hover {
  background-color: rgba(lighten($dark_sidebar_icon_bg, 3%), 0.5);
  border-color: lighten($dark_sidebar_icon_bg, 5%);

src/_sass/gtk/_common-4.0.scss

@@ -75,6 +75,8 @@ textview > border { background-color: mix($bg_color, $base_color, 50%); }
 iconview {
  @extend %view;
 
+ @include focus-ring();
+
  &:drop(active) {
  box-shadow: none;
  }
@@ -100,6 +102,8 @@ flowbox {
  padding: 3px;
  border-radius: $bt_radius;
 
+ @include focus-ring();
+
  &:selected {
  @extend %selected_items;
  outline-offset: -2px;
@@ -115,6 +119,8 @@ gridview {
  > child {
  padding: 3px;
 
+ @include focus-ring();
+
  &:selected {
  outline-color: $selected_bg_color;
 
@@ -135,6 +141,8 @@ coverflow cover {
 }
 
 label {
+ @include focus-ring();
+
  &.separator {
  @extend .dim-label;
 
@@ -486,6 +494,7 @@ button {
  padding: 2px $cont_padding;
 
  @include button(normal);
+ @include focus-ring();
 
  separator { margin: 4px 1px; }
 
@@ -625,6 +634,7 @@ button {
  (destructive-action, $destructive_color, $destructive_fg_color) {
  &.#{$b_type} {
  @include button(suggested_destructive, $b_color, $b_fg);
+ @include focus-ring();
 
  &.flat {
  @include button(undecorated);
@@ -967,16 +977,6 @@ modelbutton.flat {
  @extend %undecorated_button;
  border: none;
 
- &:hover {
- background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%));
- // border: 1px solid $borders_color;
- }
-
- &:active, &:selected {
- // border: 1px solid if($variant=='light', $sec_selected_bg_color, $alt_selected_bg_color);
- @extend %selected_items;
- }
-
  &:checked { color: $fg_color; }
  &:disabled { color: $insensitive_fg_color; }
 
@@ -1020,6 +1020,7 @@ list > row button.image-button:not(.flat):not(.up):not(.down) {
  (destructive-action, $destructive_color) {
  &.#{$b_type} { // allow colored buttons in lists #3643
  @include button(normal, $b_color, white);
+ @include focus-ring();
  }
  }
 }
@@ -1031,6 +1032,8 @@ list > row button.image-button:not(.flat):not(.up):not(.down) {
 link {
  color: $link_color;
 
+ @include focus-ring();
+
  &:visited {
  color: $link_visited_color;
  *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
@@ -1925,6 +1928,8 @@ treeview.view {
  border-left-color: $solid_borders_color; // this is actually the tree lines color,
  border-top-color: $solid_borders_color; // while this is the grid lines color, better then nothing
 
+ @include focus-ring($offset: -3px)
+
  > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
 
  acceleditor > label { background-color: $selected_bg_color; }
@@ -2082,7 +2087,7 @@ menubar {
  border: 1px solid transparent;
  border-radius: 0;
 
- &:hover { //Seems like it :hover even with keyboard focus
+ &:selected { //Seems like it :hover even with keyboard focus
  background-color: $selected_bg_color;
  box-shadow: none;
  border-color: if($titlebar == 'light', $sec_selected_bg_color, $alt_selected_bg_color);
@@ -2200,22 +2205,11 @@ popover.menu {
  border-radius: $bt_radius;
  }
 
- &:focus:not(:hover):not(:active) {
- color: $fg_color;
- background-color: transparent;
- transition: background-color 0,
- color 0;
- }
-
- &:hover {
+ &:hover:not(:focus-visible),
+ &:selected:focus-visible {
  color: $selected_fg_color;
  background-color: $selected_bg_color;
  }
-
- &:active {
- color: $selected_fg_color;
- background-color: darken($selected_bg_color, 10%); // matching buttons
- }
  }
 
  label.title {
@@ -2330,6 +2324,7 @@ cursor-handle {
 //
 notebook {
  padding: 0;
+ @include focus-ring("> header > tabs > tab:checked", $offset: -4px, $focus-state: ':focus:focus-visible');
 
  &.frame {
  border: 1px solid $borders_color;
@@ -2613,15 +2608,18 @@ switch {
  background-position: center center;
  transition: all 350ms $ease-out-quad;
  padding: 0;
+ border-radius: 100px;
+
+ @include focus-ring($offset: 3px);
 
- > slider {
+ > slider,
+ > image {
  min-width: 0;
  min-height: 0;
+ color: transparent;
  }
 
  &, > slider {
- outline-color: transparent;
- color: transparent;
  border: none;
  box-shadow: none;
  background-color: transparent;
@@ -2679,7 +2677,8 @@ switch {
  }
  }
 
- popover.menu modelbutton:hover #{$w}#{$s},
+ popover.menu modelbutton:hover:not(:focus-visible) > box > #{$w}#{$s},
+ popover.menu modelbutton:selected:focus-visible > box > #{$w}#{$s},
  .view:selected #{$w}#{$s},
  row:selected #{$w}#{$s},
  infobar #{$w}#{$s} {
@@ -2713,6 +2712,8 @@ switch {
 }
 
 checkbutton, radiobutton {
+ @include focus-ring($offset: 0);
+
  // this is for a nice focus on check and radios text
  &.text-button {
  padding: 2px 0;
@@ -2741,9 +2742,11 @@ radio {
 //
 
 scale {
- $_marks_length: 3px;
+ $_marks_length: 4px;
  $_marks_distance: 1px;
 
+ @include focus-ring("> trough", $offset: 2px);
+
  min-height: 15px;
  min-width: 15px;
  padding: 3px;
@@ -2909,6 +2912,10 @@ scale {
  margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
  }
  }
+
+ indicator {
+ background-color: currentcolor;
+ }
  }
 
  &.fine-tune > marks {
@@ -3194,6 +3201,8 @@ list {
 }
 
 row {
+ @include focus-ring($offset: -3px);
+
  label.subtitle {
  font-size: smaller;
  @extend .dim-label;
@@ -3281,6 +3290,8 @@ row {
  transition: 200ms $ease-out-quad;
  border-bottom: 1px solid $borders_color;
 
+ @include focus-ring($offset: -3px);
+
  &:not(:selected).activatable {
  &:hover {
  background-color: gtkalpha(currentColor, .03);
@@ -3517,6 +3528,8 @@ expander {
 }
 
 expander-widget {
+ @include focus-ring("> box > title", $offset: 0);
+
  > box > title {
  border-radius: $bt_radius;
 
@@ -3761,6 +3774,8 @@ stacksidebar {
  row {
  padding: 4px;
 
+ @include focus-ring();
+
  > label {
  padding-left: $cont_padding;
  padding-right: $cont_padding;
@@ -3817,6 +3832,8 @@ separator.sidebar {
  border-radius: $bt_radius;
  margin: 2px 6px;
 
+ @include focus-ring($focus-state: 'focus-visible:focus-within');
+
  &:last-child {
  margin-bottom: 0;
  }
@@ -4110,6 +4127,7 @@ colorswatch {
  // is applied to the overlay box.
 
  $_colorswatch-radius: 2px;
+ @include focus-ring($offset: 2px);
 
  &, &:drop(active) { border-style: none; }
 
@@ -4188,6 +4206,10 @@ colorswatch {
  }
 }
 
+plane {
+ @include focus-ring($offset: 2px);
+}
+
 button.color {
  padding: 4px;
 
@@ -4508,7 +4530,8 @@ popover.emoji-picker emoji {
  padding: 6px;
  border-radius: 6px;
 
- &:focus,
+ @include focus-ring($offset: -3px)
+
  &:hover {
  background-color: $selected_bg_color;
  }

src/_sass/gtk/_drawing.scss

@@ -15,6 +15,15 @@
 
 // Drawing mixins
 
+@mixin focus-ring($target: null, $width: 1px, $offset: -3px, $focus-state: ':focus:focus-visible') {
+ &#{$focus-state} #{$target} {
+ outline-color: gtkalpha(currentcolor, 0.3);
+ outline-offset: $offset;
+ outline-style: dashed;
+ outline-width: $width;
+ }
+}
+
 // Solid color image
 @function _solid($c) {
  @return linear-gradient(to bottom, $c, $c);
@@ -141,7 +150,6 @@
  color: $fg_color;
  border-color: $button_border;
  background-color: $button_bg;
- outline: none;
  }
 
  @else if $t==hover {

src/_sass/gtk/_libadwaita.scss

@@ -616,6 +616,8 @@ tabbar {
 
  tabbox {
  > tabboxchild {
+ @include focus-ring();
+
  border-radius: 0;
  margin-bottom: 0;
  margin-top: 0;

src/gnome-shell/theme-3-32/gnome-shell-Dark.css

@@ -99,7 +99,8 @@
  text-align: center;
 }
 
-.app-well-app:hover .overview-icon,
+.app-well-app:focus .overview-icon,
+.grid-search-result:focus .overview-icon, .app-well-app:hover .overview-icon,
 .grid-search-result:hover .overview-icon {
  background-color: rgba(82, 148, 226, 0.5);
  border: 1px solid #5294e2;
@@ -2119,7 +2120,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
  border-radius: 3px;
 }
 
-.app-well-app.app-folder:hover {
+.app-well-app.app-folder:focus, .app-well-app.app-folder:hover {
  background-color: rgba(57, 59, 69, 0.5);
  border-color: #3d404b;
 }

src/gnome-shell/theme-3-32/gnome-shell.css

@@ -99,7 +99,8 @@
  text-align: center;
 }
 
-.app-well-app:hover .overview-icon,
+.app-well-app:focus .overview-icon,
+.grid-search-result:focus .overview-icon, .app-well-app:hover .overview-icon,
 .grid-search-result:hover .overview-icon {
  background-color: rgba(82, 148, 226, 0.5);
  border: 1px solid #5294e2;
@@ -2119,7 +2120,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
  border-radius: 3px;
 }
 
-.app-well-app.app-folder:hover {
+.app-well-app.app-folder:focus, .app-well-app.app-folder:hover {
  background-color: rgba(57, 59, 69, 0.5);
  border-color: #3d404b;
 }

src/gnome-shell/theme-40-0/gnome-shell-Dark.css

@@ -99,7 +99,8 @@
  text-align: center;
 }
 
-.app-well-app:hover .overview-icon,
+.app-well-app:focus .overview-icon,
+.grid-search-result:focus .overview-icon, .app-well-app:hover .overview-icon,
 .grid-search-result:hover .overview-icon {
  background-color: rgba(82, 148, 226, 0.5);
  border: 1px solid #5294e2;
@@ -2119,7 +2120,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
  border-radius: 3px;
 }
 
-.app-well-app.app-folder:hover {
+.app-well-app.app-folder:focus, .app-well-app.app-folder:hover {
  background-color: rgba(57, 59, 69, 0.5);
  border-color: #3d404b;
 }