_Assistant_Lead_Tech/knowledge/frontend/risques/design-tokens.md

Frontend — Risques & vigilance : Design Tokens

Extrait de la base de connaissance Lead_tech. Voir knowledge/frontend/risques/README.md pour l'index complet.

---

Double système d'espacement dans un monorepo Expo

Risques

• Deux échelles d'espacement coexistent avec des noms différents pour des valeurs identiques (Spacing.three = 16 vs spacing.base = 16)
• L'audit "zéro hardcode" ne détecte pas l'inconsistance car les deux sont des constantes nommées
• Les deux échelles peuvent diverger silencieusement

Symptômes

• import { Spacing } from '@/constants/theme' coexiste avec import { spacing } from '@/theme'
• Certains screens refactorisés utilisent l'ancien système sans que personne ne le détecte

Bonnes pratiques / mitigations

• Dès la création de src/theme/spacing.ts, supprimer ou vider constants/theme.ts (sauf constantes vraiment spécifiques : MaxContentWidth, BottomTabInset)
• Faire un grep from '@/constants/theme' à chaque story pour détecter les usages résiduels
• Cause racine : le template Expo génère constants/theme.ts avec Spacing = { one, two, three... } — à purger explicitement lors de la story design tokens
• Contexte technique : Expo / React Native — app-alexandrie story 0.5, 19-03-2026

---

Dimensions d'image via tokens spacing (React Native)

Risques

• Si spacing.huge change pour une raison d'espacement, la taille de l'image change silencieusement
• Régression visuelle sans que personne ne réalise l'impact — les deux changements semblent indépendants

Symptômes

• width: spacing.huge, height: spacing.huge pour une image dont la taille est fixée par la spec Figma

Bonnes pratiques / mitigations

// Correct : constante locale ou token dédié
const THUMBNAIL_SIZE = 48; // Figma spec node 1-16147

// OU token dans un fichier sizes.ts dédié si la valeur est partagée
export const sizes = { thumbnail: 48, avatar: 40 } as const;

Règle : spacing = espacement entre éléments. sizes ou constantes locales = dimensions de composants.

• Contexte technique : React Native / design tokens — app-alexandrie story 0.4, 19-03-2026

---

Inline styles dans les composants dashboard

Risques

• Contourne le système Tailwind + tokens CSS
• Crée des incohérences visuelles non détectées par le linter

Symptômes

• style={{ color: '#123456', marginTop: 8 }} dans un composant dashboard

Bonnes pratiques / mitigations

• Bloquer en code review systématiquement tout style={{...}} dans les composants dashboard

• Exception acceptable uniquement : animations CSS dynamiques (valeurs calculées au runtime)

• Contexte technique : React / Tailwind — app-template-resto 22-03-2026

---

Classes Tailwind invalides courantes (bugs silencieux)

Risques

• Classes Tailwind invalides sont silencieusement ignorées — aucun warning, comportement visuellement cassé

Symptômes

• Item masqué affiché à pleine opacité (opacity-55 → invalide)
• Largeur incorrecte (w-35 → invalide)

Bonnes pratiques / mitigations

Erreurs courantes :

• opacity-55 → invalide. Scale : 0/5/10/20/25/30/40/50/60/70/75/80/90/95/100 → utiliser opacity-50 ou opacity-60

• w-35 → invalide. Scale saute de w-32 à w-36 → utiliser w-36

• box-border → redondant. Tailwind Preflight applique déjà box-sizing: border-box globalement

• Toujours vérifier les classes custom/non-standard avec l'extension Tailwind IntelliSense

• Contexte technique : Tailwind CSS — app-template-resto 22-03-2026

---

Imports morts de tokens dans les composants React Native

Risques

• Les imports de tokens abandonnés (ex : fontWeight après passage aux fontes nommées par variante) ne génèrent pas d'erreur TypeScript car le type est compatible avec les usages implicites
• La migration de design system peut laisser des dépendances obsolètes indétectables au build

Symptômes

• import { fontWeight } from '@/tokens' présent mais inutilisé — aucun lint warning sans règle dédiée
• Tokens refactorisés encore référencés dans des composants après migration

Bonnes pratiques / mitigations

• Activer @typescript-eslint/no-unused-vars et no-unused-imports dans la config ESLint mobile
• Lors de toute migration de tokens, auditer les imports de chaque composant UI concerné
• Contexte technique : React Native / ESLint — app-alexandrie, 25-03-2026