builtbykev/vyndr
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

M3.1 token alignment — the palette to Design's exact package values

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Kev
2026-07-16 16:19:30 -04:00
parent 63511485ed
commit e0a26a8055
3 changed files with 38 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/vyndrDesignSystem.test.js
+6 -6
View File
@@ -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', () => {