/* Spotipharm — Color tokens * A calm, clinical palette for a regulated health audit tool. * Neutrals carry the UI; teal is the single brand/action accent. * Status colors are ALWAYS paired with an icon + label (never color alone) — AA contrast. */ :root { /* ---- Neutrals (ink / slate) ---- */ --slate-50: #f7f9fb; --slate-100: #eef2f6; --slate-200: #e1e7ee; --slate-300: #cbd4df; --slate-400: #97a4b4; --slate-500: #647082; --slate-600: #4a5563; --slate-700: #353f4c; --slate-800: #232c38; --slate-900: #141b24; /* ---- Primary / brand (teal) ---- */ --teal-50: #eef9f7; --teal-100: #d2efea; --teal-200: #a6ddd5; --teal-300: #6fc3b8; --teal-400: #3da294; --teal-500: #1f857a; --teal-600: #136b63; --teal-700: #0f564f; --teal-800: #0d443f; --teal-900: #0a332f; /* ---- Accent du module RH officine (orange) ---- Registre visuel des logiciels de paie et de RH français, relevé au navigateur : Silae porte `#e7630a` sur ses boutons, Lucca `#ff7b3d` en grand aplat. Ni l'un ni l'autre n'est repris tel quel — les deux sont plus clairs et plus saturés que ce que nos rampes tolèrent (le teal de marque est `#136b63`, l'ambre `#c9871a`). Cette rampe est rabattue au même registre : chaude et franche, mais assez profonde pour porter du blanc. Valeurs ARRÊTÉES PAR LE CANONIQUE (livraison du 2026-08-28) — c'est lui qui tranche la couleur. Contraste du niveau 600 sur blanc : 5,6:1, AA en texte normal, du même ordre que le teal de marque à 6,3:1. LE VOISINAGE EST LE VRAI RISQUE, ET LA TEINTE NE LE RÉSOUT PAS. Le canonique l'a mesuré : entre l'orange 600 et le rouge 600 il n'y a que 1,20:1 de contraste de luminance, 1,26:1 avec l'ambre 600. Aucun choix de teinte ne sépare l'accent d'un défaut bloquant ou d'un point de vigilance pour un œil qui distingue mal les rouges. La réponse n'est donc pas chromatique : sur la grille du planning, L'ACCENT SE RETIRE et seuls les états fonctionnels restent, chacun porté par une icône et un libellé. */ --orange-50: #fdf3ec; --orange-100: #f9e0cf; --orange-200: #f2c3a6; --orange-300: #e79f72; --orange-400: #d97a3f; --orange-500: #c85e1c; --orange-600: #ac4a10; --orange-700: #8a3a0b; --orange-800: #6e2e08; --orange-900: #4f2106; /* ---- Semantic hues (each used WITH an icon + label) ---- */ /* Entrée — réception de stock (positive direction) */ --emerald-50: #ecfaf1; --emerald-100: #cdf0da; --emerald-500: #1f9d57; --emerald-600: #16793f; --emerald-700: #115e32; /* Sortie — dispensation patient (informative direction) */ /* CINQ NIVEAUX AJOUTÉS (200 à 400, 800, 900), et c'est le vrai correctif du défaut mesuré. La rampe s'arrêtait à 700 : l'appui du bouton primaire n'avait nulle part où DESCENDRE et remontait donc vers 500, d'où un enfoncé à 4,83:1 qui se lisait délavé, c'est-à-dire désactivé. Ce n'était pas un mauvais choix de niveaux, c'était un niveau manquant. Les cinq existants ne bougent pas : `--info` et `--sortie-fg` s'appuient dessus. Et les dix se rangent dans l'ordre de la RAMPE, pas dans l'ordre d'ajout : une rampe se relit du clair au foncé, l'historique tient dans ce commentaire. */ --sky-50: #eef5fc; --sky-100: #d3e6f8; --sky-200: #aecff0; --sky-300: #7fb0e2; --sky-400: #4e8ed2; --sky-500: #2a73c4; --sky-600: #1f5a9e; --sky-700: #18497f; --sky-800: #143a64; --sky-900: #0f2a49; /* Erreur déclarée (warning) */ --amber-50: #fdf6e9; --amber-100: #f8e7c2; --amber-500: #c9871a; --amber-600: #a56b10; --amber-700: #82540b; /* Correction / écriture compensatoire (distinct, calm violet) */ --violet-50: #f2f0fb; --violet-100: #e0dbf5; --violet-500: #6a55c7; --violet-600: #5440a8; --violet-700: #423284; /* Danger / destructif (déclarer une erreur, annulation) */ --red-50: #fcefee; --red-100: #f7d3d0; --red-500: #d23b34; --red-600: #ac2a24; --red-700: #87201b; /* ===================================================================== SEMANTIC ALIASES — reference these in components, not the raw scales ===================================================================== */ /* Surfaces */ --surface-page: var(--slate-50); --surface-card: #ffffff; --surface-raised: #ffffff; --surface-sunken: var(--slate-100); --surface-hover: var(--slate-100); --surface-active: var(--slate-200); --surface-inverse: var(--slate-900); /* Text */ --text-strong: var(--slate-900); --text-body: var(--slate-700); --text-muted: var(--slate-500); --text-faint: var(--slate-400); --text-inverse: #ffffff; --text-link: var(--teal-600); --text-on-brand: #ffffff; /* Borders / dividers */ --border-subtle: var(--slate-200); --border-default: var(--slate-300); --border-strong: var(--slate-400); --border-focus: var(--teal-500); /* Brand / actions */ --brand: var(--teal-600); --brand-hover: var(--teal-700); --brand-active: var(--teal-800); --brand-subtle: var(--teal-50); --brand-on: #ffffff; /* Voile de sélection de texte (tokens/base.css). Alias à lui seul plutôt qu'un `--brand` réutilisé : le voile se pose à 22 % du niveau 500, quand `--brand` est au 600, et l'y accrocher aurait changé la teinte de sélection du registre. */ --selection-bg: color-mix(in srgb, var(--teal-500) 22%, transparent); /* Encre de marque POSÉE SUR --brand-subtle (texte, chiffre, glyphe) : plus sombre que --brand, qui est fait pour un fond clair neutre. Sans cet alias, ces règles écrivaient `var(--teal-700)` en dur à côté d'un fond thémé, et un module au teint différent obtenait de l'encre teal sur son propre fond. */ --brand-subtle-fg: var(--teal-700); /* --brand-ink : L'ENCRE DE MARQUE SUR LE FOND DE PAGE, distincte de `--brand-subtle-fg`, qui est l'encre sur `--brand-subtle`. Les deux valent le niveau 700 aujourd'hui et répondent pourtant à deux questions différentes : « quelle encre sur du blanc ? » et « quelle encre sur mon fond ténu ? ». Les confondre condamnerait la seconde à ne plus pouvoir bouger sans casser la première. Le canonique la déclare dans chacun de ses trois blocs d'accent ; premier consommateur : la barre d'onglets basse. */ --brand-ink: var(--teal-700); --ring: color-mix(in srgb, var(--teal-500) 38%, transparent); --ring-danger: color-mix(in srgb, var(--danger) 38%, transparent); /* Status — movement direction */ --entree-fg: var(--emerald-700); --entree-bg: var(--emerald-50); --entree-border: var(--emerald-100); --sortie-fg: var(--sky-700); --sortie-bg: var(--sky-50); --sortie-border: var(--sky-100); /* Status — register line state */ --state-normal-fg: var(--slate-600); --state-normal-bg: var(--slate-100); --state-error-fg: var(--amber-700); --state-error-bg: var(--amber-50); --state-error-border: var(--amber-100); --state-corrected-fg: var(--emerald-700); --state-corrected-bg: var(--emerald-50); --state-correction-fg: var(--violet-700); --state-correction-bg: var(--violet-50); --state-correction-border: var(--violet-100); /* Feedback */ --danger: var(--red-600); --danger-hover: var(--red-700); --danger-subtle: var(--red-50); --danger-on: #ffffff; --warning: var(--amber-600); --warning-subtle: var(--amber-50); --success: var(--emerald-600); --success-subtle: var(--emerald-50); --info: var(--sky-600); --info-subtle: var(--sky-50); } /* ===================================================================== ACCENT PAR MODULE — l'accent est porté par la surface, pas par le fichier ===================================================================== Les alias de marque ci-dessus sont le DÉFAUT : le teal du registre. Ils restent le défaut pour toute page qui ne dit rien (connexion, présentation, repères légaux). La coque authentifiée, elle, dit dans quel module elle se trouve : `templates/app.html.twig` pose `data-module` sur le . Le raisonnement, les alias et ce que l'accent ne touche pas vivent dans lat.md/design-system.md#L'accent de la chrome est porté par la surface. DONNER SON ACCENT À UN MODULE = ajouter un bloc ici, et rien d'autre côté couleur. Le module lui-même demande plus (tampon, switcher, rangement de sa navigation) : voir la règle citée ci-dessus. `stup` n'a pas de bloc, c'est le défaut, et le registre doit rester au teal à l'identique. Un alias non redéclaré hérite du défaut, ce qui est voulu : `--brand-on` reste blanc sur tous les accents livrés. Corollaire moins agréable : un module dont le mot ne correspond à AUCUN bloc retombe silencieusement sur le défaut, donc sur le teal du registre — écrire le bloc dans le même geste que le mot. */ /* Racine de l'écosystème : les écrans transverses, qui n'appartiennent à aucun module et se tiennent AU-DESSUS d'eux (accueil officine). Un BLEU PROFOND — arbitrage Allan du 2026-07-30, contre le quasi-noir qui l'avait précédé. LA RAISON EST MESURÉE, pas esthétique. Le quasi-noir valait exactement --text-strong, et le wordmark bicolore de la marque est fait de --text-strong (« Spoti ») et de --brand (« pharm » et la capsule) : les trois tombaient donc sur la même encre, et le lockup devenait monochrome sur la PORTE D'ENTRÉE du produit. Dès que l'accent cesse d'égaler l'encre du texte, la bicolorité revient par construction — c'est ce que ce bloc achète. LA RAMPE A DÉSORMAIS SES DIX NIVEAUX. Elle s'arrêtait à 700, et c'est ce bout manquant — pas un mauvais choix — qui forçait le survol et l'appui à ÉCLAIRCIR : l'enfoncé remontait vers 500 et tombait à 4,83:1, se lisant délavé, donc désactivé. Avec 800 et 900, ce bloc suit le défaut du DS comme les autres modules : monotone, l'encre s'assombrit à chaque degré d'engagement. CE BLOC EST DONC REDEVENU COPIABLE pour un module à venir, ce qu'il n'était pas : il ne diverge plus du défaut. Une seule règle à ne pas perdre en le copiant — l'état DÉSACTIVÉ est une opacité, jamais un éclaircissement de teinte, sinon un bouton pâle et un bouton clair-au-survol se confondent. Transcrit du canonique screens-shell/accent-racine.html, qui déclare ce bloc et les cinq niveaux de rampe qui lui manquaient. Contrastes mesurés et contreparties (le ciel porte déjà « sortie » et « info », la séparation bleu/teal en vision déficiente) : le tableau normatif vit à un seul endroit, lat.md/screens.md#Accent de la racine. */ [data-module="racine"] { /* MONOTONE : 600 au repos, 700 au survol, 800 à l'appui — l'encre s'assombrit d'un cran à chaque degré d'engagement, et le contraste MONTE (6,97 → 9,14 → 11,54:1) au lieu de tomber. Le `color-mix` qui a servi de rustine faisait descendre la teinte sans niveaux réels ; les niveaux existent maintenant. Corollaire du canonique : l'état DÉSACTIVÉ est une opacité, jamais un éclaircissement de teinte — sinon un bouton pâle et un bouton clair-au-survol se confondent. */ --brand: var(--sky-600); --brand-hover: var(--sky-700); --brand-active: var(--sky-800); --brand-subtle: var(--sky-50); --brand-subtle-fg: var(--sky-700); --brand-ink: var(--sky-700); --border-focus: var(--sky-500); --text-link: var(--sky-700); --ring: color-mix(in srgb, var(--sky-500) 38%, transparent); --selection-bg: color-mix(in srgb, var(--sky-500) 22%, transparent); /* `--shadow-focus` se redéclare avec `--ring`, jamais l'une sans l'autre : sa substitution a lieu une fois pour toutes sur `:root` (tokens/spacing.css), donc un `--ring` posé plus bas ne l'atteint pas — anneau resté teal, mesuré. Gardé par TableDesAccentsTest. */ --shadow-focus: 0 0 0 3px var(--ring); } /* Module RH officine : l'équipe et le planning de la semaine. UN ORANGE — arbitrage Allan du 2026-08-28, référence explicite au registre visuel des logiciels de paie et de RH français (Silae, Lucca), relevé au navigateur et rabattu au registre de nos rampes (voir la rampe orange plus haut). Ce bloc SUIT LE DÉFAUT, et les trois blocs d'accent ont désormais la MÊME forme : 600 au repos, 700 au survol, 800 à l'appui, 50 en fond ténu, 700 en encre sur ce fond. Ce commentaire opposait sa rampe complète à celle de la racine, qui devait éclaircir faute de plus sombre que 700 ; c'est un niveau manquant qui faisait l'exception, pas une décision, et les niveaux existent. Il n'y a donc plus de patron à choisir : il n'y en a qu'un. Ce que l'accent NE TOUCHE PAS, et qui compte particulièrement ici : le rouge d'un défaut bloquant, l'ambre d'un point de vigilance et le vert d'une couverture assurée restent les mêmes que dans le registre. Sur la grille de planning, les trois cohabitent avec l'accent — la présence pharmaceutique est peinte en `--success`, PAS en `--brand`, précisément pour qu'un module orange ne rende pas le bandeau de couverture indiscernable de la vigilance. */ [data-module="rh"] { --brand: var(--orange-600); --brand-hover: var(--orange-700); --brand-active: var(--orange-800); --brand-subtle: var(--orange-50); --brand-subtle-fg: var(--orange-700); --brand-ink: var(--orange-700); --border-focus: var(--orange-500); --text-link: var(--orange-700); --ring: color-mix(in srgb, var(--orange-500) 38%, transparent); --selection-bg: color-mix(in srgb, var(--orange-500) 22%, transparent); /* Jamais l'un sans l'autre : la substitution de `--shadow-focus` a lieu une fois pour toutes sur `:root`, un `--ring` posé plus bas ne l'atteint pas. */ --shadow-focus: 0 0 0 3px var(--ring); }