content, client, css: search results hover cue

4 files changed, 33 insertions, 2 deletions

diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js
index 069d85dd..5270dbe4 100644
--- a/src/content/dependencies/generateColorStyleVariables.js
+++ b/src/content/dependencies/generateColorStyleVariables.js
@@ -32,6 +32,7 @@ export default {
       dim,
       deep,
       deepGhost,
+      lightGhost,
       bg,
       bgBlack,
       shadow,
@@ -43,6 +44,7 @@ export default {
       `--dim-color: ${dim}`,
       `--deep-color: ${deep}`,
       `--deep-ghost-color: ${deepGhost}`,
+      `--light-ghost-color: ${lightGhost}`,
       `--bg-color: ${bg}`,
       `--bg-black-color: ${bgBlack}`,
       `--shadow-color: ${shadow}`,
diff --git a/src/static/css/site.css b/src/static/css/site.css
index d2c121e6..4fc2d8a3 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -500,9 +500,27 @@ summary .group-name {
 }
 
 .wiki-search-result {
+  position: relative;
   display: flex;
-  padding: 0 6px;
-  margin: 3px 0 5px 0;
+  padding: 4px 3px 4px 6px;
+}
+
+.wiki-search-result::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+
+  border: 2px solid var(--primary-color);
+  border-radius: 4px;
+  display: none;
+}
+
+.wiki-search-result:hover::before {
+  display: block;
+  background: var(--light-ghost-color);
 }
 
 .wiki-search-result-name {
@@ -517,6 +535,7 @@ summary .group-name {
   width: 1.8em;
   height: 1.8em;
   margin-right: 6px;
+  border-radius: 2px;
 }
 
 .wiki-search-result-image-placeholder {
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 0a4dc0ff..93cbb902 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -5,6 +5,7 @@
 // that cannot 8e done at static-site compile time, 8y its fundamentally
 // ephemeral nature.
 
+import {getColors} from '../shared-util/colors.js';
 import {accumulateSum, atOffset, empty, filterMultipleArrays, stitchArrays}
   from '../shared-util/sugar.js';
 
@@ -3545,6 +3546,13 @@ function showSidebarSearchResults(results) {
     link.setAttribute('href', openTrack(result.directory));
     cssProp(link, '--primary-color', result.data.color);
 
+    try {
+      const colors = getColors(result.data.color, {chroma});
+      cssProp(link, '--light-ghost-color', colors.lightGhost);
+    } catch (error) {
+      console.warn(error);
+    }
+
     const span = document.createElement('span');
     span.classList.add('wiki-search-result-name');
 
diff --git a/src/util/colors.js b/src/util/colors.js
index 50339cd3..7298c46a 100644
--- a/src/util/colors.js
+++ b/src/util/colors.js
@@ -15,6 +15,7 @@ export function getColors(themeColor, {
   const deep = primary.saturate(1.2).luminance(0.035);
   const deepGhost = deep.alpha(0.8);
   const light = chroma.average(['#ffffff', primary], 'rgb', [4, 1]);
+  const lightGhost = primary.luminance(0.8).saturate(4).alpha(0.08);
 
   const bg = primary.luminance(0.008).desaturate(3.5).alpha(0.8);
   const bgBlack = primary.saturate(1).luminance(0.0025).alpha(0.8);
@@ -31,6 +32,7 @@ export function getColors(themeColor, {
     deep: deep.hex(),
     deepGhost: deepGhost.hex(),
     light: light.hex(),
+    lightGhost: lightGhost.hex(),
 
     bg: bg.hex(),
     bgBlack: bgBlack.hex(),