Autocomplete suggestion focus outline (#1989)

Author: liamcmitchell

assets/css/autocomplete.css

@@ -136,8 +136,14 @@
   font-size: 0.9rem;
 }
 
-.autocomplete-suggestion:hover,
+
 .autocomplete-suggestion.selected {
+  background-color: var(--autocompleteSelected);
+  /* focus indicator on left, similar to default in focus.css  */
+  box-shadow: inset 2px 0 var(--main);
+}
+
+.autocomplete-suggestion:hover {
   background-color: var(--autocompleteHover);
 }
 

assets/css/custom-props/theme-dark.css

@@ -91,6 +91,7 @@ body.dark {
   --searchSearch:                var(--gray900);
   --autocompleteBorder:          rgba(28,42,60,.75);
   --autocompletePreview:         var(--gray750);
+  --autocompleteSelected:        var(--gray750);
   --autocompleteHover:           var(--gray700);
   --autocompleteBackground:      var(--gray800);
   --suggestionBorder:            var(--gray600);

assets/css/custom-props/theme-light.css

@@ -92,7 +92,8 @@
   --searchSearch:                var(--white);
   --autocompleteBorder:          rgba(3, 9, 19, 0.10);
   --autocompletePreview:         var(--gray25);
-  --autocompleteHover:           var(--grey50, #F0F5F9);
+  --autocompleteSelected:        var(--gray25);
+  --autocompleteHover:           var(--gray50);
   --autocompleteBackground:      var(--white);
   --suggestionBorder:            var(--gray200);
   --autocompleteResults:         var(--gray600);