chore(shared-charts): soften the curated palette
CI / scan (pull_request) Successful in 3m43s
CI / check (pull_request) Successful in 5m34s
CI / commits (pull_request) Successful in 3m33s
CI / a11y (pull_request) Successful in 3m45s
CI / perf (pull_request) Successful in 6m57s

DEFAULT_BAR_FILL and the four intent-bearing entries of
semanticStatusColors move to a softer, lower-saturation set tuned
for chart legibility:

- bar fill / info:  #2563eb / #1d4ed8 → #4075e7
- success:          #16a34a            → #46ac6b
- warning:          #ea580c            → #f38043
- error:            #dc2626            → #eb5252

Adjacent slices in a donut and series in a stacked bar fight less
visually with the softened palette. Same a11y posture (AA contrast
on white surfaces, deuteranopia/protanopia distinguishability via
lightness deltas, not just hue).
This commit is contained in:
Julien Gautier
2026-05-17 23:35:26 +02:00
parent 8a02ca86a2
commit 709e284bf3
@@ -42,10 +42,12 @@ export type ColorScheme = 'sequential' | 'categorical';
/**
* Default fill colour for bars when no per-bar encoding applies.
* `#1d4ed8` ≈ tailwind blue-700 — high contrast against white,
* still readable on a dark surface.
* Softer brand-aligned blue — AA contrast against white surfaces,
* still readable on a dark surface. Curated alongside
* {@link semanticStatusColors} so the chart palette reads as one
* coherent set rather than a Tailwind grab-bag.
*/
export const DEFAULT_BAR_FILL = '#1d4ed8';
export const DEFAULT_BAR_FILL = '#4075e7';
/**
* Intent-bearing colours for the small set of statuses APF charts
@@ -53,14 +55,16 @@ export const DEFAULT_BAR_FILL = '#1d4ed8';
* the lib (per ADR-0023), but they can pick from this curated map
* by name — keeps the colour-blind-safety guarantee while letting
* the donut chart encode meaning (success = green, denied =
* orange).
* orange). Values are softer than the Tailwind defaults — chart
* surfaces benefit from a lower-saturation palette so adjacent
* slices/bars don't visually fight when they share a tile.
*/
export const semanticStatusColors = {
success: '#16a34a', // green-600
warning: '#ea580c', // orange-600
error: '#dc2626', // red-600
info: '#2563eb', // blue-600
neutral: '#6b7280', // gray-500
success: '#46ac6b', // muted green
warning: '#f38043', // muted orange
error: '#eb5252', // muted red
info: '#4075e7', // muted blue (same as DEFAULT_BAR_FILL)
neutral: '#6b7280', // gray
} as const;
export type SemanticStatus = keyof typeof semanticStatusColors;