From bf50d812b199c5079255dc97644ab8e0661ef00d Mon Sep 17 00:00:00 2001 From: Joe Castle Date: Mon, 17 Aug 2026 00:15:41 -0400 Subject: [PATCH] ARTEMIS-6090 Override the topology node colour for dark mode The .pf-v5-theme-dark block maps most PatternFly tokens onto the Artemis dark palette, but --pf-v5-topology__node--Color is set only in the light block above it. In dark mode it therefore keeps #714099, a light-mode purple, on the dark surfaces. Measured with the WCAG 2.1 relative luminance formula against the three PatternFly v5 dark surfaces: #714099 on #151515 2.52:1 #714099 on #1b1d21 2.33:1 #714099 on #212427 2.15:1 against the 4.5:1 that AA requires for normal text. Mapping it onto --artemis-global--primary-color-dark--100, as the sibling tokens already are, gives 11.61:1, 10.73:1 and 9.92:1 respectively. Every other token routed through the dark palette already passes, worst case 4.82:1, so this was the only colour left behind. --- .../artemis-extension/app/public/css/artemis.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/artemis-console-extension/artemis-extension/app/public/css/artemis.css b/artemis-console-extension/artemis-extension/app/public/css/artemis.css index 2100024..e5a9737 100644 --- a/artemis-console-extension/artemis-extension/app/public/css/artemis.css +++ b/artemis-console-extension/artemis-extension/app/public/css/artemis.css @@ -355,6 +355,12 @@ background-color: var(--artemis-global--primary-color--300); --pf-v5-global--link--Color--light: var(--artemis-global--primary-color-dark--300); --pf-v5-global--link--Color--light--hover: var(--artemis-global--primary-color--dark-400); --pf-v5-global--disabled-color--100: var(--artemis-global--primary-color-dark--200); + /** + * Without this the token keeps its light-mode value from the block above, + * putting #714099 on the dark surfaces at 2.15:1 to 2.52:1, against the 4.5:1 + * WCAG 2.1 AA needs. The dark palette equivalent measures 9.92:1 to 11.61:1. + */ + --pf-v5-topology__node--Color: var(--artemis-global--primary-color-dark--100); svg.pf-v5-svg { fill: var(--artemis-global--primary-color-dark--200); }