Merge DS3 (design): the color contract — one meaning, enforced by tests
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> # Conflicts: # web/src/components/vyndr/GradeResultCard.tsx
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
// DS3 — THE COLOR CONTRACT (DESIGN-SPEC Part 1).
|
||||
// The contract is enforced as failing tests: green means ONE thing (edge),
|
||||
// edge/CLV is colored by SIGN, grades by TIER, glow is A/A+ only, and NO
|
||||
// archetype hue may dilute the signal green. Extends the QA.20-22 discipline.
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const WEB = path.join(__dirname, '..', '..', 'web', 'src');
|
||||
const read = (rel) => fs.readFileSync(path.join(WEB, rel), 'utf8');
|
||||
|
||||
const cc = require('../../web/src/lib/colorContract');
|
||||
const tokens = require('../../web/src/lib/vyndrTokens');
|
||||
const arch = require('../../web/src/lib/archetypes');
|
||||
const svc = require('../../src/services/archetypeService');
|
||||
|
||||
describe('colorContract.edgeColor — edge/CLV/delta colored by SIGN (#3)', () => {
|
||||
it('positive edge is signal-green', () => {
|
||||
expect(cc.edgeColor(6.2)).toBe('var(--g-a)');
|
||||
expect(cc.edgeColor('12')).toBe('var(--g-a)');
|
||||
});
|
||||
it('NEGATIVE edge is muted red — a -33.3% edge NEVER renders green', () => {
|
||||
expect(cc.edgeColor(-33.3)).toBe('var(--miss)');
|
||||
expect(cc.edgeColor(-0.1)).toBe('var(--miss)');
|
||||
expect(cc.edgeColor('-5')).toBe('var(--miss)');
|
||||
expect(cc.edgeColor(-33.3)).not.toBe('var(--g-a)');
|
||||
});
|
||||
it('zero / null / NaN is NO edge → neutral (never a fake green)', () => {
|
||||
expect(cc.edgeColor(0)).toBe('var(--text-2)');
|
||||
expect(cc.edgeColor(null)).toBe('var(--text-2)');
|
||||
expect(cc.edgeColor(undefined)).toBe('var(--text-2)');
|
||||
expect(cc.edgeColor('n/a')).toBe('var(--text-2)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('colorContract.gradeTierColor — grades colored by TIER', () => {
|
||||
it('A/A+ green, B blue, C amber, D/F red', () => {
|
||||
expect(cc.gradeTierColor('A+')).toBe('var(--g-ap)');
|
||||
expect(cc.gradeTierColor('A')).toBe('var(--g-a)');
|
||||
expect(cc.gradeTierColor('A-')).toBe('var(--g-a)');
|
||||
expect(cc.gradeTierColor('B')).toBe('var(--g-b)');
|
||||
expect(cc.gradeTierColor('C')).toBe('var(--g-c)');
|
||||
expect(cc.gradeTierColor('D')).toBe('var(--g-d)');
|
||||
expect(cc.gradeTierColor('F')).toBe('var(--g-d)');
|
||||
});
|
||||
it('is case/whitespace tolerant, unknown → neutral', () => {
|
||||
expect(cc.gradeTierColor(' a+ ')).toBe('var(--g-ap)');
|
||||
expect(cc.gradeTierColor('???')).toBe('var(--text-0)');
|
||||
});
|
||||
it('stays in lockstep with vyndrTokens.gradeColor for shared keys', () => {
|
||||
for (const g of ['A+', 'A', 'A-', 'B+', 'B', 'B-', 'C', 'D']) {
|
||||
expect(cc.gradeTierColor(g)).toBe(tokens.gradeColor(g));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('colorContract.gradeGlows — GLOW = A/A+ ONLY (#4)', () => {
|
||||
it('true for A and A+ only', () => {
|
||||
expect(cc.gradeGlows('A+')).toBe(true);
|
||||
expect(cc.gradeGlows('A')).toBe(true);
|
||||
});
|
||||
it('false for every non-A tier — a glowing C devalues the cue', () => {
|
||||
for (const g of ['A-', 'B+', 'B', 'B-', 'C', 'D', 'F', '', null, undefined]) {
|
||||
expect(cc.gradeGlows(g)).toBe(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('colorContract.deltaE / isSignalGreen — perceptual gate', () => {
|
||||
it('deltaE of a color with itself is 0', () => {
|
||||
expect(cc.deltaE('#00D4A0', '#00D4A0')).toBeCloseTo(0, 5);
|
||||
});
|
||||
it('flags the signal green itself and near-clones', () => {
|
||||
expect(cc.isSignalGreen('#00D4A0')).toBe(true);
|
||||
expect(cc.isSignalGreen('#34D399')).toBe(true); // the old MIRROR green
|
||||
});
|
||||
it('clears clearly-different hues (amber, blue, red)', () => {
|
||||
expect(cc.isSignalGreen('#FFB347')).toBe(false);
|
||||
expect(cc.isSignalGreen('#4A9EFF')).toBe(false);
|
||||
expect(cc.isSignalGreen('#FF5252')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ARCHETYPE DEDUP — no archetype hue dilutes the signal green (#15,§5)', () => {
|
||||
it('every FRONTEND archetype color clears the signal-green ΔE gate', () => {
|
||||
const offenders = [];
|
||||
for (const [name, info] of Object.entries(arch.ARCHETYPE_MAP)) {
|
||||
if (cc.isSignalGreen(info.c)) offenders.push(`${name} ${info.c} (ΔE ${cc.deltaE(info.c, cc.SIGNAL_GREEN).toFixed(1)})`);
|
||||
}
|
||||
expect(offenders).toEqual([]);
|
||||
});
|
||||
it('every BACKEND archetype color clears the gate too', () => {
|
||||
const offenders = [];
|
||||
for (const [name, a] of Object.entries(svc.ARCHETYPES)) {
|
||||
if (cc.isSignalGreen(a.color)) offenders.push(`${name} ${a.color}`);
|
||||
}
|
||||
expect(offenders).toEqual([]);
|
||||
});
|
||||
it('NO archetype is the literal signal green #00D4A0 (case-insensitive)', () => {
|
||||
const hits = Object.values(arch.ARCHETYPE_MAP).map((i) => i.c.toUpperCase()).filter((c) => c === '#00D4A0');
|
||||
expect(hits).toEqual([]);
|
||||
});
|
||||
it('frontend + backend colors still agree after the shift', () => {
|
||||
for (const [name, a] of Object.entries(svc.ARCHETYPES)) {
|
||||
expect(arch.archetypeColor(name)).toBe(a.color);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---- SOURCE-GREP VIOLATION LOCKS -------------------------------------------
|
||||
// These fail if the ad-hoc green-on-negative / non-A-glow patterns creep back.
|
||||
|
||||
describe('GradeResultCard.tsx — edge by sign, glow by tier', () => {
|
||||
const src = read('components/vyndr/GradeResultCard.tsx');
|
||||
it('routes edge coloring through edgeColor (never a hardcoded green on edge)', () => {
|
||||
expect(src).toContain('import { edgeColor, gradeGlows }');
|
||||
expect(src).toContain('color: edgeColor(d.edge)');
|
||||
expect(src).toContain('edgeColor(d.edge) : ');
|
||||
});
|
||||
it('does NOT color an edge figure unconditionally green', () => {
|
||||
// the old bug: a green span wrapping the edge %, agnostic to sign
|
||||
expect(src).not.toMatch(/color: 'var\(--g-a\)' \}\}>\{d\.edge/);
|
||||
expect(src).not.toMatch(/d\.edge != null \? 'var\(--g-a\)'/);
|
||||
});
|
||||
it('gates the grade-hero glow (textShadow) to A/A+ via gradeGlows', () => {
|
||||
expect(src).toContain('gradeGlows(d.grade) ?');
|
||||
// the ungated always-on glow must be gone
|
||||
expect(src).not.toMatch(/textShadow: `0 0 28px \$\{hex\}aa, 0 0 60px \$\{hex\}55`,/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('GradeBadge.tsx — glow gated to A-tier', () => {
|
||||
const src = read('components/vyndr/GradeBadge.tsx');
|
||||
it('boxShadow glow only when glow && isA (A/A+)', () => {
|
||||
expect(src).toContain("const isA = grade === 'A+' || grade === 'A'");
|
||||
expect(src).toMatch(/boxShadow: glow && isA \?/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('LiveHeroProp.tsx — edge tone is sign-driven', () => {
|
||||
const src = read('components/LiveHeroProp.tsx');
|
||||
it('negative edge maps to muted red, positive to green', () => {
|
||||
expect(src).toMatch(/edge > 0 \? 'positive' : edge < 0 \? 'negative'/);
|
||||
expect(src).toContain("tone === 'negative' ? 'var(--miss)'");
|
||||
});
|
||||
});
|
||||
|
||||
describe('VYNDR INTELLIGENCE panel — de-flooded (#15)', () => {
|
||||
const src = read('components/vyndr/GradeResultCard.tsx');
|
||||
it('the panel border is a neutral token, not a green wash', () => {
|
||||
expect(src).not.toContain("border: '1px solid rgba(0,212,160,0.24)'");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user