/** * Pont entre le design system Tutor LMS v4 et notre palette. * * Tutor LMS v4 pilote TOUTE sa couleur par variables CSS (`--tutor-surface-*`, * `--tutor-text-*`, `--tutor-icon-*`, `--tutor-border-*`, `--tutor-brand-*`). * Plutôt que de surcharger des dizaines de classes une à une (fragile, jamais * exhaustif), on redéfinit ces variables : la correction se propage à TOUS les * composants du plugin, y compris ceux qu'on n'a jamais stylés à la main * (Discussions, Réglages, Notifications, checkout, quiz…). * * C'est l'approche de référence du projet — cf. DESIGN-REVIEW §3.9 : chercher * d'abord la variable du plugin, avant d'envisager une surcharge de classe. * * ───────────────────────────────────────────────────────────────────────────── * POURQUOI LE SÉLECTEUR COMMENCE PAR :root * * `data-tutor-theme` est posé sur par TUTOR\UserPreference — c'est une * préférence de PROFIL. Un visiteur anonyme n'en a pas, donc l'attribut est * absent, donc un sélecteur `[data-tutor-theme="dark"]` seul ne matche jamais * pour lui. Résultat constaté : 100 % de ces surcharges étaient inertes sur le * checkout et l'écran de connexion — les deux seuls écrans que, par définition, * seuls des visiteurs NON connectés voient. Titres à 1,02:1, carte de commande * blanche sur page noire, CTA vert foncé ressemblant à un bouton désactivé. * * L'attribut est désormais forcé côté serveur (inc/tutor/hooks.php), mais on * garde `:root` en filet de sécurité : si l'attribut disparaît un jour (mise à * jour du plugin, page servie par un cache posé avant le filtre), les jetons * restent sombres. Le thème est dark-only (BRIEF §9) : il n'existe aucun cas où * le mode clair du plugin serait souhaitable. * ───────────────────────────────────────────────────────────────────────────── */ :root, [data-tutor-theme="dark"], [data-tutor-theme="system"] { /* ══════════════════════════════════════════════════════════════════════ * 1. L'ÉCHELLE DE MARQUE — le point de contrôle unique * * Tutor génère `--tutor-brand-100` à `--tutor-brand-950` à partir de * l'option WP `tutor_option[brand_color]`, et les injecte en style INLINE * sur :root (TUTOR\Assets::load_core_color_palette). Sur ce site l'option * vaut #052e26 — un vert forêt hérité de l'ancien thème TutorStarter. C'est * la vraie source des CTA verts, pas un défaut du plugin. * * Tous les jetons de bouton, de lien, de badge et de progression du plugin * dérivent de cette échelle. La remapper corrige donc l'ensemble d'un coup, * au lieu de reprendre une vingtaine de jetons de bouton un par un. * * Répartition des rôles en mode sombre, relevée dans tutor-core.min.css : * 400 → texte de marque secondaire, bouton désactivé * 500 → texte et icônes de marque, action primaire * 600 → FOND du bouton primaire, bordure de marque * 700 → états de survol * 800 à 950 → SURFACES teintées (rôles de fond) * * D'où la coupure : 400-700 sont des couleurs de PREMIER PLAN, donc du lime * clair lisible sur fond sombre ; 800-950 sont des FONDS, donc du lime très * dilué dans le noir pour que le texte clair y reste lisible. * ══════════════════════════════════════════════════════════════════════ */ /* Premier plan — lime clair. */ --tutor-brand-100: var(--dsa-lime-hover) !important; --tutor-brand-200: var(--dsa-lime-hover) !important; --tutor-brand-300: var(--dsa-lime) !important; --tutor-brand-400: var(--dsa-lime-dim) !important; --tutor-brand-450: var(--dsa-lime) !important; --tutor-brand-500: var(--dsa-lime) !important; --tutor-brand-600: var(--dsa-lime) !important; /* Survol : sur une interface sombre un état de survol s'ÉCLAIRCIT. L'échelle du plugin est pensée pour du clair (700 = plus foncé que 600) ; on inverse volontairement ici, parce que le rôle prime sur le numéro. */ --tutor-brand-700: var(--dsa-lime-hover) !important; /* Fonds teintés — lime dilué dans le fond de page. Contrastes vérifiés avec le texte de titre par-dessus : 8,85:1 / 11,51:1 / 13,18:1. */ --tutor-brand-800: color-mix(in oklab, var(--dsa-lime) 22%, var(--dsa-n1)) !important; --tutor-brand-900: color-mix(in oklab, var(--dsa-lime) 14%, var(--dsa-n1)) !important; --tutor-brand-950: color-mix(in oklab, var(--dsa-lime) 9%, var(--dsa-n1)) !important; /* * L'ENCRE INVERSE — indissociable de ce qui précède. * * Le plugin pose `--tutor-text-primary-inverse: #fff`, parce que son bleu de * marque par défaut est foncé. Notre lime est clair : du blanc dessus donne * 1,24:1, soit un bouton illisible. Avec notre encre sombre : 14,68:1. * * Règle : on remappe TOUJOURS le fond ET son encre, jamais l'un sans l'autre. * C'est précisément parce que ce couple avait été laissé de côté que les CTA * du plugin étaient restés verts. */ --tutor-text-primary-inverse: var(--dsa-lime-ink) !important; --tutor-actions-inverse: var(--dsa-lime-ink) !important; --tutor-icon-idle-inverse: var(--dsa-lime-ink) !important; /* ══════════════════════════════════════════════════════════════════════ * 2. SURFACES * ══════════════════════════════════════════════════════════════════════ */ --tutor-surface-base: var(--dsa-bg) !important; --tutor-surface-l1: var(--dsa-surface) !important; --tutor-surface-l1-hover: var(--dsa-surface-hover) !important; --tutor-surface-l2: var(--dsa-surface-raised) !important; --tutor-surface-l2-hover: var(--dsa-surface-hover) !important; --tutor-surface-l3: var(--dsa-surface-raised) !important; --tutor-surface-sidebar-l1: var(--dsa-bg-texture) !important; --tutor-surface-dark: var(--dsa-bg-texture) !important; --tutor-actions-gray-empty: var(--dsa-surface) !important; --tutor-actions-gray-secondary: var(--dsa-surface-raised) !important; --tutor-actions-gray-tertiary: var(--dsa-surface) !important; --tutor-actions-gray-quaternary: var(--dsa-bg) !important; --tutor-quiz-idle: var(--dsa-surface-raised) !important; --tutor-quiz-hover: var(--dsa-surface-hover) !important; --tutor-tab-l3: var(--dsa-surface-raised) !important; --tutor-tab-l3-hover: var(--dsa-surface-hover) !important; --tutor-tab-l3-active: var(--dsa-surface-hover) !important; --tutor-tab-sidebar-l2: var(--dsa-surface) !important; --tutor-tab-sidebar-l2-hover: var(--dsa-surface-hover) !important; --tutor-tab-sidebar-l2-active: var(--dsa-surface-raised) !important; /* ══════════════════════════════════════════════════════════════════════ * 3. TEXTE ET ICÔNES * ══════════════════════════════════════════════════════════════════════ */ --tutor-text-primary: var(--dsa-text) !important; --tutor-text-secondary: var(--dsa-text-muted) !important; --tutor-text-subdued: var(--dsa-text-faint) !important; --tutor-text-disabled: var(--dsa-text-faint) !important; --tutor-text-hints: var(--dsa-text-muted) !important; --tutor-icon-idle: var(--dsa-text-muted) !important; --tutor-icon-secondary: var(--dsa-text-muted) !important; --tutor-icon-subdued: var(--dsa-text-faint) !important; --tutor-icon-disabled: var(--dsa-text-faint) !important; /* ══════════════════════════════════════════════════════════════════════ * 4. BORDURES * * `--tutor-border-idle` est le contour au repos du plugin — y compris sur * les champs de saisie, les cases à cocher et les boutons outline, où la * WCAG 2.2 SC 1.4.11 exige 3:1. On lui donne donc le jeton INTERACTIF * (--dsa-border-input, 3,61:1) et non le jeton décoratif (1,80:1). * * L'arbitrage est volontaire : un contour décoratif légèrement plus clair * est un coût esthétique mineur ; un contour de champ sous 3:1 est un échec * d'accessibilité opposable. Le jeton décoratif reste disponible pour nos * propres composants (.dsa-card), qui n'ont pas ce contrainte. * ══════════════════════════════════════════════════════════════════════ */ --tutor-border-idle: var(--dsa-border-input) !important; --tutor-border-idle2: var(--dsa-border) !important; --tutor-border-tertiary: var(--dsa-border) !important; --tutor-border-hover: var(--dsa-border-hover) !important; --tutor-border-dark: var(--dsa-divider) !important; /* ══════════════════════════════════════════════════════════════════════ * 5. ÉTATS SÉMANTIQUES — restent distincts du lime pour ne pas confondre * « action » et « statut » (règle d'usage, BRIEF §2). * ══════════════════════════════════════════════════════════════════════ */ --tutor-text-success: var(--dsa-success) !important; --tutor-icon-success: var(--dsa-success) !important; --tutor-border-success: var(--dsa-success) !important; --tutor-text-warning: var(--dsa-warning) !important; --tutor-icon-warning: var(--dsa-warning) !important; --tutor-border-warning: var(--dsa-warning) !important; --tutor-text-error: var(--dsa-error) !important; --tutor-icon-error: var(--dsa-error) !important; --tutor-border-error: var(--dsa-error) !important; } /** * ═══════════════════════════════════════════════════════════════════════════ * LE JEU DE VARIABLES « HÉRITÉ » — à ne pas oublier * * Tutor LMS v4 n'a pas un, mais TROIS jeux de feuilles côté public : * • tutor-core.min.css — le design system v4 (jetons --tutor-surface-*, etc.) * • tutor.min.css — feuille ancienne, couleurs littérales (cf. checkout.css) * • tutor-front.min.css — feuille ancienne, variables HÉRITÉES (--tutor-body-color, * --tutor-color-primary…), générées depuis l'option * `tutor_option[brand_color]` par TUTOR\Assets. * * Ce troisième jeu était le dernier angle mort. Sur le checkout, * `.tutor-checkout-summary-item { color: var(--tutor-body-color) }` remettait tout * le récapitulatif — intitulé du cours, sous-total, TOTAL, prix — en #212327 sur * fond sombre, soit 1,13:1. Invisible, et non détecté par le contrôleur de fuites * de la review : celui-ci ne teste que les FONDS clairs, pas le texte sombre sur * fond sombre. * ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-tutor-theme="dark"], [data-tutor-theme="system"] { /* Accent hérité. --tutor-color-primary-rgb est consommé en rgba(…, .1) pour les fonds de bouton secondaire : il doit rester la valeur du lime. */ --tutor-color-primary: var(--dsa-lime) !important; --tutor-color-primary-rgb: 214, 244, 100 !important; --tutor-color-primary-hover: var(--dsa-lime-hover) !important; /* Texte hérité — la cause du récapitulatif de commande illisible. */ --tutor-body-color: var(--dsa-text-body) !important; --tutor-body-color-rgb: 201, 204, 209 !important; /* Neutres hérités, pour les composants encore servis par l'ancienne feuille. */ --tutor-border-color: var(--dsa-border) !important; --tutor-color-gray: var(--dsa-text-muted) !important; --tutor-color-black: var(--dsa-text) !important; --tutor-color-white: var(--dsa-surface) !important; --tutor-color-muted: var(--dsa-text-muted) !important; --tutor-color-secondary: var(--dsa-text-muted) !important; }