/* COPIE AUTOMATIQUE DE public/base/themes-retenus.css -- NE PAS EDITER ICI. La source est au banc ; `python tools/base/porter_reprise.py` refait cette copie, et son mode `verifier` signale toute divergence. */ /* ========================================================================= LES DEUX THEMES ========================================================================= UN THEME NE FAIT QU UNE CHOSE : IL REDEFINIT DES PRIMITIVES. Pas une regle ne vise ici un composant. C'est la seule facon d'avoir deux themes sans ecrire deux fois le produit -- et c'est ce que le controle de la coquille a reclame en rendant 115 ecarts d'une seule famille : « le theme n'est pas dans la base ». LE SOMBRE EST LE DEFAUT, et il n'est pas ecrit : c'est `jetons.css` tel quel. Seul le clair est une redefinition. L'inverse aurait demande de declarer deux fois chaque valeur. COMMENT LE RETOURNEMENT MARCHE. Le produit ecrit `rgba(var(--white-rgb), .72)` pour son texte et ses voiles. En redefinissant `--white-rgb` sur une encre sombre, le texte et les voiles se retournent d'un coup, dans toutes les feuilles a la fois, sans qu'aucune ne le sache. Le nom devient faux -- « white » ne vaut plus du blanc -- et c'est le prix assume : renommer les 181 jetons couterait des semaines pour zero pixel change. ========================================================================= CINQ COUPLES SE CONTREDISAIENT, ET C EST CORRIGE ICI ========================================================================= Chaque teinte existe DEUX FOIS : `--x` en hexadecimal, `--x-rgb` en triplet pour les voiles. Les blocs tardifs du theme n'avaient retouche que la moitie hexadecimale : cinq couples disaient donc deux couleurs differentes, et la page rendait celle que le composant avait demandee. Rien ne le signale. ON A TRANCHE EN COMPTANT LES LECTURES, pas au gout : la moitie la plus consommee decide de ce qu'on voit aujourd'hui, donc c'est elle qu'on garde et l'autre qu'on aligne. --amber-soft hex lu 14 fois, triplet 1 -> le triplet s'aligne --blue-soft hex 6, triplet 25 -> l'hexadecimal s'aligne --violet-* hex 8, triplet 9 -> l'hexadecimal s'aligne --gold-soft hex 2, triplet 28 -> l'hexadecimal s'aligne Les violets sont comptes ensemble : `pale` et `soft` portent la meme teinte, les separer aurait donne deux violets differents pour une voix d'ecart. ========================================================================= */ html[data-theme="clair"] { color-scheme: light; /* --- L ENCRE --------------------------------------------------------- Ce que le produit appelle « white » devient le texte sombre. C'est le jeton qui porte le retournement a lui seul : 79 niveaux d'opacite s'appuient dessus. */ --white-rgb: 17, 24, 39; --white: #111827; /* --- LE SOL ET LES SURFACES ------------------------------------------ « sombre » et « slate » deviennent les surfaces claires. Le fond de page n'est pas blanc mais legerement bleute : un blanc pur sous une barre blanche ne laisse plus voir ou l'une s'arrete. */ --surface-sombre-rgb: 244, 246, 249; --surface-sombre: #f4f6f9; --slate-mid-rgb: 255, 255, 255; --slate-rgb: 255, 255, 255; --slate-light-rgb: 248, 250, 252; --slate-mid: #ffffff; --slate: #ffffff; --surface-voile: rgba(255, 255, 255, 0.74); --mimex-bg: #eef1f6; /* LE JUMEAU MANQUANT, ET IL PORTE QUATRE PANNEAUX. Le produit peint l'infobulle d'interpretation, sa fenetre, la fenetre de comparaison et celle du test avec `rgb(var(--mimex-bg-rgb, 7 17 31))`. Sans lui, le repli SOMBRE tenait en theme clair pendant que leur encre suivait le theme : titre 17,24,39 sur fond 7,17,31, rapport 1,05, illisible. La correction existait dans la feuille de l'atelier et n'etait jamais descendue dans la couche qui compte. */ --mimex-bg-rgb: 238, 241, 246; /* --- L ECHELLE NEUTRE, RETOURNEE ------------------------------------- Elle est nommee par la CLARTE, donc elle s'inverse bout a bout : ce qui etait le plus clair devient le plus sombre. */ --ink-50-rgb: 17, 24, 39; /* LE CRAN D UNE MENTION REMONTE EN CLAIR, et ce n'est pas esthetique. `admin-dashboard.css` ecrit deux encres a la main sur `--white-rgb` : 0,58 pour la note d'activite, 0,62 pour l'etat « aucun test ». La teinte se retourne bien avec le theme, l'opacite non : ces crans ont ete choisis sur un sol sombre. Ces mentions vivent sur une carte d'activite TEINTEE, plus sombre que le sol clair. Mesure au pixel, capture de la zone et couleur dominante du fond, encre composee sur elle : note d'activite fond 194 208 207 0,58 -> 3,73 etat « aucun test » fond 182 197 196 0,62 -> 3,96 Deux textes de 12 px sous 4,5. A 0,76, le plus faible remonte a 5,65. */ --voile-mention: 0.76; /* LE CRAN BAS DES MENTIONS, MEME RAISON QUE CELUI DU DESSUS. 0,42 a ete choisi sur un sol sombre ; en clair, les memes mentions tombent entre 3,5 et 4,4 sur les cartes teintees du tableau de bord (mesure sur huit pages de l'espace praticien). Il remonte au barreau 10. */ --voile-mention-basse: 0.56; --ink-200-rgb: 51, 65, 85; --ink-300-rgb: 71, 85, 105; --ink-600-rgb: 148, 163, 184; --ink-900-rgb: 226, 232, 240; --ink-50: #111827; --ink-200: #334155; --ink-300: #475569; --ink-400: #64748b; --ink-600: #94a3b8; --ink-900: #e2e8f0; /* --- L ENCRE DU TEXTE, ET SES DEUX BARREAUX BAS ---------------------- Elle descend sur `--ink-50`, l'encre la plus profonde : c'est ce qui rend les crans eteints encore lisibles. Et les deux barreaux bas remontent, parce que la marge n'est pas la meme -- mesure sur le sol clair (244 246 249) : calme .76 -> 7,80 second .62 -> 4,84 Le cran de `second` remonte de 0,56 a 0,62 : a 0,56 il n'aurait rendu que 4,00 sur ce sol, soit sous le seuil du texte courant. */ --encre-texte-rgb: var(--ink-50-rgb); /* 0,62 rendait 3,7 sur le fond de page et 2,8 sur une carte teintee, a 10,5 px. Mesure au contraste. Le barreau 11, 0,76, passe 4,5 sur les deux et le cran calibre a la main, 0,74, y tombait a deux centiemes pres. Le socle pose deja ce role sur un barreau en sombre ; le clair l'ecrivait en litteral, et le seul cran calibre a la main du theme etait aussi le plus lu : 1 998 elements. */ --voile-texte-second: var(--voile-11); /* --- CE QUI CREUSE ET CE QUI OMBRE, EN CLAIR -------------------------- LE CREUX REMONTE, IL NE S INVERSE PAS. Un creux est un creux : il est sombre des deux cotes, sinon ce n'est plus un creux. Ce qui change est sa PROFONDEUR -- 28 % de noir sur un sol clair ferait un trou, 9 % suffisent et se lisent tres bien. L ARETE DU BAS, ELLE, MONTE FRANCHEMENT : 90 % contre 7 %. Sur un sol clair, une lumiere a 7 % n'existe pas ; c'est elle qui referme le creux et lui donne son epaisseur. */ --ombre-rgb: var(--white-rgb); /* LE HALO DES TITRES BASCULE, LUI, ENTIEREMENT. Voir le socle : ce n'est pas un relief mais un detachement, et sur un sol clair il se fait avec de la lumiere. */ --halo-texte-rgb: var(--lumiere-rgb); --voile-creux: var(--voile-4); --voile-creux-fond: var(--voile-4); /* LE CHAMP SE REMPLIT DE LUMIERE, IL NE PALIT PAS. Voir le socle : un creux de rail se creuse dans du sombre des deux cotes, un champ se creuse dans une carte, et la carte se retourne. Les trois valeurs sont celles du modele de l'atelier, relevees au pixel. */ --champ-fond: rgb(var(--lumiere-rgb)); --champ-filet: rgba(var(--white-rgb), var(--voile-5)); --champ-relief: inset 0 1px 2px rgba(var(--white-rgb), var(--voile-2)); --dose-creux-arete: 0.9; /* UN BLOC EN RELIEF SUR LE RAIL est plus clair que le rail des deux cotes : sur sombre un voile de blanc suffit ; sur clair, ou le rail est deja presque blanc, il faut du blanc franc (mesure : 233 sur 240 avec la surface des cartes, encore en creux ; 248 sur 240 avec celui-ci). */ --surface-relief-rail: rgba(var(--lumiere-rgb), var(--voile-11)); /* LE TEXTE SUR UN VOILE D'OR. Sur clair, l'accent EST l'or : un bouton de commande en voile d'or a cote de l'appel en aplat d'or doit se lire par son encre, or sombre comme celle des boutons seconds. */ --texte-sur-or: rgb(var(--accent-texte-rgb)); /* LE GRAPHE N A PLUS UNE LIGNE ICI. Ses trois jetons derivent de `--ink-300`, `--ink-400` et `--white-rgb`, que ce bloc retourne quelques lignes plus haut : ils suivent le theme sans qu'il ait a les connaitre. Ecrites a la main, ses deux teintes etaient deja les valeurs exactes de leurs primitives, et ses deux opacites (0,08 et 0,10) tombaient sur le meme barreau -- trois recopies, donc trois endroits a tenir. */ /* L OR DE SECOND RANG N EST PAS CELUI DE L APPEL. En clair l'appel EST dore (214, 175, 74) : un second bouton du meme or se lisait comme un doublon. La paire prend un bronze, plus profond et moins jaune. Son encre fonce avec son fond -- fixe, elle tombait a 3,60 sous le pointeur (mesure), sous le seuil de 4,5. */ /* Sur clair, le voile neutre pese plus lourd que le bronze : ses crans se resserrent pour que les deux boutons repondent de la meme force. */ --dose-cmd-appui: 0.40; --dose-note-survol: 0.23; --dose-note-appui: 0.30; --teinte-action-rgb: 166, 124, 38; --encre-action-rgb: 110, 80, 12; --encre-action-vive-rgb: 72, 52, 6; /* L'EFFLEUREMENT SE LEVE, IL NE S'ENFONCE PAS. Sur sombre, un voile de blanc eclaircit ce qu'on survole : la surface se leve. Le meme voile d'encre sur clair l'assombrissait (mesure : 232 au repos, 219 sous le pointeur), et un bouton clair qui grise sous la main se lit eteint. Le survol va vers le blanc des deux cotes ; l'appui, lui, reste un creux (`--surface-controle-survol`). */ --surface-effleuree: rgba(var(--lumiere-rgb), var(--voile-11)); /* SUR CLAIR LE RAIL A BESOIN D UNE OMBRE. Son filet a 9 % sur un sol clair ne se voit plus ; le theme ne change pas la couleur de l'ombre, il decide qu'il y en a une. */ --ombre-rail: 0 1px 2px rgba(var(--ombre-rgb), var(--voile-3)), 0 8px 24px rgba(var(--ombre-rgb), var(--voile-3)); /* --- CE QUI SE LIT SUR UN FOND QUI SE RETOURNE ------------------------ */ --texte-sur-sombre: rgba(17, 24, 39, 0.94); /* --- LES DEUX ENCRES DISCRETES, RECALIBREES SUR LE SOL CLAIR ---------- `--texte-discret` suivait `--ink-400`, qui se retourne avec l'echelle : en clair il rend #64748b, soit 3,85 sur une carte teintee a 13 px. Et `--texte-discret-sur-sombre` gardait 0,62, le cran mesure juste au- dessus a 3,96. Les deux tombent sous 4,5 pour la meme raison : ces crans ont ete choisis sur un sol sombre, ou une encre claire gagne du contraste en s'affaiblissant, alors qu'en clair elle en perd. ILS PASSENT AU CRAN DES MENTIONS, 0,76, celui qui vient d'etre calibre au pixel juste au-dessus. Ce sont 43 regles produit qui lisent `--texte-discret` : le jeton est le seul endroit ou la corriger. --------------------------------------------------------------------- */ --texte-discret: rgba(17, 24, 39, var(--voile-mention)); --texte-discret-sur-sombre: rgba(17, 24, 39, var(--voile-mention)); /* --- L ENCRE DES PASTILLES D ETAT, SUR SOL CLAIR ---------------------- Une pastille d'etat est un voile de sa propre teinte a 16 % pose sur une carte deja claire : son fond monte a 0,54-0,61 de luminance, et l'encre de la meme famille n'a plus de marge. Mesure au balayage : « a traiter » rend 3,89 et « ok » 3,17, a 11 px. ON NE TOUCHE PAS `--share-line-rgb` NI `--amber-rgb` : ils servent aussi de filet et d'aplat, ou 3,0 suffit, et les assombrir alourdirait tout ce qui les porte. Ces deux-la ne valent que comme ENCRE de pastille, et le repli garde la valeur du sombre pour les pages sans theme clair. */ --encre-etat-ok-rgb: 15, 92, 43; --encre-etat-attention-rgb: 107, 71, 3; /* Le bleu et le vert de `--blue-rgb` / `--green-rgb` ne sont PAS retournes par le theme : ce sont des teintes de donnee. Poses comme encre sur leur propre voile ils rendent 2,53 et 3,17 en clair. Meme traitement que les deux au-dessus : une encre de pastille, et rien d'autre. */ --encre-etat-info-rgb: 29, 78, 216; --trait-sur-sombre: rgba(17, 24, 39, 0.14); --encre-sur-voile: #f8fafc; /* --- L ACCENT : LE CYAN DEVIENT L OR --------------------------------- DEUX VALEURS, PAS UNE, ET C EST LA REGLE DE FOND. Les seuils de contraste ne sont pas les memes selon le role : 4,5 pour du texte, 3,0 pour un aplat ou un filet. Sur fond sombre le cyan porte le texte sans effort (10,61) et c'est l'aplat qui coince ; sur fond clair c'est exactement l'inverse. Un seul or ne peut donc pas servir les deux. Mesure des rapports sur blanc : 214/175/74 rend 2,08 -- bon pour une surface, illisible en texte ; 130/98/16 rend 4,71 et tient le texte. UNE SOURCE, UNE DIRECTION. `--teinte-accent-rgb` est la primitive ; les trois roles la lisent, et aucun ne lit les autres. Avant, la feuille de l'atelier ecrivait `html { --accent-surface-rgb: var(--portal-accent-rgb) }` pendant que celle-ci ecrivait `:root { --portal-accent-rgb: var(--accent-surface-rgb) }` : deux jetons qui se definissent l'un l'autre. Une reference circulaire rend les DEUX invalides, donc l'accent entier, et rien ne le dit ; le montage ne tenait que parce que `:root` l'emporte sur `html`. Il ne tient plus par accident. */ --teinte-accent: #d6af4a; --teinte-accent-rgb: 214, 175, 74; --accent-surface-rgb: var(--teinte-accent-rgb); /* UN ROLE DE TEXTE SE CALIBRE SUR LE FOND LE PLUS SOMBRE QU IL RENCONTRE, pas sur le sol de la page. 130/98/16 tenait 5,24 sur le sol clair et tombait a 3,95 sur la carte d'en-tete du visualiseur (209, 216, 227), ou le surtitre « Resultats de test » se pose. 116/87/12 y rend 4,71, et 6,75 sur du blanc. Meme valeur dans `atelier-modeles.css`, qui porte le theme des pages du banc restees sur la pile du produit : deux couches qui disent la meme chose doivent la dire pareil. */ --accent-texte-rgb: 116, 87, 12; --portal-accent-rgb: var(--teinte-accent-rgb); --portal-accent-clair-rgb: 138, 104, 24; --portal-accent-fonce-rgb: 122, 92, 16; --couleur-accent-doux-rgb: 146, 110, 20; --couleur-accent-fort-rgb: 122, 92, 16; --couleur-accent-doux: #926e14; --couleur-accent-fort: #7a5c10; --couleur-accent: rgb(146, 110, 20); --cyan-rgb: 146, 110, 20; --journey-accent-solid: rgb(176, 137, 40); /* L'APLAT PORTE DU TEXTE BLANC, donc il descend la ou le blanc tient. */ --accent-aplat: #8a6a1e; --accent-aplat-survol: #74591a; /* --- LES TEINTES DE DONNEE ------------------------------------------- Elles ne s'inversent pas, elles se REHAUSSENT : une teinte faite pour briller sur du sombre disparait sur du clair. La donnee garde son identite -- le bleu reste bleu -- mais a une profondeur qui se lit. */ /* LES JUMEAUX VOILES SUIVENT LEUR MOITIE OPAQUE. Quatre triplets restaient faits pour le sombre pendant que leur hexadecimal basculait : trente-sept ecritures voilees ne suivaient donc pas le theme. Ce n'est pas une erreur CSS, c'est une valeur juste au mauvais endroit, et rien ne la signale. */ --gold-soft: #926e14; --gold-soft-rgb: 146, 110, 20; --gold-bright: #8a6a1e; --gold-bright-rgb: 138, 106, 30; --amber-soft: #8a6a1e; --amber-soft-rgb: 138, 106, 30; /* L AMBRE PALE AVAIT ETE RETOURNE CONTRE DU BLANC, ET IL NE SE POSE JAMAIS DESSUS. La famille « pale » est une ENCRE, toujours posee sur un voile de sa propre teinte a 7-20 %. 146/100/10 tenait 5,4 sur du blanc et rendait 3,66 sur ce voile-la (232, 222, 208) : les douze etiquettes de periode du parcours tombaient ensemble. Le vert (21/128/61) et le bleu (30/64/175) de la meme famille passaient deja, parce qu'ils sont plus sombres -- pas parce qu'ils avaient ete mieux choisis. 122/82/4 rend 4,81 sur son voile et 6,9 sur du blanc ; ses vingt et une lectures sont toutes des encres. */ --amber-pale: #7a5204; --amber-pale-rgb: 122, 82, 4; /* LE BOUT PROFOND DE L OR D ETAPE. Meme valeur que l'ambre pale, et c'est voulu : les deux disent la meme chose sur un fond clair, un or qui se lit. 4,9 sur le voile d'or a 10 % ou le programme se pose. */ --teinte-or-texte-rgb: 122, 82, 4; --amber-mid: #8a6a1e; --amber-mid-rgb: 138, 106, 30; --blue-soft: #1e40af; --blue-soft-rgb: 30, 64, 175; --blue-pale: #1e40af; --blue-pale-rgb: 30, 64, 175; --blue-mist: #1e40af; --blue-mist-rgb: 30, 64, 175; --blue-vivid: #2a5db0; --blue-vivid-rgb: 42, 93, 176; --violet-soft: #5b3fb8; --violet-soft-rgb: 91, 63, 184; --violet-pale: #5b3fb8; --violet-pale-rgb: 91, 63, 184; --green-soft: #15803d; --green-soft-rgb: 21, 128, 61; --green-pale: #15803d; --green-pale-rgb: 21, 128, 61; --green-mid: #146637; --green-mid-rgb: 20, 102, 55; --red-soft: #b91c1c; --red-soft-rgb: 185, 28, 28; /* --- LES ETATS ------------------------------------------------------- Le succes et le danger disent un FAIT, pas une humeur d'interface : ils gardent leur teinte et ne changent que de profondeur. */ /* LE LIBELLE D UNE PASTILLE SE MELANGE VERS L ENCRE, PAS VERS LE BLANC. Sur un sol clair, un vert eclairci a 82 % de blanc rend 1,41 sur son propre voile. La teinte reste -- elle dit l'etat -- mais elle s'assombrit au lieu de s'eclaircir, et la part change avec elle : 82 % de teinte suffisent sur un sol sombre, il en faut 45 sur un sol clair. Mesure : 4,96 contre 1,41. */ /* SEULE LA PART CHANGE. La cible, elle, est la meme regle dans les deux themes : `--texte-vif`, c'est-a-dire l'encre qui se lit sur le sol courant -- blanc en sombre, encre en clair. `--ink-900-rgb` aurait ete le piege : ce jeton se RETOURNE, il vaut (226, 232, 240) en clair, donc melanger vers lui eclaircissait encore. Mesure de l'erreur : 1,16 au lieu de 1,41, c'est-a-dire pire qu'avant. */ /* 45 % LAISSAIT L AMBRE A 4,44, deux centiemes sous le cran. L'ambre est la plus claire des teintes d'etat -- (251, 191, 36) -- donc c'est elle qui decide du melange pour toutes : a 40 % elle rend 5,10, et les autres suivent sans avoir ete regardees une par une. */ --pastille-part: 40%; --couleur-succes-doux: #116a32; --couleur-succes-doux-rgb: 17, 106, 50; --couleur-danger-doux: #b91c1c; --couleur-danger-doux-rgb: 185, 28, 28; --share-line-rgb: 21, 128, 61; /* --- LES ETAPES DU PARCOURS ------------------------------------------ Cinq teintes qui disent l'etape d'un client, d'un ecran a l'autre. Elles sont de la donnee : elles se rehaussent, elles ne se remplacent pas. */ /* LES DEUX PREMIERES ETAPES DESCENDENT D UN CRAN, ET LA RAISON EST LE FOND SOUS LE FOND. Leurs valeurs avaient ete choisies pour un voile de leur teinte pose sur du BLANC. Sur la liste des clients, les six filtres sont poses sur la carte d'entete, qui porte deja un voile d'encre a 4 % et un degrade d'or : le sol n'est plus (255, 255, 255) mais (229, 232, 238), et le meme voile y rend un cran plus bas. Mesure sur ce fond-la, le bleu tombait a 4,23 et le cyan a 4,20. DEUX ETAPES SEULEMENT, PARCE QUE LES TROIS AUTRES PASSENT DEJA : violet 4,90, or 4,64, vert 4,72 sur cette meme carte. Les approfondir toutes « pour etre coherent » aurait assombri trois teintes qui n'avaient rien demande. ELLES GARDENT LEUR IDENTITE : le bleu reste le bleu de l'etape, a neuf unites de luminosite pres -- invisible cote a cote, decisif au seuil. `--teinte-bleue` et `--portal-blue-rgb`, eux, ne bougent pas : ils habillent l'interface ailleurs, sur d'autres fonds, et n'ont pas ce probleme. */ --journey-demo-rgb: 13, 92, 100; --journey-demo-solid: #0d5c64; --journey-testing-rgb: 33, 82, 160; --journey-testing-solid: rgb(33, 82, 160); --teinte-bleue: 42, 93, 176; --portal-blue-rgb: 42, 93, 176; /* LES TROIS AUTRES ETAPES MANQUAIENT, ET C EST CE QUI SE VOIT LE PLUS SUR CETTE PAGE. Deux teintes sur cinq etaient rehaussees ; les trois autres restaient celles du sombre. Sur la liste des clients, les six filtres d'etape s'alignent cote a cote : deux se lisaient, trois etaient des taches pales -- « Ждёт результаты » a 1,97, « Восстановление » a 1,38, « Повторное тестирование » a 1,32. Ce n'est pas une famille oubliee, c'est une famille traitee a moitie, et la moitie non traitee est juste a cote de l'autre. CHACUNE PREND LA VALEUR QUE CE THEME A DEJA RETENUE POUR SA FAMILLE, et aucune n'est inventee ici : le violet des pastilles est celui de `--violet-soft`, l'or celui de `--teinte-or-texte-rgb` -- ecrit plus haut comme « le bout profond de l'or d'etape » --, le vert celui de `--green-mid`. Une sixieme valeur de violet dans la feuille serait un sixieme dialecte. LA CIBLE EST LEUR PROPRE VOILE, PAS LE BLANC. Une pastille d'etape pose son encre sur un fond de la MEME teinte a 14 % : c'est la que le rapport doit tenir, et c'est plus dur que sur du blanc. Mesure sur ce fond-la : violet 5,59, or 4,9, vert 5,36 -- les deux etapes deja traitees rendent 4,78 et 4,90, donc les cinq se tiennent enfin dans le meme cran. LE VERT PREND `--green-mid` ET NON `--green-soft`. Le doux (21, 128, 61) ne rend que 3,92 sur son voile : c'est un vert choisi pour du texte sur du blanc, et une pastille n'est pas posee sur du blanc. */ --journey-results-rgb: var(--violet-soft-rgb); --journey-results-solid: var(--violet-soft); --journey-course-rgb: var(--teinte-or-texte-rgb); --journey-course-solid: rgb(var(--teinte-or-texte-rgb)); --journey-retesting-rgb: var(--green-mid-rgb); --journey-retesting-solid: var(--green-mid); /* ET L ACCENT D ETAPE PAR DEFAUT, CELUI DES PAGES SANS ETAPE EN COURS. `jetons.css` le pose a `rgb(var(--portal-accent-rgb))`, c'est-a-dire a l'or des APLATS en clair. Or ce jeton ne sert jamais de fond -- verifie sur toutes les feuilles : il n'apparait que derriere `color` -- donc ce qu'il nomme est bien une encre. « Текущий шаг » s'ecrivait en or de surface sur un voile du meme or : 1,35. */ --journey-accent-solid: var(--texte-accent); /* --- LE FOND A ORBES ------------------------------------------------- Quatre teintes assourdies : sur un sol clair, les memes valeurs qu'en sombre feraient quatre taches de couleur au lieu d'une lumiere. */ --mimex-blue-rgb: 58, 108, 186; --mimex-purple-rgb: 118, 92, 198; --mimex-green-rgb: 38, 138, 128; --mimex-gold-rgb: 186, 142, 48; /* --- LES JUMEAUX QUI MANQUAIENT --------------------------------------- LA REGLE DES JUMEAUX DIT QUE TOUTE COULEUR EXISTE EN `--x` ET EN `--x-rgb`. Vingt-deux triplets basculaient ici sans leur hexadecimal : une regle qui ecrit `var(--accent-surface)` au lieu de `rgb(var(--accent-surface-rgb))` gardait donc la valeur du SOMBRE sur le theme clair, sans que rien ne le signale. C'est une des racines des textes illisibles releves sur les pages qui ne chargent pas les couches retenues. Chaque hexadecimal est DERIVE de son triplet, jamais recopie : une seule source, et le jour ou l'un bouge l'autre suit. */ --accent-surface: rgb(var(--accent-surface-rgb)); --accent-texte: rgb(var(--accent-texte-rgb)); --cyan: rgb(var(--cyan-rgb)); --encre-action: rgb(var(--encre-action-rgb)); --encre-action-vive: rgb(var(--encre-action-vive-rgb)); --encre-texte: rgb(var(--encre-texte-rgb)); --journey-demo: rgb(var(--journey-demo-rgb)); --journey-testing: rgb(var(--journey-testing-rgb)); --mimex-blue: rgb(var(--mimex-blue-rgb)); --mimex-gold: rgb(var(--mimex-gold-rgb)); --mimex-green: rgb(var(--mimex-green-rgb)); --mimex-purple: rgb(var(--mimex-purple-rgb)); --ombre: rgb(var(--ombre-rgb)); --portal-accent-clair: rgb(var(--portal-accent-clair-rgb)); --portal-accent-fonce: rgb(var(--portal-accent-fonce-rgb)); --portal-accent: rgb(var(--portal-accent-rgb)); --portal-blue: rgb(var(--portal-blue-rgb)); --share-line: rgb(var(--share-line-rgb)); --slate-light: rgb(var(--slate-light-rgb)); } /* ========================================================================= L ACCENT DU THEME SOMBRE ========================================================================= Le sombre n'a rien a redefinir SAUF ceci : le partage de l'accent en deux roles n'existe pas dans `jetons.css`, qui n'a qu'un cyan. Les deux valeurs sont posees a la racine pour que la coquille puisse lire un role et non une primitive, des le theme par defaut. `--accent-surface-rgb` est le cyan clair retenu (« vif ») : sur du sombre c'est la SURFACE qui a besoin de monter, le texte tenant tout seul. ========================================================================= */ :root { /* --- LE FOND A ORBES, EN SOMBRE -------------------------------------- Ces quatre teintes vivaient dans `background.css`, une feuille que la base remplace. Sans elles ici, `rgba(var(--mimex-blue-rgb), .28)` etait une couleur invalide : la propriete ignoree, l'orbe disparue, et pas une ligne d'erreur. Une base doit porter ses primitives, pas les emprunter a ce qu'elle remplace. */ --mimex-blue-rgb: 95, 168, 255; --mimex-purple-rgb: 169, 139, 255; --mimex-green-rgb: 99, 215, 196; --mimex-gold-rgb: 242, 190, 99; /* --- LE FOND DE PAGE, LES DEUX MOITIES ------------------------------- `--mimex-bg` venait de `background.css`, la feuille que cette base remplace, et son jumeau n'existait nulle part : trois fonds du produit lisent `rgb(var(--mimex-bg-rgb, 7 17 31))` et rendaient donc #07111f. C'est exactement le presque-noir que la note du 26/08 de `jetons.css` declare ecarte -- les surfaces et les dosages ont tous ete arretes sur #05080d. Deux fonds de page pour un seul role, et le mauvais gagnait. */ --mimex-bg: var(--surface-sombre); --mimex-bg-rgb: var(--surface-sombre-rgb); /* --- CE QUI CREUSE ET CE QUI OMBRE ------------------------------------ L'encre des ombres n'est pas celle du texte : une ombre est toujours sombre, des deux cotes du theme. Sur sombre c'est le noir ; sur clair c'est l'encre du produit, qui salit moins qu'un noir pur. */ --ombre-rgb: var(--black-rgb); /* La profondeur d'un creux, et l'arete de lumiere qui le referme en bas. Sur sombre il y a de la place pour descendre, donc le creux est franc et l'arete a peine posee. */ --voile-creux: var(--voile-8); --voile-creux-fond: var(--voile-10); --dose-creux-arete: 0.07; --surface-relief-rail: rgba(var(--lumiere-rgb), var(--voile-4)); --texte-sur-or: var(--texte-plein); /* SUR SOMBRE LE RAIL N A PAS D OMBRE : son filet suffit a le detacher. */ --ombre-rail: none; /* UNE SOURCE, UNE DIRECTION. La teinte est une primitive ; les trois roles la lisent, et aucun ne lit les autres. Deux jetons qui se definissent l'un l'autre ne tenaient que par la specificite de `:root` sur `html`, et une reference circulaire aurait rendu l'accent entier invalide sans qu'une seule ligne le dise. */ --teinte-accent: #5ae6f8; --teinte-accent-rgb: 90, 230, 248; --accent-surface-rgb: var(--teinte-accent-rgb); /* SUR SOMBRE, LE TEXTE N A PAS BESOIN D AIDE. Le cyan du produit rend 10,61 sur le fond de page : c'est la surface qui est contrainte, pas la lettre. Les deux roles portent donc la meme valeur ici, la ou sur clair ils divergent. */ --accent-texte-rgb: var(--teinte-accent-rgb); /* LA PRIMITIVE DU PRODUIT SUIT LA TEINTE RETENUE. C'est ce qui fait descendre le choix jusqu'aux composants qu'on n'a pas encore repris : tant que `--portal-accent-rgb` gardait le cyan d'origine, l'avatar restait a l'ancien accent pendant que la page passait au vif. */ --portal-accent-rgb: var(--teinte-accent-rgb); }