Fix some Pagefind UI issues

[HiDeoo]

Description

• Closes CSS variable --sl-color-accent-light in Search component is not defined #2840

This PR fixes a few UI issues related to the Pagefind UI.

Note that I'm not super happy with the changesets, I think I didn't manage to get the right balance between what is changed and the level of detail in the changeset, maybe even 1 changeset could be enough? Happy to iterate on this based on feedback.

Unknown CSS variable

This issue was the first one reported in #2840. This PR removes the unknown CSS variable (--pagefind-ui-primary) and now uses the desired one (--sl-color-text) which was already the color used when the browser was falling back to the default color when the variable was not defined.

The --pagefind-ui-primary variable is used in 2 places in Pagefind, the first one being the "Load more results" button:

	Dark Theme	Light Theme
Before
After

The second place is the checkbox background color when using filters where some extra CSS was added to fix the tick color:

	Dark Theme	Light Theme
Before
After

Ultimately, some changes could be made upstream to avoid this issue and rely on accent colors for the checkbox and should be beneficial for all Pagefind users as it's also an issue with a default Pagefind setup.

Metadata

When using the Pagefind metadata feature, the UI was broken. I tried to use the same UI as inline code at the moment for the tags.

	Dark Theme	Light Theme
Before
After

This PR improves the UI but as usual when it comes to UI, that's not my strong suit so happy to iterate on this based on feedback/suggestions.

[changeset-bot]

🦋 Changeset detected

Latest commit: cf5e110

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	cf5e110
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/67a38742c72f7f0008b8e352
😎 Deploy Preview	https://deploy-preview-2848--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (🟢 up 1 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[delucis]

I think this looks great @HiDeoo! I don’t have major feedback on the design — I think it looks pretty good (definitely better than before 😅) — and given this is a less used Pagefind feature, I’m happy to have it working nicely like this.

Re: the changesets, yeah I guess these could be condensed into a single one? Maybe even as simple as this?

Fixes styling of filter and metadata elements in Pagefind search UI

The “load more” button hasn’t actually changed, so probably doesn’t need mentioning IMO.

But no notes from me on the code changes!

[kevinzunigacuellar]

Looks great! LGTM ✅ 🚀