fix: improve color contrast in AlertBox info variant

[Ju-MINJAE]

Fixes #8290

Description

Fixed CSS specificity conflict between AlertBox and markdown content styles.

The issue was not with the AlertBox background color, but with paragraph (<p>) tags inside AlertBox inheriting black text color from markdown styles instead of maintaining white text. Added !important to override markdown paragraph styles and ensure text remains white.

Changes

• Added * { color: white !important; } to AlertBox styles
• Kept background at bg-info-600 as per design system
• Resolved CSS conflict between AlertBox component and markdown content

Validation

How to test:

1. Run pnpm dev
2. Navigate to any blog page with AlertBox in markdown content (e.g., /blog/migrations)
3. Verify the AlertBox text is white, not black

Before:

After:

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 GitHub.

Project	Deployment	Preview	Updated (UTC)
nodejs-org	Ready	Preview	Nov 1, 2025 2:05am

[Ju-MINJAE]

Please let me know if you'd prefer different shade values for better contrast or design consistency.

[AugustinMauroy]

Yup thanks for being volonture. But on our design syteme in light theme the bg should stay as it but the text should be withe. If you take a look on may branch in storybook the alertBox is correct.

Is a css conflict with style from AlertBox and markdown content style. because the p tag inside the alertBox take the style of a basic paragraph it's why it's black

[Ju-MINJAE]

@AugustinMauroy like this?

[AugustinMauroy]

@AugustinMauroy like this?

YEAH !

[AugustinMauroy]

LGMT !

[avivkeller]

What if the child is a span? div?

Can we use a more broad selector?

[avivkeller]

I'd prefer a broader selector, ie a wildcard

[Ju-MINJAE]

@avivkeller Got it!

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟠 88	🟢 100	🟢 100	🔗
/en/about	🟢 100	🟢 93	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 99	🟢 93	🟢 100	🟢 100	🔗
/en/download	🟢 97	🟢 96	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 100	🟢 100	🟢 100	🟢 100	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 100	🔗

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.61%. Comparing base (5d2362f) to head (bf49718).
⚠️ Report is 7 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8297   +/-   ##
=======================================
  Coverage   76.61%   76.61%           
=======================================
  Files         117      117           
  Lines        9746     9751    +5     
  Branches      328      328           
=======================================
+ Hits         7467     7471    +4     
- Misses       2277     2278    +1     
  Partials        2        2           

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