/* ============================================================================= THEME — Wolfcars ----------------------------------------------------------------------------- LA feuille de reference. Chargee AVANT toutes les autres, elle ne dessine rien : elle ne fait que declarer les valeurs que tout le reste consomme. Pourquoi ce fichier existe -------------------------- Un audit des feuilles du projet a trouve 172 couleurs opaques distinctes pour 674 emplois, dont 31 familles de teintes quasi identiques : cinq verts pour ecrire sur un fond vert (#16794a, #14794a, #1c7c46, #128c3e, #1b7a45), quatre rouges, trois oranges, vingt-huit blancs casses, dix-huit gris de filet. Aucune de ces nuances n'etait un choix : c'etait le meme besoin resolu cinq fois, a cinq moments, sans se souvenir des quatre precedents. Desormais, une intention = un jeton. Pour changer le vert du logiciel il y a exactement une ligne a modifier, ici. REGLE : aucune couleur ecrite en dur ailleurs. Si une teinte manque, on l'ajoute ici avec son intention en commentaire — on ne l'invente pas sur place dans un composant. Ordre de chargement (header.php) -------------------------------- theme.css <- ce fichier : les valeurs ... feuilles tierces (bootstrap, datatables, jquery-ui...) dashboard/*.css <- gabarit d'origine wolfcars/*.css <- nos composants, qui lisent les jetons theme-sombre.css <- ne redefinit QUE des jetons, jamais une regle Etre charge en premier lui donne la priorite la plus FAIBLE dans la cascade, ce qui est exactement voulu : ce fichier ne se bat avec personne, il fournit. ============================================================================= */ :root, body.wc-ui { /* ========================================================================= 1. COULEURS DE MARQUE --------------------------------------------------------------------- Le bleu est la couleur du logiciel. Il ne porte aucun sens d'etat : il dit "action principale", "element actif", "selection". ========================================================================= */ --wc-primary: #5a8dee; /* aplats : la couleur de marque, jamais retouchee */ --wc-primary-dark: #4a7fe0; /* survol et appui d'un aplat primaire */ --wc-primary-light: #6f9bf1; /* halo, bordure active */ /* Le primaire employe comme TEXTE ne donne que 3,24:1 sur blanc : illisible en petit corps. Variante assombrie a teinte (218deg) et saturation identiques — 5,30:1 sur blanc, 4,68:1 sur le fond bleute. Textes et liens uniquement, jamais un aplat. */ --wc-primary-ink: #1c62e8; --wc-primary-tint: rgba(90, 141, 238, .12); /* fond doux : ligne active, pastille */ --wc-primary-line: rgba(90, 141, 238, .28); /* bordure sur ce fond doux */ /* Ancien nom, conserve : une quarantaine de regles l'emploient encore. */ --wc-primary-text: var(--wc-primary-ink); /* ========================================================================= 2. COULEURS D'ETAT --------------------------------------------------------------------- Quatre intentions, et quatre seulement. Chacune decline les memes cinq roles, ce qui rend n'importe quel composant transposable d'un etat a l'autre sans reflechir : --xxx l'aplat bouton plein, pastille de statut, liseré --xxx-dark l'appui survol de l'aplat --xxx-ink l'encre TEXTE lisible sur blanc et sur -tint --xxx-tint le fond doux bandeau, badge, ligne de tableau signalee --xxx-line le filet bordure posee sur -tint Les encres sont verifiees AA (>= 4,5:1) sur blanc ET sur leur propre fond doux ; les valeurs retenues sont celles qui dominaient deja le code, et ce sont aussi les plus lisibles des familles qu'elles remplacent. ========================================================================= */ /* ---- Succes : c'est fait, c'est valide, c'est au dossier ---- */ --wc-success: #39da8a; --wc-success-dark: #2cc87a; --wc-success-ink: #16794a; /* 5,43:1 sur blanc — remplace 5 verts d'encre */ --wc-success-tint: rgba(57, 218, 138, .14); --wc-success-line: rgba(57, 218, 138, .38); /* ---- Danger : c'est manquant, c'est expire, ca bloque ---- */ --wc-danger: #ff5b5c; --wc-danger-dark: #f04b4c; --wc-danger-ink: #b3261e; /* 6,54:1 sur blanc — remplace 4 rouges d'encre */ --wc-danger-tint: rgba(255, 91, 92, .14); --wc-danger-line: rgba(255, 91, 92, .34); /* ---- Alerte : c'est en cours, c'est en attente, ca approche ---- */ --wc-warning: #fdac41; --wc-warning-dark: #f09a28; --wc-warning-ink: #8a5200; /* 6,39:1 sur blanc — remplace 3 oranges d'encre */ --wc-warning-tint: rgba(253, 172, 65, .18); --wc-warning-line: rgba(253, 172, 65, .42); /* ---- Information : neutre, ni bon ni mauvais, juste a savoir ---- */ --wc-info: #00cfdd; --wc-info-dark: #00b3bf; --wc-info-ink: #0b6b74; --wc-info-tint: rgba(0, 207, 221, .14); --wc-info-line: rgba(0, 207, 221, .34); /* ---- Neutre : rien a signaler, en sommeil, sans objet ---- */ --wc-neutral: #8494a7; --wc-neutral-dark: #6f8093; --wc-neutral-ink: #5b7288; --wc-neutral-tint: rgba(25, 42, 70, .07); --wc-neutral-line: rgba(25, 42, 70, .16); /* Encre foncee posee sur les aplats vifs. Le blanc ne donne que 3,04:1 sur le rouge et 3,24:1 sur le primaire ; cette encre monte a 8,35:1 sur l'orange et 8,66:1 sur le vert. Sur vert et orange, toujours elle. */ --wc-on-accent: #16233a; /* Anciens noms, conserves pour ne rien casser. */ --wc-danger-text: var(--wc-danger-ink); --wc-success-text: var(--wc-success-ink); --wc-warning-text: var(--wc-warning-ink); /* ========================================================================= 2 bis. COULEURS DE CATEGORIE --------------------------------------------------------------------- Distinguer sans juger. Un rendez-vous n'est ni meilleur ni pire qu'une livraison : ces teintes ne disent rien de bon ni de mauvais, elles servent uniquement a differencier des familles d'evenements. A ne PAS employer pour un etat — c'est le role des couleurs ci-dessus. ========================================================================= */ /* Categories d'evenement de l'agenda */ --wc-cat-livraison: var(--wc-warning); --wc-cat-rdv: var(--wc-info); --wc-cat-atelier: var(--wc-danger); --wc-cat-autre: #7367f0; /* violet : la seule categorie sans equivalent d'etat */ /* Provenance du vehicule. Ces trois teintes etaient ecrites trois fois : en --vc-* dans components.css, en dur dans interface.css, et encore en dur dans dashboard.css. Une seule declaration desormais. */ --wc-doc-import: #1c84c6; /* ET — vehicule importe */ --wc-doc-fr: #b85cb5; /* FR — carte grise francaise */ --wc-doc-dv: #5cb85c; /* DV — declaration de vente */ /* ========================================================================= 2 ter. COULEURS DE MARQUE EXTERIEURE --------------------------------------------------------------------- Elles n'appartiennent pas au logiciel : ce sont celles de services tiers, imposees par eux. A ce titre elles echappent a l'harmonisation — un bouton WhatsApp doit etre du vert de WhatsApp, pas du notre, sinon on ne le reconnait plus. ========================================================================= */ --wc-wa: #25d366; /* vert officiel WhatsApp */ --wc-wa-dark: #1fbb5a; /* son appui */ --wc-wa-ink: #06331a; /* encre lisible sur ce vert */ /* Extremite claire des degrades d'etat : le haut de la jauge, le debut du bandeau. Declarees pour que les degrades cessent d'inventer leur teinte. */ --wc-info-light: #2ad9e6; --wc-warning-light: #f0b429; /* ========================================================================= 3. SURFACES --------------------------------------------------------------------- Cinq plans, du plus enfonce au plus proche. Ils remplacent les 28 blancs casses trouves dans le code — ecarts de 1 a 3 points invisibles a l'oeil mais qui rendaient impossible d'aligner deux blocs voisins. ========================================================================= */ --wc-page: #f2f4f4; /* le fond de la fenetre */ --wc-surface: #ffffff; /* une carte, une popup : le plan de travail */ --wc-surface-tint: #fafbfc; /* haut des degrades de surface */ --wc-surface-sunk: #f5f7f9; /* creux : entete de tableau, champ en lecture */ --wc-surface-deep: #eef1f4; /* creux marque : zone inerte, fond de jauge */ /* Le bandeau d'en-tete, commun a TOUS les cadres du logiciel : la carte (.card-header), le groupe de reglages des Preferences, les cadres des garanties. Un cadre se reconnait a son titre pose sur ce gris et separe du contenu par un filet — le declarer ici, une fois, est ce qui garantit qu'aucune page ne s'en ecarte. Le degre de gris est volontairement lisible : la version precedente partait du blanc et finissait a peine plus clair que lui, l'en-tete se confondait avec son contenu. */ --wc-entete-fond: linear-gradient(180deg, var(--wc-surface-tint) 0%, var(--wc-surface-sunk) 100%); /* ========================================================================= 4. TEXTES --------------------------------------------------------------------- Cinq niveaux d'importance. Au-dela, la hierarchie ne se lit plus. ========================================================================= */ --wc-text: #212529; /* titres, chiffres qui comptent */ --wc-text-body: #475f7b; /* le texte courant — 6,58:1 */ --wc-text-soft: #5b7288; /* libelles secondaires, menu — 4,99:1 */ --wc-text-mute: #8494a7; /* icones, mentions — 3,10:1, gros corps seulement */ --wc-text-faint: #a3aeb9; /* 2,26:1 : decoration et placeholders, JAMAIS une information */ --wc-text-invert: #ffffff; /* sur aplat sombre */ /* ========================================================================= 5. FILETS ========================================================================= */ --wc-line: #e4e8ec; /* separation ordinaire, bordure de carte */ --wc-line-strong: #dbe1e8; /* bordure de champ, contour a affirmer */ --wc-line-soft: #eef1f4; /* separation interne, presque invisible */ /* ========================================================================= 6. FORMES --------------------------------------------------------------------- "Legerement arrondi", jamais la pilule — sauf pour ce qui est volontairement une pastille (--wc-r-pill). ========================================================================= */ --wc-r-sm: 6px; /* pastille, petit bouton, champ */ --wc-r-md: 8px; /* tuile, vignette */ --wc-r-lg: 10px; /* carte, cadre, popup */ --wc-r-xl: 12px; /* grand panneau */ --wc-r-pill: 999px; /* jeton, badge rond */ /* ========================================================================= 7. RELIEF --------------------------------------------------------------------- Chaque niveau superpose un contact court (le contour) et une diffusion longue (le volume) : c'est ce qui evite l'ombre "floue posee a cote". Teinte bleu-ardoise, jamais un noir pur, qui grise la couleur en dessous. ========================================================================= */ --wc-e1: 0 1px 2px rgba(25, 42, 70, .05), 0 1px 3px rgba(25, 42, 70, .08); --wc-e2: 0 1px 2px rgba(25, 42, 70, .05), 0 6px 14px -4px rgba(25, 42, 70, .12); --wc-e3: 0 2px 4px rgba(25, 42, 70, .05), 0 14px 28px -10px rgba(25, 42, 70, .16); --wc-e4: 0 4px 8px rgba(25, 42, 70, .06), 0 24px 48px -12px rgba(25, 42, 70, .22); /* Halo de focus, unique pour tout le logiciel : le clavier doit se voir partout pareil, sinon on ne sait plus ou on est. */ --wc-focus: 0 0 0 3px rgba(90, 141, 238, .18); /* ========================================================================= 8. RYTHME --------------------------------------------------------------------- Une seule echelle d'espacement pour les composants. Elle evite le "9px ici, 11px la, 14px ailleurs" releve dans l'audit. ========================================================================= */ --wc-sp-1: 4px; --wc-sp-2: 7px; --wc-sp-3: 10px; --wc-sp-4: 14px; --wc-sp-5: 18px; --wc-sp-6: 24px; /* ========================================================================= 9. MOUVEMENT ========================================================================= */ --wc-ease: cubic-bezier(.4, 0, .2, 1); --wc-vite: .15s; --wc-normal: .22s; } /* Le socle applique la couleur de texte par defaut. Pose ici plutot que dans interface.css : c'est la seule declaration de ce fichier qui peint, et elle n'a de sens qu'a cote de la palette qu'elle emploie. */ body.wc-ui { color: var(--wc-text); } /* ----------------------------------------------------------------------------- Respect du reglage systeme "moins d'animations". Une transition n'est jamais une information : on peut toutes les couper. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root, body.wc-ui { --wc-vite: 0s; --wc-normal: 0s; } }