/** * Digital Stories Academy — design tokens * * Source de vérité : docs/BRIEF.md §2 (palette validée client) puis * docs/DESIGN-REVIEW.md §3 (échelle neutre, élévation, focus, typo, motion). * Chargé globalement, y compris sur les gabarits Tutor LMS (dashboard, cours, checkout). * * ───────────────────────────────────────────────────────────────────────────── * Deux règles de lecture avant de modifier ce fichier : * * 1. Les couleurs sont exprimées en OKLCH, un espace perceptuellement uniforme : * +3 % de clarté produit le même écart ressenti sur un lime que sur un bleu. * C'est ce qui permet de DÉRIVER les états (survol, actif) au lieu de les * choisir à la main. Ne réintroduis pas de valeur hexadécimale ici. * * 2. L'échelle neutre est fonctionnelle, pas décorative (méthode Radix Colors) : * chaque pas a un rôle assigné. Prends le pas qui correspond au rôle, jamais * « celui qui rend bien ». C'est ce qui garantit les contrastes par construction. * ───────────────────────────────────────────────────────────────────────────── */ :root { /* ══════════════════════════════════════════════════════════════════════ * 1. ÉCHELLE NEUTRE — 12 pas (DESIGN-REVIEW §3.3) * * Les pas 1 à 3 sont les trois surfaces validées par le client (BRIEF §2), * reprises telles quelles. La review proposait un pas 2 à #14161A, mais son * propre §1 demande de préserver l'écart de clarté fond→carte, mesuré à * ΔL = 4,6 points ; le #14161A proposé le réduisait à 3,6. On garde donc les * valeurs client et on construit les pas manquants au-dessus. * * Les pas 7 à 12 sont calculés pour ATTEINDRE un contraste cible, pas choisis. * Contrastes mesurés sur le fond de page (pas 1). * ══════════════════════════════════════════════════════════════════════ */ --dsa-n1: oklch(16.4% 0.005 264); /* #0D0E10 — 1,00:1 — fond de page (client) */ --dsa-n2: oklch(20.9% 0.006 271); /* #17181B — 1,09:1 — surface : carte, panneau (client) */ --dsa-n3: oklch(24.7% 0.006 258); /* #1F2124 — 1,20:1 — surface élevée : carte imbriquée, popover (client) */ --dsa-n4: oklch(28.6% 0.008 264); /* #282A2E — 1,34:1 — surface au survol */ --dsa-n5: oklch(32.5% 0.008 264); /* #323438 — 1,55:1 — séparateur interne (décoratif) */ --dsa-n6: oklch(36.3% 0.008 264); /* #3C3E42 — 1,80:1 — bordure de carte au repos (décoratif) */ /* * Pas 7 — LE pas à ne pas se tromper : tout contour de champ, case à cocher, * interrupteur ou bouton outline doit atteindre 3:1 (WCAG 2.2 SC 1.4.11). * * Calibré sur la surface ÉLEVÉE (#1F2124), pas sur le fond de page : un champ * de saisie est presque toujours posé sur une carte, jamais directement sur le * fond. La valeur de la review (#5C5F63) atteint 3,01:1 sur le fond mais * retombe à 2,74:1 sur une carte — donc en échec dans le cas le plus courant. * Celle-ci tient les 3:1 sur les trois surfaces (3,61 / 3,31 / 3,01). */ --dsa-n7: oklch(52.6% 0.007 264); /* #686B6F — 3,61:1 — BORDURE INTERACTIVE (SC 1.4.11) */ --dsa-n8: oklch(62.5% 0.007 264); /* #85888C — 5,42:1 — bordure au survol / focus */ --dsa-n9: oklch(62.9% 0.007 264); /* #87898D — 5,51:1 — texte tertiaire (méta ≥ 14px) */ --dsa-n10: oklch(69.1% 0.007 264); /* #999BA0 — 6,94:1 — texte secondaire (labels, légendes) */ --dsa-n11: oklch(84.4% 0.007 264); /* #C9CCD1 — 11,99:1 — TEXTE DE LECTURE (corps long) */ --dsa-n12: oklch(93.5% 0.007 264); /* #E7E9EE — 15,90:1 — titres, chiffres clés */ /* ══════════════════════════════════════════════════════════════════════ * 2. ALIAS SÉMANTIQUES * Le reste du thème n'utilise QUE ces noms-là, jamais --dsa-nX directement. * ══════════════════════════════════════════════════════════════════════ */ --dsa-bg: var(--dsa-n1); --dsa-bg-texture: oklch(13.5% 0.004 264); /* #0A0B0C — footer, sidebar : un cran SOUS le fond */ --dsa-surface: var(--dsa-n2); --dsa-surface-raised: var(--dsa-n3); --dsa-surface-hover: var(--dsa-n4); --dsa-divider: var(--dsa-n5); /* séparateur interne */ --dsa-border: var(--dsa-n6); /* contour de carte — DÉCORATIF uniquement */ --dsa-border-input: var(--dsa-n7); /* tout contrôle de saisie — OBLIGATOIRE (SC 1.4.11) */ --dsa-border-hover: var(--dsa-n8); /* * Trois niveaux de texte au lieu de deux. --dsa-text reste le blanc de titre ; * --dsa-text-body est plus doux et sert au CORPS DE TEXTE LONG : sur un fond * quasi noir, un blanc à 17:1 produit de la halation (les glyphes semblent * baver, surtout pour les personnes astigmates). Cf. Apple HIG Dark Mode. */ --dsa-text: var(--dsa-n12); /* 15,90:1 — titres, chiffres */ --dsa-text-body: var(--dsa-n11); /* 11,99:1 — paragraphes, leçons */ --dsa-text-muted: var(--dsa-n10); /* 6,94:1 — labels, légendes */ --dsa-text-faint: var(--dsa-n9); /* 5,51:1 — méta. Remplace #6B6E71 (3,76:1 = échec AA) */ /* ══════════════════════════════════════════════════════════════════════ * 3. COULEURS DE MARQUE + ÉTATS DÉRIVÉS (DESIGN-REVIEW §3.2) * Les trois ancres sont les valeurs validées client, converties — pas modifiées. * ══════════════════════════════════════════════════════════════════════ */ --dsa-lime: oklch(91.8% 0.171 120); /* #D6F464 — 15,62:1 sur le fond */ --dsa-peach: oklch(90.6% 0.045 73); /* #F3DCC0 — 14,54:1 */ --dsa-sky: oklch(87.1% 0.053 250); /* #BBD8F7 — 13,13:1 */ /* Encres : le texte posé SUR un aplat de marque. Jamais du blanc — le blanc sur notre lime donne 1,24:1, c'est-à-dire illisible. */ --dsa-lime-ink: oklch(15.5% 0.035 115); /* #14170A — 14,68:1 sur le lime */ --dsa-peach-ink: oklch(21.5% 0.045 62); /* #2B1D0E */ --dsa-sky-ink: oklch(23.0% 0.060 253); /* #10233B */ /* États dérivés — plus aucune valeur choisie à la main. */ --dsa-lime-hover: oklch(from var(--dsa-lime) calc(l + 0.03) c h); /* #E0FE6F — 17,08:1 */ --dsa-lime-active: oklch(from var(--dsa-lime) calc(l - 0.05) c h); /* #C6E352 — 13,34:1 */ --dsa-lime-dim: oklch(from var(--dsa-lime) calc(l - 0.10) c h); /* #B6D33E — 11,38:1 */ /* Variantes alpha dérivées — remplacent les rgba(214, 244, 100, …) recopiés en dur dans base.css, dashboard.css, learning-area.css et tutor.css. */ --dsa-lime-a08: color-mix(in oklab, var(--dsa-lime) 8%, transparent); --dsa-lime-a14: color-mix(in oklab, var(--dsa-lime) 14%, transparent); --dsa-lime-a25: color-mix(in oklab, var(--dsa-lime) 25%, transparent); --dsa-lime-a50: color-mix(in oklab, var(--dsa-lime) 50%, transparent); --dsa-peach-a08: color-mix(in oklab, var(--dsa-peach) 8%, transparent); --dsa-sky-a08: color-mix(in oklab, var(--dsa-sky) 8%, transparent); --dsa-sky-a12: color-mix(in oklab, var(--dsa-sky) 12%, transparent); /* Sémantiques — volontairement distinctes du lime pour ne pas confondre « action » et « statut » (règle d'usage, BRIEF §2). */ --dsa-success: oklch(83.0% 0.113 150); /* #7FD99A */ --dsa-warning: oklch(80.5% 0.116 70); /* #F0B65C */ --dsa-error: oklch(69.5% 0.130 25); /* #F0786B */ /* ══════════════════════════════════════════════════════════════════════ * 4. ÉLÉVATION — de la lumière, pas des ombres (DESIGN-REVIEW §3.4) * * En mode sombre une ombre portée est quasi invisible : on ne peut pas * assombrir du quasi-noir. La profondeur se construit avec un filet clair sur * l'ARÊTE SUPÉRIEURE, qui simule une source de lumière au-dessus. C'est le * détail signature des interfaces sombres soignées (Linear, Raycast, Vercel). * * Règle à tenir : un cran d'élévation = un cran de surface ET un cran d'ombre, * jamais l'un sans l'autre. * ══════════════════════════════════════════════════════════════════════ */ --dsa-edge-light: inset 0 1px 0 0 color-mix(in oklab, white 7%, transparent); --dsa-elev-1: var(--dsa-edge-light); --dsa-elev-2: var(--dsa-edge-light), 0 4px 12px -2px rgb(0 0 0 / 0.5); --dsa-elev-3: var(--dsa-edge-light), 0 16px 40px -8px rgb(0 0 0 / 0.65); /* ══════════════════════════════════════════════════════════════════════ * 5. FOCUS — anneau bicolore (DESIGN-REVIEW §3.5) * * Un anneau lime seul disparaît sur les surfaces claires pleines (cartes de * stats lime/pêche/ciel du dashboard : 1,00 / 1,07 / 1,19:1). Avec deux * anneaux, ils se relaient — sombre visible sur fond clair, lime visible sur * fond sombre. Il y en a toujours au moins un de visible, donc plus besoin * d'auditer surface par surface à chaque nouveau composant. * ══════════════════════════════════════════════════════════════════════ */ --dsa-focus-ring: 0 0 0 2px var(--dsa-n1), 0 0 0 4px var(--dsa-lime); /* ══════════════════════════════════════════════════════════════════════ * 6. TYPOGRAPHIE FLUIDE — méthode Utopia (DESIGN-REVIEW §3.6) * clamp(min, interpolation, max) entre 320px et 1440px de viewport. * Remplace les tailles au demi-pixel (12,5px / 13,5px / 14,5px…) choisies au * cas par cas, qui n'avaient aucune échelle commune. * ══════════════════════════════════════════════════════════════════════ */ --dsa-step--2: clamp(0.694rem, 0.67rem + 0.12vw, 0.79rem); /* 11,1 → 12,6px micro */ --dsa-step--1: clamp(0.833rem, 0.80rem + 0.16vw, 0.889rem); /* 13,3 → 14,2px méta */ --dsa-step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); /* 16 → 18px corps */ --dsa-step-1: clamp(1.20rem, 1.14rem + 0.30vw, 1.406rem); /* 19,2 → 22,5px sous-titre */ --dsa-step-2: clamp(1.44rem, 1.34rem + 0.50vw, 1.758rem); /* 23 → 28px h3 */ --dsa-step-3: clamp(1.728rem, 1.57rem + 0.79vw, 2.197rem); /* 27,6 → 35px h2 */ --dsa-step-4: clamp(2.074rem, 1.82rem + 1.26vw, 2.746rem); /* 33 → 44px h1 */ --dsa-step-5: clamp(2.488rem, 2.07rem + 2.09vw, 3.433rem); /* 40 → 55px display */ --dsa-step-6: clamp(2.986rem, 2.30rem + 3.43vw, 4.292rem); /* 48 → 69px hero */ --dsa-font-display: "Sora", ui-sans-serif, system-ui, sans-serif; --dsa-font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --dsa-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ══════════════════════════════════════════════════════════════════════ * 7. ESPACEMENT FLUIDE — même méthode que la typo (DESIGN-REVIEW §3.7) * ══════════════════════════════════════════════════════════════════════ */ --dsa-space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem); --dsa-space-2xs: clamp(0.50rem, 0.48rem + 0.09vw, 0.56rem); --dsa-space-xs: clamp(0.75rem, 0.72rem + 0.14vw, 0.88rem); --dsa-space-s: clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem); --dsa-space-m: clamp(1.50rem, 1.44rem + 0.29vw, 1.69rem); --dsa-space-l: clamp(2.00rem, 1.91rem + 0.39vw, 2.25rem); --dsa-space-xl: clamp(3.00rem, 2.87rem + 0.59vw, 3.38rem); --dsa-space-2xl: clamp(4.00rem, 3.83rem + 0.78vw, 4.50rem); --dsa-space-3xl: clamp(6.00rem, 5.74rem + 1.17vw, 6.75rem); /* ══════════════════════════════════════════════════════════════════════ * 8. RAYONS * ══════════════════════════════════════════════════════════════════════ */ --dsa-radius-sm: 8px; --dsa-radius-md: 12px; --dsa-radius-lg: 16px; --dsa-radius-xl: 20px; --dsa-radius-2xl: 28px; /* grands panneaux, hero */ --dsa-radius-full: 999px; /* ══════════════════════════════════════════════════════════════════════ * 9. MOTION (DESIGN-REVIEW §3.7) * * `ease` (le défaut, utilisé partout jusqu'ici) est SYMÉTRIQUE : le mouvement * démarre et finit à la même vitesse, ce qui donne une impression mécanique. * Les interfaces qui « paraissent chères » utilisent des courbes asymétriques * — démarrage rapide, décélération longue — parce que c'est ainsi que se * comportent les objets physiques. * ══════════════════════════════════════════════════════════════════════ */ --dsa-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* entrées */ --dsa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* transformations */ --dsa-ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1); /* léger dépassement : succès */ --dsa-dur-instant: 100ms; /* survol, changement de couleur */ --dsa-dur-fast: 180ms; /* apparition d'un popover */ --dsa-dur-base: 260ms; /* panneau, accordéon */ --dsa-dur-slow: 420ms; /* transition de page, modale */ /* Hauteur du header collant + marge. Sert à scroll-padding-top (SC 2.4.11 : un élément qui reçoit le focus ne doit pas finir masqué sous le header). */ --dsa-header-h: 96px; /* Cibles tactiles — WCAG 2.2 SC 2.5.8 exige 24px ; Apple recommande 44, Material 48. On prend 44 pour les contrôles et 48 pour les champs de saisie (sous 16px de police, iOS zoome automatiquement au focus et casse la mise en page — d'où la taille de police en rem, jamais en px, sur les champs). */ --dsa-target-min: 44px; --dsa-field-h: 48px; /* * Échelle de logo — une seule source pour les trois emplacements. * * Le logo apparaissait à trois tailles sans rapport entre elles (60 / 48 / 88), * dont une valeur en dur dans dashboard.css. Échelle de la review retenue * (arbitrage client, 2026-08-17) : plus discrète et cohérente entre les trois * emplacements. Ce sont les trois seules valeurs à changer pour y revenir. */ --dsa-logo-h-header: 48px; --dsa-logo-h-footer: 40px; --dsa-logo-h-sidebar: 56px; } /* * Repli pour les navigateurs sans syntaxe de couleur relative `oklch(from …)` * (Chrome < 119, Safari < 16.4, Firefox < 128). Sans ce bloc, les trois états * dérivés du lime seraient invalides — donc ignorés — et les survols perdraient * leur couleur. Les valeurs sont exactement celles que produit le calcul. */ @supports not (color: oklch(from white l c h)) { :root { --dsa-lime-hover: #e0fe6f; --dsa-lime-active: #c6e352; --dsa-lime-dim: #b6d33e; } }