/* U7 - cascade par couches : l ordre des couches remplace l ordre numérique des fichiers */ @layer tokens, base, layout, components, modules, overrides; @layer tokens{ /* Identité DeployHub : surfaces neutres « dev tool » (esprit GitHub) + accent violet. Grammaire empruntée aux consoles d'infrastructure (Cloudflare) : rayons courts, bordures plutôt qu'ombres, densité, et surtout SOBRIÉTÉ CHROMATIQUE - la couleur ne décore pas, elle porte un état ou une action. Ce qui reste nôtre : le fond sombre, l'accent violet, les icônes duotone maison. */ /* Scopé à html : des éléments d'UI portent aussi data-theme (boutons du sélecteur de thème) et ne doivent pas redéfinir les variables localement. */ :root, html[data-theme="dark"]{ --bg:#0d1117; --bg2:#010409; --card:#161b22; --card2:#1a212b; --line:#30363d; --line2:#21262d; --txt:#e6edf3; --mut:#8b949e; --mut2:#7d8590; /* --mut2 ≥ 4,5:1 sur --card (#161b22) */ --ok:#3fb950; --warn:#d29922; --err:#f85149; --info:#4493f8; --accent:#7c6cf0; --accent-h:#6a5ae0; --link:#a78bfa; --ic-duo:.17; /* opacité de la surface duotone des icônes - fond sombre */ --radius:10px; --radius-sm:7px; --radius-modal:14px; --shadow:0 8px 30px rgba(1,4,9,.6); --shadow-sm:0 2px 8px rgba(1,4,9,.45); --focus:0 0 0 3px rgba(124,108,240,.45); --header-bg:rgba(13,17,23,.8); --backdrop:rgba(1,4,9,.7); --t-com:#768390; --t-str:#a5d6ff; --t-num:#f69d50; --t-kw:#ff7b72; --t-fn:#d2a8ff; --t-var:#ffa657; --t-tag:#7ee787; --t-attr:#79c0ff; --t-prop:#79c0ff; --t-punct:#8b949e; } html[data-theme="light"]{ /* Neutres LÉGÈREMENT VIOLACÉS, pas le gris-bleu de GitHub : un gris neutre emprunté se lit comme non choisi, un gris incliné vers l'accent se lit comme écrit. Filets adoucis (#d1d9e0 → #e4e1ec, contraste sur carte 1,43 → 1,29) : un trait doit se lire sans découper. Tous les rapports de contraste du texte MONTENT (mut2 sur carte 4,85 → 5,67). */ --bg:#f7f6fa; --bg2:#ffffff; --card:#ffffff; --card2:#f7f6fa; --line:#e4e1ec; --line2:#f0eef5; --txt:#1b1825; --mut:#5b5568; --mut2:#6a6478; /* --mut2 ≥ 4,5:1 sur --card (#fff) */ --ok:#1a7f37; --warn:#9a6700; --err:#cf222e; --info:#0969da; --accent:#6e40c9; --accent-h:#5a32a8; --link:#6639ba; --ic-duo:.12; /* opacité de la surface duotone des icônes - fond clair */ --shadow:0 8px 24px rgba(31,35,40,.12); --shadow-sm:0 2px 8px rgba(31,35,40,.09); --focus:0 0 0 3px rgba(110,64,201,.32); /* En-tête plus BLANC que la page : la barre se détache du canevas gris (#f6f8fa) au lieu de s'y fondre - le chrome se lit comme un plan à part. */ --header-bg:rgba(255,255,255,.86); --backdrop:rgba(31,35,40,.4); --t-com:#6e7781; --t-str:#0a3069; --t-num:#0550ae; --t-kw:#cf222e; --t-fn:#8250df; --t-var:#953800; --t-tag:#116329; --t-attr:#0550ae; --t-prop:#0550ae; --t-punct:#57606a; } /* ── Échelles (U1 Fondations design) - indépendantes du thème ── */ /* D0 : l'échelle est désormais COMPLÈTE (graisses, interlignes, interlettrages, élévations). Elle n'était jusqu'ici qu'à moitié écrite, et les feuilles en consommaient 1,8 % côté typographie, 0 % côté espacement - d'où six passes de DA appliquées à la main sur 46 feuilles. Ce bloc ne change AUCUN pixel : il déclare, il ne réécrit rien. La migration est le lot D2→D4. Garde-fou : tests/da_test.php (cliquet - les valeurs en dur ne peuvent que diminuer). */ :root{ /* ── Espacement — trame de 2 px, MESURÉE et non décrétée ───────────── L'échelle précédente annonçait un pas de 4 px. La mesure dit le contraire : sur les 4 543 espacements écrits en dur, **33 %** seulement tombent sur une trame de 4 px, contre **68 %** sur une trame de 2 px. Après 8 px, les valeurs les plus fréquentes sont 6, 10, 9, 5, 7 et 3 px. L'app a toujours eu un rythme de 2 px ; le « pas de 4 » était une discipline affichée que personne n'a jamais suivie (zéro utilisation). Les crans portent donc leur valeur en pixels : aucune ambiguïté possible entre « --sp-4 » et « 4 px ». Tout dérive de --sp-u : c'est le levier du réglage « Densité », qui n'applique aujourd'hui qu'un `zoom` sur body - lequel grossit le TEXTE au lieu de resserrer le RYTHME. */ --sp-u:2px; --sp-2:var(--sp-u); /* 2px */ --sp-4:calc(var(--sp-u) * 2); /* 4px */ --sp-6:calc(var(--sp-u) * 3); /* 6px */ --sp-8:calc(var(--sp-u) * 4); /* 8px */ --sp-10:calc(var(--sp-u) * 5); /* 10px */ --sp-12:calc(var(--sp-u) * 6); /* 12px */ --sp-14:calc(var(--sp-u) * 7); /* 14px */ --sp-16:calc(var(--sp-u) * 8); /* 16px */ --sp-18:calc(var(--sp-u) * 9); /* 18px */ --sp-20:calc(var(--sp-u) * 10); /* 20px */ --sp-22:calc(var(--sp-u) * 11); /* 22px */ --sp-24:calc(var(--sp-u) * 12); /* 24px */ --sp-26:calc(var(--sp-u) * 13); /* 26px */ --sp-28:calc(var(--sp-u) * 14); /* 28px */ --sp-30:calc(var(--sp-u) * 15); /* 30px */ --sp-32:calc(var(--sp-u) * 16); /* 32px */ --sp-34:calc(var(--sp-u) * 17); /* 34px */ --sp-36:calc(var(--sp-u) * 18); /* 36px */ --sp-38:calc(var(--sp-u) * 19); /* 38px */ --sp-40:calc(var(--sp-u) * 20); /* 40px */ --sp-42:calc(var(--sp-u) * 21); /* 42px */ --sp-44:calc(var(--sp-u) * 22); /* 44px */ --sp-46:calc(var(--sp-u) * 23); /* 46px */ --sp-48:calc(var(--sp-u) * 24); /* 48px */ --sp-52:calc(var(--sp-u) * 26); /* 52px */ --sp-56:calc(var(--sp-u) * 28); /* 56px */ --sp-64:calc(var(--sp-u) * 32); /* 64px */ --sp-1:1px; /* filet - HORS TRAME, ne suit pas la densité */ /* ── DENSITÉ RÉELLE ────────────────────────────────────────────────── Le réglage n'appliquait qu'un `zoom` sur body : il grossissait le TEXTE autant que les vides, ce qui n'est pas de la densité. Il ne change plus que le PAS du rythme ; la typographie ne bouge pas. 98 % des espacements passent par l'échelle - les 84 restants (négatifs, em, calc) ne suivent pas, et c'est sans conséquence. */ } html[data-density="compact"]{ --sp-u:1.6px; } /* −20 % */ html[data-density="aere"] { --sp-u:2.4px; } /* +20 % */ :root{ /* ── Taille de texte — SIX crans, plus un micro à résorber ─────────── 41 valeurs distinctes cohabitent aujourd'hui, dont onze entre 10 et 16 px (12 et 12,5 px se disputent le même rôle). Aucun œil ne les distingue, mais chaque écart empêche deux composants de s'aligner. Règle : deux niveaux diffèrent nettement, ou ils sont le même niveau. */ --fs-xs:11px; /* méta, étiquettes capitales */ --fs-sm:12px; /* secondaire dense */ --fs-md:13px; /* CORPS DE CONSOLE - le cran par défaut */ --fs-base:15px; /* corps confortable, nom de rangée */ --fs-lg:18px; /* titre de section */ --fs-xl:22px; /* titre d'écran */ --fs-2xl:26px; /* affichage : prix, score, titre d'aperçu */ --fs-3xl:32px; /* affichage : icône-glyphe, aperçu de fonte */ --fs-4xl:40px; /* affichage : initiale d'avatar, échantillon */ --fs-2xs:10px; /* micro : étiquettes d'environnement, méta capitales - MESURÉ dominant à l'écran (223 éléments sur l'accueil), ce n'est pas une dérive mais le cran bas d'une console */ /* ── Graisse — TROIS crans ─────────────────────────────────────────── 24 graisses distinctes sont en vigueur (550, 560, 640, 650, 680…), choisies au jugé écran par écran pour rattraper une hiérarchie qui n'existait pas. La hiérarchie se dit par la TAILLE et le BLANC. */ --fw-regular:400; --fw-medium:500; --fw-strong:600; --fw-bold:700; /* HORS ÉCHELLE - à résorber vers --fw-strong */ /* Encre des bascules du chrome : l'accent MÊLÉ à l'encre, jamais un gris neutre (il jure avec le fond teinté). Bleu profond en clair, son pendant clair en sombre - et le contraste y gagne. Défini ICI parce que deux composants suivent la même recette : la pilule d'en-tête et la bascule de l'accueil. */ /* ── Barre de défilement ───────────────────────────────────────────── Dix-sept règles éparses la dessinaient (largeurs 8, 3 et 10 px, deux couleurs de pouce). Une seule recette désormais, partagée avec le site. Le pouce est NEUTRE : une barre n'est pas un état, elle n'a donc pas à porter l'accent. Elle se révèle au survol plutôt que de s'imposer. */ --sb-size:10px; /* zone de saisie */ --sb-pad:3px; /* → pouce de 4 px */ --sb-thumb:color-mix(in srgb,var(--txt) 16%,transparent); --sb-thumb-hover:color-mix(in srgb,var(--txt) 34%,transparent); --chrome-ink:color-mix(in srgb,var(--accent) 45%,var(--txt)); --chrome-bg:color-mix(in srgb,var(--accent) 12%,var(--card)); --fw-label:450; /* libellés du chrome (barre d'en-tête) - arbitré par le proprio. NE REND QU'AVEC UNE FONTE VARIABLE : sur macOS SF Pro l'est, ailleurs 450 retombe sur 400. Nommé pour rester pilotable depuis un seul endroit. */ /* ── Interligne ──────────────────────────────────────────────────── */ --lh-flat:1; /* chiffres, pastilles, boutons d'icône */ --lh-tight:1.2; /* titres */ --lh-snug:1.35; /* rangées denses */ --lh-normal:1.5; /* corps */ --lh-loose:1.65; /* prose longue (aide, CDC, Discovery) */ /* ── Interlettrage ───────────────────────────────────────────────── */ --ls-tight:-.02em; /* grands titres */ --ls-none:0; /* corps */ --ls-wide:.08em; /* étiquettes en capitales */ /* ── Élévation ─────────────────────────────────────────────────────── RÈGLE CORRIGÉE (vérifiée à l'écran, menu contextuel ouvert sur le thème sombre). L'audit disait « un filet OU une ombre, jamais les deux » : c'est vrai sur fond clair, FAUX ici. Contre un fond quasi noir (#0d1117), une ombre seule ne détache rien - c'est le filet qui dessine le bord du panneau. Les deux sont donc légitimes ensemble sur une surface flottante. Ce qui compte n'est pas de choisir l'un ou l'autre, mais que le filet soit LE filet : 29 des 41 surfaces surélevées utilisent déjà `1px solid var(--line)`. Les 12 autres sont des intentions (anneau de curseur, poignée, découpe d'avatar), pas des accidents. · posé → --elev-0 (aucune ombre) + 1px var(--line) · détaché → --elev-1 (menu, popover) + 1px var(--line) · au-dessus → --elev-2 (modale) + 1px var(--line) */ --elev-0:none; --elev-1:var(--shadow-sm); --elev-2:var(--shadow); /* ── Géométrie ─────────────────────────────────────────────────────── --radius / --radius-sm / --radius-modal sont définis par thème plus haut. Ces deux-là manquaient, alors que « 999px » est écrit en dur 128 fois dans les feuilles. */ /* ── Blanc : DEUX rôles, longtemps confondus sous « #fff » ─────────── Les 274 blancs écrits en dur n'étaient pas 274 bugs. 185 sont du texte ou une icône posée sur un aplat plein (accent, ok, warn, err), où le blanc est JUSTE dans les deux thèmes - l'aplat est assez sombre de part et d'autre. Le reste est du papier : une iframe qui rend le site d'un client, un QR, une signature, l'écran de la maquette. Les nommer rend la distinction vérifiable : après ce lot, tout « #fff » nu restant est un défaut par construction. */ --on-solid:#ffffff; /* premier plan sur un aplat coloré - IDENTIQUE dans les deux thèmes, et c'est voulu */ --paper:#ffffff; /* surface qui rend un contenu utilisateur : iframe, image, QR, signature, écran de maquette */ --radius-xs:4px; /* détails INTERNES : code en ligne, mini-badges, barres de quelques pixels. Mesuré, pas supposé : 91 déclarations vivent à 4 px ou moins, et les passer au cran « contrôle » les rendrait ronds. C'est un vrai cran, pas une dérive. */ --radius-pill:999px; --radius-none:0; /* Z-index */ --z-base:1; --z-dropdown:3000; --z-sticky:3500; --z-overlay:8000; --z-modal:9000; --z-popover:10000; --z-toast:11000; --z-tooltip:12000; /* Durées */ --dur-1:.12s; --dur-2:.2s; --dur-3:.35s; /* Polices */ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* ── Alias de compatibilité - variables utilisées dans le code mais jamais définies (elles ne vivaient que par leurs fallbacks). Mappées sur les vrais tokens ; ne pas utiliser dans du code neuf. ── */ --fg:var(--txt); /* texte principal */ --txt2:var(--mut); --text2:var(--mut); --muted:var(--mut); --border:var(--line); --bd:var(--line); --bg1:var(--card); --bg3:var(--bg2); --card3:var(--card2); --input:var(--card2); --hover:color-mix(in srgb,var(--accent) 10%,transparent); /* fallback historique de 04-studio */ --surface-deep:var(--bg); --accent2:var(--accent); --pw-col:var(--accent); --bad:var(--err); --red:var(--err); --danger:var(--err); --rad:var(--radius-sm); /* fallback historique 8px → 10px, plus proche que --radius (14px) */ --code-bg:#0d1117; --code-fg:#c9d1d9; /* zone code volontairement sombre dans les 2 thèmes */ } /* U1 - transition ciblée sur les interactifs (remplace l'ancienne transition universelle `*`). */ @media (prefers-reduced-motion:no-preference){ a,button,.btn,input,select,textarea,[role=button],.card,.icon,.prow,.sni{ transition:border-color var(--dur-1,.12s),background var(--dur-1,.12s), box-shadow var(--dur-1,.12s),opacity var(--dur-1,.12s),color var(--dur-1,.12s)} } }