955 lines
26 KiB
TypeScript
955 lines
26 KiB
TypeScript
// 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;
|