[v3] reduce global style conflicts with external components

[87xie]

Description

Hi teams,

I've referenced the following issues: #2613, #2764, and #3099. This change aims to reduce conflicts with outer-land styles and components.

I introduce cascade layers that unlayered styles can take precedence over Nextra's predefined styles. This approach seems to resolve issues like #747 (comment). At the same time, it prevents Nextra's unlayered styles from inadvertently overriding user-defined CSS layers.

The current priority order is as follows:

• nextra-utilities (highest)
• nextra-components
• nextra-base (lowest)

To avoid conflicts with the focus-visible style in external components, I added a nextra-focus-ring class to replace the original element selector. Users can choose in the theme config's focusRing option whether to apply it to all elements or selectively opt out using the not-nextra-focus-ring class name.

As shown in the image below, when the focusRing option is false, the focus-visible style comes from the user agent settings.

I believe this modification is more aligned with the design system docs. As seen with kuma-ui, some components are currently affected by Nextra's focus ring, which might confuse some users.

Feel free to close this if the approach is not suitable.

[changeset-bot]

🦋 Changeset detected

Latest commit: 46a4aa1

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

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextra-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 30, 2024 1:46pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
nextra	⬜️ Ignored (Inspect)	Visit Preview		Aug 30, 2024 1:46pm

[vercel]

@87xie is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[dimaMachina]

@87xie thank you for your amazing PRs, I will review/merge them when will have some free time 🚀

[87xie]

I will make some modifications for fewer changes and better consistency, so I have turned it back to a draft. 🙏

[dimaMachina]

@87xie I am OOO currently and will go to the graphql conf next week, will review once will have some free time

[87xie]

Thanks for letting me know! No rush. I’ll go ahead and close this PR for now and split the content into separate PRs. This should make it easier to review and help avoid conflicts.