/* Orbit's one document-wide divergence from the FluentUI-generated theme. * * (A token can also be redeclared for a single subtree — the only way to reach what a FluentUI component paints * in its shadow root. The top bar's hover fill does that in MainLayout.razor; see Documentation/THEMING.md, * "Overriding a token for one subtree".) * * The brand colour (#236b98, declared as data-theme-color on in App.razor) is a fairly dark blue. * FluentUI derives a 16-shade ramp from it and the dark theme reads shade 100 (#5685ab) for brand *ink* — * links, selected tab labels, brand-coloured text. That is only 3.70:1 against the dark surface * (--colorNeutralBackground1, #292929): enough for the 3:1 non-text minimum, but below the 4.5:1 WCAG AA * threshold for text. FluentUI's own default blue reaches 5.18:1 there, so adopting the brand as-is would * regress dark-mode legibility. Note this affects the library's components too, not just ours: * default-fuib.css styles every with --colorBrandForegroundLink. * * Neither of FluentUI's tuning knobs fixes it — sweeping vibrancy and hueTorsion across their full legal * ranges keeps shade 100 between 3.69:1 and 3.73:1 — and asking for the brand colour "exactly" makes it worse * (2.51:1), because exactness overwrites shade 100 with the brand colour itself. * * So the text-bearing brand tokens are shifted two shades lighter, to shade 120 (#7fa1bf, 5.37:1). The values * are taken from the generated ramp rather than invented, so the result stays on-brand. Brand *strokes* are * left alone: they are not text and 3.70:1 clears the non-text minimum. * * Why `body[data-theme="dark"]`: FluentUI declares its tokens on the element and marks dark mode by * setting data-theme="dark" on . Redeclaring a custom property on overrides the value inherited * from for the whole document, so this needs no !important, wins regardless of stylesheet order, and * survives every path that re-applies the theme — including an OS colour-scheme change, which no C# hook sees. * * Documentation/THEMING.md records the full ramp and the checks to re-run if the brand colour changes. */ body[data-theme="dark"] { /* Shade 120 — 5.37:1 on #292929, up from shade 100's 3.70:1. */ --colorBrandForeground1: #7fa1bf; --colorCompoundBrandForeground1: #7fa1bf; --colorBrandForegroundLink: #7fa1bf; --colorBrandForegroundLinkSelected: #7fa1bf; --colorNeutralForeground2BrandHover: #7fa1bf; --colorNeutralForeground2BrandSelected: #7fa1bf; --colorNeutralForeground3BrandHover: #7fa1bf; --colorNeutralForeground3BrandSelected: #7fa1bf; /* Hover lifts one further shade (130 — 6.38:1) and pressed drops one (110 — 4.48:1), keeping the rest/hover/pressed progression that FluentUI's own ramp expresses, still all above AA. */ --colorBrandForegroundLinkHover: #93afc8; --colorBrandForegroundLinkPressed: #6b93b5; --colorNeutralForeground2BrandPressed: #6b93b5; --colorNeutralForeground3BrandPressed: #6b93b5; }