/* ============================================================================================== * tokens.css — source unique des valeurs de la charte graphique * ============================================================================================== * * Ce fichier existe pour une raison mesurée. Avant lui, les 31 feuilles de `static/css/` * portaient 14 blocs `:root` concurrents et 272 propriétés personnalisées (257 hors `--bs-*`, * qui appartiennent à Bootstrap), et la même valeur y était déclarée sous plusieurs noms : * * - le bleu de marque `#4a6cf7` sous **13 noms** (`--agents-primary`, `--pc-primary`, * `--ws-accent`, `--studio-primary`, `--builder-primary`, `--edit-primary`, `--as-primary`, * `--aria-primary`, `--account-primary`, `--rp-primary`, `--wf-primary`, `--tp-accent`, * `--primary`) et **199 fois en clair** dans les règles ; * - le violet `#7c4dff` sous 9 noms, 73 fois en clair ; * - l'encre `#1a1f36` sous 9 noms, 36 fois en clair ; * - le blanc sous 297 écritures en clair (`#fff` 278, `#ffffff` 19). * * Changer le bleu de la marque demandait donc 13 modifications de déclaration **et** 199 * remplacements en clair, répartis sur des feuilles qu'aucun index ne relie. C'est cette * arithmétique que ce fichier supprime : 763 écritures en clair sont devenues des `var()`, et * les couleurs hexadécimales du dossier sont passées de 1 897 à 1 151 occurrences. * * Trois écritures de `#4a6cf7` subsistent, dans `ia-act.css` : elles portent un canal alpha en * hexadécimal (`#4a6cf733`, `#4a6cf744`, `#4a6cf71a`). Un jeton de couleur ne peut pas les * remplacer — `var(--color-primary)33` n'est pas une couleur. * * ---------------------------------------------------------------------------------------------- * Convention de nommage * ---------------------------------------------------------------------------------------------- * * Deux niveaux, et un seul sens de dépendance : * * 1. **Les jetons**, ici, et nulle part ailleurs. Ils ne nomment pas un composant mais un * rôle : `--color-primary`, `--shadow-md`, `--radius-lg`. Aucune règle CSS ne les déclare * en dehors de ce fichier. * 2. **Les variables de composant**, dans la feuille du composant, sous la forme * `---` : `--pc-primary`, `--ws-accent`, `--as-ink`. Elles sont * **définies en fonction des jetons** (`--pc-primary: var(--color-primary)`) et jamais * l'inverse. * * Un composant garde ainsi le droit de s'écarter de la charte — `--as-primary-dark` vaut * `#3853d9` et non `--color-primary-dark` — mais l'écart devient visible à la lecture, au lieu * d'être noyé dans une valeur en clair. * * Les noms de jetons sont choisis pour ne collider avec **aucune** propriété personnalisée * existante : c'est vérifié par `tests/test_css_tokens.py`. Un jeton qui porterait le nom d'une * variable déclarée par une feuille de page serait redéfini sur cette page seule, et deux * écrans afficheraient silencieusement deux couleurs différentes. * * ---------------------------------------------------------------------------------------------- * Ce qui n'est **pas** un jeton * ---------------------------------------------------------------------------------------------- * * Une valeur n'entre ici que si plusieurs feuilles la partagent réellement, à l'octet près. * Ne sont donc pas unifiés, et ne doivent pas l'être sans décision de charte : * * - les quatre rouges d'erreur — `#ef4444` (formulaires d'agent, promptcraft), `#ef476f` * (tableaux de bord), `#b3261e` (espace d'exécution), `#b42318` (Prompt Studio) ; * - les trois verts de succès — `#22c55e`, `#17c964`, `#0f7a50` ; * - les palettes propres à un écran (`--ws-*` pour l'exécution, `--as-*` pour l'espace * d'agent, `--cd-*` pour les coûts). * * Les fondre dans un jeton unique changerait le rendu. Les nommer identiquement sans les fondre * mentirait. Elles restent donc locales, et ce commentaire tient lieu d'inventaire. * * Chargé par `templates/base.html` avant `style.css`, donc avant toute feuille de page. * ============================================================================================== */ :root { /* -------------------------------------------------------------------------------------------- * Marque * ------------------------------------------------------------------------------------------ */ --color-primary: #4a6cf7; --color-primary-dark: #2744b9; --color-primary-soft: #7b8cff; --color-accent: #7c4dff; /* -------------------------------------------------------------------------------------------- * Encre — texte et titres sur fond clair * ------------------------------------------------------------------------------------------ */ --color-ink: #1a1f36; --color-ink-soft: #66708f; --color-ink-muted: #8891ad; /* -------------------------------------------------------------------------------------------- * Fonds et surfaces * * `--color-white` porte le nom de sa valeur et non d'un rôle, à dessein : les 297 écritures * qu'il remplace servent tour à tour de surface, de texte sur fond sombre et de bordure. Lui * inventer un rôle unique aurait été faux à deux endroits sur trois. * ------------------------------------------------------------------------------------------ */ --color-white: #fff; --color-canvas: #f3f6ff; --color-canvas-alt: #eef2ff; --color-surface: rgba(255, 255, 255, 0.72); /* -------------------------------------------------------------------------------------------- * États — uniquement les valeurs réellement partagées entre feuilles * ------------------------------------------------------------------------------------------ */ --color-success: #22c55e; --color-danger: #ef4444; --color-warning: #f59e0b; /* -------------------------------------------------------------------------------------------- * Élévation * ------------------------------------------------------------------------------------------ */ --shadow-lg: 0 30px 80px rgba(26, 31, 54, 0.1); --shadow-md: 0 16px 40px rgba(38, 52, 104, 0.08); --shadow-sm: 0 10px 24px rgba(38, 52, 104, 0.06); /* -------------------------------------------------------------------------------------------- * Rayons * * Cette échelle est celle que cinq feuilles déclaraient à l'identique (`--agents-radius-*`, * `--builder-radius-*`, `--edit-radius-*`, `--pc-radius-*` dans deux feuilles). Elle s'arrête à * `md` : le quatrième échelon, `14px`, n'est plus lu par aucune variable depuis que les quatre * `--*-radius-sm` qui le portaient — que rien ne lisait — ont été supprimés. * * Les jetons nomment un rayon, pas une longueur. `--rp-blur` vaut aussi `24px` mais reste * déclaré à part, parce qu'un flou et un arrondi n'ont aucune raison d'évoluer ensemble ; et * l'échelle de l'espace d'agent est décalée (`--as-radius-md: 14px`, `--as-radius-lg: 20px`), * donc la brancher ici par égalité de valeur écrirait `--as-radius-lg: var(--blur-glass)`. * * Les `border-radius` écrits en clair dans les règles ne sont pas concernés par ce lot : le * dépôt en compte 881, sur 61 longueurs distinctes (`999px` 134, `12px` 80, `14px` 76, `50%` * 58, `18px` 55, `16px` 51…). Les ramener à une échelle demande une décision de charte par * longueur, pas une substitution mécanique. * ------------------------------------------------------------------------------------------ */ --radius-xl: 30px; --radius-lg: 24px; --radius-md: 18px; /* -------------------------------------------------------------------------------------------- * Mouvement et matière * ------------------------------------------------------------------------------------------ */ --ease-out: cubic-bezier(.22, 1, .36, 1); --blur-glass: 20px; /* -------------------------------------------------------------------------------------------- * Typographie * * La pile longue de `style.css` (`'Poppins', system-ui, -apple-system, …`) n'est pas ce jeton : * elle a ses propres secours et reste écrite là où elle est employée. * ------------------------------------------------------------------------------------------ */ --font-sans: 'Poppins', sans-serif; }