style: subtle color and size adjustment for <details> in the readme

[ayo-run]

🔗 Linked issue

resolves #2391

🧭 Context

Hello, sorry if I went ahead and fixed this one without discussion first of the issue 😆. It's a small one. This PR will implement a subtle difference in <details> content.

📚 Description

The PR applies a change in how <details> on the readme of a package is rendered. The <summary> content remains unchanged, while the content hidden/shown when toggling are smaller and subtler. More description on the issue #2391

See screenshots

The following are screenshots for the readme of @ayo-run/mnswpr

npmjs.com	npmx.dev (before)	npmx.dev (after)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev (canary)	Ready	Preview, Comment	Apr 5, 2026 3:21pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 5, 2026 3:21pm
npmx-lunaria	Ignored		Apr 5, 2026 3:21pm

[github-actions]

Hello! Thank you for opening your first PR to npmx, @ayo-run! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request introduces styling enhancements to the app/components/Readme.vue file for improved visual differentiation of <details> elements in rendered README content. The changes add CSS rules that apply a default font size and subtle text colour to <details> elements, alongside customised styling for nested summary elements. Minor whitespace formatting adjustments are also included. No functional logic modifications to scripts or templates were made.

Possibly related PRs

• feat: polish colors and indents #1042: Modifies the same CSS scope in app/components/Readme.vue (the .readme :deep(...) rules) for README styling adjustments.
• fix(ui): minor padding adjustment for readme heading #881: Also modifies CSS styling in app/components/Readme.vue for heading and spacing adjustments.

Suggested labels

front

Suggested reviewers

• danielroe
• 43081j

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description is directly related to the changeset, explaining the styling modifications to Details elements in the README component.
Linked Issues check	✅ Passed	The PR successfully implements the styling requirements from issue #2391: subtle colour and size adjustments for content with customised styling.
Out of Scope Changes check	✅ Passed	All changes are within scope, limited to styling modifications in Readme.vue for Details elements as specified in the linked issue.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

🧹 Nitpick comments (1)

app/components/Readme.vue (1)

478-490: LGTM! Correctly implements the subtle styling for details elements.

The styling achieves the PR objective:

• Details content is rendered smaller (0.925rem) and with a more subtle colour (--fg-subtle)
• Summary remains at standard size (1rem) and colour (--fg-muted, matching the base readme text on line 81)

The comment clearly explains the font-size choice. The nested CSS syntax is valid and should compile correctly with Vue 3 and modern build tools.

Optional: Consider more explicit selector syntax

For improved clarity, you could use a separate rule instead of nested syntax:

 /* Details element */
 .readme :deep(details) {
   /**
    * same size as [data-level='5']
    */
   font-size: 0.925rem;
   color: var(--fg-subtle);
+}

-  summary {
-    font-size: 1rem;
-    color: var(--fg-muted);
-  }
+.readme :deep(details summary) {
+  font-size: 1rem;
+  color: var(--fg-muted);
 }

The current nested syntax works fine; this is purely a stylistic preference.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 52362977-0f01-40e8-a37d-78734b877aac

📥 Commits

Reviewing files that changed from the base of the PR and between 5324b96 and 50379bf.

📒 Files selected for processing (1)

• app/components/Readme.vue

[github-actions]

Thanks for your first contribution, @ayo-run! ✨

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.