redesign take 1
This commit is contained in:
dimitar committed
1 parent
1143f8ca02
commit
e3a3c3fccf
19 files changed
+2783
-1493
No files matched your search
+138
-170
@@ -1,191 +1,159 @@
|
||||
/**
|
||||
* Modern Design System Theme
|
||||
* Centralized theme configuration with gradients, colors, shadows, and spacing
|
||||
* FitAI Design System Theme
|
||||
* Minimalist theme with light/dark mode support
|
||||
* @deprecated Use useTheme() hook instead for dynamic theming
|
||||
*/
|
||||
|
||||
import { lightColors, darkColors } from "./colors";
|
||||
import { typography as typographySystem } from "./typography";
|
||||
|
||||
/**
|
||||
* Legacy theme object for backward compatibility
|
||||
* New components should use useTheme() hook instead
|
||||
*/
|
||||
export const theme = {
|
||||
// Color Palette
|
||||
colors: {
|
||||
// Primary colors
|
||||
primary: '#3b82f6',
|
||||
primaryDark: '#2563eb',
|
||||
primaryLight: '#60a5fa',
|
||||
secondary: '#8b5cf6',
|
||||
// Color Palette (light mode - for legacy components)
|
||||
colors: {
|
||||
...lightColors,
|
||||
|
||||
// Accent colors
|
||||
purple: '#8b5cf6',
|
||||
purpleDark: '#7c3aed',
|
||||
pink: '#ec4899',
|
||||
// Legacy color mappings (deprecated - use new colors instead)
|
||||
secondary: "#8b5cf6", // Old purple - deprecated
|
||||
purple: "#A9B4A0", // Mapped to accent
|
||||
purpleDark: "#5A7A6E",
|
||||
pink: "#C1876B", // Mapped to terracotta
|
||||
successLight: "#8DB76A",
|
||||
gray50: "#F2EFE9",
|
||||
gray100: "#E8E4DF",
|
||||
gray200: "#E8E4DF",
|
||||
gray300: "#B8BFB5",
|
||||
gray400: "#8B9A8F",
|
||||
gray500: "#5C6B61",
|
||||
gray600: "#5C6B61",
|
||||
gray700: "#2C3731",
|
||||
gray800: "#2C3731",
|
||||
gray900: "#2C3731",
|
||||
},
|
||||
|
||||
// Success
|
||||
success: '#10b981',
|
||||
successDark: '#059669',
|
||||
successLight: '#34d399',
|
||||
// Typography (updated to new system)
|
||||
typography: typographySystem,
|
||||
|
||||
// Warning
|
||||
warning: '#f59e0b',
|
||||
warningDark: '#d97706',
|
||||
// Spacing Scale (updated for minimalism)
|
||||
spacing: {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
xl: 24, // Increased from 20
|
||||
"2xl": 32, // Increased from 24
|
||||
"3xl": 40, // Increased from 32
|
||||
"4xl": 48, // New
|
||||
"5xl": 64, // New
|
||||
},
|
||||
|
||||
// Danger
|
||||
danger: '#ef4444',
|
||||
dangerDark: '#dc2626',
|
||||
// Border Radius (reduced for minimalism)
|
||||
borderRadius: {
|
||||
sm: 4,
|
||||
md: 6,
|
||||
lg: 10,
|
||||
xl: 12, // Reduced from 16
|
||||
"2xl": 16, // Reduced from 20
|
||||
"3xl": 20, // Reduced from 24
|
||||
full: 9999,
|
||||
},
|
||||
|
||||
// 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',
|
||||
// Shadow System (simplified)
|
||||
shadows: {
|
||||
subtle: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 3,
|
||||
elevation: 1,
|
||||
},
|
||||
|
||||
// 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,
|
||||
medium: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
|
||||
// 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,
|
||||
},
|
||||
strong: {
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 16,
|
||||
elevation: 4,
|
||||
},
|
||||
|
||||
// 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,
|
||||
},
|
||||
// Legacy glow shadows (deprecated - avoid in new designs)
|
||||
glow: {
|
||||
shadowColor: "#6B9080",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 12,
|
||||
elevation: 6,
|
||||
},
|
||||
|
||||
// Spacing Scale
|
||||
spacing: {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
xl: 20,
|
||||
'2xl': 24,
|
||||
'3xl': 32,
|
||||
'4xl': 40,
|
||||
'5xl': 48,
|
||||
glowDanger: {
|
||||
shadowColor: "#B66B6B",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 12,
|
||||
elevation: 6,
|
||||
},
|
||||
},
|
||||
|
||||
// Border Radius
|
||||
borderRadius: {
|
||||
sm: 4,
|
||||
md: 8,
|
||||
lg: 12,
|
||||
xl: 16,
|
||||
'2xl': 20,
|
||||
'3xl': 24,
|
||||
full: 9999,
|
||||
// Animation Timing (simplified)
|
||||
animation: {
|
||||
duration: {
|
||||
fast: 200,
|
||||
normal: 300,
|
||||
slow: 500,
|
||||
},
|
||||
},
|
||||
|
||||
// Animation Timing
|
||||
animation: {
|
||||
duration: {
|
||||
fast: 150,
|
||||
normal: 250,
|
||||
slow: 350,
|
||||
},
|
||||
easing: {
|
||||
easeIn: 'ease-in',
|
||||
easeOut: 'ease-out',
|
||||
easeInOut: 'ease-in-out',
|
||||
},
|
||||
},
|
||||
// Gradients (kept for legacy compatibility - should be avoided in new designs)
|
||||
gradients: {
|
||||
primary: ["#6B9080", "#8AAE9E"] as const,
|
||||
success: ["#7BA05B", "#8DB76A"] as const,
|
||||
warning: ["#D4A574", "#E0B886"] as const,
|
||||
danger: ["#B66B6B", "#C87D7D"] as const,
|
||||
// Legacy gradients (deprecated)
|
||||
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,
|
||||
primaryVertical: ["#6B9080", "#5A7A6E"] as const,
|
||||
},
|
||||
};
|
||||
|
||||
// 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)',
|
||||
},
|
||||
},
|
||||
/**
|
||||
* Dark theme object
|
||||
* @deprecated Use useTheme() hook instead
|
||||
*/
|
||||
export const darkTheme = {
|
||||
...theme,
|
||||
colors: {
|
||||
...darkColors,
|
||||
|
||||
// Legacy color mappings
|
||||
secondary: "#8b5cf6", // Old purple - deprecated
|
||||
purple: "#B5C2B0", // Mapped to dark accent
|
||||
purpleDark: "#6B9080",
|
||||
pink: "#D4A285", // Mapped to dark terracotta
|
||||
successLight: "#8DB76A",
|
||||
gray50: "#2F3432",
|
||||
gray100: "#3A3F3C",
|
||||
gray200: "#3A3F3C",
|
||||
gray300: "#7A8379",
|
||||
gray400: "#7A8379",
|
||||
gray500: "#B8BFB5",
|
||||
gray600: "#B8BFB5",
|
||||
gray700: "#E8E6E1",
|
||||
gray800: "#E8E6E1",
|
||||
gray900: "#E8E6E1",
|
||||
},
|
||||
};
|
||||
|
||||
export type Theme = typeof theme;
|
||||
export type DarkTheme = typeof darkTheme;
|
||||
Reference in new issue
Block a user