builtbykev
e0a26a8055
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>
59 lines
2.1 KiB
JavaScript
59 lines
2.1 KiB
JavaScript
/* ============================================================
|
||
VYNDR 2.0 — design-system token helpers (§5).
|
||
Plain CommonJS so the .tsx components import it AND the Jest
|
||
suite can require it directly (no TS/Babel transform needed).
|
||
Every value resolves to a CSS custom property from globals.css.
|
||
============================================================ */
|
||
|
||
/* Grade → CSS variable (the product's core color language). */
|
||
const GRADE_COLORS = {
|
||
'A+': 'var(--g-ap)', A: 'var(--g-a)', 'A-': 'var(--g-a)',
|
||
'B+': 'var(--g-b)', B: 'var(--g-b)', 'B-': 'var(--g-b)',
|
||
C: 'var(--g-c)', D: 'var(--g-d)',
|
||
};
|
||
|
||
/* 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+': '#f0f0f0', B: '#f0f0f0', 'B-': '#f0f0f0',
|
||
C: '#b8bcc8', D: '#ff4757',
|
||
};
|
||
|
||
/* Sport config map. */
|
||
const SPORT = {
|
||
nba: { label: 'NBA', color: 'var(--s-nba)', hex: '#e94b3c' },
|
||
mlb: { label: 'MLB', color: 'var(--s-mlb)', hex: '#1e90ff' },
|
||
wnba: { label: 'WNBA', color: 'var(--s-wnba)', hex: '#f7944a' },
|
||
soccer: { label: 'SOC', color: 'var(--s-soccer)', hex: '#3ddc84' },
|
||
// Wave 6 — combat: the #D4AF37 championship-gold token (matches
|
||
// src/services/shareCards/tokens.js + config/sports.js mma color).
|
||
mma: { label: 'MMA', color: 'var(--s-mma, #d4af37)', hex: '#d4af37' },
|
||
};
|
||
|
||
/* GradeBadge size variants — hero stays 80–120px (§5: grade letter is
|
||
always the largest, first-read element on a card). Numbers pass through. */
|
||
const GRADE_BADGE_SIZES = { sm: 16, md: 30, lg: 48, hero: 100 };
|
||
|
||
function gradeColor(g) {
|
||
return GRADE_COLORS[g] || 'var(--text-0)';
|
||
}
|
||
function gradeHex(g) {
|
||
return GRADE_HEX[g] || '#f0f0f0';
|
||
}
|
||
function gradeBadgeSize(size) {
|
||
if (typeof size === 'number') return size;
|
||
return GRADE_BADGE_SIZES[size] || GRADE_BADGE_SIZES.md;
|
||
}
|
||
|
||
module.exports = {
|
||
GRADE_COLORS,
|
||
GRADE_HEX,
|
||
SPORT,
|
||
GRADE_BADGE_SIZES,
|
||
gradeColor,
|
||
gradeHex,
|
||
gradeBadgeSize,
|
||
};
|