marcel
fa510f3991
Some checks failed
CI / Unit & Component Tests (push) Failing after 2m1s
CI / OCR Service Tests (push) Successful in 28s
CI / Backend Unit Tests (push) Successful in 6m21s
CI / fail2ban Regex (push) Successful in 44s
CI / Semgrep Security Scan (push) Successful in 27s
CI / Compose Bucket Idempotency (push) Successful in 1m8s
Adds the Mappe design handoff as in-repo ground truth and closes out the design-token foundation: --radius-sm/md/full + --shadow-sm/md tokens (distinct dark values in both dark blocks) and the canonical 10-color $lib/shared/avatarPalette.ts (AA-darkened sage/amber/sand swatches), guarded by avatarPalette.spec.ts. Closes #854.
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
/**
|
|
* Canonical 10-color person/avatar palette — single source of truth.
|
|
*
|
|
* Used by `<Avatar>` (issue #855), hashed by name so the same person renders the
|
|
* same color on every screen (DESIGN_RULES §5). Do not duplicate these values in
|
|
* CSS or another module; import this constant instead.
|
|
*
|
|
* White Montserrat initials sit on each color, so every swatch must meet WCAG AA
|
|
* (≥4.5:1) for normal text — avatar initials are 700-weight but ≤16px, below the
|
|
* large-text threshold. The background is theme-invariant (identical hex in light
|
|
* and dark, white initials in both), so one white-on-color check covers both
|
|
* themes. Guarded by `avatarPalette.spec.ts`.
|
|
*
|
|
* Three §1 brand hues failed white-on-color and use AA-darkened variants here;
|
|
* the bright originals remain the decorative tag-dot colors in `layout.css`
|
|
* (tag dots carry no text, so the contrast floor does not apply to them):
|
|
* sage #5a8a6a → #527e61 (3.98 → 4.65:1)
|
|
* amber #c17a00 → #a46800 (3.47 → 4.61:1)
|
|
* sand #9a8040 → #897239 (3.79 → 4.64:1)
|
|
*/
|
|
export const AVATAR_PALETTE = [
|
|
'#527e61', // sage (AA-adjusted from #5a8a6a)
|
|
'#a0522d', // sienna
|
|
'#a46800', // amber (AA-adjusted from #c17a00)
|
|
'#607080', // slate
|
|
'#7a4f9a', // violet
|
|
'#c0446e', // rose
|
|
'#3060b0', // cobalt
|
|
'#4a7a3a', // moss
|
|
'#897239', // sand (AA-adjusted from #9a8040)
|
|
'#c05540' // coral
|
|
] as const;
|