fix: Ensure links maintain green color within bold text

[shashankxrm]

Description

This PR fixes an issue where links within bold text (using markdown **text** syntax) were inheriting the white color from the strong tags instead of maintaining their green color. The fix adds specific CSS selectors to ensure links maintain their green color regardless of whether they are inside or contain bold text.

Validation

The fix ensures that:

1. Links within bold text maintain their green color
2. Links containing bold text maintain their green color
3. The styling is consistent in both light and dark modes
4. Hover states work correctly for all link variations

Before:

After:

Related Issues

This PR addresses the issue #7742 (Bold Links are not Green)

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. (NOT REQUIRED)

[vercel]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	May 14, 2025 11:01am

[Copilot]

Pull Request Overview

This PR fixes an issue where links within or containing bold text were inheriting an incorrect color by explicitly overriding styles via additional CSS selectors and Tailwind utility overrides.

• Expanded CSS selectors to target links within bold text (using selectors such as "a strong", "strong a", and "p a").
• Enforced green color styling in both light and dark modes with ! overrides.

Comments suppressed due to low confidence (1)

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

• [nitpick] The selector 'p a' is quite broad and might unintentionally override other paragraph link styles. Verify that this rule is scoped as intended or consider narrowing its specificity.

  p a {

[avivkeller]

Wouldn't it make more sense to just not change the color on strongs (or just strong links) rather than making the green more important?

Earlier in the file the "strong" styles are defined. Should they really be changing the colors in the first place?

[avivkeller]

Formally blocking based on my, and @bjohansebas's, comments. We don't think !important is the way to go.

[Copilot]

Pull Request Overview

This PR fixes the unwanted inheritance of white text color from bold (strong) elements on links by adjusting the CSS.

• Updated heading styles to include text color properties.
• Removed text color rules from the strong element to let links apply their green color.

Comments suppressed due to low confidence (1)

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

• Removing the text color rules from the strong selector allows links inside to retain their green color, but please verify that strong text outside of links still adheres to the intended design system. Consider providing a fallback color or additional context styling if necessary.

    @apply font-semibold;

[AugustinMauroy]

We have some stories (storybook) for text could you try to cover these cases

[shashankxrm]

We have some stories (storybook) for text could you try to cover these cases

Sure, I'll look into it.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 74.87%. Comparing base (aef4d8f) to head (0c43fea).

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7744      +/-   ##
==========================================
+ Coverage   74.85%   74.87%   +0.01%     
==========================================
  Files          98       98              
  Lines        7895     7895              
  Branches      200      200              
==========================================
+ Hits         5910     5911       +1     
+ Misses       1984     1983       -1     
  Partials        1        1              

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

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Lighthouse Results

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

[canerakdas]

LGTM