@astrojs/starlight 0.30.6 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @astrojs/starlight
 
+## 0.31.0
+
+### Minor Changes
+
+- [#2777](https://github.com/withastro/starlight/pull/2777) [`88f4214`](https://github.com/withastro/starlight/commit/88f42145888f3a04f20898fcb700c1e65be48bb2) Thanks [@hippotastic](https://github.com/hippotastic)! - Updates `astro-expressive-code` dependency to the latest version (0.40).
+
+  This includes an update to the latest Shiki version (1.26.1), providing access to all current Shiki themes and syntax highlighting languages, and adding the config options `shiki.engine`, `shiki.bundledLangs`, `shiki.langAlias` and `removeUnusedThemes`. It also adds new style variants to the optional collapsible sections plugin.
+
+  See the [Expressive Code release notes](https://expressive-code.com/releases/#0400) for full details.
+
+- [#2736](https://github.com/withastro/starlight/pull/2736) [`29a885b`](https://github.com/withastro/starlight/commit/29a885be43f29150d6abd905f3ef7e1dccb99c98) Thanks [@delucis](https://github.com/delucis)! - ⚠️ **BREAKING CHANGE:** The minimum supported version of Astro is now 5.1.5
+
+  Please update Astro and Starlight together:
+
+  ```sh
+  npx @astrojs/upgrade
+  ```
+
+- [#2728](https://github.com/withastro/starlight/pull/2728) [`e187383`](https://github.com/withastro/starlight/commit/e1873834d4a4328084a9ac056a089ee5b8f13103) Thanks [@delucis](https://github.com/delucis)! - Updates minimum Pagefind dependency to v1.3.0, sets new defaults for Pagefind’s ranking options, and adds support for manually configuring the ranking options
+
+  The new ranking option defaults have been evaluated against Starlight’s own docs to improve the quality of search results. See [“Customize Pagefind's result ranking”](https://pagefind.app/docs/ranking/) for more details about how they work.
+
+- [#157](https://github.com/withastro/starlight/pull/157) [`23bf960`](https://github.com/withastro/starlight/commit/23bf960aed36445600b6ccecb2138a5b461e2929) Thanks [@tony-sull](https://github.com/tony-sull)! - Adds a print stylesheet to improve the appearance of Starlight docs pages when printed
+
+- [#2728](https://github.com/withastro/starlight/pull/2728) [`e187383`](https://github.com/withastro/starlight/commit/e1873834d4a4328084a9ac056a089ee5b8f13103) Thanks [@delucis](https://github.com/delucis)! - Fixes Pagefind logging to respect the Astro log level. When using Astro’s `--verbose` or `--silent` CLI flags, these are now respected by Pagefind as well.
+
+### Patch Changes
+
+- [#2792](https://github.com/withastro/starlight/pull/2792) [`412effb`](https://github.com/withastro/starlight/commit/412effb5a63c6026ea4faa0d09bcbd4a3c9fad4d) Thanks [@dhruvkb](https://github.com/dhruvkb)! - Uses semantic `var(--sl-color-hairline)` for the page sidebar border instead of `var(--sl-color-gray-6)`. This is visually the same as previously but makes it easier to override the hairline color consistently across a site.
+
+- [#2736](https://github.com/withastro/starlight/pull/2736) [`29a885b`](https://github.com/withastro/starlight/commit/29a885be43f29150d6abd905f3ef7e1dccb99c98) Thanks [@delucis](https://github.com/delucis)! - Updates internal dependencies `@astrojs/sitemap` and `@astrojs/mdx` to the latest versions
+
+- [#2782](https://github.com/withastro/starlight/pull/2782) [`d9d415b`](https://github.com/withastro/starlight/commit/d9d415b4558c7995319299e9c9e1520c87c3078e) Thanks [@delucis](https://github.com/delucis)! - Fixes a documentation link in the JSDoc comment for the `StarlightExpressiveCodeOptions` type
+
+- [#2708](https://github.com/withastro/starlight/pull/2708) [`442c819`](https://github.com/withastro/starlight/commit/442c8194dbcbe58e155d4c1f8d897a04605666e5) Thanks [@delucis](https://github.com/delucis)! - Fixes colour contrast correction in code blocks
+
 ## 0.30.6
 
 ### Patch Changes

package/components/EditLink.astro

@@ -7,7 +7,7 @@ const { editUrl } = Astro.props;
 
 {
 	editUrl && (
-		<a href={editUrl} class="sl-flex">
+		<a href={editUrl} class="sl-flex print:hidden">
 			<Icon name="pencil" size="1.2em" />
 			{Astro.locals.t('page.editLink')}
 		</a>

package/components/Header.astro

@@ -19,10 +19,10 @@ const shouldRenderSearch =
 	<div class="title-wrapper sl-flex">
 		<SiteTitle {...Astro.props} />
 	</div>
-	<div class="sl-flex">
+	<div class="sl-flex print:hidden">
 		{shouldRenderSearch && <Search {...Astro.props} />}
 	</div>
-	<div class="sl-hidden md:sl-flex right-group">
+	<div class="sl-hidden md:sl-flex print:hidden right-group">
 		<div class="sl-flex social-icons">
 			<SocialIcons {...Astro.props} />
 		</div>

package/components/MobileMenuToggle.astro

@@ -3,7 +3,7 @@ import type { Props } from '../props';
 import Icon from '../user-components/Icon.astro';
 ---
 
-<starlight-menu-button>
+<starlight-menu-button class="print:hidden">
 	<button
 		aria-expanded="false"
 		aria-label={Astro.locals.t('menuButton.accessibleLabel')}

package/components/Page.astro

@@ -31,6 +31,8 @@ import '../style/asides.css';
 // Important that this is the last import so it can override built-in styles.
 import 'virtual:starlight/user-css';
 
+import printHref from '../style/print.css?url&no-inline';
+
 const pagefindEnabled =
 	Astro.props.entry.slug !== '404' &&
 	!Astro.props.entry.slug.endsWith('/404') &&
@@ -75,6 +77,7 @@ if (pagefindEnabled) mainDataAttributes['data-pagefind-body'] = '';
 			}
 		</style>
 		<ThemeProvider {...Astro.props} />
+		<link rel="stylesheet" href={printHref} media="print" />
 	</head>
 	<body>
 		<SkipLink {...Astro.props} />

package/components/PageFrame.astro

@@ -9,7 +9,7 @@ const { hasSidebar } = Astro.props;
 	<header class="header"><slot name="header" /></header>
 	{
 		hasSidebar && (
-			<nav class="sidebar" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
+			<nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
 				<MobileMenuToggle {...Astro.props} />
 				<div id="starlight__sidebar" class="sidebar-pane">
 					<div class="sidebar-content sl-flex">

package/components/Pagination.astro

@@ -7,7 +7,7 @@ const { prev, next } = pagination;
 const isRtl = dir === 'rtl';
 ---
 
-<div class="pagination-links" dir={dir}>
+<div class="pagination-links print:hidden" dir={dir}>
 	{
 		prev && (
 			<a href={prev.href} rel="prev">

package/components/Search.astro

@@ -76,6 +76,8 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 </script>
 
 <script>
+	import { pagefindUserConfig } from 'virtual:starlight/pagefind-config';
+
 	class SiteSearch extends HTMLElement {
 		constructor() {
 			super();
@@ -139,6 +141,7 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
 					// @ts-expect-error — Missing types for @pagefind/default-ui package.
 					const { PagefindUI } = await import('@pagefind/default-ui');
 					new PagefindUI({
+						...pagefindUserConfig,
 						element: '#starlight__search',
 						baseUrl: import.meta.env.BASE_URL,
 						bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',

package/components/SiteTitle.astro

@@ -10,7 +10,7 @@ const { siteTitle, siteTitleHref } = Astro.props;
 		config.logo && logos.dark && (
 			<>
 				<img
-					class:list={{ 'light:sl-hidden': !('src' in config.logo) }}
+					class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
 					alt={config.logo.alt}
 					src={logos.dark.src}
 					width={logos.dark.width}
@@ -19,7 +19,7 @@ const { siteTitle, siteTitleHref } = Astro.props;
 				{/* Show light alternate if a user configure both light and dark logos. */}
 				{!('src' in config.logo) && (
 					<img
-						class="dark:sl-hidden"
+						class="dark:sl-hidden print:block"
 						alt={config.logo.alt}
 						src={logos.light?.src}
 						width={logos.light?.width}

package/components/TwoColumnContent.astro

@@ -5,7 +5,7 @@ import type { Props } from '../props';
 <div class="lg:sl-flex">
 	{
 		Astro.props.toc && (
-			<aside class="right-sidebar-container">
+			<aside class="right-sidebar-container print:hidden">
 				<div class="right-sidebar">
 					<slot name="right-sidebar" />
 				</div>
@@ -32,7 +32,7 @@ import type { Props } from '../props';
 		.right-sidebar {
 			position: fixed;
 			top: 0;
-			border-inline-start: 1px solid var(--sl-color-gray-6);
+			border-inline-start: 1px solid var(--sl-color-hairline);
 			padding-top: var(--sl-nav-height);
 			width: 100%;
 			height: 100vh;

package/index.ts

@@ -8,7 +8,7 @@
 /// <reference path="./virtual.d.ts" />
 
 import mdx from '@astrojs/mdx';
-import type { AstroIntegration } from 'astro';
+import type { AstroIntegration, AstroIntegrationLogger } from 'astro';
 import { AstroError } from 'astro/errors';
 import { spawn } from 'node:child_process';
 import { dirname, relative } from 'node:path';
@@ -145,13 +145,14 @@ export default function StarlightIntegration(
 				injectPluginTranslationsTypes(pluginTranslations, injectTypes);
 			},
 
-			'astro:build:done': ({ dir }) => {
+			'astro:build:done': ({ dir, logger }) => {
 				if (!userConfig.pagefind) return;
+				const loglevelFlag = getPagefindLoggingFlags(logger.options.level);
 				const targetDir = fileURLToPath(dir);
 				const cwd = dirname(fileURLToPath(import.meta.url));
 				const relativeDir = relative(cwd, targetDir);
 				return new Promise<void>((resolve) => {
-					spawn('npx', ['-y', 'pagefind', '--site', relativeDir], {
+					spawn('npx', ['-y', 'pagefind', ...loglevelFlag, '--site', relativeDir], {
 						stdio: 'inherit',
 						shell: true,
 						cwd,
@@ -161,3 +162,19 @@ export default function StarlightIntegration(
 		},
 	};
 }
+
+/** Map the logging level of Astro’s logger to one of Pagefind’s logging level flags. */
+function getPagefindLoggingFlags(level: AstroIntegrationLogger['options']['level']) {
+	switch (level) {
+		case 'silent':
+		case 'error':
+			return ['--silent'];
+		case 'warn':
+			return ['--quiet'];
+		case 'debug':
+			return ['--verbose'];
+		case 'info':
+		default:
+			return [];
+	}
+}

package/integrations/expressive-code/index.ts

@@ -20,7 +20,7 @@ export type StarlightExpressiveCodeOptions = Omit<AstroExpressiveCodeOptions, 't
 	/**
 	 * Set the themes used to style code blocks.
 	 *
-	 * See the [Expressive Code `themes` documentation](https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md#themes)
+	 * See the [Expressive Code `themes` documentation](https://expressive-code.com/guides/themes/)
 	 * for details of the supported theme formats.
 	 *
 	 * Starlight uses the dark and light variants of Sarah Drasner’s

package/integrations/expressive-code/theming.ts

@@ -79,6 +79,7 @@ export function applyStarlightUiThemeColors(theme: ExpressiveCodeTheme) {
 
 	// Set theme `bg` color property for contrast calculations
 	theme.bg = isDark ? '#23262f' : '#f6f7f9';
+	theme.colors['editor.background'] = theme.bg;
 	// Set actual background color to the appropriate Starlight CSS variable
 	const editorBackgroundColor = isDark ? 'var(--sl-color-gray-6)' : 'var(--sl-color-gray-7)';
 

package/integrations/virtual-user-config.ts

@@ -100,6 +100,7 @@ export function vitePluginStarlightUserConfig(
 			} catch {}
 			export const collections = userCollections;`,
 		'virtual:starlight/plugin-translations': `export default ${JSON.stringify(pluginTranslations)}`,
+		'virtual:starlight/pagefind-config': `export const pagefindUserConfig = ${JSON.stringify(opts.pagefind || {})}`,
 		...virtualComponentModules,
 	} satisfies Record<string, string>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.30.6",
+  "version": "0.31.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -172,25 +172,25 @@
     "./style/markdown.css": "./style/markdown.css"
   },
   "peerDependencies": {
-    "astro": "^5.0.0"
+    "astro": "^5.1.5"
   },
   "devDependencies": {
-    "@astrojs/markdown-remark": "^6.0.0",
+    "@astrojs/markdown-remark": "^6.0.1",
     "@playwright/test": "^1.45.0",
     "@types/node": "^18.16.19",
     "@vitest/coverage-v8": "2.1.6",
-    "astro": "^5.0.2",
+    "astro": "^5.1.5",
     "linkedom": "^0.18.4",
     "vitest": "2.1.6"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.0.1",
-    "@astrojs/sitemap": "^3.1.6",
-    "@pagefind/default-ui": "^1.0.3",
+    "@astrojs/mdx": "^4.0.5",
+    "@astrojs/sitemap": "^3.2.1",
+    "@pagefind/default-ui": "^1.3.0",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
     "@types/mdast": "^4.0.4",
-    "astro-expressive-code": "^0.38.3",
+    "astro-expressive-code": "^0.40.0",
     "bcp-47": "^2.1.0",
     "hast-util-from-html": "^2.0.1",
     "hast-util-select": "^6.0.2",
@@ -201,7 +201,7 @@
     "mdast-util-directive": "^3.0.0",
     "mdast-util-to-markdown": "^2.1.0",
     "mdast-util-to-string": "^4.0.0",
-    "pagefind": "^1.0.3",
+    "pagefind": "^1.3.0",
     "rehype": "^13.0.1",
     "rehype-format": "^5.0.0",
     "remark-directive": "^3.0.0",

package/schemas/pagefind.ts

@@ -0,0 +1,44 @@
+import { z } from 'astro/zod';
+
+const pagefindSchema = z.object({
+	/** Configure how search result rankings are calculated by Pagefind. */
+	ranking: z
+		.object({
+			/**
+			 * Set Pagefind’s `pageLength` ranking option.
+			 *
+			 * The default value is `0.1` and values must be in the range `0` to `1`.
+			 *
+			 * @see https://pagefind.app/docs/ranking/#configuring-page-length
+			 */
+			pageLength: z.number().min(0).max(1).default(0.1),
+			/**
+			 * Set Pagefind’s `termFrequency` ranking option.
+			 *
+			 * The default value is `0.1` and values must be in the range `0` to `1`.
+			 *
+			 * @see https://pagefind.app/docs/ranking/#configuring-term-frequency
+			 */
+			termFrequency: z.number().min(0).max(1).default(0.1),
+			/**
+			 * Set Pagefind’s `termSaturation` ranking option.
+			 *
+			 * The default value is `2` and values must be in the range `0` to `2`.
+			 *
+			 * @see https://pagefind.app/docs/ranking/#configuring-term-saturation
+			 */
+			termSaturation: z.number().min(0).max(2).default(2),
+			/**
+			 * Set Pagefind’s `termSimilarity` ranking option.
+			 *
+			 * The default value is `9` and values must be greater than or equal to `0`.
+			 *
+			 * @see https://pagefind.app/docs/ranking/#configuring-term-similarity
+			 */
+			termSimilarity: z.number().min(0).default(9),
+		})
+		.default({}),
+});
+
+export const PagefindConfigSchema = () => pagefindSchema;
+export const PagefindConfigDefaults = () => pagefindSchema.parse({});

package/style/print.css

@@ -0,0 +1,180 @@
+@media print {
+	/**
+	This is increased in specificity so it works even when injected into pages before regular styles.
+	TODO: Just use `:root` once we move to @layer.
+	Same goes for the use of `!important` in this file.
+	*/
+	:root[data-theme]:is(:root) {
+		/* Colours — force light mode when printing */
+		--sl-color-white: hsl(224, 10%, 10%);
+		--sl-color-gray-1: hsl(224, 14%, 16%);
+		--sl-color-gray-2: hsl(224, 10%, 23%);
+		--sl-color-gray-3: hsl(224, 7%, 36%);
+		--sl-color-gray-4: hsl(224, 6%, 56%);
+		--sl-color-gray-5: hsl(224, 6%, 77%);
+		--sl-color-gray-6: hsl(224, 20%, 94%);
+		--sl-color-gray-7: hsl(224, 19%, 97%);
+		--sl-color-black: hsl(0, 0%, 100%);
+
+		--sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%);
+		--sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%);
+		--sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%);
+		--sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%);
+		--sl-color-green: hsl(var(--sl-hue-green), 90%, 46%);
+		--sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%);
+		--sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%);
+		--sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%);
+		--sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%);
+		--sl-color-purple-high: hsl(var(--sl-hue-purple), 90%, 30%);
+		--sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%);
+		--sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%);
+		--sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%);
+		--sl-color-red: hsl(var(--sl-hue-red), 90%, 60%);
+		--sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%);
+
+		--sl-color-accent-high: hsl(234, 80%, 30%);
+		--sl-color-accent: hsl(234, 90%, 60%);
+		--sl-color-accent-low: hsl(234, 88%, 90%);
+
+		--sl-color-text-accent: var(--sl-color-accent);
+		--sl-color-text-invert: var(--sl-color-black);
+		--sl-color-bg-nav: var(--sl-color-gray-7);
+		--sl-color-bg-sidebar: var(--sl-color-bg);
+		--sl-color-bg-inline-code: var(--sl-color-gray-6);
+		--sl-color-bg-accent: var(--sl-color-accent);
+		--sl-color-hairline-light: var(--sl-color-gray-6);
+		--sl-color-hairline-shade: var(--sl-color-gray-6);
+
+		--sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66);
+
+		/* Disable shadows when printing. */
+		--sl-shadow-sm: none;
+		--sl-shadow-md: none;
+		--sl-shadow-lg: none;
+	}
+
+	/* Utility classes for controlling element visibility when printing. */
+	.print\:hidden {
+		display: none !important;
+	}
+	.print\:flex {
+		display: flex !important;
+	}
+	.print\:block {
+		display: block !important;
+	}
+
+	/* Page layout tweaks. */
+	main {
+		padding-bottom: 0 !important;
+	}
+	main > .content-panel {
+		padding-block-start: 0 !important;
+	}
+	.content-panel + .content-panel {
+		border: 0 !important;
+	}
+	/* components/PageFrame.astro */
+	.page > header {
+		position: relative !important;
+	}
+	.page > .main-frame {
+		padding-top: 0;
+		padding-inline-start: 0;
+	}
+	/* components/TwoColumnContent.astro */
+	.main-pane {
+		--sl-sidebar-width: 0px !important;
+		--sl-content-width: 100% !important;
+	}
+	/* components/Banner.astro */
+	.sl-banner {
+		--sl-color-banner-text: var(--sl-color-white) !important;
+		background-color: transparent !important;
+	}
+
+	/* components/MarkdownContent.astro */
+	.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) {
+		break-after: avoid;
+	}
+	.sl-markdown-content :is(p, li) {
+		orphans: 2;
+		widows: 2;
+	}
+	.sl-markdown-content pre {
+		overflow-x: hidden !important;
+		white-space: pre-wrap !important;
+	}
+	.sl-markdown-content .expressive-code,
+	.sl-markdown-content figure,
+	.sl-markdown-content pre {
+		break-inside: avoid;
+	}
+	.expressive-code .frame.is-terminal .header::before {
+		/* Ensure terminal frame dots are visible even if backgrounds are disabled. */
+		box-shadow: inset 99rem 99rem var(--sl-color-gray-5);
+	}
+	.expressive-code .frame.has-title:not(.is-terminal) .header {
+		/* Divide title bar and code without relying on background colors. */
+		background: transparent !important;
+		border-bottom: 1px solid var(--sl-color-gray-6) !important;
+	}
+	.expressive-code .frame.has-title:not(.is-terminal) .title {
+		/* Hide title tab background color. */
+		background: transparent !important;
+	}
+	.expressive-code .frame.has-title:not(.is-terminal) .title::after {
+		/* Remove title tab highlight. */
+		border-top: 0 !important;
+	}
+	.expressive-code .copy {
+		/* Ensure Expressive Code copy button is hidden when printing from touch devices. */
+		display: none !important;
+	}
+	/* Inline code */
+	.sl-markdown-content code:not(:where(.not-content *)) {
+		background-color: transparent !important;
+		padding: 0 !important;
+		margin-block: unset !important;
+		font-size: 0.9375em !important;
+	}
+
+	/* user-components/Badge.astro */
+	.sl-badge {
+		background: transparent !important;
+		color: var(--sl-color-white) !important;
+	}
+
+	/* user-components/FileTree.astro */
+	starlight-file-tree {
+		break-inside: avoid;
+	}
+	starlight-file-tree .highlight {
+		outline: 3px solid var(--sl-color-accent-low);
+		color: var(--sl-color-text) !important;
+		background-color: transparent !important;
+	}
+
+	/* user-components/Aside.astro */
+	.starlight-aside {
+		break-inside: avoid;
+	}
+
+	/* user-components/LinkButton.astro */
+	.sl-link-button.primary {
+		background: transparent !important;
+		border-color: var(--sl-color-white) !important;
+		color: var(--sl-color-white) !important;
+	}
+
+	/* user-components/Tabs.astro */
+	starlight-tabs {
+		break-inside: avoid;
+	}
+
+	/* user-components/Steps.astro */
+	.sl-steps > li::after {
+		/* Ensure steps guidelines are visible when background colors are disabled. */
+		box-shadow: inset 99rem 99rem var(--sl-color-hairline-light);
+	}
+}

package/user-components/FileTree.astro

@@ -47,7 +47,7 @@ const html = processFileTree(fileTreeHtml, Astro.locals.t('fileTree.directory'))
 	starlight-file-tree :global(.directory > details > summary:hover .tree-icon) {
 		cursor: pointer;
 		color: var(--sl-color-text-accent);
-		fill: var(--sl-color-text-accent);
+		fill: currentColor;
 	}
 
 	starlight-file-tree :global(.directory > details > summary:hover ~ ul) {
@@ -55,7 +55,7 @@ const html = processFileTree(fileTreeHtml, Astro.locals.t('fileTree.directory'))
 	}
 
 	starlight-file-tree :global(.directory > details > summary:hover .highlight .tree-icon) {
-		fill: var(--sl-color-text-invert);
+		fill: currentColor;
 	}
 
 	starlight-file-tree :global(ul) {
@@ -129,6 +129,6 @@ const html = processFileTree(fileTreeHtml, Astro.locals.t('fileTree.directory'))
 	}
 
 	starlight-file-tree :global(.highlight svg.tree-icon) {
-		fill: var(--sl-color-text-invert);
+		fill: currentColor;
 	}
 </style>

package/utils/user-config.ts

@@ -5,10 +5,11 @@ import { ExpressiveCodeSchema } from '../schemas/expressiveCode';
 import { FaviconSchema } from '../schemas/favicon';
 import { HeadConfigSchema } from '../schemas/head';
 import { LogoConfigSchema } from '../schemas/logo';
+import { PagefindConfigDefaults, PagefindConfigSchema } from '../schemas/pagefind';
 import { SidebarItemSchema } from '../schemas/sidebar';
+import { TitleConfigSchema, TitleTransformConfigSchema } from '../schemas/site-title';
 import { SocialLinksSchema } from '../schemas/social';
 import { TableOfContentsSchema } from '../schemas/tableOfContents';
-import { TitleConfigSchema, TitleTransformConfigSchema } from '../schemas/site-title';
 import { BuiltInDefaultLocale } from './i18n';
 
 const LocaleSchema = z.object({
@@ -191,11 +192,15 @@ const UserConfigSchema = z.object({
 	expressiveCode: ExpressiveCodeSchema(),
 
 	/**
-	 * Define whether Starlight’s default site search provider Pagefind is enabled.
-	 * Set to `false` to disable indexing your site with Pagefind.
-	 * This will also hide the default search UI if in use.
+	 * Configure Starlight’s default site search provider Pagefind. Set to `false` to disable indexing
+	 * your site with Pagefind, which will also hide the default search UI if in use.
 	 */
-	pagefind: z.boolean().optional(),
+	pagefind: z
+		.boolean()
+		// Transform `true` to our default config object.
+		.transform((val) => val && PagefindConfigDefaults())
+		.or(PagefindConfigSchema())
+		.optional(),
 
 	/** Specify paths to components that should override Starlight’s default components */
 	components: ComponentConfigSchema(),
@@ -227,10 +232,13 @@ export const StarlightConfigSchema = UserConfigSchema.strict()
 	.transform((config) => ({
 		...config,
 		// Pagefind only defaults to true if prerender is also true.
-		pagefind: config.pagefind ?? config.prerender,
+		pagefind:
+			typeof config.pagefind === 'undefined'
+				? config.prerender && PagefindConfigDefaults()
+				: config.pagefind,
 	}))
 	.refine((config) => !(!config.prerender && config.pagefind), {
-		message: 'Pagefind search is not support with prerendering disabled.',
+		message: 'Pagefind search is not supported with prerendering disabled.',
 	})
 	.transform(({ title, locales, defaultLocale, ...config }, ctx) => {
 		const configuredLocales = Object.keys(locales ?? {});

package/virtual-internal.d.ts

@@ -16,6 +16,12 @@ declare module 'virtual:starlight/collection-config' {
 	export const collections: import('astro:content').ContentConfig['collections'] | undefined;
 }
 
+declare module 'virtual:starlight/pagefind-config' {
+	export const pagefindUserConfig: Partial<
+		Extract<import('./types').StarlightConfig['pagefind'], object>
+	>;
+}
+
 declare module 'virtual:starlight/components/Banner' {
 	const Banner: typeof import('./components/Banner.astro').default;
 	export default Banner;