Files

T

sucupira e091ec75f7 feat: migre le quiz, renomme en Lagé Chat Control, nettoie l'ère Astro

- Quiz de résistance (/quiz) migré d'Astro vers Svelte 5 : 12 questions,
  contenu fusionné dans content/quiz.json, score calculé localement
  (aucun envoi), barres par domaine, recommandations liées à l'annuaire
  réel (/outils?cat=…), persistance locale, partage natif/presse-papier.
  Audit axe-core : 0 violation.
- Renommage complet « Exit Chat Control » → « Lagé Chat Control » :
  i18n fr/gcf, manifest PWA, package.json, README, design system.
- README racine et frontend/README.md réécrits pour le projet Svelte :
  lancement local (pnpm dev) et déploiement VPS (renvoi vers
  docs/DEPLOYMENT.md), en français.
- CONTRIBUTING.md adapté à la nouvelle structure (content/outils/,
  forge labola) en conservant la politique éditoriale de confiance.
- Nettoyage : suppression de tout l'outillage Astro devenu inutile
  (src/, public/, scripts/, tests/, migration/, docker/, configs racine
  eslint/prettier/vitest/playwright/tsconfig, CI GitHub Actions, script
  de migration one-shot). robots.txt et security.txt recréés sous
  frontend/static/ avec les bonnes références (labola).
- Fix : pin pnpm via frontend/pnpm-workspace.yaml (onlyBuiltDependencies/
  allowBuilds pour esbuild) après suppression du package.json racine qui
  perturbait la résolution de version de corepack.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

2026-07-10 14:02:54 -04:00

3.6 KiB

Raw Permalink Blame History

Design system OKI — Lagé Chat Control

Toutes les valeurs visuelles vivent dans frontend/src/styles/tokens.css. Les composants Svelte consomment les tokens ; jamais de valeur brute (couleur, taille) dans un composant (doctrine §5.2).

Architecture CSS

Cascade explicite par @layer (app.css) :

reset → tokens → base → layouts → components → utilities

reset.css — reset moderne minimal (~40 lignes), inclut prefers-reduced-motion.
tokens.css — custom properties : couleurs oklch(), typo fluide clamp(), espacements, interaction.
base.css — HTML sémantique nu : typo, liens, focus visible, boutons.
layouts.css — primitives Every Layout : .stack, .cluster, .center, .card-grid (container queries, pas de media queries de largeur d'écran).
Le style propre à chaque composant vit dans son <style> Svelte (scopé à la compilation).

Couleurs

En oklch() : la luminance perceptuelle rend les contrastes WCAG calculables (méthode modus-vivendi, doctrine §4.3). light-dark() + color-scheme gèrent le mode sombre sans duplication.

Token	Rôle	Note contraste
`--oki-ink` / `--oki-surface`	texte / fond	≥ 7:1 (AAA) dans les deux modes
`--oki-ink-2`	texte secondaire	≥ 4.5:1 (AA)
`--oki-jaune` `--oki-vert` `--oki-rouge` `--oki-noir`	identité panafricaine	décoratif — jamais porteur d'information seul
`--accent` / `--accent-ink`	accent actif / accent texte	`--accent-ink` ≥ 4.5:1 sur `--oki-surface`
`--diff-` / `--diff--ink`	difficulté (fond / texte)	les variantes `-ink` sont AA sur `--oki-surface`

Règle absolue : la difficulté n'est jamais codée par la couleur seule — DifficultyBadge = forme (●/◆/▲) + texte + couleur (doctrine §1.1, ~8 % de déficience de vision des couleurs).

Typographie

Corps : Atkinson Hyperlegible 400 (SIL OFL, conçue pour la lisibilité).
Display (titres, marque) : Fraunces 700 (SIL OFL).
2 fichiers WOFF2 auto-hébergés (static/fonts/), ~35 Ko au total, font-display: swap — jamais de Google Fonts (doctrine §5.3).
Échelle modulaire ratio 1.25, fluide par clamp() : --text-0 … --text-5.
--measure: 65ch sur p, li et .prose (doctrine §2.2 : 45–75 caractères).
Tout en rem : la taille utilisateur est respectée.

Interaction

--tap-target: 48px : tout élément interactif (boutons, liens de nav, filtres, switcher) a une hauteur minimale de 48 px (Fitts, doctrine §1.3).
:focus-visible global : anneau 3 px --accent, offset 2 px.
Durées --duration-1/2 + --ease-out ; annulées par prefers-reduced-motion.

Composants

Composant	Rôle	Principe doctrinal
`DifficultyBadge`	niveau (forme + texte + couleur)	§1.1 — jamais couleur seule
`ToolCard`	fiche condensée, vrai `<a>` couvrant	§4.3 — pas de div cliquable
`CategoryNav`	4 catégories visibles + `<details>`	§1.3 Hick-Hyman, divulgation progressive, sans JS
`SearchBar`	recherche instantanée, raccourci `/`	§2.2 — le clavier est roi
`LanguageSwitcher`	FR / Kréyòl, persisté localStorage	§4.2 — bilinguisme
`EndMarker`	« Ou pa manké ayen » en fin de liste	§1.5, §3 — point d'arrêt explicite

Test des 50 ms (doctrine §1.1)

L'identité OKI est reconnaissable avant toute lecture : bandes panafricaines vert/jaune/rouge dans la marque d'en-tête, soulignés et bordures jaune OKI, titres Fraunces, créole visible dès le héros (« Chwazi zouti ou »).

3.6 KiB Raw Permalink Blame History Unescape Escape