fix(AlertBox): override code styles in a markdown context

[avivkeller]

Description

When the inherited text is white, the code element does not have a readable contrast, as shown below:

Validation

Everything on the website should look identical, but this should make a readable contrast on api-docs-tooling

Related Issues

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 24, 2025 5:08pm

[Copilot]

Pull Request Overview

This PR removes the reliance on inherited text color for inline code elements to prevent unreadable white text in light contexts.

• Eliminates the text-inherit utility on code within markdown styles to allow explicit coloring.
• Ensures code blocks can receive their own color rules rather than inheriting from parent.

Comments suppressed due to low confidence (1)

packages/ui-components/styles/markdown.css:92

• Removing the inherited text color means code elements may not have sufficient contrast by default; consider adding an explicit color utility (e.g., text-neutral-900 dark:text-neutral-100) to ensure readability across themes.

        dark:max-xs:decoration-neutral-200;

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.46%. Comparing base (65f87ed) to head (1cf2353).
Report is 3 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7890      +/-   ##
==========================================
- Coverage   75.47%   75.46%   -0.02%     
==========================================
  Files         101      101              
  Lines        8311     8311              
  Branches      218      218              
==========================================
- Hits         6273     6272       -1     
- Misses       2036     2037       +1     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 96	🟢 100	🟠 82	🔗
/en/about/previous-releases	🟢 99	🟢 96	🟢 100	🟠 83	🔗
/en/download	🟢 97	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[ovflowd]

LGTM!

[ovflowd]

@avivkeller https://www.chromatic.com/review?appId=64c7d71358830e9105808652&number=7890&type=linked&activeElementId=comparison-test-key-685ad65269ceefc416a0df49-dark%20desktop&view=changes these look weird no?

[avivkeller]

Would you prefer?:

---

So basically ignore the markdown.css styles in an AlertBox when they conflict?

[ovflowd]

Would you prefer?:

So basically ignore the markdown.css styles in an AlertBox when they conflict?

I think that'd make more sense to respect the style of the component.

[avivkeller]

In the Figma, there isn't a font change in <code/>, but for this, I used ibm-plex-mono, which is used in the other code blocks.