Style updates for the suggestion widget.

Author: isoos

pkg/web_app/lib/src/widget/completion/suggest.dart

@@ -116,7 +116,7 @@ class Suggestion {
     }
     // include matched prefix as part of the display option
     if (completion.terminal) {
-      html = '$match$html';
+      html = '<span class="completion-overlap">$match</span>$html';
     }
     final score = (option.startsWith(word) ? math.pow(overlap.length, 3) : 0) +
         math.pow(overlap.length, 2) +

pkg/web_app/test/widget/completion/suggest_test.dart

@@ -68,50 +68,52 @@ void main() {
           'start': 0,
           'end': 5,
           'value': 'is:flutter-favorite ',
-          'html': 'is:flu<span class="completion-overlap">tt</span>er-favorite',
+          'html':
+              '<span class="completion-overlap">is:</span>flu<span class="completion-overlap">tt</span>er-favorite',
           'score': 4.125,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:unlisted ',
-          'html': 'is:unlis<span class="completion-overlap">t</span>ed',
+          'html':
+              '<span class="completion-overlap">is:</span>unlis<span class="completion-overlap">t</span>ed',
           'score': 1.125,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:dart3-compatible ',
           'html':
-              'is:dar<span class="completion-overlap">t</span>3-compa<span class="completion-overlap">t</span>ible',
+              '<span class="completion-overlap">is:</span>dar<span class="completion-overlap">t</span>3-compa<span class="completion-overlap">t</span>ible',
           'score': 1.0625,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:legacy ',
-          'html': 'is:legacy',
+          'html': '<span class="completion-overlap">is:</span>legacy',
           'score': 0.0,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:null-safe ',
-          'html': 'is:null-safe',
+          'html': '<span class="completion-overlap">is:</span>null-safe',
           'score': 0.0,
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:plugin ',
-          'html': 'is:plugin',
+          'html': '<span class="completion-overlap">is:</span>plugin',
           'score': 0.0
         },
         {
           'start': 0,
           'end': 5,
           'value': 'is:wasm-ready ',
-          'html': 'is:wasm-ready',
+          'html': '<span class="completion-overlap">is:</span>wasm-ready',
           'score': 0.0,
         },
       ]);

pkg/web_css/lib/src/_search.scss

@@ -110,26 +110,23 @@
   overflow-x: hidden;
   appearance: none;
   width: 25ex;
-  padding-bottom: 4px;
-  border-left: 1px solid #000;
-  border-right: 1px solid #000;
-  border-bottom: 1px solid #000;
+  border: 1px solid #000;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   max-height: 20em;
   background: var(--pub-searchbar_input-background-color);
-  color: var(--pub-input-placeholder-color);
+  color: var(--pub-searchbar_suggest-text-color);
   font-size: 16px;
   margin-left: 48px; // counter padding-left on .search-bar>.input
   margin-top: -14px; // counter padding-top on .search-bar>.input
 
   >.completion-option {
     cursor: pointer;
     white-space: nowrap;
-    padding: 0px 3px;
+    padding: 1px 4px;
 
     &:hover {
-      background-color: var(--pub-searchbar_input_hover-background-color);
+      background-color: var(--pub-searchbar_suggest_hover-background-color);
     }
 
     .completion-overlap {
@@ -139,6 +136,6 @@
   }
 
   >.completion-option-selected {
-    background-color: var(--pub-searchbar_input_hover-background-color);
+    background-color: var(--pub-searchbar_suggest_hover-background-color);
   }
 }

pkg/web_css/lib/src/_variables.scss

@@ -79,8 +79,9 @@
   --pub-searchbar-background-color: #132030;
   --pub-searchbar-text-color: #8d9399;
   --pub-searchbar_input-background-color: #35404d;
-  --pub-searchbar_input_hover-background-color: #455060;
   --pub-searchbar_input-text-color: var(--pub-color-white);
+  --pub-searchbar_suggest_hover-background-color: #455060;
+  --pub-searchbar_suggest-text-color: #a9a9a9;
   --pub-session_warning-background-color: #ffffaa;
   --pub-site_header_banner-background-color: #1C2834;
   --pub-site_header_banner-text-color: #f8f9fa;