/* * saads-account.css — colour override for the keycloak.v3 (React/PatternFly v5) account console. * * keycloak.v3 sets its brand/link colours as CSS custom properties on `:where(:root)` (light mode) * and `:where(.pf-v5-theme-dark)` (dark mode — the class Keycloak toggles on to follow * prefers-color-scheme; see theme.properties' inherited `kcDarkModeClass=pf-v5-theme-dark`). * `:where()` carries ZERO specificity, so plain `:root` / `:root.pf-v5-theme-dark` selectors here * (specificity 0,1,0 / 0,2,0) win over the stock values regardless of stylesheet order — no * `!important` needed. Confirmed by extracting theme/keycloak.v3/account/resources/assets/main-*.css * from org.keycloak.keycloak-account-ui-26.7.4.jar on the sso VM. * * Colour choices (WCAG 2.1 AA, 4.5:1 for normal text, computed against sRGB relative luminance): * - Brand accent #ff0024 is NOT used as a text/fill colour here: white text on #ff0024 is only * 3.98:1 (fails AA), and #ff0024 as text on white is the same 3.98:1 (fails AA too). It's kept * purely as the brand swatch elsewhere (login/email themes, non-text use). * - #d6001e (primary-color--100/200 and the light-mode link colour): white text on #d6001e is * 5.42:1 (passes) — used for filled buttons in BOTH modes, since button-text contrast only * depends on the button's own fill/text pair, not the surrounding page background. As a text * colour (links) on a white/light page background it's 5.42:1 (passes); on the dark console * background (~#1b1d21) it drops to ~3.12:1 (fails AA for text) — hence the dark-mode override * below. * - #a80018 (primary-color--200 / link hover, light mode): white text 7.84:1, and as link-hover * text on white 7.84:1 — both pass comfortably; used for the pressed/hover state. * - #ff6b78 / #ff8a93 (dark-mode link / link-hover text): against the dark console background * these are 6.13:1 and 7.49:1 respectively — pass AA where #d6001e/#a80018 would not. Button * fills are left at #d6001e/#a80018 in dark mode too (contrast is self-contained, see above). * * `--pf-v5-global--primary-color--300` needs its own dark-mode override: PatternFly's dark-theme * rule for `.pf-v5-c-button.pf-m-primary` reads its background from `--primary-color--300`, NOT * `--primary-color--100`, only when `.pf-v5-theme-dark` is set (confirmed empirically — the Save/ * Submit button stayed stock PatternFly blue in dark mode without this, despite --100/--200 already * being overridden). Its paired text colour, `--primary-color--400`, is left at PatternFly's stock * white — white-on-#d6001e is the same 5.42:1 pass already established above. */ :root { --pf-v5-global--primary-color--100: #d6001e; --pf-v5-global--primary-color--200: #a80018; --pf-v5-global--link--Color: #d6001e; --pf-v5-global--link--Color--hover: #a80018; /* Final-review fix (M-11): the left-nav active-item indicator reads its colour from --pf-v5-global--active-color--400, left at PatternFly's stock blue (#73bcf7) by every earlier task. On the white console background that is ~1.9:1 — below the WCAG 1.4.11 3:1 bar for a non-text UI indicator (and off-brand). #d6001e on white is 5.42:1, comfortably >3:1. */ --pf-v5-global--active-color--400: #d6001e; } :root.pf-v5-theme-dark { --pf-v5-global--primary-color--300: #d6001e; --pf-v5-global--link--Color: #ff6b78; --pf-v5-global--link--Color--hover: #ff8a93; /* Dark-mode nav active indicator: #d6001e against the dark console background (~#1b1d21) is only ~3.12:1, which is on the passing side of the 3:1 non-text bar but leaves little margin, and this component only ever renders on that background (never contains its own text), so we use the already-audited dark-mode link colour instead: #ff6b78 on #1b1d21 is 6.13:1. */ --pf-v5-global--active-color--400: #ff6b78; }