/* Semantic colours for the JSON-token editor (labels, repr line, token chrome). Each token is a channel TRIPLET, not a hex: the label colour, the 0.07-alpha fill and the 0.25-alpha border are all derived from one value here. The previous version spelled every colour three times (once as #rrggbb and twice inside an rgba(...)), so a change had to be made in three places by hand. Light mode needs its own set. The dark values are mid-tone pastels picked against #061221; measured against the light background (#f7f3ea) they land at 2.1:1–3.0:1, i.e. below the 4.5:1 body-text floor and mostly below even the 3:1 large-text one — the whole trade-capture form's labels read as a washed pastel smear in light mode. The light values below are the same hues walked down in lightness until each measures >= 4.5:1 on the ivory background. */ :root { --token-position-rgb: 192, 96, 78; --token-notional-rgb: 201, 148, 26; --token-instrument-rgb: 82, 168, 158; --token-rate-rgb: 72, 160, 112; --token-date-rgb: 128, 144, 170; --token-separator-rgb: 96, 104, 128; --token-type-rgb: 154, 132, 176; --token-end-of-month-rgb: 200, 164, 100; --token-generator-rgb: 180, 142, 173; --token-schedule-rgb: 90, 156, 140; } :root[data-cpd-theme="light"] { --token-position-rgb: 187, 76, 55; --token-notional-rgb: 144, 103, 9; --token-instrument-rgb: 52, 121, 113; --token-rate-rgb: 49, 125, 83; --token-date-rgb: 92, 112, 146; /* --token-separator is the one that needs no adjusting: #606880 already measures 5.0:1 on ivory, better than the 4.5 target, so darkening it would be a regression for no gain. */ --token-type-rgb: 127, 96, 159; --token-end-of-month-rgb: 140, 104, 41; --token-generator-rgb: 148, 92, 137; --token-schedule-rgb: 63, 120, 106; } :root { --token-position: rgb(var(--token-position-rgb)); --token-notional: rgb(var(--token-notional-rgb)); --token-instrument: rgb(var(--token-instrument-rgb)); --token-rate: rgb(var(--token-rate-rgb)); --token-date: rgb(var(--token-date-rgb)); --token-separator: rgb(var(--token-separator-rgb)); --token-type: rgb(var(--token-type-rgb)); --token-end-of-month: rgb(var(--token-end-of-month-rgb)); --token-generator: rgb(var(--token-generator-rgb)); --token-schedule: rgb(var(--token-schedule-rgb)); --token-position-bg: rgba(var(--token-position-rgb), 0.07); --token-notional-bg: rgba(var(--token-notional-rgb), 0.07); --token-instrument-bg: rgba(var(--token-instrument-rgb), 0.07); --token-rate-bg: rgba(var(--token-rate-rgb), 0.07); --token-date-bg: rgba(var(--token-date-rgb), 0.07); --token-separator-bg: rgba(var(--token-separator-rgb), 0.05); --token-type-bg: rgba(var(--token-type-rgb), 0.07); --token-end-of-month-bg: rgba(var(--token-end-of-month-rgb), 0.07); --token-generator-bg: rgba(var(--token-generator-rgb), 0.07); --token-schedule-bg: rgba(var(--token-schedule-rgb), 0.07); --token-position-border: rgba(var(--token-position-rgb), 0.25); --token-notional-border: rgba(var(--token-notional-rgb), 0.25); --token-instrument-border: rgba(var(--token-instrument-rgb), 0.25); --token-rate-border: rgba(var(--token-rate-rgb), 0.25); --token-date-border: rgba(var(--token-date-rgb), 0.25); --token-separator-border: rgba(var(--token-separator-rgb), 0.18); --token-type-border: rgba(var(--token-type-rgb), 0.25); --token-end-of-month-border: rgba(var(--token-end-of-month-rgb), 0.25); --token-generator-border: rgba(var(--token-generator-rgb), 0.25); --token-schedule-border: rgba(var(--token-schedule-rgb), 0.25); } /* Formula-symbol palette (docs/formula-shape.md): one token per symbol group, coloured by the `data-kind` a rendered carries (CPDelta's Symbol.toMathMl). Same channel-TRIPLET convention as the token-* block above, for the same reason: FormulaView.razor.css reads each token as rgb(var(--formula--rgb)) and nothing else in this codebase spells these colours out. Independent of --token-*: the owner wants the formula's meanings free to diverge from the trade form's (docs/formula-shape.md, "Symbol groups"). Measured per WCAG 2.x relative luminance against the two grounds this file targets - dark #061221 (the :root value below), light #f7f3ea (:root[data-cpd-theme="light"]) - via a throwaway contrast script, ratio = (L1+0.05)/(L2+0.05). Every value below is the exact hue/lightness the plan proposed; each already cleared the 4.5:1 body-text floor on its ground, so no lightness walk was needed: token dark ratio light ratio --formula-rate-rgb 8.75:1 4.95:1 --formula-discount-rgb 7.84:1 6.05:1 --formula-amount-rgb 9.62:1 5.05:1 --formula-quote-rgb 9.43:1 4.76:1 --formula-time-rgb 8.13:1 6.07:1 --formula-variance-rgb 6.98:1 6.27:1 --formula-structure-rgb 6.88:1 5.61:1 Symbol kinds (data-kind) each token covers: --formula-rate-rgb: i, f, r, s --formula-discount-rgb: V --formula-amount-rgb: N, amount, pv --formula-quote-rgb: Q, S₀, X --formula-time-rgb: ∂, date, from, to, holiday --formula-variance-rgb: σ² --formula-structure-rgb: k, w, given, residual Any other data-kind inherits the surrounding text colour - no token, no fallback rule. */ :root { --formula-rate-rgb: 96, 196, 140; --formula-discount-rgb: 120, 170, 235; --formula-amount-rgb: 232, 176, 72; --formula-quote-rgb: 90, 200, 200; --formula-time-rgb: 160, 170, 200; --formula-variance-rgb: 214, 130, 190; --formula-structure-rgb: 150, 156, 176; } :root[data-cpd-theme="light"] { --formula-rate-rgb: 30, 120, 70; --formula-discount-rgb: 40, 90, 170; --formula-amount-rgb: 140, 95, 0; --formula-quote-rgb: 20, 120, 120; --formula-time-rgb: 80, 90, 130; --formula-variance-rgb: 150, 50, 120; --formula-structure-rgb: 90, 96, 120; }