197 lines
7.5 KiB
TypeScript
197 lines
7.5 KiB
TypeScript
// Design System La Banquise - Système centralisé de styles
|
|
export const designSystem = {
|
|
// 🎨 Gradients
|
|
gradients: {
|
|
primary: "bg-gradient-to-r from-banquise-blue to-banquise-blue-light",
|
|
primaryBr: "bg-gradient-to-br from-banquise-blue to-banquise-blue-light",
|
|
card: "bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5",
|
|
cardHover: "hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8",
|
|
discord: "bg-gradient-to-r from-[#5865F2] to-[#7289DA]", // Couleurs officielles Discord
|
|
discordHover: "hover:from-[#4752C4] hover:to-[#5B6EAE]", // Couleurs Discord hover officielles
|
|
hero: "bg-gradient-to-br from-banquise-blue to-banquise-blue-dark",
|
|
section: "bg-gradient-to-b from-white/95 to-white"
|
|
},
|
|
|
|
// 🎯 Boutons optimisés
|
|
buttons: {
|
|
base: "inline-flex items-center justify-center font-bold border-0 rounded-2xl transition-all duration-300 active:scale-95",
|
|
effects: "hover:shadow-xl hover:-translate-y-1 hover:scale-105",
|
|
variants: {
|
|
primary: "text-white",
|
|
discord: "group relative overflow-hidden text-white font-semibold rounded-xl hover:shadow-[#5865F2]/25", // Ombre officielle Discord
|
|
auth: "group relative overflow-hidden text-white font-semibold rounded-xl",
|
|
secondary: "bg-white/10 backdrop-blur-sm text-white border border-white/20",
|
|
outline: "bg-transparent border-2 border-banquise-blue text-banquise-blue hover:bg-banquise-blue hover:text-white"
|
|
},
|
|
sizes: {
|
|
sm: "px-3 py-2 text-sm",
|
|
md: "px-4 lg:px-6 py-2.5 lg:py-3 text-sm lg:text-base",
|
|
lg: "px-6 lg:px-8 py-3 lg:py-4 text-base lg:text-lg"
|
|
}
|
|
},
|
|
|
|
// 🃏 Cartes
|
|
cards: {
|
|
base: "backdrop-blur-lg rounded-2xl border transition-all duration-300",
|
|
borders: {
|
|
default: "border-banquise-blue-lightest/30",
|
|
hover: "hover:border-banquise-blue-lightest/50",
|
|
active: "border-banquise-blue/50"
|
|
},
|
|
effects: {
|
|
hover: "hover:shadow-xl",
|
|
lift: "hover:-translate-y-4 hover:shadow-2xl",
|
|
interactive: "cursor-pointer hover:-translate-y-4 hover:shadow-2xl active:scale-95"
|
|
},
|
|
backgrounds: {
|
|
glass: "bg-white/80 backdrop-blur-lg",
|
|
gradient: "bg-gradient-to-br from-white/90 to-white/80",
|
|
solid: "bg-white"
|
|
}
|
|
},
|
|
|
|
// 📝 Typographie
|
|
typography: {
|
|
headings: {
|
|
xl: "text-3xl sm:text-4xl md:text-5xl font-heading font-bold tracking-tight",
|
|
lg: "text-2xl sm:text-3xl md:text-4xl font-heading font-bold tracking-tight",
|
|
md: "text-xl sm:text-2xl md:text-3xl font-heading font-bold tracking-tight",
|
|
sm: "text-lg sm:text-xl md:text-2xl font-heading font-semibold tracking-tight"
|
|
},
|
|
body: {
|
|
xl: "text-lg sm:text-xl md:text-2xl leading-relaxed",
|
|
lg: "text-base sm:text-lg md:text-xl leading-relaxed",
|
|
md: "text-sm sm:text-base md:text-lg leading-relaxed",
|
|
sm: "text-xs sm:text-sm md:text-base leading-relaxed"
|
|
},
|
|
colors: {
|
|
primary: "text-banquise-gray",
|
|
secondary: "text-banquise-blue-dark",
|
|
muted: "text-banquise-gray/80",
|
|
light: "text-banquise-blue-lightest",
|
|
white: "text-white/90"
|
|
},
|
|
weights: {
|
|
normal: "font-normal",
|
|
medium: "font-medium",
|
|
semibold: "font-semibold",
|
|
bold: "font-bold"
|
|
}
|
|
},
|
|
|
|
// 📐 Layout
|
|
layout: {
|
|
sections: {
|
|
default: "py-12 sm:py-16 md:py-20",
|
|
compact: "py-8 sm:py-12 md:py-16",
|
|
spacious: "py-16 sm:py-20 md:py-24"
|
|
},
|
|
containers: {
|
|
default: "w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8",
|
|
narrow: "w-full max-w-4xl mx-auto px-4 sm:px-6 md:px-8",
|
|
wide: "w-full max-w-7xl mx-auto px-4 sm:px-6 md:px-8"
|
|
},
|
|
dividers: {
|
|
default: "w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto rounded-full",
|
|
small: "w-12 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto rounded-full",
|
|
large: "w-32 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto rounded-full"
|
|
},
|
|
grids: {
|
|
responsive: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8",
|
|
auto: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6",
|
|
services: "grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8"
|
|
}
|
|
},
|
|
|
|
// 🎯 Icônes
|
|
icons: {
|
|
sizes: {
|
|
xs: "w-4 h-4",
|
|
sm: "w-6 h-6",
|
|
md: "w-8 h-8",
|
|
lg: "w-12 h-12",
|
|
xl: "w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24"
|
|
},
|
|
containers: {
|
|
card: "rounded-2xl flex items-center justify-center shadow-lg",
|
|
small: "w-10 h-10 rounded-lg flex items-center justify-center text-white",
|
|
service: "text-3xl sm:text-4xl lg:text-5xl"
|
|
},
|
|
effects: {
|
|
hover: "transition-transform duration-300 hover:scale-110",
|
|
spin: "animate-spin",
|
|
bounce: "animate-bounce"
|
|
}
|
|
},
|
|
|
|
// 🧭 Navigation
|
|
navigation: {
|
|
links: {
|
|
desktop: "px-4 lg:px-6 py-2.5 lg:py-3 text-white/90 hover:text-white font-medium text-sm lg:text-base rounded-xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-sm relative group",
|
|
mobile: "group flex items-center p-4 text-white/90 hover:text-white no-underline rounded-2xl hover:bg-gradient-to-r hover:from-banquise-blue/20 hover:to-banquise-blue-light/20 transition-all duration-300 border border-transparent hover:border-banquise-blue-lightest/20"
|
|
},
|
|
effects: {
|
|
underline: "after:absolute after:bottom-1 after:left-1/2 after:w-0 after:h-0.5 after:bg-banquise-blue-lightest after:transition-all after:duration-300 group-hover:after:w-3/4 group-hover:after:left-1/8",
|
|
glow: "hover:drop-shadow-lg hover:drop-shadow-banquise-blue-lightest/50"
|
|
}
|
|
},
|
|
|
|
// ⚡ Animations & Transitions
|
|
animations: {
|
|
transitions: {
|
|
fast: "transition-all duration-200",
|
|
default: "transition-all duration-300",
|
|
slow: "transition-all duration-500"
|
|
},
|
|
transforms: {
|
|
lift: "hover:-translate-y-1",
|
|
liftLarge: "hover:-translate-y-4",
|
|
scale: "hover:scale-105",
|
|
scaleSmall: "hover:scale-102"
|
|
},
|
|
loading: {
|
|
spin: "animate-spin",
|
|
pulse: "animate-pulse",
|
|
bounce: "animate-bounce"
|
|
}
|
|
},
|
|
|
|
// 🌊 Effets spéciaux La Banquise
|
|
effects: {
|
|
ocean: {
|
|
wave: "animate-pulse",
|
|
depth: "backdrop-blur-xl",
|
|
surface: "bg-gradient-to-b from-transparent to-banquise-blue/5"
|
|
},
|
|
ice: {
|
|
crystal: "backdrop-blur-lg bg-white/10",
|
|
frost: "backdrop-blur-sm bg-white/5",
|
|
shine: "bg-gradient-to-br from-white/20 to-transparent"
|
|
}
|
|
}
|
|
} as const;
|
|
|
|
// 🎨 Utilitaires de combinaison
|
|
export const combineStyles = {
|
|
// Bouton primaire complet
|
|
primaryButton: `${designSystem.buttons.base} ${designSystem.buttons.effects} ${designSystem.gradients.primary} ${designSystem.buttons.variants.primary}`,
|
|
|
|
// Carte interactive complète
|
|
interactiveCard: `${designSystem.cards.base} ${designSystem.cards.borders.default} ${designSystem.cards.effects.interactive} ${designSystem.cards.backgrounds.glass}`,
|
|
|
|
// Section standard
|
|
standardSection: `${designSystem.layout.sections.default} ${designSystem.layout.containers.default}`,
|
|
|
|
// Titre de section
|
|
sectionTitle: `${designSystem.typography.headings.lg} ${designSystem.typography.colors.primary}`,
|
|
|
|
// Lien de navigation desktop
|
|
navLink: `${designSystem.navigation.links.desktop} ${designSystem.navigation.effects.underline}`,
|
|
|
|
// Grid responsive services
|
|
servicesGrid: designSystem.layout.grids.services
|
|
} as const;
|
|
|
|
// Type pour l'autocomplétion
|
|
export type DesignSystemKey = keyof typeof designSystem;
|
|
export type CombinedStyleKey = keyof typeof combineStyles; |