/* ========================================================================== LES COULEURS DE LA MAISON, POSÉES SUR DOCUSEAL Servie par Caddy sur /marque/nexus.css, et injectée avant `` (voir le Caddyfile). Elle est donc chargée APRÈS la feuille de DocuSeal : à spécificité égale, c'est la dernière qui gagne. Aucun `!important` n'est nécessaire, et il ne faut pas en ajouter — un `!important` posé ici empêcherait DocuSeal de peindre ses propres états (désactivé, survolé, erreur) et se verrait à l'usage, pas à la lecture. --------------------------------------------------------------------------- POURQUOI ÇA MARCHE, ET POURQUOI ÇA TIENDRA DocuSeal est bâti sur DaisyUI. Mesuré le 15/09 dans `/packs/css/application-40b3be9c.css` : toute sa palette tient dans des variables `:root`, en triplets HSL sans le mot `hsl()` — :root{--p:345 7% 89%; --b1:24 33% 97%; --bc:280 46% 14%; …} Ces noms sont le CONTRAT PUBLIC de DaisyUI, pas un détail d'implémentation : ils ne changent pas d'une version à l'autre, là où les noms de classes, eux, bougent. C'est la seule raison pour laquelle cette feuille a le droit d'exister — une feuille qui viserait `.btn-primary` serait à réécrire à chaque montée de version, et sa panne serait silencieuse. ⚠️ LE TRIPLET S'ÉCRIT SANS `hsl()` ET SANS VIRGULE. DaisyUI compose lui-même `hsl(var(--p) / )`. Écrire `--p: hsl(215, 55%, 48%)` produirait `hsl(hsl(215, 55%, 48%) / 1)`, que le navigateur jette en silence : la couleur ne change pas, et rien ne dit pourquoi. --------------------------------------------------------------------------- ⚠️ CE QU'ELLE NE TOUCHE PAS, ET C'EST VOULU (demande d'Adrien, 15/09) · LE LOGO. Son orange `#e97a42` est écrit EN STYLE DIRECT sur le `` dans la page (`style="color: #e97a42"`). Aucune variable ne le commande, donc aucune palette ne peut l'effacer. C'est exactement ce qu'on veut : « mes couleurs, sans masquer le logo ». · LE MOT « DocuSeal » À CÔTÉ. Il vient de `PRODUCT_NAME`, une constante Ruby (`lib/docuseal.rb:8`). Rien à faire sans forker, et forker rouvre l'article 13 de l'AGPL. · LA MENTION « Powered by DocuSeal ». Acceptée le 15/09. Elle ne masque RIEN : elle ne pose ni `display:none`, ni `visibility`, ni `opacity:0` sur quoi que ce soit. Poser une palette est un habillage ; cacher la marque d'un logiciel sous AGPL est autre chose, et cette feuille ne doit jamais glisser de l'un vers l'autre. --------------------------------------------------------------------------- D'OÙ VIENNENT LES VALEURS Du système AURIA (docs/design_system_auria/DESIGN-SYSTEM.md), qui est la façade de Nexus — pas du régime terrain. La raison tient en une ligne : le fond de DocuSeal (`--b1: 24 33% 97%`, un blanc cassé chaud) est DÉJÀ à un cheveu du `#f4f3ef` d'AURIA. On finit un rapprochement, on n'impose pas une rupture. L'orange de marque (`#F08C00`, `--accent` du régime terrain, celui de `app/icon.js` et du favicon servi juste à côté) devient la couleur SECONDAIRE. Il est donc présent, il s'accorde avec le logo, et il ne prend pas la place du bleu sur les boutons. ========================================================================== */ :root, [data-theme] { /* --- Les fonds et le texte --------------------------------------------- `--b1` est le fond principal : #f4f3ef, le sol d'AURIA. `--bc` est le texte : rgba(40,42,50,0.96), le gris-bleu profond du système. Le contraste de l'un sur l'autre dépasse 14:1 — très au-dessus du plancher, ce qui compte sur une page qu'un ambulancier ouvre parfois en plein soleil. */ --b1: 48 19% 95%; --b2: 48 16% 91%; --b3: 48 14% 87%; --bc: 228 11% 18%; /* --- Le bleu d'AURIA, sur les boutons et les liens ---------------------- hsl(215, 55%, 48%) — exactement `.nxf-primaire` dans nexus.css. Le blanc par-dessus est la même combinaison que celle déjà servie dans tout le back-office : on ne l'invente pas ici, on la reprend. */ --p: 215 55% 48%; --pf: 215 55% 41%; --pc: 0 0% 100%; /* --- L'orange de la maison, en seconde voix ----------------------------- */ --s: 35 100% 47%; --sf: 35 100% 40%; --sc: 0 0% 100%; --a: 35 100% 47%; --af: 35 100% 40%; --ac: 0 0% 100%; /* --- `--n` PORTE LE BOUTON QUE LE SALARIÉ PRESSE, ET C'EST POURQUOI IL EST BLEU ET NON NOIR ------------------------------------------------------ ⚠️ CETTE LIGNE EST LA CORRECTION D'UNE PREMIÈRE VERSION QUI NE SE VOYAIT PAS. Elle valait `228 11% 18%` — l'encre d'AURIA, un gris-bleu très sombre. Posée en face du `280 46% 14%` de DocuSeal, un noir-violet, elle était rigoureusement imperceptible. Toute la palette était comme ça : pensée pour « finir un rapprochement, pas imposer une rupture », et donc invisible. Adrien a regardé et a dit « rien n'a changé ». Il avait raison. CE QUE LA MESURE A DIT, et qui a décidé de cette ligne — relevé des seules classes colorées des deux pages qui comptent : · `/sign_in` → AUCUNE. Le bouton est `.btn`, qui tire sur `--b2`, blanc cassé des deux côtés. · la page `/s/`, celle que le salarié ouvre → `btn-neutral` (deux fois) et `bg-base-100`. Donc le bouton « signer » est un `btn-neutral`. Dans AURIA, l'action principale est la pilule bleue (`.nxf-primaire`). Les deux disent la même chose : c'est `--n` qui doit porter le bleu. ⚠️ ET LA PORTÉE EST BORNÉE, elle a été vérifiée avant d'être écrite. `--n` ne sert que dans des composants qui se nomment « neutral » : `.btn-neutral`, `.badge-neutral`, `.link-neutral`, `.text-neutral`, `.step-neutral`, plus `.tooltip` et `.mockup-code`. Aucun texte courant, aucun fond de page. Le repeindre ne peut donc pas rendre un écran illisible. LA LEÇON, parce qu'elle vaut au-delà d'ici : une palette ne se juge pas sur ses valeurs, elle se juge sur les CLASSES QUE LES PAGES EMPLOIENT VRAIMENT. Trois variables bien choisies sur des composants que personne n'affiche ne changent rien — et on croit alors que le déploiement a échoué, ce qui envoie chercher au mauvais endroit. */ --n: 215 55% 48%; --nf: 215 55% 41%; --nc: 0 0% 100%; /* --- Les états, repris des pastilles de Nexus --------------------------- Mêmes teintes que `ETATS` dans lib/nexus/parapheur.js : un salarié qui passe de l'écran Nexus à la page de signature ne doit pas voir le vert changer de vert. */ --in: 215 55% 48%; --su: 150 42% 42%; --wa: 30 55% 50%; --er: 8 60% 50%; --inc: 0 0% 100%; --suc: 0 0% 100%; --wac: 0 0% 100%; --erc: 0 0% 100%; }