fix: pagefind ui

withastro · Jan 31, 2025 · b610e0f · b610e0f
1 parent a318359
commit b610e0f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/.changeset/nervous-mugs-begin.md b/.changeset/nervous-mugs-begin.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes Pagefind UI issues due to the use of an unknown CSS custom property in the "Load more results" button and checkboxes used displayed by the [filter feature](https://pagefind.app/docs/filtering/).
diff --git a/.changeset/thirty-countries-tease.md b/.changeset/thirty-countries-tease.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes Pagefind UI issues when using [custom metadata](https://pagefind.app/docs/metadata/).
diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
@@ -256,15 +256,20 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 	}
 
 	#starlight__search {
-		--pagefind-ui-primary: var(--sl-color-accent-light);
+		--pagefind-ui-primary: var(--sl-color-text);
 		--pagefind-ui-text: var(--sl-color-gray-2);
 		--pagefind-ui-font: var(--__sl-font);
 		--pagefind-ui-background: var(--sl-color-black);
 		--pagefind-ui-border: var(--sl-color-gray-5);
 		--pagefind-ui-border-width: 1px;
+		--pagefind-ui-tag: var(--sl-color-gray-5);
 		--sl-search-cancel-space: 5rem;
 	}
 
+	:root[data-theme='light'] #starlight__search {
+		--pagefind-ui-tag: var(--sl-color-gray-6);
+	}
+
 	@media (min-width: 50rem) {
 		#starlight__search {
 			--sl-search-cancel-space: 0px;
@@ -439,7 +444,7 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
 			0% 0% / 100% no-repeat;
 	}
-	#starlight__search .pagefind-ui__result-nested:last-child::before {
+	#starlight__search .pagefind-ui__result-nested:last-of-type::before {
 		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
 		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
 	}
@@ -466,4 +471,14 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 		background-color: transparent;
 		font-weight: 600;
 	}
+
+	#starlight__search .pagefind-ui__filter-value::before {
+		border-color: var(--sl-color-text-invert);
+	}
+
+	#starlight__search .pagefind-ui__result-tags {
+		background-color: var(--sl-color-black);
+		margin-top: 0;
+		padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
+	}
 </style>