fix(treemap): use theme-aware color for title text

[apoorvdarshan]

Summary

• Fixes treemap title being hardcoded to black, making it unreadable on dark backgrounds/themes
• Replaces the hardcoded titleColor: 'black' with themeVariables.titleColor so the title adapts to the active theme (same pattern used by the radar diagram)
• Custom style overrides via treemap config still work as before

Fixes #7218

Test plan

• TypeScript compiles cleanly (tsc --noEmit)
• Existing treemap tests pass (vitest run)
• Full build succeeds (pnpm build)
• Verify title is visible on dark theme
• Verify title remains visible on default/light theme
• Verify custom titleColor override still works

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	a2f9b39
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6994ea3b79677500083e9aed
😎 Deploy Preview	https://deploy-preview-7404--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

⚠️ No Changeset found

Latest commit: a2f9b39

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@7404

mermaid

npm i https://pkg.pr.new/mermaid-js/mermaid@7404

@mermaid-js/layout-elk

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@7404

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-tidy-tree@7404

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@7404

@mermaid-js/parser

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@7404

@mermaid-js/tiny

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/tiny@7404

commit: a2f9b39

[codecov]

Codecov Report

❌ Patch coverage is 0% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.58%. Comparing base (4d5ede8) to head (a2f9b39).
⚠️ Report is 57 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/treemap/styles.ts	0.00%	10 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7404      +/-   ##
==========================================
- Coverage     3.58%   3.58%   -0.01%     
==========================================
  Files          475     476       +1     
  Lines        47589   47605      +16     
  Branches       741     741              
==========================================
  Hits          1706    1706              
- Misses       45883   45899      +16     

Flag	Coverage Δ
unit	3.58% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/treemap/styles.ts	2.56% <0.00%> (-0.38%)	⬇️

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Feb 17, 2026, 10:32 PM

[makandcheezy]

Just noting that #7403 was opened 2 hours before this PR and fixes labelColor and valueColor for dark themes as well, not just titleColor. Might want to check that yours doesn't leave labels and values still broken on dark backgrounds. Good luck though!!!

[apoorvdarshan]

This PR now fixes all three text colors (titleColor, labelColor, valueColor). The key difference from #7403 is that this approach uses the themeVariables object already passed into getStyles by Mermaid's style pipeline (src/styles.ts line 21), rather than re-importing getThemeVariables and getConfigAPI to manually re-fetch config inside the function. This keeps it simpler (no extra imports, fewer intermediate variables) and consistent with how the style system is designed to work. User overrides via the treemap config still take priority through cleanAndMerge.

[knsv]

[sisyphus-bot] Thanks for jumping on this! After reviewing all three PRs for this issue, we're going with #7403 as it follows the established getThemeVariables() import pattern used by other diagrams (like radar). Your approach works but the parameter destructuring style is a bit non-standard for this codebase.

Appreciate the contribution — and feel free to pick up another issue from the backlog!

[apoorvdarshan]

closing this PR in favor of #7403