Azmog
91ceca2be5
- tokens centralisés (Tint, IconSize, LineHeight, LetterSpacing), zéro hex en dur - accessibilité (rôles, labels, live regions, afficher/masquer mot de passe) - états vides/erreur complétés (ex. saisie introuvable), cibles tactiles >=44px - suppression du composant mort RepubliqueHeader Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
// Design tokens centralisés — identité du Système de Design de l'État (DSFR).
|
|
// À utiliser partout au lieu de valeurs « magiques » inline, pour une UI cohérente.
|
|
|
|
import { Colors } from './colors';
|
|
|
|
/** Espacements (échelle 4px, comme le DSFR). */
|
|
export const Spacing = {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 24,
|
|
xxl: 32,
|
|
xxxl: 40,
|
|
} as const;
|
|
|
|
/** Rayons de bordure. Le DSFR est volontairement « carré » (rayons faibles). */
|
|
export const Radius = {
|
|
sm: 4,
|
|
md: 8,
|
|
pill: 999,
|
|
} as const;
|
|
|
|
/** Tailles de police. */
|
|
export const FontSize = {
|
|
tiny: 11,
|
|
xs: 13,
|
|
sm: 14,
|
|
body: 15,
|
|
md: 16,
|
|
lg: 18,
|
|
xl: 20,
|
|
xxl: 24,
|
|
display: 32,
|
|
} as const;
|
|
|
|
/** Hauteurs de ligne (couplées aux tailles de police pour un rythme régulier). */
|
|
export const LineHeight = {
|
|
tight: 13,
|
|
snug: 19,
|
|
normal: 20,
|
|
} as const;
|
|
|
|
/** Interlettrages (DSFR : capitales légèrement espacées). */
|
|
export const LetterSpacing = {
|
|
sm: 0.5,
|
|
md: 1,
|
|
} as const;
|
|
|
|
/** Tailles d'icône homogènes (Ionicons). */
|
|
export const IconSize = {
|
|
sm: 14,
|
|
md: 18,
|
|
lg: 24,
|
|
xl: 32,
|
|
} as const;
|
|
|
|
/** Diamètre du rond d'icône (états vides, succès, en-têtes illustrés). */
|
|
export const ICON_CIRCLE = 72;
|
|
|
|
/** Graisses (typées pour React Native). */
|
|
export const FontWeight = {
|
|
regular: '400',
|
|
medium: '500',
|
|
semibold: '600',
|
|
bold: '700',
|
|
heavy: '800',
|
|
} as const;
|
|
|
|
/**
|
|
* Fonds teintés DSFR (teintes claires des couleurs d'état / Bleu France),
|
|
* utilisés pour les pastilles, bandeaux et ronds d'icône. Centralisés ici pour
|
|
* éviter les codes hexadécimaux en dur dans les écrans et composants.
|
|
*/
|
|
export const Tint = {
|
|
primary: '#E3E3FD', // Bleu France 925
|
|
info: '#E8EDFF',
|
|
warning: '#FFE9C7',
|
|
} as const;
|
|
|
|
/** Ombres douces, discrètes (le DSFR reste sobre). */
|
|
export const Shadow = {
|
|
card: {
|
|
shadowColor: Colors.black,
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 4,
|
|
elevation: 1,
|
|
},
|
|
raised: {
|
|
shadowColor: Colors.black,
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.12,
|
|
shadowRadius: 10,
|
|
elevation: 4,
|
|
},
|
|
} as const;
|
|
|
|
/** Cible tactile minimale recommandée (accessibilité). */
|
|
export const MIN_TOUCH = 44;
|
|
|
|
/** Cible tactile réduite pour les contrôles « petits » (toujours confortable). */
|
|
export const MIN_TOUCH_SM = 40;
|
|
|
|
/** hitSlop standard pour agrandir la zone cliquable des petites icônes. */
|
|
export const HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
|