Foundations · @csdr/theme

Colour palettes

Three swappable palettes — default (PatternFly), landscape, goap — on PatternFly’s token contract: ramps, roles, validated chart sets, and every component rendered in the palette you are viewing.

Global Ocean Accounts Partnership goap

The Partnership palette (greens/teals, blues, sand, greys) pinned verbatim into PatternFly's steps, plus the status hues and chart set a UI needs. Where a documented pairing fails WCAG AA the palette uses the neighbouring step of the same hue — see the sign-off issue.

Ramps

Nine PatternFly families at PatternFly's steps (grays 10–95). The step is the promise: 10–20 tints, 30 dark-mode text and links, 40 dark-mode UI, 50 light-mode interactive, 60 text on white (≥ 4.5:1 in every family), 70–80 emphasis. Base and semantic tokens (--pf-t--global--*) resolve to these; components never touch them directly.

Pinned brand hexes

Brand colours are pinned verbatim into the step they belong to; the generator reports how far each sits from the step's lightness so fidelity costs are visible.

Step contract

Contrast ratios the generator enforces on every family (pnpm check:palette). Brand-50 must reach 4.5:1 because it is the link and primary-button colour; other families need 3:1 at 50.

Role tokens

• ✓ link on white (brand-50): 5.06:1 (needs 4.5:1)
• ✓ link on secondary surface (brand-50 on gray-10): 4.52:1 (needs 4.5:1)
• ✓ brand text (brand-60) on white: 8.71:1 (needs 4.5:1)
• ✓ white on brand (brand-50): 5.06:1 (needs 4.5:1)
• ✓ dark link (brand-20) on dark surface: 10.27:1 (needs 4.5:1)
• ✓ dark brand (brand-30) on dark surface: 8.33:1 (needs 4.5:1)
• ✓ body text (gray-95) on white: 18.24:1 (needs 7:1)
• ✓ subtle text (gray-60) on white: 8.44:1 (needs 4.5:1)
• ✓ danger text on white: 6.96:1 (needs 4.5:1)
• ✓ success text on white: 6.26:1 (needs 4.5:1)
• ✓ warning text on white: 6.66:1 (needs 4.5:1)
• ✓ info text on white: 6.42:1 (needs 4.5:1)
• ✓ white on info (info-50): 5.08:1 (needs 4.5:1)
• ✓ info text (info-50) on white: 5.08:1 (needs 4.5:1)

Chart sets

Categorical colours are a separate parameter from UI colours: muted brand hues fall under the chart chroma floor and read as grey in a series, so each palette carries a "data-grade" set derived from the same hues and validated (lightness band, chroma floor ≥ 0.10, adjacent CVD ΔE ≥ 8, normal-vision ΔE ≥ 15, ≥ 3:1 vs surface). Assigned in fixed order, never cycled; status colours are reserved and never used for series.

<LineChart data={rows} x="year" y="value" series="region" alt="…" />   {/* colours follow the page's palette */}

Components in this palette

Everything below is the ordinary component rendered on a page stamped data-palette="goap" — nothing is styled specially for this page.

<Button variant="primary">Download PDF</Button>  <Button variant="secondary">Cite</Button>  <Button variant="link">Read more</Button>

<Callout kind="key-finding" title="…">…</Callout>  <StatTile tone="good" … />

The other palettes

• PatternFly default default
  
• Australian landscape landscape
  

Adding or changing a palette

1. Edit or add packages/theme/palettes/<id>.json: nine families as hue + chroma (with optional pins for exact brand hexes), optional extensions, roles, and the chart sets.
2. Run pnpm palette:build. It generates the CSS palette layer, the chart values and this page's report — and refuses to write if a contract, role or chart check fails.
3. pnpm check (which runs check:palette) fails on any drift between the JSON and the generated files, so hexes never get hand-edited downstream.
4. Look at it here and in the report preview; then pnpm test for the axe/VR matrix. See Theme → Palettes and D13.