Feature #44689
open
Use Open Color for Gantt charts
Description
This patch replaces image-based Gantt bars and markers with CSS and aligns Gantt colors, including PDF/PNG exports, with Open Color. This improves color consistency across Redmine and should also make printed output look cleaner.
- Use the Open Color palette introduced in Redmine 7.0.0 (#43256), preserving the current color tones as closely as possible.
- Replace textured background images with solid fills. No specific meaning was found in the existing textures.
- Colors are not unified across the screen, PDF, and PNG, as the most suitable colors are different for each output.
- The image files are kept for compatibility with themes that may reference them directly, but we can remove them if this is not a concern.
gantt-screen-progress-comparison.png
gantt-color-style-comparison.png
I've confirmed that the Gantt chart and PDF/PNG exports display correctly on macOS with Chrome, Firefox, and Safari. I also ran 57 automated visual comparison cases and found no new functional or layout problems caused by this patch.
Full visual test report: https://redmine-gantt-comparison.hidakatsuya.chatgpt.site/
Files
Related issues
Updated by Go MAEDA about 8 hours ago
- Related to Feature #43256: Introduce Open Color to unify and standardize CSS colors added
Updated by Go MAEDA about 8 hours ago
- Target version set to 7.1.0
I tried the patch, and the Gantt chart now looks much more natural.
Setting the target version to 7.1.0.
Updated by Jimmy Westberg about 6 hours ago
Thank you, this looks great, and moving the bars from images to CSS is a real improvement for themes.
One suggestion before it lands: the selectors now refer to Open Color directly, for example .gantt-task-done { background-color: var(--oc-green-6) }. The value is no longer hard coded, but the choice of colour still is, because it moves into the name. A theme that wants a different colour for "done" has to override every selector that uses --oc-green-6 for that purpose, and it cannot change --oc-green-6 itself without changing everything else that is green.
Could the Gantt colours be defined by their role instead, once, and the selectors use the roles?
:root {
--gantt-task-done: var(--oc-green-6);
--gantt-task-late: var(--oc-red-4);
--gantt-task-todo: var(--oc-gray-5);
--gantt-task-parent: var(--oc-gray-6);
--gantt-task-marker: var(--oc-indigo-8);
--gantt-version-marker: var(--oc-gray-9);
--gantt-today-line: var(--oc-red-7);
}
.gantt-task-done { background-color: var(--gantt-task-done); border-color: var(--gantt-task-done); }
Open Color stays the palette and the defaults are exactly the ones in the patch, so nothing changes visually. What it adds:
- A theme, or a dark mode, changes what "done" or "late" looks like in one place, without touching the selectors or the palette.
- The meaning is in the name, so someone reading the CSS sees why a bar has its colour.
- The list of roles documents the Gantt colours in one place.
The same idea could apply to the PDF and PNG exports: one map from role to colour per output (for example a constant with :done, :late, :todo, :marker) instead of values spread over the drawing code. That would also make it explicit where screen, PDF and PNG differ on purpose.
If this sounds right, it might be worth doing the same for other areas in a follow-up to #43256, but for this patch the Gantt roles alone would already help.
Updated by Jimmy Westberg about 6 hours ago
But please, implement this patch and we might discuss my idea afterwards since this is a bigger question than this patch. :)