177 lines
6.0 KiB
TypeScript
177 lines
6.0 KiB
TypeScript
// Design System - Centralized design tokens and reusable styles
|
|
export const designTokens = {
|
|
// Colors
|
|
colors: {
|
|
banquise: {
|
|
blue: '#40B4FF',
|
|
blueDark: '#1F5D89',
|
|
blueLight: '#69B7E2',
|
|
blueLightest: '#A5F0FF',
|
|
gray: '#F6F6F6',
|
|
}
|
|
},
|
|
|
|
// Spacing
|
|
spacing: {
|
|
xs: '0.25rem',
|
|
sm: '0.5rem',
|
|
md: '1rem',
|
|
lg: '1.5rem',
|
|
xl: '2rem',
|
|
xxl: '3rem',
|
|
},
|
|
|
|
// Border radius
|
|
borderRadius: {
|
|
sm: '0.5rem',
|
|
md: '0.75rem',
|
|
lg: '1rem',
|
|
xl: '1.5rem',
|
|
xxl: '2rem',
|
|
},
|
|
|
|
// Shadows
|
|
shadows: {
|
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
|
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
|
|
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
|
|
xxl: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
},
|
|
|
|
// Typography
|
|
typography: {
|
|
fontFamily: {
|
|
heading: ['Dela Gothic One', 'sans-serif'],
|
|
body: ['Roboto', 'sans-serif'],
|
|
},
|
|
fontSize: {
|
|
xs: '0.75rem',
|
|
sm: '0.875rem',
|
|
base: '1rem',
|
|
lg: '1.125rem',
|
|
xl: '1.25rem',
|
|
'2xl': '1.5rem',
|
|
'3xl': '1.875rem',
|
|
'4xl': '2.25rem',
|
|
'5xl': '3rem',
|
|
'6xl': '3.75rem',
|
|
},
|
|
fontWeight: {
|
|
normal: '400',
|
|
medium: '500',
|
|
semibold: '600',
|
|
bold: '700',
|
|
extrabold: '800',
|
|
},
|
|
},
|
|
|
|
// Transitions
|
|
transitions: {
|
|
fast: 'all 0.15s ease-in-out',
|
|
normal: 'all 0.3s ease-in-out',
|
|
slow: 'all 0.5s ease-in-out',
|
|
},
|
|
|
|
// Z-index
|
|
zIndex: {
|
|
dropdown: 1000,
|
|
sticky: 1020,
|
|
fixed: 1030,
|
|
modalBackdrop: 1040,
|
|
modal: 1050,
|
|
popover: 1060,
|
|
tooltip: 1070,
|
|
},
|
|
} as const;
|
|
|
|
// Reusable gradient combinations
|
|
export const 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-indigo-600 to-purple-600',
|
|
discordHover: 'hover:from-indigo-500 hover:to-purple-500',
|
|
background: 'bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/95 to-banquise-blue-dark',
|
|
} as const;
|
|
|
|
// Reusable component styles
|
|
export const componentStyles = {
|
|
// Buttons
|
|
button: {
|
|
base: 'inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95',
|
|
primary: 'bg-gradient-to-r from-banquise-blue to-banquise-blue-light',
|
|
discord: 'group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500',
|
|
auth: 'group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl',
|
|
},
|
|
|
|
// Cards
|
|
card: {
|
|
base: 'backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300',
|
|
hover: 'hover:shadow-xl hover:border-banquise-blue-lightest/50',
|
|
interactive: 'cursor-pointer hover:-translate-y-4 hover:shadow-2xl active:scale-95',
|
|
gradient: 'bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5',
|
|
},
|
|
|
|
// Navigation
|
|
nav: {
|
|
link: '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',
|
|
mobileItem: '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',
|
|
},
|
|
|
|
// Text styles
|
|
text: {
|
|
heading: 'font-heading font-bold tracking-tight',
|
|
headingXl: 'text-3xl sm:text-4xl md:text-5xl text-banquise-gray font-heading font-bold tracking-tight',
|
|
headingLg: 'text-2xl sm:text-3xl md:text-4xl text-banquise-gray font-heading font-bold tracking-tight',
|
|
headingMd: 'text-xl sm:text-2xl md:text-3xl text-banquise-blue-dark font-heading font-bold tracking-tight',
|
|
headingSm: 'text-lg sm:text-xl md:text-2xl text-banquise-blue-dark font-heading font-semibold tracking-tight',
|
|
subheading: 'text-base sm:text-lg md:text-xl text-banquise-gray/90 font-medium leading-relaxed',
|
|
body: 'text-sm sm:text-base md:text-lg text-banquise-blue-dark/90 leading-relaxed',
|
|
description: 'text-banquise-gray/80 leading-relaxed',
|
|
muted: 'text-banquise-gray/90 leading-relaxed',
|
|
lightHeading: 'text-banquise-blue-lightest font-heading font-bold tracking-tight',
|
|
lightBody: 'text-white/90 leading-relaxed',
|
|
},
|
|
|
|
// Icons
|
|
icon: {
|
|
base: 'w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl shadow-lg',
|
|
small: 'w-10 h-10 rounded-lg flex items-center justify-center text-white',
|
|
},
|
|
|
|
// Layout
|
|
layout: {
|
|
section: 'py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8',
|
|
container: 'max-w-6xl mx-auto',
|
|
divider: 'w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full',
|
|
},
|
|
|
|
// Animations
|
|
animation: {
|
|
hover: 'hover:-translate-y-4 hover:shadow-2xl transition-all duration-300',
|
|
scale: 'hover:scale-105 active:scale-95 transition-transform duration-300',
|
|
fadeIn: 'animate-fadeIn',
|
|
slideUp: 'animate-slideUp',
|
|
},
|
|
} as const;
|
|
|
|
// Utility function to merge classes
|
|
export const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {
|
|
return classes.filter(Boolean).join(' ');
|
|
};
|
|
|
|
// Responsive breakpoints
|
|
export const breakpoints = {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
} as const;
|
|
|
|
export type DesignTokens = typeof designTokens;
|
|
export type Gradients = typeof gradients;
|
|
export type ComponentStyles = typeof componentStyles;
|