// Design System Simplifié - Système cohérent avec contrastes améliorés// Design System Simplifié - Système cohérent avec contrastes améliorés export const designTokens = {export const designTokens = { // Palette de couleurs simplifiée et contrastée // Palette de couleurs simplifiée et contrastée colors: { colors: { // Couleurs principales - Banquise avec fort contraste // Couleurs principales - Banquise avec fort contraste primary: { primary: { 50: '#f0f9ff', // Fond très clair 50: '#f0f9ff', // Fond très clair 100: '#e0f2fe', // Fond clair 100: '#e0f2fe', // Fond clair 200: '#bae6fd', // Bordures claires 200: '#bae6fd', // Bordures claires 300: '#7dd3fc', // Éléments décoratifs 300: '#7dd3fc', // Éléments décoratifs 400: '#38bdf8', // Éléments interactifs 400: '#38bdf8', // Éléments interactifs 500: '#0ea5e9', // Boutons principaux 500: '#0ea5e9', // Boutons principaux 600: '#0284c7', // Boutons hover/focus 600: '#0284c7', // Boutons hover/focus 700: '#0369a1', // Navigation, headers 700: '#0369a1', // Navigation, headers 800: '#075985', // Textes importantes 800: '#075985', // Textes importantes 900: '#0c4a6e', // Textes principaux 900: '#0c4a6e', // Textes principaux }, }, // Couleurs neutres avec bon contraste // Couleurs neutres avec bon contraste neutral: { neutral: { 50: '#fafafa', // Fond principal 50: '#fafafa', // Fond principal 100: '#f4f4f5', // Fond de cartes 100: '#f4f4f5', // Fond de cartes 200: '#e4e4e7', // Bordures légères 200: '#e4e4e7', // Bordures légères 300: '#d4d4d8', // Bordures standards 300: '#d4d4d8', // Bordures standards 400: '#a1a1aa', // Textes secondaires 400: '#a1a1aa', // Textes secondaires 500: '#71717a', // Textes normaux 500: '#71717a', // Textes normaux 600: '#52525b', // Textes importants 600: '#52525b', // Textes importants 700: '#3f3f46', // Textes principaux 700: '#3f3f46', // Textes principaux 800: '#27272a', // Titres 800: '#27272a', // Titres 900: '#18181b', // Textes très importants 900: '#18181b', // Textes très importants }, }, // Couleurs sémantiques contrastées // Couleurs sémantiques contrastées semantic: { semantic: { success: '#059669', // Vert foncé success: '#059669', // Vert foncé warning: '#d97706', // Orange foncé warning: '#d97706', // Orange foncé error: '#dc2626', // Rouge foncé error: '#dc2626', // Rouge foncé info: '#0284c7', // Bleu info info: '#0284c7', // Bleu info }, }, // Compatibilité simplifiée // Compatibilité simplifiée banquise: { banquise: { blue: '#0ea5e9', // primary.500 blue: '#0ea5e9', // primary.500 blueDark: '#0369a1', // primary.700 blueDark: '#0369a1', // primary.700 blueLight: '#38bdf8', // primary.400 blueLight: '#38bdf8', // primary.400 gray: '#f4f4f5', // neutral.100 gray: '#f4f4f5', // neutral.100 } } }, }, // Espacement simplifié // Espacement simplifié spacing: { spacing: { xs: '0.5rem', // 8px xs: '0.5rem', // 8px sm: '1rem', // 16px sm: '1rem', // 16px md: '1.5rem', // 24px md: '1.5rem', // 24px lg: '2rem', // 32px lg: '2rem', // 32px xl: '3rem', // 48px xl: '3rem', // 48px xxl: '4rem', // 64px xxl: '4rem', // 64px }, }, // Rayons de bordure standards // Rayons de bordure standards radius: { radius: { sm: '0.5rem', // 8px sm: '0.5rem', // 8px md: '0.75rem', // 12px md: '0.75rem', // 12px lg: '1rem', // 16px lg: '1rem', // 16px xl: '1.5rem', // 24px xl: '1.5rem', // 24px }, }, // Ombres avec plus de contraste // Ombres avec plus de contraste shadows: { shadows: { sm: '0 2px 4px 0 rgb(0 0 0 / 0.1)', sm: '0 2px 4px 0 rgb(0 0 0 / 0.1)', md: '0 4px 12px 0 rgb(0 0 0 / 0.15)', md: '0 4px 12px 0 rgb(0 0 0 / 0.15)', lg: '0 8px 24px 0 rgb(0 0 0 / 0.2)', lg: '0 8px 24px 0 rgb(0 0 0 / 0.2)', xl: '0 16px 48px 0 rgb(0 0 0 / 0.3)', xl: '0 16px 48px 0 rgb(0 0 0 / 0.3)', // Ombres colorées pour mise en valeur // Ombres colorées pour mise en valeur primary: '0 8px 24px 0 rgb(14 165 233 / 0.3)', primary: '0 8px 24px 0 rgb(14 165 233 / 0.3)', primaryLg: '0 16px 48px 0 rgb(14 165 233 / 0.4)', primaryLg: '0 16px 48px 0 rgb(14 165 233 / 0.4)', }, }, // Typographie simplifiée // Typographie simplifiée typography: { typography: { fontFamily: { fontFamily: { main: ['Inter', 'system-ui', 'sans-serif'], main: ['Inter', 'system-ui', 'sans-serif'], }, }, fontSize: { fontSize: { xs: '0.75rem', // 12px xs: '0.75rem', // 12px sm: '0.875rem', // 14px sm: '0.875rem', // 14px base: '1rem', // 16px base: '1rem', // 16px lg: '1.125rem', // 18px lg: '1.125rem', // 18px xl: '1.25rem', // 20px xl: '1.25rem', // 20px '2xl': '1.5rem', // 24px '2xl': '1.5rem', // 24px '3xl': '2rem', // 32px '3xl': '2rem', // 32px '4xl': '2.5rem', // 40px '4xl': '2.5rem', // 40px '5xl': '3rem', // 48px '5xl': '3rem', // 48px }, }, fontWeight: { fontWeight: { normal: '400', normal: '400', medium: '500', medium: '500', semibold: '600', semibold: '600', bold: '700', bold: '700', }, }, }, }, // Transitions standards // Transitions standards transitions: { transitions: { fast: 'all 150ms ease-out', fast: 'all 150ms ease-out', normal: 'all 250ms ease-out', normal: 'all 250ms ease-out', slow: 'all 350ms ease-out', slow: 'all 350ms ease-out', }, }, } as const;} as const; // Styles de composants simplifiés et contrastés// Styles de composants simplifiés et contrastés export const styles = {export const styles = { // Système de boutons avec fort contraste // Système de boutons avec fort contraste button: { button: { // Bouton principal mis en valeur // Bouton principal mis en valeur primary: [ primary: [ 'inline-flex items-center justify-center font-semibold', 'inline-flex items-center justify-center font-semibold', 'px-8 py-4 rounded-xl text-white text-lg', 'px-6 py-3 rounded-lg text-white', 'bg-gradient-to-r from-primary-600 to-primary-500', 'bg-gradient-to-r from-primary-600 to-primary-500', 'shadow-xl hover:shadow-2xl', 'shadow-lg hover:shadow-primaryLg', 'border border-primary-600/20', 'border border-primary-600/20', 'transition-all duration-300 ease-out', 'transition-all duration-200 ease-out', 'hover:scale-110 hover:from-primary-700 hover:to-primary-600', 'hover:scale-105 hover:from-primary-700 hover:to-primary-600', 'focus:outline-none focus:ring-4 focus:ring-primary-300', 'focus:outline-none focus:ring-4 focus:ring-primary-200', 'active:scale-95', 'active:scale-95' 'transform-gpu' ].join(' '), ].join(' '), // Bouton secondaire contrasté // Bouton secondaire contrasté secondary: [ secondary: [ 'inline-flex items-center justify-center font-semibold', 'inline-flex items-center justify-center font-semibold', 'px-6 py-3 rounded-lg', 'px-6 py-3 rounded-lg', 'bg-white text-primary-700 border-2 border-primary-600', 'bg-white text-primary-700 border-2 border-primary-600', 'shadow-md hover:shadow-lg', 'shadow-md hover:shadow-lg', 'transition-all duration-200 ease-out', 'transition-all duration-200 ease-out', 'hover:bg-primary-50 hover:scale-105', 'hover:bg-primary-50 hover:scale-105', 'focus:outline-none focus:ring-4 focus:ring-primary-200', 'focus:outline-none focus:ring-4 focus:ring-primary-200', 'active:scale-95' 'active:scale-95' ].join(' '), ].join(' '), // Bouton ghost avec contraste // Bouton ghost avec contraste ghost: [ ghost: [ 'inline-flex items-center justify-center font-medium', 'inline-flex items-center justify-center font-medium', 'px-4 py-2 rounded-lg', 'px-4 py-2 rounded-lg', 'text-neutral-700 hover:text-neutral-900', 'text-neutral-700 hover:text-neutral-900', 'hover:bg-neutral-100', 'hover:bg-neutral-100', 'transition-all duration-200 ease-out', 'transition-all duration-200 ease-out', 'focus:outline-none focus:ring-2 focus:ring-neutral-300' 'focus:outline-none focus:ring-2 focus:ring-neutral-300' ].join(' '), ].join(' '), }, }, // Cartes avec contrastes améliorés // Cartes avec contrastes améliorés card: { card: { // Carte standard avec ombre marquée // Carte standard avec ombre marquée base: [ base: [ 'bg-white rounded-xl border border-neutral-200', 'bg-white rounded-xl border border-neutral-300', 'shadow-md hover:shadow-lg', 'shadow-lg hover:shadow-xl', 'transition-all duration-200' 'transition-all duration-300' ].join(' '), ].join(' '), // Carte interactive avec feedback visuel fort // Carte interactive avec feedback visuel fort interactive: [ interactive: [ 'bg-white rounded-xl border border-neutral-200', 'bg-white rounded-xl border border-neutral-300', 'shadow-md hover:shadow-xl hover:border-primary-300', 'shadow-lg hover:shadow-2xl hover:border-primary-400', 'cursor-pointer transition-all duration-200', 'cursor-pointer transition-all duration-300', 'hover:-translate-y-2 hover:scale-[1.02]', 'hover:-translate-y-3 hover:scale-[1.03]', 'active:scale-[0.98]' 'active:scale-[0.97]' ].join(' '), ].join(' '), // Carte mise en avant // Carte mise en avant featured: [ featured: [ 'bg-gradient-to-br from-white to-primary-50', 'bg-gradient-to-br from-white to-primary-50', 'rounded-xl border-2 border-primary-200', 'rounded-xl border-2 border-primary-300', 'shadow-lg hover:shadow-xl', 'shadow-xl hover:shadow-2xl', 'transition-all duration-200' 'transition-all duration-300' ].join(' '), ].join(' '), }, }, // Textes avec hiérarchie claire // Textes avec hiérarchie claire text: { text: { // Titre héros avec fort contraste // Titre héros avec fort contraste hero: [ hero: [ 'text-4xl md:text-5xl lg:text-6xl font-bold', 'text-4xl md:text-5xl lg:text-6xl font-bold', 'text-neutral-900 leading-tight tracking-tight' 'text-neutral-900 leading-tight tracking-tight' ].join(' '), ].join(' '), // Titres de sections contrastés // Titres de sections contrastés heading: [ heading: [ 'text-2xl md:text-3xl lg:text-4xl font-bold', 'text-2xl md:text-3xl lg:text-4xl font-bold', 'text-neutral-800 leading-tight' 'text-neutral-800 leading-tight' ].join(' '), ].join(' '), // Sous-titres clairs // Sous-titres clairs subheading: [ subheading: [ 'text-lg md:text-xl font-semibold', 'text-lg md:text-xl font-semibold', 'text-neutral-700' 'text-neutral-700' ].join(' '), ].join(' '), // Corps de texte lisible // Corps de texte lisible body: [ body: [ 'text-base text-neutral-600 leading-relaxed' 'text-base md:text-lg text-neutral-600 leading-relaxed' ].join(' '), ].join(' '), // Texte d'accent // Texte d'accent accent: 'text-primary-600 font-semibold', accent: 'text-primary-600 font-semibold', // Texte discret mais lisible // Texte discret mais lisible muted: 'text-neutral-500', muted: 'text-neutral-500', }, }, // Sections avec fonds contrastés // Sections avec fonds contrastés section: { section: { // Section standard avec fond léger // Section hero avec fond dégradé light: [ hero: [ 'py-16 md:py-24 px-4 sm:px-6 lg:px-8', 'min-h-screen flex items-center justify-center', 'bg-neutral-50' 'bg-gradient-to-br from-neutral-50 via-primary-50/30 to-neutral-100', ].join(' '), 'relative overflow-hidden' ].join(' '), // Section avec fond blanc white: [ // Section standard avec fond léger 'py-16 md:py-24 px-4 sm:px-6 lg:px-8', light: [ 'bg-white' 'py-20 md:py-28 px-4 sm:px-6 lg:px-8', ].join(' '), 'bg-neutral-50' ].join(' '), // Section avec fond dégradé subtil gradient: [ // Section avec fond blanc 'py-16 md:py-24 px-4 sm:px-6 lg:px-8', white: [ 'bg-gradient-to-br from-neutral-50 to-primary-50/30' 'py-20 md:py-28 px-4 sm:px-6 lg:px-8', ].join(' '), 'bg-white' }, ].join(' '), // Navigation contrastée // Section avec fond dégradé subtil nav: { gradient: [ container: [ 'py-20 md:py-28 px-4 sm:px-6 lg:px-8', 'bg-primary-700/95 backdrop-blur-md', 'bg-gradient-to-br from-white to-primary-50/40' 'border-b border-primary-600/30 shadow-lg' ].join(' '), ].join(' '), }, link: [ // Navigation contrastée 'px-4 py-2 text-sm font-medium rounded-lg', nav: { 'text-white/90 hover:text-white hover:bg-white/15', container: [ 'transition-all duration-200' 'bg-primary-700/95 backdrop-blur-md', ].join(' '), 'border-b border-primary-600/30 shadow-lg' ].join(' '), linkActive: [ 'px-4 py-2 text-sm font-medium rounded-lg', link: [ 'text-white bg-white/20 border border-white/20' 'px-4 py-2.5 text-sm font-medium rounded-xl', ].join(' '), 'text-white/90 hover:text-white hover:bg-white/15', }, 'transition-all duration-200' ].join(' '), // Grilles et layouts layout: { linkActive: [ container: 'max-w-7xl mx-auto', 'px-4 py-2.5 text-sm font-medium rounded-xl', section: 'py-16 md:py-24 px-4 sm:px-6 lg:px-8', 'text-white bg-white/20 border border-white/20' grid: 'grid gap-8', ].join(' '), gridCols2: 'grid-cols-1 md:grid-cols-2', }, gridCols3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', divider: [ // Grilles et layouts 'w-16 h-1 bg-gradient-to-r from-primary-500 to-primary-400', layout: { 'rounded-full mx-auto mb-8' container: 'max-w-7xl mx-auto', ].join(' '), section: 'py-20 md:py-28 px-4 sm:px-6 lg:px-8', }, grid: 'grid gap-8 lg:gap-12', gridCols2: 'grid-cols-1 md:grid-cols-2', // Animations avec feedback visible gridCols3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', animation: { divider: [ hover: 'hover:-translate-y-2 hover:shadow-lg transition-all duration-200', 'w-20 h-1.5 bg-gradient-to-r from-primary-500 to-primary-400', scale: 'hover:scale-105 transition-transform duration-200', 'rounded-full mx-auto mb-12' fadeIn: 'animate-fadeIn', ].join(' '), pulse: 'animate-pulse', }, }, } as const; // Animations avec feedback visible animation: {// Fonction utilitaire simplifiée hover: 'hover:-translate-y-3 hover:shadow-xl transition-all duration-300',export const mergeClasses = (...classes: (string | undefined | null | false)[]): string => { scale: 'hover:scale-105 transition-transform duration-300', return classes.filter(Boolean).join(' '); fadeIn: 'animate-fadeIn',}; pulse: 'animate-pulse', },// Breakpoints standards } as const;export const breakpoints = { sm: '640px', // Fonction utilitaire simplifiée md: '768px', export const mergeClasses = (...classes: (string | undefined | null | false)[]): string => { lg: '1024px', return classes.filter(Boolean).join(' '); xl: '1280px', };} as const; // Breakpoints standards// Utilitaires responsive simplifiés export const breakpoints = {export const responsive = { sm: '640px', // Espacement responsive md: '768px', spacing: { lg: '1024px', section: 'py-8 md:py-16 lg:py-24', xl: '1280px', container: 'px-4 sm:px-6 lg:px-8', } as const; }, // Utilitaires responsive simplifiés // Grilles responsive export const responsive = { grid: { // Espacement responsive base: 'grid gap-6 md:gap-8', spacing: { cols2: 'grid-cols-1 md:grid-cols-2', section: 'py-12 md:py-20 lg:py-28', cols3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', container: 'px-4 sm:px-6 lg:px-8', }, },} as const; // Grilles responsive// Types TypeScript simplifiés grid: {export type DesignTokens = typeof designTokens; base: 'grid gap-8 lg:gap-12',export type Styles = typeof styles; cols2: 'grid-cols-1 md:grid-cols-2', cols3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',// Export par défaut simplifié },export default { } as const; tokens: designTokens, styles, // Types TypeScript simplifiés responsive, export type DesignTokens = typeof designTokens; breakpoints, export type Styles = typeof styles; mergeClasses, } as const; // Export par défaut simplifié export default {// Alias pour compatibilité tokens: designTokens,export const componentStyles = styles; styles, responsive,// Styles de composants simplifiés et contrastés breakpoints,export const styles = { mergeClasses, // Système de boutons avec fort contraste } as const; button: { // Bouton principal mis en valeur // Alias pour compatibilité primary: [ export const componentStyles = styles; 'inline-flex items-center justify-center font-semibold', 'px-6 py-3 rounded-lg text-white', 'bg-gradient-to-r from-primary-600 to-primary-500', 'shadow-lg hover:shadow-primaryLg', 'border border-primary-600/20', 'transition-all duration-200 ease-out', 'hover:scale-105 hover:from-primary-700 hover:to-primary-600', 'focus:outline-none focus:ring-4 focus:ring-primary-200', 'active:scale-95' ].join(' '), // Bouton secondaire contrasté secondary: [ 'inline-flex items-center justify-center font-semibold', 'px-6 py-3 rounded-lg', 'bg-white text-primary-700 border-2 border-primary-600', 'shadow-md hover:shadow-lg', 'transition-all duration-200 ease-out', 'hover:bg-primary-50 hover:scale-105', 'focus:outline-none focus:ring-4 focus:ring-primary-200', 'active:scale-95' ].join(' '), // Bouton ghost avec contraste ghost: [ 'inline-flex items-center justify-center font-medium', 'px-4 py-2 rounded-lg', 'text-neutral-700 hover:text-neutral-900', 'hover:bg-neutral-100', 'transition-all duration-200 ease-out', 'focus:outline-none focus:ring-2 focus:ring-neutral-300' ].join(' '), }, // Cartes avec contrastes améliorés card: { // Carte standard avec ombre marquée base: [ 'bg-white rounded-xl border border-neutral-200', 'shadow-md hover:shadow-lg', 'transition-all duration-200' ].join(' '), // Carte interactive avec feedback visuel fort interactive: [ 'bg-white rounded-xl border border-neutral-200', 'shadow-md hover:shadow-xl hover:border-primary-300', 'cursor-pointer transition-all duration-200', 'hover:-translate-y-2 hover:scale-[1.02]', 'active:scale-[0.98]' ].join(' '), // Carte mise en avant featured: [ 'bg-gradient-to-br from-white to-primary-50', 'rounded-xl border-2 border-primary-200', 'shadow-lg hover:shadow-xl', 'transition-all duration-200' ].join(' '), }, // Textes avec hiérarchie claire text: { // Titre héros avec fort contraste hero: [ 'text-4xl md:text-5xl lg:text-6xl font-bold', 'text-neutral-900 leading-tight tracking-tight' ].join(' '), // Titres de sections contrastés heading: [ 'text-2xl md:text-3xl lg:text-4xl font-bold', 'text-neutral-800 leading-tight' ].join(' '), // Sous-titres clairs subheading: [ 'text-lg md:text-xl font-semibold', 'text-neutral-700' ].join(' '), // Corps de texte lisible body: [ 'text-base text-neutral-600 leading-relaxed' ].join(' '), // Texte d'accent accent: 'text-primary-600 font-semibold', // Texte discret mais lisible muted: 'text-neutral-500', }, // Sections avec fonds contrastés section: { // Section standard avec fond léger light: [ 'py-16 md:py-24 px-4 sm:px-6 lg:px-8', 'bg-neutral-50' ].join(' '), // Section avec fond blanc white: [ 'py-16 md:py-24 px-4 sm:px-6 lg:px-8', 'bg-white' ].join(' '), // Section avec fond dégradé subtil gradient: [ 'py-16 md:py-24 px-4 sm:px-6 lg:px-8', 'bg-gradient-to-br from-neutral-50 to-primary-50/30' ].join(' '), }, // Navigation contrastée nav: { container: [ 'bg-primary-700/95 backdrop-blur-md', 'border-b border-primary-600/30 shadow-lg' ].join(' '), link: [ 'px-4 py-2 text-sm font-medium rounded-lg', 'text-white/90 hover:text-white hover:bg-white/15', 'transition-all duration-200' ].join(' '), linkActive: [ 'px-4 py-2 text-sm font-medium rounded-lg', 'text-white bg-white/20 border border-white/20' ].join(' '), }, // Grilles et layouts layout: { container: 'max-w-7xl mx-auto', section: 'py-16 md:py-24 px-4 sm:px-6 lg:px-8', grid: 'grid gap-8', gridCols2: 'grid-cols-1 md:grid-cols-2', gridCols3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', divider: [ 'w-16 h-1 bg-gradient-to-r from-primary-500 to-primary-400', 'rounded-full mx-auto mb-8' ].join(' '), }, // Animations avec feedback visible animation: { hover: 'hover:-translate-y-2 hover:shadow-lg transition-all duration-200', scale: 'hover:scale-105 transition-transform duration-200', fadeIn: 'animate-fadeIn', pulse: 'animate-pulse', }, } as const; // Fonction utilitaire simplifiée export const mergeClasses = (...classes: (string | undefined | null | false)[]): string => { return classes.filter(Boolean).join(' '); }; // Breakpoints standards export const breakpoints = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', } as const; // Utilitaires responsive simplifiés export const responsive = { // Espacement responsive spacing: { section: 'py-8 md:py-16 lg:py-24', container: 'px-4 sm:px-6 lg:px-8', }, // Grilles responsive grid: { base: 'grid gap-6 md:gap-8', cols2: 'grid-cols-1 md:grid-cols-2', cols3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', }, } as const; // Types TypeScript simplifiés export type DesignTokens = typeof designTokens; export type Styles = typeof styles; // Export par défaut simplifié export default { tokens: designTokens, styles, responsive, breakpoints, mergeClasses, } as const; // Alias pour compatibilité export const componentStyles = styles; // Fonction utilitaire pour fusionner les classes CSS export const mergeClasses = (...classes: (string | undefined | null | false)[]): string => { return classes.filter(Boolean).join(' '); }; // Configuration responsive moderne export const responsive = { // Breakpoints breakpoints: designTokens.breakpoints, // Utilitaires responsive pour les composants utils: { // Espacement responsive spacing: { section: 'py-8 md:py-12 lg:py-16 xl:py-20', container: 'px-4 sm:px-6 lg:px-8 xl:px-12', grid: 'gap-4 md:gap-6 lg:gap-8', }, // Typographie responsive text: { hero: 'text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl', h1: 'text-2xl sm:text-3xl md:text-4xl lg:text-5xl', h2: 'text-xl sm:text-2xl md:text-3xl lg:text-4xl', h3: 'text-lg sm:text-xl md:text-2xl lg:text-3xl', body: 'text-sm sm:text-base md:text-lg', small: 'text-xs sm:text-sm', }, }, } as const; // Thème sombre (pour future implémentation) export const darkTheme = { colors: { background: designTokens.colors.neutral[900], surface: designTokens.colors.neutral[800], primary: designTokens.colors.primary[400], text: { primary: designTokens.colors.neutral[100], secondary: designTokens.colors.neutral[300], muted: designTokens.colors.neutral[500], } } } as const; // Configuration d'accessibilité export const accessibility = { // Tailles minimales pour les éléments interactifs minTouchTarget: '44px', // Ratios de contraste recommandés contrast: { normal: '4.5:1', large: '3:1', enhanced: '7:1', }, // Classes utilitaires pour l'accessibilité utils: { screenReader: 'sr-only', focusVisible: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', skipLink: 'absolute -top-40 left-6 z-[999] bg-primary-600 text-white px-4 py-2 rounded-md focus:top-6', }, } as const; // Animation et motion export const motion = { // Durées d'animation duration: { fast: '150ms', normal: '250ms', slow: '350ms', slower: '500ms', }, // Courbes d'animation easing: { linear: 'linear', easeIn: 'cubic-bezier(0.4, 0, 1, 1)', easeOut: 'cubic-bezier(0, 0, 0.2, 1)', easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)', spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)', }, // Respect des préférences utilisateur respectMotion: '@media (prefers-reduced-motion: reduce)', } as const; // Types TypeScript pour une meilleure intégration export type DesignTokens = typeof designTokens; export type Gradients = typeof gradients; export type ComponentStyles = typeof componentStyles; export type Responsive = typeof responsive; export type DarkTheme = typeof darkTheme; export type Accessibility = typeof accessibility; export type Motion = typeof motion; // Export par défaut pour faciliter l'import export default { tokens: designTokens, gradients, components: componentStyles, responsive, darkTheme, accessibility, motion, mergeClasses, } as const;