Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix some Pagefind UI issues #2848

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

HiDeoo
Copy link
Member

@HiDeoo HiDeoo commented Jan 31, 2025

Description

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 SCR-20250131-jxqm SCR-20250131-jxti
After SCR-20250131-nlol SCR-20250131-nlpp

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 SCR-20250131-nqvc SCR-20250131-nqwc
After SCR-20250131-nrhn SCR-20250131-nrip

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 SCR-20250131-ohaq SCR-20250131-ohbk
After SCR-20250131-oogb SCR-20250131-oohr

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.

Copy link

changeset-bot bot commented Jan 31, 2025

🦋 Changeset detected

Latest commit: b610e0f

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

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label Jan 31, 2025
Copy link

netlify bot commented Jan 31, 2025

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit b610e0f
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/679cf565e3d6f5000818188d
😎 Deploy Preview https://deploy-preview-2848--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100 (no change 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟 core Changes to Starlight’s main package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSS variable --sl-color-accent-light in Search component is not defined
1 participant