Hotfix the color styling and fonts for autocompletions

assets/css/themes/base/dark.css

@@ -66,7 +66,9 @@
     --block-header-link-text-hover-color: hsl(from $block-header-link-text-color calc(h + 6) calc(s - 20) calc(l - 3));
 
     --block-header-light-hover-color: hsl(from $block-header-light-color calc(h - 4) calc(s + 10) calc(l - 4));
-    --block-header-light-link-text-hover-color: hsl(from $block-header-light-link-text-color calc(h + 8) calc(s - 10) calc(l - 2));
+    --block-header-light-link-text-hover-color: hsl(
+      from $block-header-light-link-text-color calc(h + 8) calc(s - 10) calc(l - 2)
+    );
 
     --media-box-hover-color: hsl(from $media-box-color h s calc(l - 4));
     --media-box-header-link-text-hover-color: hsl(from $link-color h calc(s - 18) calc(l - 3));
@@ -121,7 +123,9 @@
     --tag-category-error-border: hsl(from $tag-category-error-color h s calc(l - 22));
     --tag-category-character-background: hsl(from $tag-category-character-color h s calc(l - 33));
     --tag-category-character-border: hsl(from $tag-category-character-color h s calc(l - 20));
-    --tag-category-content-official-background: hsl(from $tag-category-content-official-color h calc(s - 2) calc(l - 29));
+    --tag-category-content-official-background: hsl(
+      from $tag-category-content-official-color h calc(s - 2) calc(l - 29)
+    );
     --tag-category-content-official-border: hsl(from $tag-category-content-official-color h s calc(l - 20));
     --tag-category-content-fanmade-background: hsl(from $tag-category-content-fanmade-color h s calc(l - 40));
     --tag-category-content-fanmade-border: hsl(from $tag-category-content-fanmade-color h calc(s - 10) calc(l - 20));
@@ -166,13 +170,16 @@
     --poll-form-label-background: hsl(from $border-color h s calc(l + 8));
     --tag-dropdown-hover-background: hsl(from $meta-color h s calc(l - 4));
 
-    --autocomplete-history-color: var(--block-header-link-text-color);
+    --autocomplete-background: var(--background-color);
-    --autocomplete-history-match-color: hsl(from var(--block-header-link-text-color) h s calc(l + 20));
 
-    --autocomplete-tag-color: hsl(from var(--foreground-color) h s calc(l - 5));
+    --autocomplete-history-color: $autocomplete-history-color;
-    --autocomplete-tag-match-color: hsl(from var(--foreground-color) h s calc(l + 20));
+    --autocomplete-history-match-color: hsl(from $autocomplete-history-color h s calc(l + 20));
+
+    --autocomplete-tag-color: hsl(from $foreground-color h s calc(l - 5));
+    --autocomplete-tag-match-color: hsl(from $foreground-color h s calc(l + 20));
     --autocomplete-tag-count-color: var(--foreground-half-color);
 
-    --autocomplete-match-selected-color: hsl(from var(--background-color) h s calc(l + 10));
+    --autocomplete-hover-background: hsl(from $page-background-color h s calc(l + 13));
+    --autocomplete-selected-background: hsl(from $page-background-color h s calc(l + 18));
   }
 }

assets/css/themes/base/light.css

@@ -163,13 +163,16 @@
     --poll-form-label-background: hsl(from $base-color h calc(s - 16) calc(l + 36));
     --tag-dropdown-hover-background: hsl(from $foreground-color h s calc(l - 10));
 
-    --autocomplete-history-color: var(--block-header-link-text-color);
+    --autocomplete-background: var(--background-color);
-    --autocomplete-history-match-color: hsl(from var(--block-header-link-text-color) h calc(s + 40) calc(l - 15));
 
-    --autocomplete-tag-color: hsl(from var(--foreground-color) h s calc(l + 20));
+    --autocomplete-history-color: $autocomplete-history-color;
-    --autocomplete-tag-match-color: hsl(from var(--foreground-color) h s calc(l - 20));
+    --autocomplete-history-match-color: hsl(from $autocomplete-history-color h s calc(l - 13));
+
+    --autocomplete-tag-color: hsl(from $foreground-color h s calc(l + 20));
+    --autocomplete-tag-match-color: hsl(from $foreground-color h s calc(l - 20));
     --autocomplete-tag-count-color: var(--foreground-half-color);
 
