/* COPIE AUTOMATIQUE DE public/base/socle-retenu.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. */ /* ========================================================================= LE SOCLE RETENU — l'échelle des filets ========================================================================= POURQUOI UNE ECHELLE PLUTOT QUE DES VALEURS. Mesure du 24/08 sur les deux maquettes : SEPT opacites de filet cyan coexistaient sur la seule page du parcours (0,52 · 0,42 · 0,30 · 0,28 · 0,28 · 0,24 · plus quatre ombres a 0,04, 0,05, 0,08 et 0,18). Aucune ne reprenait la precedente : chacune avait ete choisie au moment ou elle servait. C'est le meme motif que les quinze valeurs de flou du `backdrop-filter`. Trois valeurs nommees remplacent sept valeurs isolees, et surtout elles disent POURQUOI elles different. CE QUI FAIT VARIER LA VALEUR : LA SURFACE, PAS LE GOUT. Un filet a 0,24 sur une carte de 350 px se lit comme un bord discret. Le meme sur un bloc de 1300 px devient une carte franchement cerclee : le trait fait quatre fois plus de longueur pour la meme epaisseur, donc quatre fois plus de presence. La valeur descend quand la surface monte. Le troisieme palier ne suit pas cette regle et c'est voulu : il ne dit pas « voici un bord », il dit « ceci appelle un geste ». Il est reserve, et une seule chose par page peut le porter. L EPAISSEUR EST LA MEME PARTOUT : 1 px. Deux pixels sur le cadre appuye faisaient trop pour de l'epure ; c'est l'opacite qui porte la difference, pas la matiere. ========================================================================= */ /* ========================================================================= LES PRIMITIVES QUE LE SOCLE AJOUTE — le niveau 1, des valeurs brutes ========================================================================= POURQUOI ELLES EXISTENT. Hors du niveau 1, aucune couleur ne s'ecrit en dur. Les litteraux que ces sept paires remplacent etaient ecrits jusqu'a onze fois chacun dans les couches retenues et les feuilles du produit : autant d'endroits a tenir le jour ou l'un d'eux bouge. CHACUNE EXISTE EN PAIRE, hexadecimal et triplet. Un jeton sans son jumeau se paie : `--mimex-bg` avait sa valeur claire, `--mimex-bg-rgb` n'existait nulle part, et quatre panneaux flottants sont restes sombres sur fond clair, leur encre passee au noir. Contraste mesure : 1,05. AUCUNE NE SUIT LE THEME, et c'est ce qui les distingue de l'echelle neutre : `--ink-50` dit une CLARTE et se retourne, celles-ci disent une MATIERE. ========================================================================= */ :root { /* LE SOMBRE DANS LEQUEL L ACCENT SE MELE : le fond de l'aplat d'accent et de son etat appuye. Ecrit neuf fois en dur, jamais nomme. */ --accent-sombre: #0b2a38; --accent-sombre-rgb: 11, 42, 56; /* LA LUMIERE VERS LAQUELLE ON ECLAIRCIT, ecrite onze fois a l'autre bout des memes melanges. Elle sert aussi aux aretes et aux reliefs. ELLE NE SE RETOURNE PAS, et c'est tout son interet. Ecrite sur `--white-rgb`, une arete devenait une ligne SOMBRE en clair : un creux en haut d'une carte censee etre surelevee. Une arete est une LUMIERE, pas une encre. */ --lumiere: #ffffff; --lumiere-rgb: 255, 255, 255; /* L ENCRE QUI SE LIT SUR UN APLAT D ACCENT. Ni la surface sombre, ni le texte plein : une troisieme chose. Le fond passe du cyan a l'or, deux teintes MOYENNES, et c'est l'encre sombre qui se lit sur les deux. */ --encre-sur-aplat: #0c121a; --encre-sur-aplat-rgb: 12, 18, 26; /* L ENCRE QUI SE LIT SUR UNE PASTILLE DE TEINTE PLEINE. Elle n'est pas la precedente et c'est mesure : sur les teintes vives des pastilles, `#06222b` rend 8,74 la ou l'encre de l'aplat rendait 2,1. Les deux presque-noirs restent donc distincts tant qu'une mesure ne dit pas qu'un seul suffit. */ --encre-sur-teinte: #06222b; --encre-sur-teinte-rgb: 6, 34, 43; /* LE NEUTRE DE LA DONNEE : la serie, la colonne ou la ligne qui ne se compare a rien. Ecrit huit fois en triplet nu dans les peaux de page -- une couleur en dur qu'aucun balayage ne voyait, parce qu'elle n'a ni diese ni `rgb()`. Il ne se retourne pas : c'est une teinte de donnee. */ --teinte-neutre: #94a3b8; --teinte-neutre-rgb: 148, 163, 184; /* LES DEUX BOUTS D UNE ECHELLE DE MESURE. Ils ne suivent pas le theme parce qu'ils SONT la donnee : le bloc « imaginaire / reel » oppose un noir et un blanc, et cette opposition est tout son propos. Un theme qui les retournerait effacerait ce qu'ils mesurent. */ --extreme-sombre: #0b1017; --extreme-sombre-rgb: 11, 16, 23; --extreme-clair: #f8fafc; --extreme-clair-rgb: 248, 250, 252; } :root { /* Les grands blocs de contenu : sections, cartes de tableau de bord. 0,10 et non 0,14 : sur un bloc large le trait fait une longue course, et a 0,14 il se lisait encore comme un CADRE. Ce n'est pas ce qu'on lui demande. Il doit seulement dire ou le bloc s'arrete, et le dire dans la teinte de la page : un ECHO de cyan, pas un cerne. */ --filet-large: rgba(var(--portal-accent-rgb), var(--voile-4)); /* Les petites cartes : contacts, vignettes, elements de liste. */ --filet-petit: rgba(var(--portal-accent-rgb), var(--voile-7)); /* CE QUI APPELLE UN GESTE. Une seule chose par page le porte. */ --filet-action: rgba(var(--portal-accent-rgb), var(--voile-10)); /* Une seule epaisseur. La difference se joue sur l'opacite. */ --filet-epaisseur: 1px; /* ----------------------------------------------------------------- L ACCENT EN APLAT N EST PAS L ACCENT ----------------------------------------------------------------- `#00cfea` est juste en FILET, ou il couvre 1 px, et en TEXTE, ou il ne couvre que des jambages. En APLAT il tire vers le fluo : ce n'est pas son intensite qui change, c'est son aire. D'ou un second jeton. Une seule valeur pour les deux usages obligerait a choisir entre un filet terne et un aplat criard. 62 % : assez de cyan pour qu'on le reconnaisse, assez de fond pour qu'il porte du texte blanc. En dessous il devient une ardoise bleutee, au-dessus il recommence a briller. ----------------------------------------------------------------- */ --accent-aplat: color-mix(in srgb, rgb(var(--portal-accent-rgb)) 62%, var(--accent-sombre)); /* Le survol change l'INTENSITE, jamais la teinte : changer de couleur sous le pointeur annonce une autre action que celle qu'on declenche. IL FONCE, IL N'ECLAIRCIT PAS. Premiere version a 74 %, donc plus clair que le repos : le contraste du libelle blanc tombait de 3,77 a 2,98, c'est-a-dire que survoler le bouton rendait son texte MOINS lisible. Le cyan etant une couleur claire, aller vers lui va vers le blanc. A 50 % le contraste remonte a 4,86 (AA), et l'assombrissement se lit comme un enfoncement, ce qui est le geste attendu. */ --accent-aplat-survol: color-mix(in srgb, rgb(var(--portal-accent-rgb)) 50%, var(--accent-sombre)); } /* ========================================================================= CE QUI PORTE LA TEINTE DE L INTERFACE, ET CE QUI PORTE LA SIENNE ========================================================================= La regle qui manquait, et qui explique pourquoi la question « faut-il retirer cette couleur ? » revenait a chaque page. L INTERFACE PORTE LE CYAN. Les surfaces, les cadres, les filets, les boutons, les liens, les champs, les etats de saisie : tout ce que le produit fabrique pour qu'on puisse s'en servir parle d'une seule voix. C'est la qu'un violet, un bleu ou un vert de plus est un dialecte, parce que rien dans la donnee ne le justifie : il vient de la feuille qui a rencontre l'element en premier. LA DONNEE PORTE SA PROPRE COULEUR. Un role, une etape, un etat, une categorie, une ligne de liste : ce sont des faits, et la couleur y fait un travail que le texte ferait plus lentement. Trois roles en trois teintes se distinguent avant d'etre lus ; les memes en cyan ne se distinguent plus du tout. LE TEST, quand on hesite devant une couleur : est-ce que deux exemplaires du meme objet peuvent avoir des couleurs DIFFERENTES ? oui -> c'est une donnee, la couleur reste, et elle doit venir d'une variable posee sur l'objet (`--row-rgb`, `--pastille-rgb`) plutot que d'une valeur ecrite en dur ; non -> c'est de l'interface, elle prend la teinte globale. Deux boutons « Enregistrer » ne peuvent pas etre de deux couleurs : interface. Deux pastilles de role, si : donnee. Deux blocs de contenu, non : interface. Deux rails de ligne, si : donnee. TROISIEME CAS, AJOUTE APRES DEUX ERREURS : LE RETOUR D ACTION. Un objet qui annonce un RESULTAT garde la couleur de ce resultat, meme s'il est de l'interface par sa forme. « Copier » est vert parce qu'il dit « c'est copie » ; « Echec de la connexion » est rouge parce que la liaison est rompue. Le vert du succes et le vert de l'acquis sont la meme idee a deux moments differents. J'ai neutralise ces deux-la avant de comprendre, en les rangeant du cote interface parce qu'ils ont la forme d'un bouton et d'une pastille. La forme ne decide pas : ce qui decide est si l'objet PARLE DU MONDE ou de lui-meme. CE QUE CA NE DIT PAS. Que toute donnee doive etre coloree. Une mention qui ne se compare a rien n'a rien a signaler : elle prend le neutre, qui est aussi une teinte de la famille. ========================================================================= LE CONTRAT DES JETONS PORTES PAR LA DONNEE ========================================================================= HUIT NOMS SONT POSES AILLEURS QUE DANS LA FEUILLE QUI LES LIT : par un gabarit, par un script, ou par une autre feuille. C'est la mecanique la plus employee du produit, et elle n'etait declaree nulle part -- un releve qui ne lit que du CSS les declare morts, et un composant qui les lit depend d'un nom que personne ne lui garantit. Un jeton local devient un CONTRAT au moment ou une feuille le lit sans le poser, et un contrat se declare. | jeton | pose par | ce qu'il vaut | s'il manque | |------------------|-----------------------------------|------------------------|-----------------------------------| | `--row-rgb` | 15 gabarits + `admin-dashboard` | un triplet | ce fichier le pose : `--teinte-bleue` | | `--row-solide` | `admin-dashboard.css` | une couleur opaque | ce fichier le pose : `rgb(--row-rgb)` | | `--step-rgb` | `journey.css`, 7 fois | un triplet par etape | le lecteur retombe sur son repli | | `--psy-rgb` | `viewer/tabs/psychology.blade` | un triplet par trait | repli neutre, ecrit dans la peau | | `--serie-rgb` | `etat-de-ressource`, `fonctionnement` | un triplet par serie | le neutre, pose par la peau | | `--colonne-rgb` | sept peaux de page | un triplet par colonne | le neutre, pose par la peau | | `--pastille-rgb` | `elements-retenus`, `lk`, `journey` | un triplet par variante | la declaration tombe : point d'extension assume | | `--second-*` | `elements-retenus`, 3 surfaces | teinte et dosages | le cas du fond de base | `--serie-rgb` ET `--colonne-rgb` SONT LE MEME JETON SOUS DEUX NOMS, et les fondre demande de trancher dans neuf peaux dont deux portent les deux : ce n'est pas une correction, c'est une decision, et elle reste ouverte. ========================================================================= */ /* ========================================================================= L ECHELLE DES VOILES — douze barreaux ========================================================================= POURQUOI UNE ECHELLE, ET POURQUOI DOUZE. Mesure sur les feuilles du produit : 3 288 ecritures `rgba(var(--x), a)` se repartissent sur QUATRE-VINGT-QUATRE niveaux d'opacite, dont 79 sur la seule `--white-rgb`. Personne n'a choisi 84 niveaux ; ils se sont accumules, un par besoin, chacun regle a l'oeil au moment ou il servait. CE N EST PAS UN DEFAUT DE PROPRETE, C EST LE VERROU DU THEME CLAIR. Un voile n'est pas une couleur, c'est un ECART au fond. Retourner le fond retourne le sens de chaque voile, donc chaque niveau doit etre retraduit. A 84, la traduction est un travail sans fin et sans controle. A douze, c'est une table qu'on lit d'un coup d'oeil. L ECHELLE ETAIT DEJA LA A MOITIE : 87 % des ecritures tombent deja sur une grille de 0,02. Personne ne l'avait fermee. POURQUOI CES DOUZE VALEURS-LA. On a place les barreaux la ou sont les usages, puis chiffre ce que chaque taille couterait -- en ecart ABSOLU et en ecart RELATIF, parce que 0,01 sur un voile a 0,04 se voit et sur un voile a 0,80 non. dix barreaux 2,7 % des ecritures bougeraient de plus de 25 % ONZE 0,8 % douze 0,8 %, et l'ecart moyen baisse encore Le douzieme barreau est 0,24, INSERE sans deplacer les autres : il est ecrit 97 fois dans le produit et tombait pile entre 0,20 et 0,28, le seul mauvais ajustement de toute la coquille (16,7 %). Une echelle qui grandit a chaque cas genant n'est plus une echelle ; celle-ci grandit d'un cran pour 3 % des voiles, et on a verifie que l'insertion ne coute rien aux voisins. LE PAS EST GEOMETRIQUE, fin en bas. L'oeil lit un voile en RAPPORT, pas en difference : de 0,02 a 0,04 le changement est enorme, de 0,76 a 0,78 il n'existe pas. CE SONT DES NOMBRES, PAS DES COULEURS, et c'est voulu : n'importe quelle teinte les emploie -- `rgba(var(--portal-accent-rgb), var(--voile-7))`. Une echelle par teinte serait 81 echelles. ========================================================================= */ :root { --voile-1: 0.02; /* la limite du visible : une separation qu'on devine */ --voile-2: 0.04; /* un fond de champ, une ligne de tableau au repos */ --voile-3: 0.06; /* le survol d'une ligne, un creux a peine marque */ --voile-4: 0.09; /* un filet de grande surface, une bande de pied */ --voile-5: 0.14; /* un fond de bouton, un filet de bloc */ --voile-6: 0.20; /* un etat pose : selectionne, actif */ --voile-7: 0.24; /* le filet d'un objet qu'on clique */ --voile-8: 0.28; /* un aplat de teinte assume */ --voile-9: 0.40; /* un texte de second plan */ --voile-10: 0.56; /* un texte secondaire lisible */ --voile-11: 0.76; /* un texte courant sur fond contraste */ --voile-12: 0.94; /* l'opacite pleine, sans la durete du 1 */ } /* ========================================================================= LES ROLES — le niveau 2, celui que les composants lisent ========================================================================= LE NIVEAU QUI MANQUAIT. Le plan pose trois niveaux : les primitives (`jetons.css`), les ROLES, et les composants qui ne lisent QUE les roles. Le niveau 2 n'existait pas. Les composants lisaient la primitive et fabriquaient leur opacite au passage -- c'est exactement le geste qui a produit 84 niveaux d'alpha, un par endroit ou quelqu'un a eu besoin d'un voile. LA REGLE, ET ELLE EST DURE : hors de ce fichier et de `jetons.css`, aucune feuille n'ecrit `rgba(var(--x), 0.12)`. Elle ecrit `var(--texte-calme)`. Si le role qu'elle veut n'existe pas, on l'ajoute ICI, en disant pourquoi. POURQUOI LE THEME NE CHANGE PAS UNE SEULE LIGNE DE CE FICHIER. Les roles sont construits sur `--white-rgb`, `--ink-200-rgb`, `--slate-rgb` : le theme clair retourne ces PRIMITIVES, et tous les roles suivent d'un coup. C'est deja verifie sur la coquille entiere -- barre, menu, pied, modale -- ou le releve en clair est le miroir exact du releve en sombre, sans une regle de theme. LES NOMS DISENT LA FONCTION, pas la valeur. `--texte-calme` reste juste si on decide un jour qu'il vaut 0,72 ; `--texte-82` serait faux le jour meme. ========================================================================= */ :root { /* --- LES SURFACES --------------------------------------------------- Nommees par ce qu'elles font tenir, pas par leur clarte : « claire » et « sombre » s'inversent avec le theme, « flottante » non. */ /* CE QUI FLOTTE N A PLUS DE ROLE GENERIQUE, et c'est une suppression. Il y avait ici `--surface-flottante` et son flou, decrits comme la surface de la barre et du rail. Les deux ont ensuite pris chacun le leur -- `--surface-barre` / `--flou-barre`, `--surface-rail` / `--flou-rail` -- parce qu'ils ne flottent pas sur la meme chose, et personne n'avait retire le premier. Aucune regle du produit ne lisait plus ces deux noms. Un role que personne ne lit est un piege : le prochain qui cherche « la surface qui flotte » trouve celui qui ne sert plus. */ /* LA BARRE DU HAUT NE FLOTTE PAS SUR L ARDOISE, ELLE FLOTTE SUR LE SOL. C'est ce qui la distingue du rail et des cartes : posee sur le fond a orbes, elle les laisse passer sans les teinter. Le flou est plus court que celui du rail -- 12 contre 14 -- parce qu'elle est plus mince et qu'un flou long y ferait une bande grise. */ /* 0,86 ET NON LE CRAN PLEIN : « barre pleine », choisie a l'atelier. Le voile de l'echelle vaut 0,94, et douze autres regles le lisent -- la barre prend donc sa valeur, elle ne deplace pas le cran. */ --surface-barre: rgba(var(--surface-sombre-rgb), 0.86); --flou-barre: blur(12px); /* Ce qui INTERROMPT le contenu et doit etre lu seul : la modale de sortie. Opaque, sans flou : on ne laisse pas transparaitre ce qu'on interrompt. */ --surface-modale: rgb(var(--ink-900-rgb)); --ombre-modale: 0 24px 60px rgba(var(--black-rgb), var(--voile-10)); /* Un objet plein pose SUR une surface : la pastille d'avatar. */ --surface-pleine: rgba(var(--slate-mid-rgb), var(--voile-12)); /* LE GRAPHE N EST PAS DU TEXTE : personne ne le mesure. Ses graduations et sa grille etaient ecrites en dur pour du sombre (#cbd5e1 sur du blanc : 1,4 de contraste). Elles passent par des jetons, et le trace les relit quand le theme change. Les COURBES, elles, gardent leurs teintes : ce sont des donnees, pas de l'interface. ILS DERIVENT, ILS NE RECOPIENT PLUS. `--graphe-encre` valait `#cbd5e1`, la valeur exacte de `--ink-300` ; `--graphe-titre` valait `#94a3b8`, celle de `--ink-400`. Recopiees, les deux obligeaient a reecrire le clair a la main une seconde fois. */ --graphe-encre: var(--ink-300); --graphe-titre: var(--ink-400); --graphe-grille: rgba(var(--white-rgb), var(--voile-4)); /* LA TEINTE DE SECOND RANG. Les deux actions qui suivent l'appel partagent une construction et ne different que par leur teinte : l'or pour la commande, le neutre pour la note. Sur sombre l'appel est cyan : l'or du produit n'a personne a qui ressembler, il reste le sien. */ /* LES DEUX APLATS REAGISSENT AVEC LA MEME FORCE. Un voile d'or et un voile neutre ne pesent pas pareil a voile egal : sur clair, le neutre (une encre presque noire) assombrissait deux fois et demie plus que le bronze pour le meme cran (mesure : 0,0925 de luminance contre 0,0352). Les crans sont donc REGLES PAR TEINTE ET PAR THEME, pour que le geste se sente pareil sur les deux boutons. ILS S APPELLENT « DOSE » ET PLUS « VOILE », parce qu'ils n'appartiennent pas a l'echelle des douze. Sous le nom `--voile-*`, rien ne disait qu'ils y echappaient : un balayage qui verifie l'echelle les comptait pour six fautes, et un controle qui crie faux est un controle qu'on abandonne. Verifie avant de renommer : sur les neuf valeurs, une seule tombe sur un barreau (`note-repos`, 0,20), et l'aligner seule casserait la progression des trois etats. */ --dose-cmd-repos: 0.26; --dose-cmd-survol: 0.34; --dose-cmd-appui: 0.46; --dose-note-repos: 0.20; --dose-note-survol: 0.29; --dose-note-appui: 0.33; /* LES TROIS TRIPLETS PORTENT LEUR SUFFIXE. Onze triplets du corpus ne le portaient pas ; sans lui, on ne peut pas verifier les paires par un balayage, donc on ne les verifie pas du tout. */ --teinte-action-rgb: 242, 190, 99; --encre-action-rgb: 226, 232, 240; --encre-action-vive-rgb: 255, 255, 255; /* Ce qu'on peut cliquer et qui doit se voir sans crier : le bouton. */ --surface-controle: rgba(var(--white-rgb), var(--voile-5)); --surface-controle-survol: rgba(var(--white-rgb), var(--voile-6)); /* CE QUI REPOND AU POINTEUR SANS RIEN AFFIRMER : le survol d'une entree de liste ou de rail. Un cran au-dessus de l'invisible, un cran sous ce qui se donne pour un objet. */ --surface-effleuree: rgba(var(--white-rgb), var(--voile-3)); /* Ce qu'on peut cliquer et qui ne doit PAS attirer : la pastille de compte dans la barre, le compteur du rail. Elles sont la pour etre trouvees, pas pour etre vues. ELLE SE BATIT SUR `--white-rgb`, PAS SUR `--slate-light`. J'avais pris la seconde en « rangeant » la valeur du produit dans un role, et change la teinte au passage : `--slate-light` vaut 148/163/184 en sombre mais 248/250/252 en clair, donc un voile presque blanc sur un fond presque blanc. Les deux pastilles disparaissaient en basculant. C'est le meme defaut que celui deja corrige sur trois filets : une teinte de l'echelle NEUTRE est nommee par sa clarte, elle ne convient qu'a ce qui doit rester clair des deux cotes. */ --surface-discrete: rgba(var(--white-rgb), var(--voile-4)); /* L'etat POSE, celui qui dit « vous etes ici ». La teinte du produit, au barreau ou elle porte un texte blanc sans le noyer. */ --surface-active: rgba(var(--portal-accent-rgb), var(--voile-7)); /* --- LES TEXTES ----------------------------------------------------- UNE SEULE TEINTE PORTEUSE, ET C EST UN CHANGEMENT. Le releve montre que la coquille employait DEUX teintes de texte : `--ink-200-rgb` pour le menu et la barre, `--white-rgb` pour le pied. En theme sombre l'ecart est invisible (226 232 240 contre 255 255 255). En theme CLAIR les deux primitives se retournent differemment -- 51 65 85 contre 17 24 39 -- et le pied devient franchement plus noir que le menu, sans raison. Tout le texte de coquille passe donc par `--ink-200-rgb`. Le blanc plein reste, mais pour un seul emploi : l'etat actif, qui doit trancher. CINQ ROLES, CINQ BARREAUX, aucun doublon : deux noms qui portent la meme valeur sont deux noms de trop, et le jour ou l'un doit bouger personne ne sait plus lequel des deux il tenait. */ /* LA COULEUR DU TEXTE PAR DEFAUT, celle que le corps pose et que tout herite. Le controle a montre qu'elle manquait : sans elle, treize elements de la coquille reprenaient le blanc du navigateur. Elle n'a pas d'opacite -- c'est le plein, et c'est ce qui donne un sens aux barreaux en dessous. */ /* IL LIT LE ROLE, PAS LE CRAN, et c'est la ligne juste en dessous qui le dit : « `--ink-200` dit une CLARTE, `--encre-texte` dit un ROLE, et c'est le role que le theme doit pouvoir deplacer ». Ce plein-ci lisait la clarte -- la seule exception de la famille, a deux lignes de la regle qui l'interdit. EN SOMBRE, RIEN NE CHANGE : les deux jetons y valent le meme (226, 232, 240), ce qui est exactement pourquoi l'ecart a pu vivre la sans se voir. EN CLAIR, LA HIERARCHIE ETAIT INVERSEE. Le theme descend l'encre du texte sur `--ink-50` (17, 24, 39) « pour que les crans eteints restent lisibles », mais laissait le PLEIN sur `--ink-200` (51, 65, 85). Mesure sur le fond de page : le plein rendait 9,15 et le cran `fort`, qui est en dessous de lui, 13,5. Le texte courant etait donc le moins lisible de l'echelle, et toute la page heritait de lui -- trente-deux classes, sans qu'aucune ne soit fautive. C'est ce qui faisait paraitre le clair plus mou que son modele. */ --texte-plein: rgb(var(--encre-texte-rgb)); /* L ECHELLE DU TEXTE RIDE UNE ENCRE NOMMEE, pas un cran de l'echelle neutre : `--ink-200` dit une CLARTE, `--encre-texte` dit un ROLE, et c'est le role que le theme doit pouvoir deplacer. */ --encre-texte-rgb: var(--ink-200-rgb); /* LE CRAN LE PLUS BAS EST POSE PAR LE THEME, et c'est mesure, pas esthetique : eteindre du texte le rapproche du fond, et un fond clair est deja tout pres du blanc ou vit le texte eteint. A 56 %, l'encre claire sur sombre rend 5,42 ; la meme valeur sur clair rend 4,00. */ --voile-texte-second: var(--voile-10); /* QUATRE ROLES, PAS CINQ. Il y avait un `--texte-faible` a 40 %, repris du produit : il rend 3,31 sur sombre, donc SOUS le seuil du texte courant, et le pied de page le porte depuis toujours. Le premier cran qui passe est 0,50 -- a six centiemes de `second`, donc indistinguable. Entre « lisible » et « fond », il n'y a pas la place pour deux niveaux eteints. Un role qu'on ne peut pas rendre lisible sans le confondre avec son voisin n'est pas un role : on le supprime au lieu de le rattraper. */ --texte-vif: rgb(var(--white-rgb)); /* l'etat actif, seul cas de plein */ --texte-fort: rgba(var(--encre-texte-rgb), var(--voile-12)); /* un libelle d'action, un lien de menu */ --texte-calme: rgba(var(--encre-texte-rgb), var(--voile-11)); /* un onglet au repos, un lien de pied */ --texte-second: rgba(var(--encre-texte-rgb), var(--voile-texte-second)); /* une mention, une explication */ /* L ACCENT EN TEXTE lit le role du TEXTE, qui n'est pas celui de la surface : 4,5 de contraste au lieu de 3,0, donc un or plus profond sur clair. Les deux se confondent sur sombre et divergent sur clair, ce qui est exactement la raison d'etre du partage. IL EST PLEIN, ET C EST LE POINT. `--accent-texte-rgb` est deja la valeur calculee pour tenir 4,5 en texte ; la voiler a 76 % la ramenait a 3,45 et annulait le calcul qui l'avait produite. Une valeur calibree pour un seuil ne se re-voile pas. */ --texte-accent: rgb(var(--accent-texte-rgb)); /* L OR DE L ETAPE « PROGRAMMES », EN ENCRE. `--teinte-or` est une teinte de DONNEE : elle porte `--journey-course-rgb`, et la couleur dit l'etape, donc elle ne se retourne pas. Elle ne peut alors pas servir d'encre sur un fond qui, lui, se retourne -- or clair sur sol clair, 1,47 mesure. CE N EST PAS `--texte-accent` : sur sombre l'accent est CYAN, et prendre ce role aurait rendu bleu un texte qui dit « programmes ». Mesure : la correction changeait 1 966 pixels en theme sombre, ou rien n'etait casse. Il faut donc une PAIRE, pas un emprunt : l'or de l'etape a un bout clair (celui-ci, qui se lit sur du noir) et un bout profond, pose par le theme clair. La pastille garde son identite d'etape des deux cotes, c'est le mot qui redevient lisible. */ --teinte-or-texte-rgb: var(--teinte-or); /* --- LES FILETS NEUTRES --------------------------------------------- Les filets de teinte (`--filet-large`, `--filet-petit`, `--filet-action`, plus haut) disent « ceci appartient au produit ». Ceux-ci ne disent que « ceci s'arrete la ». LA VALEUR DESCEND QUAND LA SURFACE MONTE, comme pour les filets de teinte : un trait fait quatre fois plus de presence sur un bloc de 1 300 px que sur une carte de 350. */ --filet-neutre-large: rgba(var(--white-rgb), var(--voile-4)); /* une bande pleine largeur */ --filet-neutre-bloc: rgba(var(--white-rgb), var(--voile-5)); /* un bloc, une modale */ --filet-neutre-controle: rgba(var(--white-rgb), var(--voile-7)); /* un objet qu'on clique */ /* LE FILET D ACCENT est une SURFACE au sens des seuils : il lui suffit de 3,0. Il double `--filet-petit`, qui vit plus haut dans ce fichier et lit encore la primitive ; celui-la sera repris avec le lot des cartes. */ --filet-accent: rgba(var(--accent-surface-rgb), var(--voile-7)); /* --- LES CARTES ------------------------------------------------------ « RELIEF », RETENU A L ATELIER. Un degrade tres court -- deux crans d'ecart, pas plus -- qui suffit a dire que la surface n'est pas plate. Un degrade plus long ferait un objet peint au lieu d'un objet eclaire. */ --surface-carte: linear-gradient(180deg, rgba(var(--slate-mid-rgb), var(--voile-11)), rgba(var(--slate-mid-rgb), var(--voile-10))); /* L ARETE NE SUIT PAS LE THEME. Ecrite sur `--white-rgb`, elle devenait une ligne SOMBRE en clair : un creux en haut d'une carte censee etre surelevee. Une arete est une LUMIERE, pas une encre. Sur clair elle ne fait presque rien, et c'est juste : une carte surelevee sur un sol clair se dit par son ombre, pas par sa crete. */ --arete-lumiere: inset 0 1px 0 rgba(var(--lumiere-rgb), var(--voile-2)); /* UNE OMBRE N A PAS DE VERSION CLAIRE, pour la raison inverse : c'est une absence de lumiere. Elle reste noire des deux cotes -- donc `--black-rgb` et non `--ombre-rgb`, qui se deplace vers l'encre du produit en clair. */ --ombre-carte: 0 3px 9px rgba(var(--black-rgb), var(--voile-5)); /* LE HALO D UN TEXTE N EST PAS UNE OMBRE, ET IL SE RETOURNE. Une ombre portee dit la hauteur d'une boite ; un halo sous un titre ne dit rien du relief, il DETACHE l'encre du decor pose derriere elle. Sa couleur n'est donc pas « noir », c'est « le contraire de l'encre » : noir sous un titre blanc, blanc sous un titre sombre. Ecrit en noir des deux cotes, il tachait le theme clair -- un fantome gris a droite de chaque lettre du titre de parcours, visible a 390 px comme a 1440. C'est le seul cas ou le retournement du theme doit passer par un jeton a lui : `--ombre-rgb` se deplace vers l'encre du produit et aurait garde la tache, `--black-rgb` ne bouge pas du tout. LE REPLI EST LE NOIR : sans la reprise, aucun theme clair n'existe et la valeur d'origine doit revenir telle quelle. */ --halo-texte-rgb: var(--black-rgb); /* LA CARTE ACCENTUEE garde le voile de teinte du produit. Ce qui la designe est son liseré de tete, pas son fond : un fond plus fort ferait une alerte, et il y en a une par page. */ --surface-accentuee: rgba(var(--accent-surface-rgb), var(--voile-4)); /* --- LE RAIL --------------------------------------------------------- « GROUPE » ET « CREUX », RETENUS A L ATELIER. Le rail flotte sur le sol comme la barre du haut, mais plus discretement : il accompagne, il ne surplombe pas. */ --surface-rail: rgba(var(--surface-sombre-rgb), var(--voile-8)); --flou-rail: blur(14px); --filet-rail: rgba(var(--white-rgb), var(--voile-4)); /* L ETAT DU RAIL SE CREUSE, il ne s'allume pas. C'est ce qui le distingue de l'onglet de la barre, qui lui se met en gras : deux navigations, deux langages, et on ne les confond pas. LA PROFONDEUR EST POSEE PAR LE THEME (`--voile-creux`) : sur sombre un creux peut descendre a 28 %, sur clair 9 % suffisent et 28 % feraient un trou. Meme geste, profondeur differente. */ --creux-fond: rgba(var(--ombre-rgb), var(--voile-creux)); --creux-relief: inset 0 1px 2px rgba(var(--ombre-rgb), var(--voile-creux-fond)), inset 0 -1px 0 rgba(var(--lumiere-rgb), var(--dose-creux-arete)); /* UN CHAMP DE SAISIE N EST PAS UN CREUX DE RAIL, et il a fallu le mesurer pour s'en convaincre. Les deux se creusent, mais pas dans la meme matiere : l'etat d'un rail se creuse DANS le rail, qui est sombre des deux cotes ; un champ se creuse dans une CARTE, qui se retourne avec le theme. Le champ lisait `--creux-fond`, soit 9 % d'encre sur clair. Sur une carte a 76 % de blanc, le champ etait donc plus SOMBRE que ce qui le porte : il tachait au lieu de s'enfoncer, et un formulaire se lisait comme une suite de rectangles gris. Le modele de l'atelier, lui, le remplit de LUMIERE et le creuse par une ombre interieure -- mesure a blanc plein, filet d'encre a 14 %, creux a 4 %. EN SOMBRE RIEN NE CHANGE : le modele et le produit y disaient deja la meme chose, a quatre centiemes pres. C'est le theme clair qui n'avait pas ete retourne. LE FILET SUIT LA MEME LOGIQUE. En sombre il porte la teinte, comme tous les filets de grande surface. En clair, une teinte a 9 % sur du blanc ne se voit pas -- le champ n'a plus de bord -- et le modele lui donne une encre neutre a 14 %. Un filet d'or autour de chaque champ ferait par ailleurs beaucoup d'or sur un formulaire. */ --champ-fond: var(--creux-fond); --champ-filet: var(--filet-large); --champ-relief: none; /* UNE BULLE DE SURVOL EST OPAQUE, ET CE N EST PAS NEGOCIABLE. ------------------------------------------------------------------- Elle se pose SUR une figure -- des barres, une courbe, une grille de cinquante-six traits -- et elle explique ce qu'on survole. A 96 %, les quatre pour cent restants laissent passer les barres qui sont dessous : le texte se lit sur un fond qui bouge d'un mot a l'autre, et l'on relit. Quatre pour cent suffisent a brouiller une phrase de douze pixels. ELLE PREND LE SOL DE LA PAGE, PAS UNE ARDOISE A ELLE. Le fond de page est le seul aplat dont on sait qu'il contraste avec l'encre courante des deux cotes du theme -- c'est sa definition. Une teinte propre demanderait de recalibrer son encre a chaque retournement. CE QUI LA DETACHE N EST DONC PAS SA COULEUR mais son FILET et son OMBRE : elle est la meme matiere que la page, soulevee au-dessus d'elle. C'est la meme idee qu'une carte, avec une ombre plus longue parce qu'elle flotte plus haut. */ /* CE QUI SEPARE DEUX LIGNES D UNE LISTE EN CARTES. ------------------------------------------------------------------- C'est un DEMI-ecart : `border-spacing` en pose un de chaque cote, donc deux lignes voisines en recoivent le double. Cinq ici font dix a l'ecran. IL EST NOMME PARCE QUE DEUX ENDROITS EN DEPENDENT, et pas du meme cote : le tableau l'ecarte, et le volet d'une ligne de client l'ANNULE par une marge negative quand il est ferme. Ecrits chacun leur nombre, les deux se desaccordent au premier reglage -- c'est deja arrive, et le volet ferme reprenait alors dix pixels de haut sans que personne ne l'ait demande. */ --liste-ecart: 5px; --surface-bulle: rgb(var(--mimex-bg-rgb)); --filet-bulle: rgba(var(--white-rgb), var(--voile-5)); /* L OMBRE D UNE BULLE RESTE NOIRE DES DEUX COTES, comme celle des cartes : une ombre est une absence de lumiere, elle n'a pas de version claire. */ --ombre-bulle: 0 16px 40px rgba(var(--black-rgb), 0.34); /* --- LES ESPACEMENTS ------------------------------------------------ « COMPACTE », RETENU A L ATELIER. Deux valeurs seulement : ce qui separe deux sections, et ce qui respire dans une carte. Le reste de la geometrie n'est pas encore passe en variable -- les espacements releves vont de 4 a 52 px sans grille -- et c'est le lot suivant. */ /* --- L ECHELLE DES ESPACEMENTS -------------------------------------- TREIZE CRANS SUR UNE BASE DE DEUX, et le deux n'est pas un gout : les huit valeurs les plus ecrites du produit sont 10, 12, 14, 8, 16, 18, 6, 4. Le produit travaille deja sur une grille de 2, personne ne l'avait fermee. POURQUOI PAS UNE GRILLE DE 4, qui serait plus courte. Elle deplacerait 1 465 ecritures -- 45 % du total -- de deux pixels chacune, dont les 447 « 10 px » et les 394 « 14 px ». Sur une interface compacte, ce n'est pas un rangement, c'est une refonte de la densite. Mesure : la base 2 laisse 76 % des ecritures exactes, la grille de 4 en laisse 42 %. UN PIXEL NE S ARRONDIT PAS COMME UNE OPACITE. Deux pixels se voient ; deux centiemes d'opacite non. L'echelle des espacements est donc plus serree que celle des voiles, sur une plage pourtant plus large. LES CRANS SE COMPOSENT : tous multiples de 2, donc trois marges empilees tombent encore sur un cran, et deux colonnes voisines ne derivent pas. */ --e-1: 2px; --e-2: 4px; --e-3: 6px; --e-4: 8px; --e-5: 10px; --e-6: 12px; --e-7: 14px; --e-8: 16px; --e-9: 20px; --e-10: 24px; --e-11: 32px; --e-12: 40px; --e-13: 48px; --e-14: 64px; /* AU-DELA DE 32 px, PLUS RIEN N EST ECRIT PLUS DE HUIT FOIS dans le produit : il ne separe pas ses sections par de grands intervalles, il les separe par des cartes. Les trois derniers crans servent des ROLES, pas des usages -- et 40 est la valeur que la densite « compacte » a fixee. */ /* Le remplissage de la zone de contenu. Il n'est pas symetrique : le bas porte le pied de page, donc il respire un cran de plus. */ --espace-page: var(--e-11) var(--e-11) var(--e-12); /* LES DEUX JETONS DE LIGNE EXISTENT. Trois feuilles les lisaient, aucune ne les posait : `var(--x, repli)` qui ne trouve pas `--x` tient, ne signale rien, et ne suit aucun theme. Le defaut est ici, a la valeur que les onze replis ecrivaient chacun de leur cote. */ --row-rgb: var(--teinte-bleue); --row-solide: rgb(var(--row-rgb)); /* La largeur ou le texte cesse d'etre confortable a lire en pleine page. */ --large-page: 1400px; --large-pied: 920px; /* Les deux intervalles que la densite « compacte » a fixes. */ --espace-section: var(--e-12); --espace-carte: var(--e-7); /* LA HAUTEUR DE LA BARRE EST UN JETON, PAS UN NOMBRE RECOPIE. Le rail commence ou elle finit ; le produit ecrivait 63 quand elle en faisait 61, soit deux pixels de fente. Invisible -- jusqu'au jour ou l'on change la barre et ou la fente devient un chevauchement. Les deux lisent maintenant la meme valeur : 50 de hauteur minimale, deux fois 5 de marge, un pixel de filet. */ --haut-barre: 61px; /* LE RAIL A DEUX LARGEURS, PAS UNE : deploye il montre ses libelles, replie il ne garde que les icones et rend 170 px au contenu. Sur un portable de 1280, c'est la difference entre deux colonnes de cartes et une seule. Le troisieme etat -- absent -- n'a pas de largeur. CE JETON SERT AUX DEUX RAILS, celui de l'espace et celui du visualiseur, et c'est ce qui empeche le bord du contenu de sauter quand on ouvre un resultat depuis la liste de clients. Deux nombres egaux se seraient desaccordes ; un jeton partage ne le peut pas. CE N ETAIT PAS LARGE POUR LE VISUALISEUR, et ca l'est devenu quand ses onglets ont pris une case a cocher. Le calcul : 181 px de libelle, 16 de case, 8 d'ecart, 20 de remplissage d'onglet et 28 de rail font 253. A 232, le libelle passait a la ligne des qu'une case arrivait ; a 256, il reste trois pixels. Un libelle plus long -- une traduction, une planche ajoutee -- passera a la ligne, et c'est la raison pour laquelle ses entrees ne s'interdisent PAS le retour a la ligne, contrairement a celles du rail de l'espace : deux lignes dans un rail vertical coutent dix-huit pixels de hauteur, la ou une rangee d'onglets qui se replie en coute cent quatre. La forme absorbe le debordement au lieu de le subir. */ --rail: 256px; --rail-replie: 62px; /* --- LES RAYONS ----------------------------------------------------- Quatre, nommes par l'objet. Le releve n'en trouve pas d'autres sur la coquille : 10, 12, 16 et la gelule. */ /* « DOUX », RETENU A L ATELIER : 8 px, un seul rayon. Le produit melangeait 10, 12, 14 et 18 px selon la feuille qui avait rencontre l'objet en premier. Les trois roles restent nommes separement -- ils portent des objets differents et pourraient diverger un jour -- mais ils valent aujourd'hui la meme chose, et c'est ecrit une fois. */ --rayon: 8px; --rayon-controle: var(--rayon); /* un onglet, un lien de menu, un champ */ --rayon-bouton: var(--rayon); --rayon-bloc: var(--rayon); /* une modale, une carte */ /* LA GELULE N EST PAS UN COIN ARRONDI, C EST UNE FORME. Elle ne suit donc pas l'axe : la ronger ferait un rectangle a coins mous, pas une pastille. */ --rayon-gelule: 999px; /* CE QUI SE LIT SUR UN APLAT D ACCENT. Ni la surface sombre, ni le texte plein : une troisieme chose, qui ne suit ni l'une ni l'autre. J'avais pose `--surface-sombre-rgb` sur l'aplat, ce qui etait juste en sombre -- de l'encre presque noire sur du cyan -- et faux en clair, ou ce jeton vaut du blanc : le bouton d'appel portait du blanc sur de l'or. LE FOND NE SE RETOURNE PAS COMME LE RESTE. Il passe du cyan a l'or, deux teintes MOYENNES : dans les deux cas c'est l'encre sombre qui se lit dessus. Ce role vaut donc la meme chose dans les deux themes, et c'est precisement pourquoi il lui en faut un a lui. */ --texte-sur-accent: rgb(var(--encre-sur-aplat-rgb)); /* CE QUI SE LIT SUR UN APLAT SOMBRE, ET C EST L AUTRE MOITIE DU MEME RAISONNEMENT. L'accent est une teinte MOYENNE : cyan ou or, l'encre sombre s'y lit dans les deux themes. Un aplat PROFOND -- le vert d'un bouton d'envoi, le bleu de selection d'une liste deroulante -- appelle l'inverse, et lui non plus ne suit pas le theme : il est peint par une teinte de donnee, ou par le systeme, et rien de ce que fait le theme ne l'eclaircit. LE DEFAUT QU IL REPARE. Ces textes etaient ecrits `var(--white)`, donc « le blanc du produit ». Le theme clair retourne ce jeton vers l'encre : l'encre a bascule, l'aplat non, et « Попросить пройти тест заново » s'est retrouve presque noir sur du vert a 3,85. DEUX FAMILLES SUR QUARANTE-SEPT PAGES, ET C EST TOUT -- releve en demandant a chaque page quels textes portent une encre sombre sur un fond sombre. Le produit ecrit rarement sur un aplat profond ; quand il le fait, c'est ici. */ --texte-sur-aplat-sombre: rgb(var(--lumiere-rgb)); /* --- LE PLEIN DU BOUTON D APPEL -------------------------------------- UNE RAMPE, PAS UN APLAT, et c'est un emprunt assume au titre du hero de la vitrine : trois arrets dans le sens de la lecture, plus clair la ou la lumiere arrive, plus profond a la fin du mot. C'est ce qui donne au remplissage un comportement de metal plutot que de peinture. ON PREND LE GESTE, PAS LA TEINTE. Le hero est en or ; l'or ne bascule pas, et un bouton dore au milieu d'une interface cyan reprend la marque en perdant le theme. Les trois arrets sont donc construits sur `--accent-surface`, qui est cyan en sombre et or en clair : le bouton suit le theme, le geste reste le meme. TROIS ARRETS ET PAS DEUX. Avec deux, le milieu s'affaisse et la rampe se lit comme un aplat sali. Le point du milieu est la teinte pure. C EST LE PLUS SOMBRE QUI DECIDE, pas la moyenne : sur un titre la rampe habille l'encre et le fond ne bouge pas, sur un bouton elle habille le fond et l'encre doit tenir sur les trois arrets. Mesure de l'encre sur le dernier arret : 6,96 en sombre, 5,15 en clair. */ --aplat-appel: linear-gradient(100deg, color-mix(in srgb, rgb(var(--accent-surface-rgb)) 78%, var(--lumiere)) 0%, rgb(var(--accent-surface-rgb)) 42%, color-mix(in srgb, rgb(var(--accent-surface-rgb)) 72%, var(--texte-sur-accent)) 100%); /* A L APPUI, LA RAMPE ENTIERE S ENFONCE d'un cran : le depart tombe sur la teinte pure, la fin descend plus bas. Le bouton ne change pas de couleur, il change de profondeur. */ --aplat-appel-appui: linear-gradient(100deg, rgb(var(--accent-surface-rgb)) 0%, color-mix(in srgb, rgb(var(--accent-surface-rgb)) 84%, var(--texte-sur-accent)) 42%, color-mix(in srgb, rgb(var(--accent-surface-rgb)) 62%, var(--texte-sur-accent)) 100%); /* --- LE MOUVEMENT --------------------------------------------------- DEUX DUREES, PARCE QU IL Y A DEUX SORTES DE MOUVEMENT. Repondre a un survol doit etre immediat sans etre sec : la reponse doit arriver avant que la main ait fini son geste. Ouvrir un bloc doit se LIRE : c'est le seul moment ou le mouvement porte une information, d'ou vient ce bloc et a quoi il est accroche. ELLES SONT COURTES, ET C EST LE POINT. Au-dela d'un quart de seconde une ouverture cesse d'expliquer et se met a faire attendre ; en dessous d'un dixieme, l'oeil ne voit plus qu'un saut. Le releve du produit trouvait .15s et .16s ecrits a la main sur les survols : le premier jeton vaut la valeur deja en place, il ne deplace rien. LA COURBE PART VITE ET ARRIVE LENTEMENT. Un mouvement lineaire s'arrete net et se lit comme une coupure ; celui-ci se pose. */ --duree-effleurement: .16s; --duree-depli: .22s; --courbe: cubic-bezier(.2, .7, .3, 1); }