diff --git a/.changeset/fix-gantt-done-outside-text-dark.md b/.changeset/fix-gantt-done-outside-text-dark.md new file mode 100644 index 00000000000..5917b33cb0c --- /dev/null +++ b/.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 diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 26198ce72ca..704fb6fdfba 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/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' } + ); + }); }); diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js index 776083a9ce3..24cb9d9f648 100644 --- a/packages/mermaid/src/diagrams/gantt/styles.js +++ b/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}; }