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

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

When a Gantt done-task label is too wide to fit inside the bar, the renderer
places the text outside (next to the bar) with class `taskTextOutsideLeft` or
`taskTextOutsideRight` plus `doneText{N}`. The `.doneText{N}` rule uses
`taskTextDarkColor !important`, which PR #7432 changed to a dark color
(inverted from lightgrey) for contrast inside the bar. That `!important` also
overrides the lighter `taskTextOutsideColor` that `.taskTextOutside{N}` sets,
making outside-label text black/dark on the dark diagram background.

Fix: add combined-class selectors (`.doneText{N}.taskTextOutsideLeft/Right`)
after the `.doneText{N}` block, using `taskTextOutsideColor !important`. The
combined selectors have higher specificity and appear later in the cascade, so
they win over the single-class rule. Same fix applied to `.doneCritText{N}`.

Fixes regression from PR #7432 (fix for #5979).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test(gantt): add e2e snapshot for done-task outside-text in dark mode

Covers the regression from #7433 where done-task labels displayed outside
the bar (text too wide for the bar width) rendered in unreadable dark color
in dark theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test(gantt): add separate inside/outside e2e snapshots for dark mode done tasks

Split the dark mode done-task coverage into two explicit tests:
- inside-text: label fits within the bar (long bar, short label)
- outside-text: label overflows the bar (short bar, long label) — regression case for #7433

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: knsv-bot <knsv-bot@macos.shared>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

.changeset/fix-gantt-done-outside-text-dark.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(gantt): restore readable outside-text color for done tasks in dark mode

cypress/integration/rendering/gantt.spec.js

@@ -884,4 +884,38 @@ describe('Gantt diagram', () => {
       { theme: 'dark' }
     );
   });
+  it('should render done task inside-text readable in dark mode', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      dateFormat  YYYY-MM-DD
+      title Gantt dark mode done-task inside-text readability
+
+      section A section
+      Done :done, 2014-01-06, 14d
+      Active :active, 2014-01-20, 14d
+
+      section Critical tasks
+      Done critical :crit, done, 2014-01-06, 14d
+      `,
+      { theme: 'dark' }
+    );
+  });
+  it('should render done task outside-text readable in dark mode (regression #7433)', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      dateFormat  YYYY-MM-DD
+      title Gantt dark mode done-task outside-text readability
+
+      section A section
+      A very long label that will not fit inside the short bar :done, 2014-01-06, 1d
+      Active short bar                                         :active, 2014-01-07, 1d
+
+      section Critical tasks
+      A very long label that will not fit inside the short bar :crit, done, 2014-01-06, 1d
+      `,
+      { theme: 'dark' }
+    );
+  });
 });

packages/mermaid/src/diagrams/gantt/styles.js

@@ -191,6 +191,19 @@ const getStyles = (options) =>
     fill: ${options.taskTextDarkColor} !important;
   }
 
+  /* Done task text displayed outside the bar sits against the diagram background,
+     not against the done-task bar, so it must use the outside/contrast color. */
+  .doneText0.taskTextOutsideLeft,
+  .doneText0.taskTextOutsideRight,
+  .doneText1.taskTextOutsideLeft,
+  .doneText1.taskTextOutsideRight,
+  .doneText2.taskTextOutsideLeft,
+  .doneText2.taskTextOutsideRight,
+  .doneText3.taskTextOutsideLeft,
+  .doneText3.taskTextOutsideRight {
+    fill: ${options.taskTextOutsideColor} !important;
+  }
+
 
   /* Tasks on the critical line */
 
@@ -237,6 +250,18 @@ const getStyles = (options) =>
     fill: ${options.taskTextDarkColor} !important;
   }
 
+  /* Done-crit task text outside the bar — same reasoning as doneText above. */
+  .doneCritText0.taskTextOutsideLeft,
+  .doneCritText0.taskTextOutsideRight,
+  .doneCritText1.taskTextOutsideLeft,
+  .doneCritText1.taskTextOutsideRight,
+  .doneCritText2.taskTextOutsideLeft,
+  .doneCritText2.taskTextOutsideRight,
+  .doneCritText3.taskTextOutsideLeft,
+  .doneCritText3.taskTextOutsideRight {
+    fill: ${options.taskTextOutsideColor} !important;
+  }
+
   .vert {
     stroke: ${options.vertLineColor};
   }