3 people 6de7387637 fix(editor): keep Mermaid diagram labels readable in dark themes with pastel chart colours (#40843) ...

* fix(editor): keep Mermaid labels readable on pastel dark theme palettes

In dark mode the Mermaid config fills nodes, actors and boxes with the
theme's --chart-3/4/5 tokens while every label uses --foreground. Themes
with pastel chart tokens (e.g. Catppuccin Mocha) put light text on light
fills, so sequence actors, class boxes and similar shapes became
unreadable (contrast ~1.06:1). The flowchart contrast pass only covers
flowcharts.

Tint each palette fill toward the background just until the foreground
reaches WCAG 4.5:1. Palettes that already read (Orca's default dark
blues) are unchanged.

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

* fix(editor): tint only Mermaid fills under foreground labels

Darkening the palette seeds also darkened the git graph branch boxes and
venn colours, which Mermaid pairs with its own label colours, and the
active Gantt border. Keep the seeds and tint mainBkg, clusterBkg,
requirementBackground and the Gantt task fills instead.

* fix(editor): pin Mermaid fills only when the theme colour needs tinting

An always-set mainBkg overrode a diagram's own primaryColor in every dark
theme. Pin the tinted fills only when the chart colour fails, and cover
git tag pills too.

* refactor(editor): reuse readableOn for Mermaid fill contrast

Drop the hand-rolled hex mix loop and the extra luminance exports; move
hexToRgb next to rgbaToHex so terminal appearance and Mermaid share it.

* fix(editor): draw clickable Mermaid Gantt labels in the foreground colour

Mermaid's default dark-blue clickable label reads only on light bars; on
tinted or dark bars, and beside a bar on a dark page, it disappears.

* fix(editor): tint Mermaid railroad terminal and comment fills too

---------

Co-authored-by: Pro100v <2681328+Pro100v@users.noreply.github.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

2026-11-10 19:41:13 +00:00

..

rgba-contrast.ts

…