-    --autocomplete-match-selected-color: hsl(from var(--background-color) h s calc(l + 10));
+    --autocomplete-hover-background: hsl(from $base-color h calc(s - 25) 93);
+    --autocomplete-selected-background: hsl(from $base-color h calc(s - 25) 87);
   }
 }

assets/css/themes/dark-blue.css

@@ -61,6 +61,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #79afe4;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/dark-gray.css

@@ -60,6 +60,8 @@ $site-notice-color: #38385a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #9baab5;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/dark-green.css

@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #11cf69;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/dark-orange.css

@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #eb6d2e;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/dark-pink.css

@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #f0509b;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/dark-purple.css

@@ -61,6 +61,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #b577eb;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/dark-red.css

@@ -62,6 +62,8 @@ $site-notice-color: $grey-color;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #d2d207;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/dark-teal.css

@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #0ebcbf;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/dark-yellow.css

@@ -60,6 +60,8 @@ $site-notice-color: #07070a;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #e9c600;
+
 @mixin dark-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-blue.css

@@ -44,6 +44,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #419cd9;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-gray.css

@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #3e7da1;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-green.css

@@ -42,6 +42,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #2ca052;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-orange.css

@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #d97441;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-pink.css

@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #d941c0;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-purple.css

@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #9241d9;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-red.css

@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #d94141;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-teal.css

@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color: #1098a2;
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/themes/light-yellow.css

@@ -41,6 +41,8 @@ $commission-category-color: #986f3d;
 $image-overlay-color: #ffffff;
 $image-overlay-background-color: #000000;
 
+$autocomplete-history-color:rgb(142, 126, 6);
+
 @mixin light-theme-mutations;
 
 /* Put any color variable overrides here.

assets/css/views/tags.css

@@ -33,8 +33,16 @@
   user-select: none;
   white-space: nowrap;
   z-index: 999;
-  font-family: var(--font-family-monospace);
+
-  background: var(--background-color);
+  /*
+    'Courier New', which is the most widespread default monospace font is
+    less readable with the default font weight. So we make it bold.
+    Uncomment 'Courier New' below to test it.
+  */
+  font-weight: bold;
+  font-family: /* "Courier New", */ "Consolas", "Droid Sans Mono", "Noto Sans Mono", monospace;
+
+  background: var(--autocomplete-background);
 
   /* Borders */
   border-style: solid;
@@ -81,34 +89,31 @@
 }
 
 .autocomplete__item__history__match {
-  font-weight: bold;
-
-  /* Use a lighter color to highlight the matched part of the query */
   color: var(--autocomplete-history-match-color);
 }
 
 .autocomplete__item__tag__match {
-  font-weight: bold;
-}
-
-.autocomplete__item__tag__match:not(.autocomplete__item--selected) {
-  /* Use a lighter color to highlight the matched part of the query */
   color: var(--autocomplete-tag-match-color);
 }
 
 .autocomplete__item__tag__count {
   color: var(--autocomplete-tag-count-color);
+
+  /*
+    Reduce the space size between groups of 3 digits in big numbers like "1 000 000".
+    This way the number is more compact and easier to read.
+  */
+  word-spacing: -3px;
 }
 
 .autocomplete__item:hover:not(.autocomplete__item--selected) {
-  background: var(--autocomplete-match-selected-color);
+  background: var(--autocomplete-hover-background);
 }
 
 .autocomplete__item--selected,
 .autocomplete__item--selected .autocomplete__item__history__match,
 .autocomplete__item--selected .autocomplete__item__tag__match {
-  background: var(--foreground-color);
+  background: var(--autocomplete-selected-background);
-  color: var(--background-color);
 }
 
 /* Tags */

assets/js/utils/suggestions-view.ts

@@ -60,7 +60,9 @@ export class TagSuggestionComponent {
     // groups of 3 digits.
     const formatter = new Intl.NumberFormat('fr', { useGrouping: true });
 
-    return formatter.format(count);
+    // Normalize the whispace with a `.replace()`. We'll use CSS to guarantee
+    // a smaller spacing between the groups of digits.
+    return formatter.format(count).replace(/\s/g, ' ');
   }
 }