From f6c6cc5297c3b55d835037ad693b045177083a98 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 15:50:58 -0400
Subject: [PATCH 1/3] make esc button more prominent/separate

---
 .../site-kit/src/lib/search/SearchBox.svelte  | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 09b21e06c3..59dcef2fe8 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -159,7 +159,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		use:trap
 	>
 		<div class="search-box">
-			<div style="background: var(--background); padding: 0.5rem">
+			<div class="controls">
 				<input
 					use:forcefocus
 					onkeydown={(e) => {
@@ -177,12 +177,12 @@ It appears when the user clicks on the `Search` component or presses the corresp
 					aria-label={placeholder}
 					spellcheck="false"
 				/>
-			</div>
 
-			<button aria-label="Close" onclick={close}>
-				<!-- <Icon name="close" /> -->
-				<kbd>Esc</kbd>
-			</button>
+				<button class="raised" aria-label="Close" onclick={close}>
+					<!-- <Icon name="close" /> -->
+					<kbd>Esc</kbd>
+				</button>
+			</div>
 
 			<span id="search-description" class="visually-hidden">
 				{#if search_description}
@@ -302,16 +302,22 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 	}
 
+	.controls {
+		background: var(--background);
+		padding: 0.5rem;
+		display: flex;
+		gap: 1rem;
+	}
+
 	input {
 		font: var(--sk-font-ui-large);
-		width: 100%;
-		padding: calc(var(--padding) - 0.5rem) 5rem calc(var(--padding) - 0.5rem) var(--padding);
+		flex: 1;
+		padding: var(--padding) calc(var(--padding) - 0.5rem);
 		height: 6rem;
 		border: none;
-		border-bottom: 1px solid var(--sk-back-3);
 		flex-shrink: 0;
-		background: var(--sk-back-3);
 		color: var(--sk-text-1);
+		border-bottom: 1px solid var(--sk-back-6);
 
 		&::selection {
 			background-color: var(--sk-back-translucent);
@@ -323,20 +329,15 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 
 		&:focus-visible {
-			outline-offset: -3px;
+			outline-offset: -2px;
 		}
 	}
 
 	button[aria-label='Close'] {
-		--size: 2rem;
-		position: absolute;
-		top: 0.5rem;
-		right: 0;
-		width: 5rem;
-		height: 6rem;
+		height: 100%;
+		aspect-ratio: 1;
 		background: none;
 		color: var(--sk-text-2);
-		opacity: 0.3;
 
 		&:focus-visible {
 			opacity: 1;
@@ -344,8 +345,15 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 
 		kbd {
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			text-transform: uppercase;
-			font: var(--sk-font-ui-small);
+			background: none;
+			font: var(--sk-font-ui-medium);
+			color: var(--sk-text-4);
+			width: 100%;
+			height: 100%;
 		}
 	}
 

From 6089637ca89a0d1cd2a2110bbc3e662263a96dbb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 28 Oct 2024 16:05:41 -0400
Subject: [PATCH 2/3] tweaks

---
 .../site-kit/src/lib/search/SearchBox.svelte  | 123 ++++++++++++------
 1 file changed, 80 insertions(+), 43 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 59dcef2fe8..fede3496e8 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -160,23 +160,29 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	>
 		<div class="search-box">
 			<div class="controls">
-				<input
-					use:forcefocus
-					onkeydown={(e) => {
+				<div class="input-group">
+					<input
+						use:forcefocus
+						onkeydown={(e) => {
 					if (e.key === 'Enter' && !e.isComposing) {
 						const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
 						element?.click();
 					}
 				}}
-					oninput={(e) => {
-						$search_query = e.currentTarget.value;
-					}}
-					value={$search_query}
-					{placeholder}
-					aria-describedby="search-description"
-					aria-label={placeholder}
-					spellcheck="false"
-				/>
+						oninput={(e) => {
+							$search_query = e.currentTarget.value;
+						}}
+						value={$search_query}
+						{placeholder}
+						aria-describedby="search-description"
+						aria-label={placeholder}
+						spellcheck="false"
+					/>
+
+					<button aria-label="Clear" onclick={() => ($search_query = '')}>
+						<Icon name="close" />
+					</button>
+				</div>
 
 				<button class="raised" aria-label="Close" onclick={close}>
 					<!-- <Icon name="close" /> -->
@@ -222,6 +228,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 										</a>
 
 										<button
+											class="raised icon"
 											aria-label="Delete"
 											onclick={(e) => {
 												$search_recent = $search_recent.filter((href) => href !== search.href);
@@ -229,7 +236,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 												e.preventDefault();
 											}}
 										>
-											<Icon name="delete" />
+											<Icon name="delete" size={16} />
 										</button>
 									</li>
 								{/each}
@@ -309,27 +316,50 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		gap: 1rem;
 	}
 
-	input {
-		font: var(--sk-font-ui-large);
+	.input-group {
+		position: relative;
 		flex: 1;
-		padding: var(--padding) calc(var(--padding) - 0.5rem);
-		height: 6rem;
-		border: none;
-		flex-shrink: 0;
-		color: var(--sk-text-1);
-		border-bottom: 1px solid var(--sk-back-6);
-
-		&::selection {
-			background-color: var(--sk-back-translucent);
-		}
 
-		&::placeholder {
-			color: var(--sk-text-2);
-			opacity: 0.3;
+		input {
+			font: var(--sk-font-ui-large);
+			width: 100%;
+			padding: var(--padding) 6rem var(--padding) calc(var(--padding) - 0.5rem);
+			height: 6rem;
+			border: none;
+			flex-shrink: 0;
+			color: var(--sk-text-1);
+			border-bottom: 1px solid var(--sk-back-6);
+
+			&::selection {
+				background-color: var(--sk-back-translucent);
+			}
+
+			&::placeholder {
+				color: var(--sk-text-2);
+				opacity: 0.3;
+			}
+
+			&:focus-visible {
+				outline-offset: -2px;
+			}
 		}
 
-		&:focus-visible {
-			outline-offset: -2px;
+		button {
+			position: absolute;
+			right: 0;
+			top: 0;
+			height: 100%;
+			aspect-ratio: 1;
+			color: var(--sk-text-4);
+
+			&:hover,
+			&:focus {
+				color: var(--sk-text-3);
+			}
+
+			&:focus-visible {
+				outline-offset: -2px;
+			}
 		}
 	}
 
@@ -337,11 +367,14 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		height: 100%;
 		aspect-ratio: 1;
 		background: none;
-		color: var(--sk-text-2);
+
+		&:hover,
+		&:focus {
+			color: var(--sk-text-3);
+		}
 
 		&:focus-visible {
-			opacity: 1;
-			outline-offset: -3px;
+			outline-offset: -2px;
 		}
 
 		kbd {
@@ -371,14 +404,22 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		pointer-events: all;
 		background: var(--background);
 
+		ul {
+			padding: 0 var(--padding);
+		}
+
 		li {
 			position: relative;
+			display: flex;
+			gap: 1rem;
 
 			a {
 				color: var(--sk-text-2);
 				display: block;
 				text-decoration: none;
-				padding: 0.5rem calc(4rem + var(--padding)) 0.5rem var(--padding);
+				margin: 0 -0.5rem;
+				padding: 0.5rem;
+				flex: 1;
 
 				&:hover {
 					background: rgba(0, 0, 0, 0.05);
@@ -390,21 +431,17 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			}
 
 			button[aria-label='Delete'] {
-				position: absolute;
-				top: 0;
-				right: 0;
-				width: 5rem;
-				height: 100%;
-				color: var(--sk-text-2);
-				opacity: 0.1;
+				width: 3.2rem;
+				height: 3.2rem;
+				color: var(--sk-text-4);
 
 				&:hover {
-					opacity: 1;
 					outline: none;
+					color: var(--sk-text-3);
 				}
 
 				&:focus-visible {
-					opacity: 1;
+					color: var(--sk-text-3);
 					outline-offset: -3px;
 				}
 			}

From d8fb13c2a5591d7988ee530e41b7649c1c8f5947 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 29 Oct 2024 17:27:43 -0400
Subject: [PATCH 3/3] fix hovers

---
 packages/site-kit/src/lib/search/SearchBox.svelte | 15 +++++++--------
 .../src/lib/search/SearchResultList.svelte        |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index fede3496e8..ba8a596ea8 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -329,6 +329,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			flex-shrink: 0;
 			color: var(--sk-text-1);
 			border-bottom: 1px solid var(--sk-back-6);
+			background: inherit;
 
 			&::selection {
 				background-color: var(--sk-back-translucent);
@@ -404,15 +405,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		pointer-events: all;
 		background: var(--background);
 
-		ul {
-			padding: 0 var(--padding);
-		}
-
 		li {
 			position: relative;
 			display: flex;
+			padding: 0.2rem var(--padding);
 			gap: 1rem;
 
+			&:hover {
+				background: var(--sk-back-3);
+			}
+
 			a {
 				color: var(--sk-text-2);
 				display: block;
@@ -421,10 +423,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 				padding: 0.5rem;
 				flex: 1;
 
-				&:hover {
-					background: rgba(0, 0, 0, 0.05);
-				}
-
 				&:focus {
 					outline-offset: -3px;
 				}
@@ -434,6 +432,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 				width: 3.2rem;
 				height: 3.2rem;
 				color: var(--sk-text-4);
+				background-color: var(--sk-back-2);
 
 				&:hover {
 					outline: none;
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 65c5eb34bb..6b83731fd9 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -149,7 +149,7 @@
 		}
 
 		&:hover {
-			--background: var(--sk-back-4);
+			--background: var(--sk-back-3);
 			text-decoration: none;
 		}