Skip to content

react: use link colors for inline type annotations - #1245

Open
adityareddy-dev wants to merge 2 commits into
nodejs:mainfrom
adityareddy-dev:fix/inline-type-link-colors
Open

adityareddy-dev wants to merge 2 commits into
nodejs:mainfrom
adityareddy-dev:fix/inline-type-link-colors

Conversation

@adityareddy-dev

Copy link
Copy Markdown

Description

I made linked type annotations use the link color in both themes, so WeakSet and Promise have the same style.

Validation

The browser check compares the link and span colors in light and dark themes.

Light theme:

Linked types in the light theme

Dark theme:

Linked types in the dark theme

Related Issues

Fixes #1054

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run node --run test and all tests passed.
  • I have check code formatting with node --run format:check & node --run lint.
  • I've covered new added functionality with unit tests if necessary.

Signed-off-by: Aditya Reddy <82123567+adityareddy-dev@users.noreply.github.com>
@adityareddy-dev
adityareddy-dev requested a review from a team as a code owner November 5, 2026 08:31
@vercel

vercel Bot commented Nov 5, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
api-docs-tooling Ready Ready Preview Nov 5, 2026 5:55pm UTC

Request Review

@adityareddy-dev

Copy link
Copy Markdown
Author

Could someone approve the workflow runs? PR Quality also can't start because the repository's Actions settings don't allow the shared workflow from webpack/.github.

@codecov

codecov Bot commented Nov 5, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.14%. Comparing base (9d02e94) to head (a85665d).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1245   +/-   ##
=======================================
  Coverage   94.14%   94.14%           
=======================================
  Files         291      291           
  Lines       28908    28908           
  Branches     2936     2936           
=======================================
  Hits        27214    27214           
  Misses       1672     1672           
  Partials       22       22           

☔ View full report in Codecov by Harness.
📢 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

github-actions Bot commented Nov 5, 2026

Copy link
Copy Markdown
Contributor

api-links Generator

Performance estimate (single CI run)

  • Generation time: 8.8% slower (910.00 ms → 990.00 ms)
  • Peak memory: 0.7% lower (281.43 MB → 279.52 MB)

json Generator

Performance estimate (single CI run)

  • Generation time: 15.6% faster (6.94 s → 5.86 s)
  • Peak memory: 0.2% higher (971.12 MB → 972.71 MB)

legacy-html Generator

Performance estimate (single CI run)

  • Generation time: 8.8% faster (16.32 s → 14.88 s)
  • Peak memory: 0.1% lower (1.44 GB → 1.44 GB)

legacy-json Generator

Performance estimate (single CI run)

  • Generation time: 23.1% slower (6.76 s → 8.32 s)
  • Peak memory: 1.2% higher (958.73 MB → 970.45 MB)

llms-txt Generator

Performance estimate (single CI run)

  • Generation time: 53.1% faster (9.60 s → 4.50 s)
  • Peak memory: 5.5% higher (891.98 MB → 941.36 MB)

orama-db Generator

Performance estimate (single CI run)

  • Generation time: 24.3% faster (6.37 s → 4.82 s)
  • Peak memory: 6.7% higher (1020.07 MB → 1.06 GB)

web Generator

Output size: 2 files changed · net +41.00 B

File size details
File Main PR Change
assets/style-DOjyqch-.css — 138.37 KB +138.37 KB
assets/style-oesv8pX0.css 138.33 KB — -138.33 KB (-100.0%)

Performance estimate (single CI run)

  • Generation time: 17.6% slower (15.20 s → 17.88 s)
  • Peak memory: 2.9% lower (1.53 GB → 1.48 GB)

@kgeminicdev kgeminicdev left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked why the !important is needed. In light mode the token color is Shiki's inline style="color:…", and in dark mode rehype-shiki forces it with [data-theme='dark'] span[style*='--shiki-dark'] { color: var(--shiki-dark) !important }. So nothing short of !important gets the link color through. main code.type .type-link span (0,2,3) outranks rehype-shiki's (0,2,1), so dark mode works too, and since the color comes from ui-components' a rule, the hover color now applies as well.

Nit: since this replaces a comment that explained the choice, it'd be worth saying why the !important is there, e.g. /* Beat Shiki's inline light color and rehype-shiki's !important dark one */.

Signed-off-by: Aditya Reddy <82123567+adityareddy-dev@users.noreply.github.com>
@adityareddy-dev

Copy link
Copy Markdown
Author

Fixed.

This branch was successfully deployed

1 active deployment
Preview – api-docs-tooling — 7a89f286 Deployed Nov 5, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

inline code "type" didn't have same style everywhere

3 participants