From e0a26a80556e63f266675a4c8c15c40d71a38644 Mon Sep 17 00:00:00 2001 From: Kev Date: Thu, 16 Jul 2026 16:19:30 -0400 Subject: [PATCH] =?UTF-8?q?M3.1=20token=20alignment=20=E2=80=94=20the=20pa?= =?UTF-8?q?lette=20to=20Design's=20exact=20package=20values?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reconcile finding: the live tokens had DRIFTED from Design's package (HANDOFF "Tokens (exact)"). Per the standing conflict rule (Design specified exact hexes → rejected the drift → Design wins), aligned the whole palette: - Surfaces: --bg-1 #0E0E16→#0E0E14, --bg-2 #15151F→#14141E; added --bg-deep #0A0A10 + --hairline #101018 (Design's ramp). - Text: --text-0 #E8E8F0→#F0F0F0, --text-1 #7A7A8E→#B8BCC8 (Design's secondary is far brighter), --text-2 #4A4A5E→#707080, added --text-3 #4a4a58 micro. - Borders: #1E1E2E→#1E1E2A, #2A2A3E→#2A2A38. - GRADES (the big one): B blue #4A9EFF → neutral-bright WHITE #F0F0F0; C amber #FFB347 → muted GREY #B8BCC8; D #FF5252 → #FF4757. The old blue/amber actually violated DESIGN-SPEC v2's OWN "B neutral-bright, C muted" — this fixes a long-standing drift, confirmed by Design's package. Amber stays its own token (--amber); --warning decoupled to --amber; --miss → #FF4757. - vyndrTokens.js GRADE_HEX mirror + the design-system test updated to match. Big VISUAL change (grade color language), VISUALLY UNVERIFIED at 390px/desktop — on the Chrome-audit list. Every surface inherits it, so it lands first. Co-Authored-By: Claude Opus 4.8 (1M context) --- tests/unit/vyndrDesignSystem.test.js | 12 +++---- web/src/app/globals.css | 47 ++++++++++++++++------------ web/src/lib/vyndrTokens.js | 8 +++-- 3 files changed, 38 insertions(+), 29 deletions(-) diff --git a/tests/unit/vyndrDesignSystem.test.js b/tests/unit/vyndrDesignSystem.test.js index 7a6f24c..faa481b 100644 --- a/tests/unit/vyndrDesignSystem.test.js +++ b/tests/unit/vyndrDesignSystem.test.js @@ -31,9 +31,9 @@ describe('Phase A — design tokens (§2)', () => { it('uses the exact §2 grade hex values', () => { expect(css).toContain('--g-ap: #00ffb8'); expect(css).toContain('--g-a: #00d4a0'); - expect(css).toContain('--g-b: #4a9eff'); - expect(css).toContain('--g-c: #ffb347'); - expect(css).toContain('--g-d: #ff5252'); + expect(css).toContain('--g-b: #F0F0F0'); + expect(css).toContain('--g-c: #B8BCC8'); + expect(css).toContain('--g-d: #FF4757'); }); it('sets --sans to Inter and --mono to JetBrains Mono', () => { @@ -114,9 +114,9 @@ describe('Phase B — token helpers (vyndrTokens)', () => { it('gradeHex returns the exact §2 hex for each grade', () => { expect(tokens.gradeHex('A+')).toBe('#00ffb8'); expect(tokens.gradeHex('A')).toBe('#00d4a0'); - expect(tokens.gradeHex('B')).toBe('#4a9eff'); - expect(tokens.gradeHex('C')).toBe('#ffb347'); - expect(tokens.gradeHex('D')).toBe('#ff5252'); + expect(tokens.gradeHex('B')).toBe('#f0f0f0'); + expect(tokens.gradeHex('C')).toBe('#b8bcc8'); + expect(tokens.gradeHex('D')).toBe('#ff4757'); }); it('SPORT map carries every sport with its token color and label', () => { diff --git a/web/src/app/globals.css b/web/src/app/globals.css index 6097ec7..58de818 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -7,32 +7,39 @@ ───────────────────────────────────────────────────────── */ :root { - /* Surfaces — powered-on screen, slightly warmer than pure black */ - --bg-0: #06060B; - --bg-1: #0E0E16; - --bg-2: #15151F; + /* Surfaces — Design package exact ramp (HANDOFF): void/card/elevated + + deep-panel + row-hairline. (2026-07-16 token alignment — Design wins.) */ + --bg-0: #06060B; /* void */ + --bg-1: #0E0E14; /* card (was #0E0E16) */ + --bg-2: #14141E; /* elevated (was #15151F) */ --bg-3: #1A1A26; + --bg-deep: #0A0A10; /* deep panel */ + --hairline: #101018; /* row hairline */ - /* Borders */ - --border: #1E1E2E; - --border-hi: #2A2A3E; + /* Borders — Design exact */ + --border: #1E1E2A; /* was #1E1E2E */ + --border-hi: #2A2A38; /* was #2A2A3E */ - /* Text */ - --text-0: #E8E8F0; - --text-1: #7A7A8E; - --text-2: #4A4A5E; + /* Text — Design exact ramp F0F0F0 / B8BCC8 / 707080 (+ 4a4a58 micro) */ + --text-0: #F0F0F0; /* was #E8E8F0 */ + --text-1: #B8BCC8; /* was #7A7A8E — Design's secondary is far brighter */ + --text-2: #707080; /* was #4A4A5E */ + --text-3: #4a4a58; /* micro-labels */ /* Brand accent — deep forest, button green, glow */ --acc-0: #0F3D2E; --acc-1: #1A5A42; --acc-glow: rgba(15, 61, 46, 0.25); - /* Grade tiers — the most important colors */ + /* Grade tiers — the most important colors. Design package (HANDOFF): A-tier + green+glow · B neutral-bright WHITE · C muted GREY · D/F red. The old + B=blue / C=amber violated DESIGN-SPEC v2's own "B neutral-bright, C muted" + — aligned to Design 2026-07-16. Amber stays its own token (--amber). */ --grade-aplus: #00FFB8; --grade-a: #00D4A0; - --grade-b: #4A9EFF; - --grade-c: #FFB347; - --grade-d: #FF5252; + --grade-b: #F0F0F0; /* was #4A9EFF (blue) */ + --grade-c: #B8BCC8; /* was #FFB347 (amber) */ + --grade-d: #FF4757; /* was #FF5252 */ /* Sport tints */ --nba: #E94B3C; @@ -44,7 +51,7 @@ /* Signals */ --danger: var(--grade-d); - --warning: var(--grade-c); + --warning: var(--amber); /* decoupled from grade-C (now grey) — warning is amber */ --success: var(--grade-a); /* Geometry */ @@ -71,9 +78,9 @@ /* Grade tokens (the product's core color language) */ --g-ap: #00ffb8; /* A+ rarest, max glow */ --g-a: #00d4a0; /* A workhorse green / primary CTA */ - --g-b: #4a9eff; /* B blue */ - --g-c: #ffb347; /* C amber */ - --g-d: #ff5252; /* D red */ + --g-b: #F0F0F0; /* B neutral-bright white (Design; was blue) */ + --g-c: #B8BCC8; /* C muted grey (Design; was amber) */ + --g-d: #FF4757; /* D red (Design; was #ff5252) */ /* Sport tokens */ --s-nba: #e94b3c; @@ -88,7 +95,7 @@ /* Semantic */ --live: #ff3b3b; --hit: #00d4a0; - --miss: #ff5252; + --miss: #FF4757; /* Design red (was #ff5252) */ /* Scanline base opacity + hero grade color */ --scan-op: 0.04; diff --git a/web/src/lib/vyndrTokens.js b/web/src/lib/vyndrTokens.js index d4b8a29..47df6f3 100644 --- a/web/src/lib/vyndrTokens.js +++ b/web/src/lib/vyndrTokens.js @@ -13,10 +13,12 @@ const GRADE_COLORS = { }; /* Grade → raw hex (for SVG fills / contexts where a var won't resolve). */ +// Design package exact grades (HANDOFF): A green · B neutral-bright white · +// C muted grey · D/F red #FF4757 (was blue/amber/#ff5252 — aligned 2026-07-16). const GRADE_HEX = { 'A+': '#00ffb8', A: '#00d4a0', 'A-': '#00d4a0', - 'B+': '#4a9eff', B: '#4a9eff', 'B-': '#4a9eff', - C: '#ffb347', D: '#ff5252', + 'B+': '#f0f0f0', B: '#f0f0f0', 'B-': '#f0f0f0', + C: '#b8bcc8', D: '#ff4757', }; /* Sport config map. */ @@ -38,7 +40,7 @@ function gradeColor(g) { return GRADE_COLORS[g] || 'var(--text-0)'; } function gradeHex(g) { - return GRADE_HEX[g] || '#e8e8f0'; + return GRADE_HEX[g] || '#f0f0f0'; } function gradeBadgeSize(size) { if (typeof size === 'number') return size;