/* * ============================================================================ * VELOX · Design System v2 — tokens * ============================================================================ * * Session Phase 1 · 20 avril 2026 * Source de vérité : VELOX-KB/01_Projet/Refonte UI/08 — Design system v2.md * * Coexiste avec `design-tokens.css` v1 pendant toute la Phase 3 (décision DS-1). * Toutes les variables sont préfixées `--v2-*` pour éviter toute collision * avec les tokens v1. * * Règles de nommage (décision Q2 validée 20 avril) : * Style Radix/shadcn → `--v2--<échelle>` * Exemples : --v2-primary-500, --v2-neutral-50, --v2-danger-700 * * Décisions structurantes Phase 1 (figées 20 avril 2026) : * DS-1 : coexistence v1/v2 jusqu'à fin Phase 3 * DS-2 : dark mode reporté post-MVP (thème unique clair) * DS-3 : refonte statuts 3 macro limitée aux tickets + devis * DS-4 : icônes via Lucide Icons (SVG inline) * DS-5 : densité moyenne aérée (row-height 40px, padding cards 16-24px, * corps 14-15px) * * Questions Q1-Q4 tranchées 20 avril : * Q1 : pipeline service = teal (#0F766E famille Tailwind teal-700) * Q2 : nommage Radix/shadcn `--v2--<échelle>` * Q3 : 11 nuances de neutre (0, 50, 100...900, 950) + alias white/black * Q4 : token focus-ring dédié, par défaut = primary-700 (bleu foncé * CACOMIAF, contraste ~11:1 sur fond blanc). L'accent jaune n'est * PAS un défaut sûr (contraste ~1.4:1). Override explicite vers * l'accent requis pour les surfaces sombres. Détail §11. * * Ce fichier ne contient QUE des tokens. Aucun sélecteur composant. * Les composants atomiques arriveront en session 2 (`components-v2.css`). * ============================================================================ */ :root { /* ========================================================================== * 1. PALETTE — couleurs primaires CACOMIAF * ========================================================================== */ /* --- Primary — bleu CACOMIAF (#053D76 = primary-700) --- * Identité officielle. primary-700 correspond à la couleur historique v1 * (`--blue: #053D76`). primary-600 reprend le hover v1 (`--blue2: #07519e`). * primary-900 reprend le bleu profond v1 (`--blue3: #031f3d`). */ --v2-primary-50: #EFF4FA; --v2-primary-100: #D6E2F0; --v2-primary-200: #ADC5E0; --v2-primary-300: #7FA3CC; --v2-primary-400: #4F7DB6; --v2-primary-500: #2760A0; --v2-primary-600: #07519E; --v2-primary-700: #053D76; --v2-primary-800: #042D58; --v2-primary-900: #031F3D; /* --- Accent — jaune CACOMIAF (#F8DB01 = accent-500) --- * Identité officielle. accent-500 = `--yellow` v1. accent-600 reprend le * hover v1 (`--yellow2: #dfc400`). */ --v2-accent-50: #FFFCE6; --v2-accent-100: #FFF6B3; --v2-accent-200: #FFED66; --v2-accent-300: #FCE333; --v2-accent-400: #FADB0D; --v2-accent-500: #F8DB01; --v2-accent-600: #DFC400; --v2-accent-700: #B09A00; --v2-accent-800: #826F00; --v2-accent-900: #554700; /* --- Pipeline service (teal) --- * Décision Q1 20 avril : pipeline service v66 différencié du pipeline * commercial (primary). Teal = famille cyan-bleue, cousin du bleu CACOMIAF, * standard industrie pour modules service/support (Salesforce cases, * Intercom support). Distinct du warning/SLA orange, distinct de l'accent * jaune. Valeurs Tailwind teal. */ --v2-service-50: #F0FDFA; --v2-service-100: #CCFBF1; --v2-service-200: #99F6E4; --v2-service-300: #5EEAD4; --v2-service-400: #2DD4BF; --v2-service-500: #14B8A6; --v2-service-600: #0D9488; --v2-service-700: #0F766E; /* teinte de référence pipeline service */ --v2-service-800: #115E59; --v2-service-900: #134E4A; /* ========================================================================== * 2. PALETTE — neutres (11 niveaux, décision Q3) * ========================================================================== */ /* --- Neutral — échelle slate (soupçon bleu, cohérent identité CACOMIAF) --- * Usage : fond page, fond card, bordures, dividers, textes secondaires * /tertiaires. Valeurs Tailwind slate pour cohérence standard. */ --v2-neutral-0: #FFFFFF; --v2-neutral-50: #F8FAFC; --v2-neutral-100: #F1F5F9; --v2-neutral-200: #E2E8F0; --v2-neutral-300: #CBD5E1; --v2-neutral-400: #94A3B8; --v2-neutral-500: #64748B; --v2-neutral-600: #475569; --v2-neutral-700: #334155; --v2-neutral-800: #1E293B; --v2-neutral-900: #0F172A; --v2-neutral-950: #020617; /* Alias blanc / noir purs (usage parcimonieux, préférer neutral-0 / 950) */ --v2-white: #FFFFFF; --v2-black: #000000; /* ========================================================================== * 3. PALETTE — sémantique (success / warning / danger / info) * ========================================================================== */ /* --- Success (emerald) — états positifs, CA confirmé, statut Terminé --- */ --v2-success-50: #ECFDF5; --v2-success-100: #D1FAE5; --v2-success-200: #A7F3D0; --v2-success-500: #10B981; --v2-success-600: #059669; --v2-success-700: #047857; /* --- Warning (amber) — SLA en tension, devis qui attend, Action requise --- */ --v2-warning-50: #FFFBEB; --v2-warning-100: #FEF3C7; --v2-warning-200: #FDE68A; --v2-warning-500: #F59E0B; --v2-warning-600: #D97706; --v2-warning-700: #B45309; /* --- Danger (red) — erreurs, pertes, SLA dépassé, bloquants --- */ --v2-danger-50: #FEF2F2; --v2-danger-100: #FEE2E2; --v2-danger-200: #FECACA; --v2-danger-500: #EF4444; --v2-danger-600: #DC2626; --v2-danger-700: #B91C1C; /* --- Info (sky) — informations neutres, statut En cours, messagerie --- */ --v2-info-50: #F0F9FF; --v2-info-100: #E0F2FE; --v2-info-200: #BAE6FD; --v2-info-500: #0EA5E9; --v2-info-600: #0284C7; --v2-info-700: #0369A1; /* ========================================================================== * 4. TOKENS D'ÉTAT SPÉCIFIQUES * ========================================================================== */ /* --- SLA (superviseur, décision persona 04) --- * 3 états : dans les temps / en tension / dépassé. * Mapping direct sur success/warning/danger. Ces tokens existent pour que * les composants `sla-indicator` (si go produit item #8) référencent une * sémantique SLA, pas une couleur générique. */ --v2-sla-ok: var(--v2-success-500); --v2-sla-attention: var(--v2-warning-500); --v2-sla-urgent: var(--v2-danger-500); /* Fonds compagnons pour badges SLA (utilisation : border-left + bg-50) */ --v2-sla-ok-bg: var(--v2-success-50); --v2-sla-attention-bg: var(--v2-warning-50); --v2-sla-urgent-bg: var(--v2-danger-50); /* --- Santé financière (portail client, décision persona 06) --- * 3 états : solde/encours sain / tendu / dépassement plafond. */ --v2-sante-finance-ok: var(--v2-success-500); --v2-sante-finance-tendue: var(--v2-warning-500); --v2-sante-finance-depassement: var(--v2-danger-500); --v2-sante-finance-ok-bg: var(--v2-success-50); --v2-sante-finance-tendue-bg: var(--v2-warning-50); --v2-sante-finance-depassement-bg: var(--v2-danger-50); /* --- Santé véhicule / échéances (portail flotte enrichie, persona 06) --- * 5 niveaux gradués selon l'échéance. OK (>J-30) / J-30 / J-15 / J-7 / * expiré. Progression visuelle : vert → ambré → orange → rouge clair → * rouge foncé. */ --v2-sante-vehicule-ok: var(--v2-success-500); --v2-sante-vehicule-j30: var(--v2-warning-500); --v2-sante-vehicule-j15: var(--v2-warning-600); --v2-sante-vehicule-j7: var(--v2-danger-500); --v2-sante-vehicule-expire: var(--v2-danger-700); /* --- Statuts macro (décision DS-3 : tickets + devis uniquement) --- * 3 catégories transverses qui remplacent l'affichage statut détaillé sur * les listes tickets et devis. Backend inchangé ; le statut précis reste * accessible au survol / clic / page détail. */ --v2-statut-en-cours: var(--v2-info-500); --v2-statut-action-requise: var(--v2-warning-500); --v2-statut-termine: var(--v2-success-500); /* Fonds compagnons (badges macro) */ --v2-statut-en-cours-bg: var(--v2-info-50); --v2-statut-action-requise-bg: var(--v2-warning-50); --v2-statut-termine-bg: var(--v2-success-50); /* ========================================================================== * 5. TYPOGRAPHIE * ========================================================================== */ /* --- Familles (héritage v54 préservé) --- * `--v2-font-display` : titres, KPI, libellés accent, uppercase. * `--v2-font-body` : tous textes courants, libellés, valeurs, boutons. * `--v2-font-mono` : code inline, identifiants techniques (rare). */ --v2-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; --v2-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --v2-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace; /* --- Échelle taille (densité DS-5 aérée : corps 14-15px) --- */ --v2-text-xs: 11px; /* caption, métadonnées, timestamps secondaires */ --v2-text-sm: 13px; /* texte dense (tableaux compacts, pills) */ --v2-text-base: 14px; /* body par défaut */ --v2-text-md: 15px; /* body confortable (fiches, formulaires) */ --v2-text-lg: 17px; /* sous-titres, libellés accentués */ --v2-text-xl: 20px; /* titres de section */ --v2-text-2xl: 24px; /* titres de carte, titres page secondaires */ --v2-text-3xl: 30px; /* H1 page */ --v2-text-4xl: 38px; /* KPI dashboards (Barlow Condensed) */ /* --- Poids --- */ --v2-weight-regular: 400; --v2-weight-medium: 500; --v2-weight-semibold: 600; --v2-weight-bold: 700; --v2-weight-extrabold: 800; /* --- Hauteur de ligne --- */ --v2-leading-tight: 1.2; /* titres, KPI */ --v2-leading-base: 1.5; /* corps */ --v2-leading-relaxed: 1.7; /* textes longs, descriptions */ /* --- Espacement de lettres (rare, pour boutons uppercase) --- */ --v2-tracking-normal: 0; --v2-tracking-wide: 0.02em; --v2-tracking-wider: 0.05em; /* CTA uppercase Barlow Condensed */ /* ========================================================================== * 6. SPACING (multiples de 4px, convention Tailwind) * ========================================================================== */ /* Convention : `--v2-spacing-` = n × 4px. * Spacing 5 sauté volontairement (pas de 20px). L'échelle est stricte pour * éviter la dérive. Ajouter une valeur = décision explicite DS. */ --v2-spacing-0: 0; --v2-spacing-1: 4px; --v2-spacing-2: 8px; --v2-spacing-3: 12px; --v2-spacing-4: 16px; --v2-spacing-6: 24px; --v2-spacing-8: 32px; --v2-spacing-12: 48px; --v2-spacing-16: 64px; /* ========================================================================== * 7. RADIUS * ========================================================================== */ --v2-radius-none: 0; --v2-radius-sm: 4px; /* inputs, petits badges */ --v2-radius-md: 8px; /* boutons, cards, champs */ --v2-radius-lg: 12px; /* modals, panels, cards hero */ --v2-radius-xl: 16px; /* overlays principaux */ --v2-radius-full: 9999px; /* pills, avatars, toggles */ /* ========================================================================== * 8. SHADOWS (5 niveaux d'élévation) * ========================================================================== */ /* Valeurs Tailwind pour cohérence standard. À utiliser parcimonieusement * pour renforcer la hiérarchie visuelle, pas pour décorer. */ --v2-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --v2-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); --v2-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); --v2-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10); --v2-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* ========================================================================== * 9. TRANSITIONS * ========================================================================== */ /* Courbe unique pour toute l'UI (ease-out — sensation de "pose" à l'arrivée, * adaptée à un CRM pro non-ludique). */ --v2-ease-out: cubic-bezier(0, 0, 0.2, 1); /* Durées (règle [[08]] §6) */ --v2-transition-fast: 100ms var(--v2-ease-out); /* hover */ --v2-transition-base: 200ms var(--v2-ease-out); /* changement d'état */ --v2-transition-slow: 300ms var(--v2-ease-out); /* apparition panel/modal */ /* ========================================================================== * 10. Z-INDEX * ========================================================================== */ /* Échelle stricte — aucune valeur hors de ces tokens ne doit apparaître dans * les composants. Évite la guerre du z-index:99999. */ --v2-z-base: 0; --v2-z-sticky: 100; /* bandeau tiers, header sticky */ --v2-z-dropdown: 200; /* select ouverts, autocomplétion */ --v2-z-overlay: 300; /* voile sombre derrière modal/panel */ --v2-z-modal: 400; /* modals, slide-in panels */ --v2-z-toast: 500; /* notifications transitoires */ --v2-z-command-palette: 600; /* ⌘K (au-dessus de tout) */ /* ========================================================================== * 11. FOCUS (accessibilité clavier, décision Q4) * ========================================================================== */ /* Token dédié. La valeur par défaut est le bleu foncé CACOMIAF * (`primary-700` = #053D76), qui offre un contraste ~11:1 sur fond blanc * et reste dans l'identité CACOMIAF. Ce choix garantit la visibilité du * focus sur les surfaces claires (la grande majorité de l'UI). * * Référentiel accessibilité : WCAG 2.2 Focus Appearance (SC 2.4.11 / * 2.4.13) — demande un contraste ≥ 3:1 entre l'état focus et l'état * non-focus adjacent, et une zone focus visible. Notre défaut dépasse * largement ce seuil sur fond clair. * * Override contextuel obligatoire : sur les surfaces sombres (boutons * primary-700 remplis, panneaux header bleus, sidebar), le bleu du focus * serait invisible. Dans ces contextes, surcharger via classe utilitaire * ou variable scopée : * - `--v2-focus-ring: var(--v2-accent-500)` (jaune CACOMIAF, contraste * ≥ 7:1 sur primary-700) * - ou `--v2-focus-ring: var(--v2-white)` (contraste maximal, moins * identitaire) * * L'accent jaune n'est PAS une valeur par défaut sûre : contraste ~1.4:1 * sur fond blanc, invisible sur surfaces claires. */ --v2-focus-ring: var(--v2-primary-700); --v2-focus-ring-width: 2px; --v2-focus-ring-offset: 2px; /* ========================================================================== * 12. ALIAS SÉMANTIQUES (raccourcis pour composants) * ========================================================================== * Ces alias pointent vers des tokens atomiques ci-dessus. Ils existent pour * que les composants expriment l'intention (ex: "texte secondaire") au lieu * de référencer une échelle (ex: `neutral-600`). Si on ajuste la hiérarchie * des gris plus tard, on change l'alias, pas les composants. */ /* Textes */ --v2-text-color-primary: var(--v2-neutral-900); --v2-text-color-secondary: var(--v2-neutral-600); --v2-text-color-tertiary: var(--v2-neutral-500); --v2-text-color-muted: var(--v2-neutral-400); --v2-text-color-inverse: var(--v2-white); --v2-text-color-link: var(--v2-primary-600); --v2-text-color-danger: var(--v2-danger-600); /* Fonds */ --v2-bg-page: var(--v2-neutral-50); --v2-bg-surface: var(--v2-white); --v2-bg-surface-alt: var(--v2-neutral-50); --v2-bg-surface-muted: var(--v2-neutral-100); --v2-bg-hover: var(--v2-neutral-100); --v2-bg-selected: var(--v2-primary-50); /* Bordures */ --v2-border-subtle: var(--v2-neutral-100); --v2-border-default: var(--v2-neutral-200); --v2-border-strong: var(--v2-neutral-300); --v2-border-focus: var(--v2-focus-ring); /* ========================================================================== * 13. BREAKPOINTS (référence documentaire) * ========================================================================== * Les media queries CSS natives ne peuvent pas lire les variables CSS. Les * valeurs ci-dessous sont la convention VELOX v2 à respecter dans les * composants et dans les pages. Ne pas créer de breakpoints custom. * * mobile : < 640px (portail client mobile, responsive minimal) * tablet : 640-1023px (portail client tablette) * desktop : >= 1024px (back-office, usage principal — DS-5) * wide : >= 1280px (dashboards confort, cockpit panels dockés) * * Règle : VELOX est desktop-first (décision persona commercial). Le portail * client est responsive mobile-first. * ========================================================================== */ /* ========================================================================== * 14. OVERLAYS (promus Session 4 · 21 avril 2026) * ========================================================================== * Ces 2 tokens étaient déclarés localement dans `overlays-v2.css` Session 3 * (commit `8cf52aa`). Promus ici (Session 4) après validation Codex et usage * confirmé : `--v2-overlay-hover` >= 5 usages (composants de fermeture/dismiss), * `--v2-overlay-backdrop` partagé par 4 overlays — modals, slide-in overlay, * drawer, command palette. * * Les 2 tokens `--v2-on-dark-*` restent locaux à `overlays-v2.css` jusqu'à * Phase 3 (usage limité actuel au seul tier-banner). */ /* Hover rémanent sur boutons de fermeture / dismiss. Teinte neutre 8% * lisible sur fond blanc, fond clair ET fond coloré (pills, toasts). */ --v2-overlay-hover: rgb(0 0 0 / 0.08); /* Voile sombre derrière les 4 overlays qui en ont besoin : modals, * slide-in overlay, drawer, command palette. Donne la profondeur et * capte le clic de fermeture. */ --v2-overlay-backdrop: rgb(15 23 42 / 0.5); }