Add no-restricted-syntax rule matching string literals of form #RGB / #RRGGBB /
#RRGGBBAA. Catches hex colors anywhere in JS/TS — JSX inline styles, template
literals, prop defaults, config arrays, etc.
Message points users to the right escape hatch:
- var(--sumi-*) for CSS contexts (JSX style/className, template literals)
- import {ColorVizIndigo, ...} from '@veza/design-system/tokens-generated' for
canvas/runtime contexts where var() can't resolve.
Single source of truth: packages/design-system/tokens/primitive/color.json.
Severity: warn (not error) — gives a smooth migration ramp; can be flipped to
error in a future sprint once the 3 PieChart pigment TODOs (sakura, terminal,
magenta) are canonized in tokens.
The rule will catch any new hex regression at lint time, completing the
"single source of truth" guarantee started by Style Dictionary in Sprint 2.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
b4710909c0