feat: Change bg color when focusing tag instead of border (#751)

app/assets/javascripts/components/AutocompleteTagHint.tsx

@@ -57,7 +57,7 @@ export const AutocompleteTagHint = observer(
         <button
           ref={hintRef}
           type="button"
-          className="sn-dropdown-item"
+          className="sn-dropdown-item focus:bg-info focus:color-info-contrast hover:color-foreground"
           onClick={onTagHintClick}
           onFocus={onFocus}
           onBlur={onBlur}

app/assets/javascripts/components/AutocompleteTagResult.tsx

@@ -77,7 +77,7 @@ export const AutocompleteTagResult = observer(
       <button
         ref={tagResultRef}
         type="button"
-        className="sn-dropdown-item"
+        className="sn-dropdown-item focus:bg-info focus:color-info-contrast"
         onClick={() => onTagOptionClick(tagResult)}
         onFocus={onFocus}
         onBlur={onBlur}

app/assets/stylesheets/_sn.scss

@@ -170,9 +170,10 @@
   @extend .flex;
   @extend .items-center;
   @extend .border-0;
-  @extend .focus\:inner-ring-info;
+  @extend .focus\:shadow-none;
   @extend .cursor-pointer;
   @extend .hover\:bg-contrast;
+  @extend .hover\:color-foreground;
   @extend .color-text;
   @extend .bg-transparent;
   @extend .px-3;
@@ -684,6 +685,18 @@
   @extend .rounded-full;
 }
 
+.focus\:bg-info:focus {
+  @extend .bg-info;
+}
+
+.focus\:color-info-contrast:focus {
+  @extend .color-info-contrast;
+}
+
+.hover\:color-foreground:hover {
+  color: var(--sn-stylekit-foreground-color) !important;
+}
+
 .focus\:bg-info-backdrop:focus {
   background-color: var(--sn-stylekit-info-backdrop-color);
 }