/* ========================================================================== Connect 2026 - Topic colour binding T-13/14/16 -------------------------------------------------------------------------- Shared by every component that shows a topic: headline-row eyebrows, card eyebrows, meta lines, and the filter chips. Lives in its own file because three components depend on it - it started inside card.css and did not belong there. Colour is bound by DATA ATTRIBUTE, never by an inline style: Article TEXT USES THE -ink VARIANTS. 5 of the 6 design colours fail WCAG AA as text on white, so anything that renders as text takes the darkened, hue-preserving variant. See the note in tokens.css. Note the artboards draw some eyebrows as the topic colour at ~80% opacity (e.g. #c44eff is exactly #b521ff at 80% on white). We use the solid -ink value instead - the tint would only push contrast further down. DEPENDS ON: tokens.css ========================================================================== */ /* A topic carries its own colour in the content system. When one is supplied the tag sets --cn-topic-set on the element and it wins; when it is not, the slug rules below still apply. This is the one place an inline style is allowed in a tag file. The value is DATA, not presentation - it comes from a database column an admin edits, and there is no stylesheet that can know it ahead of time. It sets a custom property rather than a colour declaration, so everything else about the element is still styled here. Set colours are used as given. The -ink darkening below exists because 5 of the 6 design colours fail AA as text on white, so whoever picks a colour in the admin owns its readability. The rule that reads the property sits BELOW the slug rules, not above them - see the note there. */ [data-topic="ai-technology"] { color: var(--cn-topic-ai-technology-ink); } [data-topic="alm-treasury-liquidity"] { color: var(--cn-topic-alm-treasury-liquidity-ink); } [data-topic="credit-risk"] { color: var(--cn-topic-credit-risk-ink); } [data-topic="cyber"] { color: var(--cn-topic-cyber-ink); } [data-topic="esg-climate"] { color: var(--cn-topic-esg-climate-ink); } [data-topic="financial-crime"] { color: var(--cn-topic-financial-crime-ink); } [data-topic="industry-news"] { color: var(--cn-topic-industry-news-ink); } [data-topic="insurance"] { color: var(--cn-topic-insurance-ink); } [data-topic="market-risk"] { color: var(--cn-topic-market-risk-ink); } [data-topic="model-risk"] { color: var(--cn-topic-model-risk-ink); } [data-topic="operational-nonfinancial"] { color: var(--cn-topic-operational-nonfinancial-ink); } [data-topic="regulation-compliance"] { color: var(--cn-topic-regulation-compliance-ink); } [data-topic="resilience"] { color: var(--cn-topic-resilience-ink); } [data-topic="stress-testing"] { color: var(--cn-topic-stress-testing-ink); } [data-topic="vendor-thirdparty"] { color: var(--cn-topic-vendor-thirdparty-ink); } /* AFTER the slug rules, deliberately. Both selectors are one attribute - specificity 0-1-0 - so whichever comes last wins, and this one used to come first. A topic coloured in the CRM therefore lost to the slug palette on every eyebrow, meta line and standfirst: the value was on the element, the browser just never used it. Same reason the chip fill rule further down sits after the chip fills. The chip LABEL is unaffected either way - it is forced white by a class-plus-attribute rule, which outranks both of these. */ [style*="--cn-topic-set"] { color: var(--cn-topic-set); } /* ============================================================== CHIPS ==== */ /* T-16 filter chips. Fill is the topic colour, label is white. MEASURED on artboard p2: chip 27px tall, label 6.3pt Medium x2.4 = 15px white, fully rounded, ~9px apart horizontally and ~12px vertically. ACCESSIBILITY - the fills genuinely need to change, and this one cannot be fixed by swapping the text colour. Measured, white vs navy label on each fill (AA needs 4.5:1): family fill white navy purple #b521ff 4.54 ok 3.43 FAIL gold #cca30e 2.38 FAIL 6.53 ok green #009900 3.78 FAIL 4.12 FAIL slate #6c8296 3.98 FAIL 3.90 FAIL cyan #1cb7fc 2.28 FAIL 6.84 ok orange #ee7633 2.89 FAIL 5.39 ok Green and slate fail BOTH ways. No text colour rescues them. THE FIX, if the designer agrees: point the six --cn-fam-* tokens at their -ink values. Those are hue-preserving and all measure exactly 4.60:1 against white, so every chip passes and nothing else in the system moves (text already uses -ink). Six one-line edits in tokens.css. Built as drawn for now so the build matches the artboards. */ .cn-chip[data-topic="ai-technology"] { background: var(--cn-topic-ai-technology); } .cn-chip[data-topic="alm-treasury-liquidity"] { background: var(--cn-topic-alm-treasury-liquidity); } .cn-chip[data-topic="credit-risk"] { background: var(--cn-topic-credit-risk); } .cn-chip[data-topic="cyber"] { background: var(--cn-topic-cyber); } .cn-chip[data-topic="esg-climate"] { background: var(--cn-topic-esg-climate); } .cn-chip[data-topic="financial-crime"] { background: var(--cn-topic-financial-crime); } .cn-chip[data-topic="industry-news"] { background: var(--cn-topic-industry-news); } .cn-chip[data-topic="insurance"] { background: var(--cn-topic-insurance); } .cn-chip[data-topic="market-risk"] { background: var(--cn-topic-market-risk); } .cn-chip[data-topic="model-risk"] { background: var(--cn-topic-model-risk); } .cn-chip[data-topic="operational-nonfinancial"] { background: var(--cn-topic-operational-nonfinancial); } .cn-chip[data-topic="regulation-compliance"] { background: var(--cn-topic-regulation-compliance); } .cn-chip[data-topic="resilience"] { background: var(--cn-topic-resilience); } .cn-chip[data-topic="stress-testing"] { background: var(--cn-topic-stress-testing); } .cn-chip[data-topic="vendor-thirdparty"] { background: var(--cn-topic-vendor-thirdparty); } /* A CHIP IS A FILL, NOT TEXT. --cn-topic-set drives `color` at the top of this file, which is right for an eyebrow or a meta line - they are coloured words. A chip is a coloured pill with a white label, so a topic that carries its own colour has to paint the BACKGROUND here or the colour is invisible: the label is forced white two rules down, so the set colour was being applied to text nobody could see while the slug palette kept painting the fill. A topic coloured green in the CRM still came out palette-purple on screen. Same specificity as the slug fills above (class + attribute), so this must stay AFTER them to win. Both are 0,2,0 - order is the tiebreak. */ .cn-chip[style*="--cn-topic-set"] { background: var(--cn-topic-set); } /* The chip label is white regardless of fill, so override the text rules above - those exist for eyebrows and meta lines, not chips. */ .cn-chip[data-topic], .cn-chip[style*="--cn-topic-set"] { color: var(--cn-ink-invert); }