// tokens.jsx — Single source of truth for Van-Away tunnel // Couleurs, typographie, helpers de formatage. // À charger AVANT tout autre script *.jsx du projet. // // Usage : tous les tokens sont exposés sur window, donc accessibles via // window.VA_TEAL, window.fmtPrice, etc. Les screens existants // (configure, booking, options, recap, vehicles) gardent leurs // constantes locales pour l'instant — elles seront migrées au fur et // à mesure (refacto progressive). // ─── Couleurs charte clear ───────────────────────────────────── const VA_TOKENS = { // Brand VA_TEAL: '#11978f', // primaire — accents, icônes, prix, CTA fond VA_TEAL_HOVER: '#1c7d77', // hover des CTA VA_TEAL_LIGHT: '#e7fcfb', // bulles douces, accents VA_TEAL_PALE: '#f4f9ec', // accent vert pâle (rare) // Neutres VA_INK: '#042828', // texte/titre primaire VA_MUTED: '#5B7A82', // texte secondaire VA_CREAM: '#F4F2EC', // fond crème (placeholder, alt) VA_SURFACE: '#FFFFFF', // surface des cards / page VA_BORDER: 'rgba(4,40,40,0.08)', VA_BORDER_STRONG:'rgba(4,40,40,0.14)', // Sémantique VA_DANGER: '#C0392B', VA_SUCCESS: '#11978f', // = teal (pas de vert distinct dans la charte) // Étoiles avis Google VA_STAR: '#F5A623', }; // ─── Typographie ──────────────────────────────────────────────── const VA_FONT = { family: "'Barlow', Helvetica, sans-serif", // Graisses utilisées : 400 / 600 / 700 / 900 uniquement. // À loader dans le : // weights: { regular: 400, semibold: 600, bold: 700, black: 900 }, }; // ─── Layout ──────────────────────────────────────────────────── const VA_LAYOUT = { desktopWidth: 1360, mobileWidth: 390, headerHeight: 56, headerHeightCompact: 36, sidebarWidth: 320, cardRadius: 20, }; // ─── Helpers de formatage ────────────────────────────────────── function fmtPrice(n, dec = 2) { return (n ?? 0).toFixed(dec).replace('.', ',') + ' €'; } function fmtPriceNoDec(n) { return Math.round(n ?? 0).toLocaleString('fr-FR') + ' €'; } function fmtDate(iso, opts = {}) { if (!iso) return ''; const d = new Date(iso); if (isNaN(d)) return ''; const { weekday = 'short', day = '2-digit', month = 'short', year } = opts; return d.toLocaleDateString('fr-FR', { weekday, day, month, ...(year ? { year } : {}) }); } function fmtDateLong(iso) { return fmtDate(iso, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); } function fmtDuration(startIso, endIso) { if (!startIso || !endIso) return ''; const a = new Date(startIso), b = new Date(endIso); const days = Math.max(1, Math.round((b - a) / 86400000)); return days === 1 ? '1 jour' : `${days} jours`; } function daysBetween(startIso, endIso) { if (!startIso || !endIso) return 0; const a = new Date(startIso), b = new Date(endIso); return Math.max(0, Math.round((b - a) / 86400000)); } // ─── Export sur window ───────────────────────────────────────── Object.assign(window, VA_TOKENS, { VA_FONT, VA_LAYOUT, fmtPrice, fmtPriceNoDec, fmtDate, fmtDateLong, fmtDuration, daysBetween, }); // ─── Alias rétro-compat (à retirer en refacto radicale) ──────── // Les screens existants utilisent T_TEAL, B_TEAL, TO_TEAL, R_TEAL. // On expose les mêmes valeurs sous tous ces noms pour faciliter la // future migration (recherche/remplace). Object.assign(window, { // T_ (configure, vehicles) T_TEAL: VA_TOKENS.VA_TEAL, T_TEAL_HV: VA_TOKENS.VA_TEAL_HOVER, T_INK: VA_TOKENS.VA_INK, T_MUTED: VA_TOKENS.VA_MUTED, T_CREAM: VA_TOKENS.VA_CREAM, T_SURFACE: VA_TOKENS.VA_SURFACE, T_BORDER: VA_TOKENS.VA_BORDER, T_BORDER_S: VA_TOKENS.VA_BORDER_STRONG, T_BORDER_STRONG: VA_TOKENS.VA_BORDER_STRONG, T_DANGER: VA_TOKENS.VA_DANGER, T_BG_TEAL: VA_TOKENS.VA_TEAL_LIGHT, });