# Frontend — Risques & vigilance : Design Tokens

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

---

<a id="risque-double-systeme-espacement"></a>
## 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

---

<a id="risque-dimensions-image-via-spacing"></a>
## 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

```typescript
// 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

---

<a id="risque-inline-styles-dashboard"></a>
## 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

---

<a id="risque-tailwind-classes-invalides"></a>
## 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