Tweak search box (#686)

* make esc button more prominent/separate

* tweaks

* fix hovers

Author: Rich-Harris

packages/site-kit/src/lib/search/SearchBox.svelte

@@ -159,31 +159,37 @@ 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">
-				<input
-					use:forcefocus
-					onkeydown={(e) => {
+			<div class="controls">
+				<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" /> -->
+					<kbd>Esc</kbd>
+				</button>
 			</div>
 
-			<button aria-label="Close" onclick={close}>
-				<!-- <Icon name="close" /> -->
-				<kbd>Esc</kbd>
-			</button>
-
 			<span id="search-description" class="visually-hidden">
 				{#if search_description}
 					{@render search_description()}
@@ -222,14 +228,15 @@ 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);
 												e.stopPropagation();
 												e.preventDefault();
 											}}
 										>
-											<Icon name="delete" />
+											<Icon name="delete" size={16} />
 										</button>
 									</li>
 								{/each}
@@ -302,50 +309,85 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 	}
 
-	input {
-		font: var(--sk-font-ui-large);
-		width: 100%;
-		padding: calc(var(--padding) - 0.5rem) 5rem calc(var(--padding) - 0.5rem) var(--padding);
-		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);
-
-		&::selection {
-			background-color: var(--sk-back-translucent);
-		}
+	.controls {
+		background: var(--background);
+		padding: 0.5rem;
+		display: flex;
+		gap: 1rem;
+	}
 
-		&::placeholder {
-			color: var(--sk-text-2);
-			opacity: 0.3;
+	.input-group {
+		position: relative;
+		flex: 1;
+
+		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);
+			background: inherit;
+
+			&::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: -3px;
+		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;
+			}
 		}
 	}
 
 	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;
+
+		&:hover,
+		&:focus {
+			color: var(--sk-text-3);
+		}
 
 		&:focus-visible {
-			opacity: 1;
-			outline-offset: -3px;
+			outline-offset: -2px;
 		}
 
 		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%;
 		}
 	}
 
@@ -365,38 +407,40 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		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;
 				text-decoration: none;
-				padding: 0.5rem calc(4rem + var(--padding)) 0.5rem var(--padding);
-
-				&:hover {
-					background: rgba(0, 0, 0, 0.05);
-				}
+				margin: 0 -0.5rem;
+				padding: 0.5rem;
+				flex: 1;
 
 				&:focus {
 					outline-offset: -3px;
 				}
 			}
 
 			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);
+				background-color: var(--sk-back-2);
 
 				&:hover {
-					opacity: 1;
 					outline: none;
+					color: var(--sk-text-3);
 				}
 
 				&:focus-visible {
-					opacity: 1;
+					color: var(--sk-text-3);
 					outline-offset: -3px;
 				}
 			}

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;
 		}