197 lines
4.8 KiB
TypeScript
197 lines
4.8 KiB
TypeScript
/**
|
|
* Modern Design System Theme
|
|
* Centralized theme configuration with gradients, colors, shadows, and spacing
|
|
*/
|
|
|
|
export const theme = {
|
|
// Color Palette
|
|
colors: {
|
|
// Primary colors
|
|
primary: '#3b82f6',
|
|
primaryDark: '#2563eb',
|
|
primaryLight: '#60a5fa',
|
|
secondary: '#8b5cf6',
|
|
|
|
// Accent colors
|
|
purple: '#8b5cf6',
|
|
purpleDark: '#7c3aed',
|
|
pink: '#ec4899',
|
|
|
|
// Success
|
|
success: '#10b981',
|
|
successDark: '#059669',
|
|
successLight: '#34d399',
|
|
|
|
// Warning
|
|
warning: '#f59e0b',
|
|
warningDark: '#d97706',
|
|
|
|
// Danger
|
|
danger: '#ef4444',
|
|
dangerDark: '#dc2626',
|
|
|
|
// Neutrals
|
|
white: '#ffffff',
|
|
black: '#000000',
|
|
gray50: '#f9fafb',
|
|
gray100: '#f3f4f6',
|
|
gray200: '#e5e7eb',
|
|
gray300: '#d1d5db',
|
|
gray400: '#9ca3af',
|
|
gray500: '#6b7280',
|
|
gray600: '#4b5563',
|
|
gray700: '#374151',
|
|
gray800: '#1f2937',
|
|
gray900: '#111827',
|
|
|
|
// Backgrounds
|
|
background: '#f5f5f5',
|
|
backgroundDark: '#0f172a',
|
|
surface: '#ffffff',
|
|
surfaceDark: '#1e293b',
|
|
},
|
|
|
|
// Gradient Definitions
|
|
gradients: {
|
|
primary: ['#3b82f6', '#8b5cf6'] as const,
|
|
primaryVertical: ['#3b82f6', '#2563eb'] as const,
|
|
success: ['#10b981', '#059669'] as const,
|
|
warning: ['#f59e0b', '#d97706'] as const,
|
|
danger: ['#ef4444', '#ec4899'] as const,
|
|
purple: ['#8b5cf6', '#7c3aed'] as const,
|
|
ocean: ['#06b6d4', '#3b82f6'] as const,
|
|
sunset: ['#f59e0b', '#ef4444'] as const,
|
|
forest: ['#10b981', '#059669'] as const,
|
|
lavender: ['#a78bfa', '#ec4899'] as const,
|
|
dark: ['#1e293b', '#0f172a'] as const,
|
|
// Premium metallic gradients
|
|
blueMetallic: ['#1e40af', '#06b6d4', '#10b981'] as const,
|
|
amberMetallic: ['#b45309', '#f59e0b', '#fbbf24'] as const,
|
|
magentaMetallic: ['#be185d', '#ec4899', '#f472b6'] as const,
|
|
emeraldMetallic: ['#047857', '#10b981', '#6ee7b7'] as const,
|
|
},
|
|
|
|
// Shadow System
|
|
shadows: {
|
|
subtle: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 2,
|
|
elevation: 2,
|
|
},
|
|
medium: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
strong: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.15,
|
|
shadowRadius: 8,
|
|
elevation: 5,
|
|
},
|
|
glow: {
|
|
shadowColor: '#3b82f6',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 12,
|
|
elevation: 8,
|
|
},
|
|
glowDanger: {
|
|
shadowColor: '#ef4444',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 12,
|
|
elevation: 8,
|
|
},
|
|
},
|
|
|
|
// Typography
|
|
typography: {
|
|
// Font sizes
|
|
fontSize: {
|
|
xs: 12,
|
|
sm: 14,
|
|
base: 16,
|
|
lg: 18,
|
|
xl: 20,
|
|
'2xl': 24,
|
|
'3xl': 28,
|
|
'4xl': 32,
|
|
'5xl': 36,
|
|
},
|
|
// Font weights
|
|
fontWeight: {
|
|
normal: '400' as const,
|
|
medium: '500' as const,
|
|
semibold: '600' as const,
|
|
bold: '700' as const,
|
|
extrabold: '800' as const,
|
|
},
|
|
// Line heights
|
|
lineHeight: {
|
|
tight: 1.2,
|
|
normal: 1.5,
|
|
relaxed: 1.75,
|
|
},
|
|
},
|
|
|
|
// Spacing Scale
|
|
spacing: {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 20,
|
|
'2xl': 24,
|
|
'3xl': 32,
|
|
'4xl': 40,
|
|
'5xl': 48,
|
|
},
|
|
|
|
// Border Radius
|
|
borderRadius: {
|
|
sm: 4,
|
|
md: 8,
|
|
lg: 12,
|
|
xl: 16,
|
|
'2xl': 20,
|
|
'3xl': 24,
|
|
full: 9999,
|
|
},
|
|
|
|
// Animation Timing
|
|
animation: {
|
|
duration: {
|
|
fast: 150,
|
|
normal: 250,
|
|
slow: 350,
|
|
},
|
|
easing: {
|
|
easeIn: 'ease-in',
|
|
easeOut: 'ease-out',
|
|
easeInOut: 'ease-in-out',
|
|
},
|
|
},
|
|
|
|
// Glassmorphism
|
|
glass: {
|
|
light: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.3)',
|
|
},
|
|
dark: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.1)',
|
|
},
|
|
},
|
|
};
|
|
|
|
export type Theme = typeof theme;
|