fix(gantt): restore readable outside-text for done tasks in dark mode

[knsv-bot]

Summary

Regression fix for a side-effect introduced by PR #7432 (fix for #5979).

• When a Gantt done-task label is wider than its bar, the renderer positions the text outside the bar using classes taskTextOutsideLeft/taskTextOutsideRight combined with doneText{N}.
• The .doneText{N} rule uses taskTextDarkColor !important. PR fix(gantt): readable done-task text in dark theme #7432 changed taskTextDarkColor in the dark theme to a dark color (inverted from lightgrey) for contrast inside the bar.
• That !important also overrides the lighter taskTextOutsideColor set by .taskTextOutside{N}, making outside-label text black/dark on the dark diagram background — unreadable.

Fix: Add combined-class selectors (.doneText{N}.taskTextOutsideLeft/Right) after the .doneText{N} block, using taskTextOutsideColor !important. Same applied to .doneCritText{N}. The combined selectors appear later in the cascade and win by both specificity and source order.

Changes

• packages/mermaid/src/diagrams/gantt/styles.js — two new CSS override blocks for outside done/done-crit task text
• cypress/integration/rendering/gantt.spec.js — three e2e snapshot tests covering inside-bar and outside-bar done task text in dark theme
• .changeset/fix-gantt-done-outside-text-dark.md — patch changeset

Verification

• Unit tests pass (pnpm vitest run packages/mermaid/src/themes/)
• Lint passes (pre-commit hook)
• E2E visual snapshots: new tests added; Argos will verify on CI

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: 48ce939

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

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

[codecov]

Codecov Report

❌ Patch coverage is 0% with 23 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.53%. Comparing base (547e6d5) to head (48ce939).
⚠️ Report is 449 commits behind head on master.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/gantt/styles.js	0.00%	23 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##           master   #7456      +/-   ##
=========================================
- Coverage    3.59%   3.53%   -0.06%     
=========================================
  Files         475     494      +19     
  Lines       47191   49068    +1877     
  Branches      735     770      +35     
=========================================
+ Hits         1696    1735      +39     
- Misses      45495   47333    +1838     

Flag	Coverage Δ
unit	3.53% <0.00%> (-0.06%)	⬇️

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

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/gantt/styles.js	0.00% <0.00%> (ø)

... and 4 files 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)	👍 Changes approved	403 changed, 2 added	Mar 6, 2026, 9:29 AM

[ashishjain0512]

[sisyphus-bot]

Review — fix(gantt): restore readable outside-text for done tasks in dark mode

Thanks for catching and fixing this regression quickly! The analysis in the PR description is clear and the CSS cascade reasoning is spot-on.

---

What's working well

🎉 [praise] Excellent root-cause analysis in the PR body — tracing the specificity conflict between .doneText{N} and .taskTextOutside{N} through the !important cascade makes the fix easy to verify. This is exactly how regression fix PRs should be documented.

🎉 [praise] Great test coverage — the three new e2e tests cover both inside-bar and outside-bar done text in dark mode, plus done-crit outside text. The use of a 1-day bar with a long label is a smart way to force the outside-text code path.

---

Things to address

🟢 [nit] The e2e test title references #7433 ("regression #7433" at cypress/integration/rendering/gantt.spec.js), but #7433 is the type-fest dependency PR. Based on the PR body, the regression was introduced by #7432 (the fix for #5979). Minor, but worth fixing so future archaeology leads to the right commit — suggest changing the test name to reference #7432.

---

Security

No XSS or injection issues identified. The new ${options.taskTextOutsideColor} interpolations follow the exact same pattern already used throughout styles.js. Theme variables are validated against a strict allowlist regex in sanitizeDirective.ts, compiled through stylis, and the final SVG is sanitized by DOMPurify. No new attack surface introduced.

---

Summary

Clean, focused regression fix. The CSS approach (combined-class selectors winning by both specificity and source order) is correct and maintainable. The changeset is appropriate (patch bump). Just the base branch question to resolve — let's get this across the finish line!