/* * Design tokens — HAROPA PORT, application de suivi du marché 26DNE01. * Source : docs/CHARTE-GRAPHIQUE.md · Règles d'usage : docs/design/DESIGN-SYSTEM.md · ADR 0010. * * Ce fichier est la SEULE source des couleurs, ombres et durées de l'application. Aucun autre * fichier CSS ni gabarit Twig ne doit contenir de littéral de couleur * (contrôlé par tests/UI/DesignTokensTest.php). * * Convention de nommage : noms français de la charte (--color-bleu…), puis rôles * sémantiques en anglais (--color-action, --color-danger…). Les gabarits et app.css * n'utilisent QUE les rôles sémantiques, jamais les noms de charte, sauf graphiques. * * Contrastes calculés (WCAG 2.1, rapport de luminance) : * texte sur blanc : noir 21,00 · bleu 7,02 (OK AA/AAA) * rouge 3,06 · violet 2,97 · orange 2,49 · bleu clair 2,34 * turquoise 2,31 · vert 1,73 · jaune 1,66 => ECHEC AA * => vert, rouge, orange, jaune, violet, bleu clair, turquoise ne servent * JAMAIS de couleur de texte sur fond blanc (la charte l'interdit pour * le vert). Ils servent de fond, de bordure, de pastille ou d'icône, * toujours accompagnés d'un libellé. * texte noir sur fond coloré : vert 12,11 · rouge 6,86 · orange 8,45 · jaune 12,62 * bleu clair 8,97 · turquoise 9,11 · violet 7,07 * texte blanc sur bleu : 7,02 · bleu sur fond teinté bleu 8 % : 6,13 · bleu sur surface-alt : 6,44 * (blanc sur vert 1,73 et blanc sur rouge/orange échouent : ne pas utiliser.) * composants (3:1 requis) : bordure de champ 4,61 · rouge 3,06 OK · orange 2,49 ECHEC * => l'orange n'est jamais le SEUL indice d'un état : toujours un libellé à côté. * * Pas de mode sombre : la charte impose « blanc autour des textes » et ne fournit le * logo que sur fond blanc (ADR 0010). */ :root { /* --- Couleurs principales de la charte [Certain] --- */ --color-noir: #000000; --color-vert: #32E169; --color-bleu: #0037FF; --color-blanc: #FFFFFF; /* fond : « blanc autour des textes » (charte) */ /* --- Couleurs d'accompagnement de la charte [Certain] (parcimonie) --- */ --color-rouge: #FF5A5A; --color-orange: #FF8200; --color-jaune: #FFBE00; --color-violet: #B478FF; --color-bleu-clair: #00B4FF; --color-turquoise: #00BEBE; /* --- Rôles sémantiques (seuls utilisés par app.css et les gabarits) --- */ --color-action: var(--color-bleu); /* action principale, liens */ --color-action-text: var(--color-blanc); /* texte sur bouton d'action (7,02) */ --color-action-hover: var(--color-noir); /* survol d'un bouton principal */ --color-action-soft: color-mix(in srgb, var(--color-bleu) 8%, var(--color-blanc)); /* sélection, survol de ligne */ --color-focus: var(--color-bleu); /* anneau de focus clavier (7,02 sur blanc) */ --color-success: var(--color-vert); /* conforme, validé : fond/bordure/icône */ --color-warning: var(--color-orange); /* vigilance (seuil paramétré, ex. plafond 80 %) */ --color-danger: var(--color-rouge); /* bloquant, dépassement, action destructrice */ --color-error: var(--color-danger); /* alias historique (formulaires) */ --color-info: var(--color-bleu-clair); /* information neutre, échéance à venir */ --color-on-status: var(--color-noir); /* texte sur fond success/warning/danger/info */ /* Fonds teintés des messages d'état (noir dessus >= 17:1) */ --color-success-bg: color-mix(in srgb, var(--color-vert) 15%, var(--color-blanc)); --color-warning-bg: color-mix(in srgb, var(--color-orange) 15%, var(--color-blanc)); --color-danger-bg: color-mix(in srgb, var(--color-rouge) 15%, var(--color-blanc)); --color-error-bg: var(--color-danger-bg); --color-info-bg: color-mix(in srgb, var(--color-bleu-clair) 12%, var(--color-blanc)); /* Séries de graphiques uniquement (ordre imposé : bleu d'abord, vert/rouge/orange réservés aux états) */ --color-series-1: var(--color-bleu); --color-series-2: var(--color-jaune); --color-series-3: var(--color-violet); --color-series-4: var(--color-turquoise); --color-series-5: var(--color-bleu-clair); /* * Rampe séquentielle (carte thermique, T5.2) : bleu de la charte mêlé au blanc. * Texte noir sur 1 à 4 (17,04 · 13,39 · 8,94 · 5,80), texte blanc sur 5 (7,02). */ --color-heat-0: var(--color-surface-alt); --color-heat-1: color-mix(in srgb, var(--color-bleu) 12%, var(--color-blanc)); --color-heat-2: color-mix(in srgb, var(--color-bleu) 25%, var(--color-blanc)); --color-heat-3: color-mix(in srgb, var(--color-bleu) 45%, var(--color-blanc)); --color-heat-4: color-mix(in srgb, var(--color-bleu) 65%, var(--color-blanc)); --color-heat-5: var(--color-bleu); --color-on-heat-strong: var(--color-blanc); /* * Neutres : ne figurent pas dans la charte, donc DÉRIVÉS du noir et du blanc * par mélange (pas de nouvel hexadécimal). Rapports mesurés sur blanc : * texte atténué 8,45 · bordure de champ 4,61 (>= 3:1 requis pour les * composants d'interface). */ --color-text: var(--color-noir); --color-text-muted: color-mix(in srgb, var(--color-noir) 70%, var(--color-blanc)); --color-surface: var(--color-blanc); --color-surface-alt: color-mix(in srgb, var(--color-noir) 4%, var(--color-blanc)); --color-surface-sunken: color-mix(in srgb, var(--color-noir) 7%, var(--color-blanc)); --color-border: color-mix(in srgb, var(--color-noir) 15%, var(--color-blanc)); --color-border-strong: color-mix(in srgb, var(--color-noir) 54%, var(--color-blanc)); --color-backdrop: color-mix(in srgb, var(--color-noir) 45%, transparent); /* --- Élévation : deux niveaux seulement (panneau flottant, toast/dialogue) --- */ --shadow-1: 0 1px 2px color-mix(in srgb, var(--color-noir) 10%, transparent); --shadow-2: 0 10px 30px -6px color-mix(in srgb, var(--color-noir) 25%, transparent), 0 2px 6px color-mix(in srgb, var(--color-noir) 8%, transparent); /* --- Typographie --- */ /* Rockford Sans : licence web non confirmée (Q-16), fichiers hors dépôt ; repli Arial. */ --font-heading: "Rockford Sans", Arial, sans-serif; --font-body: Arial, Helvetica, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --font-size-xs: 0.8125rem; /* 13 px : métadonnées, repères de jauge */ --font-size-small: 0.875rem; /* 14 px : aides, en-têtes de tableau */ --font-size-base: 1rem; /* 16 px : texte, champs (évite le zoom iOS) */ --font-size-lead: 1.125rem; /* 18 px : chapeau, h3 */ --font-size-h2: 1.25rem; --font-size-h1: 1.625rem; --font-size-figure: 1.75rem; /* chiffre clé d'un tableau de bord */ --line-height: 1.5; --line-height-tight: 1.2; /* --- Espacements (base 4 px) --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; /* --- Rayons hiérarchisés : plus l'objet est grand ou flottant, plus il s'arrondit --- */ --radius-xs: 2px; /* jauges, cellules de carte thermique */ --radius-s: 4px; /* champs, boutons, pastilles */ --radius-m: 8px; /* panneaux, cartes de tableau mobile */ --radius-l: 12px; /* toasts, dialogues */ --radius-pill: 999px; /* --- Tailles --- */ --touch-target: 2.75rem; /* 44 px : cible tactile minimale */ --control-compact: 2.25rem; /* 36 px : bouton de tableau, pointeur fin uniquement */ --focus-width: 3px; --content-max: 80rem; --form-max: 26rem; --prose-max: 46rem; --sidebar-width: 15rem; --gauge-height: 0.625rem; /* --- Mouvement (tout est annulé par prefers-reduced-motion dans app.css) --- */ --duration-fast: 120ms; /* survol, pression */ --duration-base: 220ms; /* ouverture de menu, toast, dialogue */ --duration-page: 260ms; /* transition de page (View Transitions) */ --duration-slow: 900ms; /* remplissage des jauges : la seule séquence d'entrée marquante */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* * --- Points de rupture --- * Les variables CSS ne sont pas utilisables dans @media : valeurs reprises * telles quelles dans app.css (documentation). * téléphone étroit : 22.5em (360 px) · tablette : 48em (768 px) · poste : 64em (1024 px) */ --bp-tablet: 48em; --bp-desktop: 64em; }