160 lines
3.9 KiB
TypeScript
160 lines
3.9 KiB
TypeScript
/**
|
|
* 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 (light mode - for legacy components)
|
|
colors: {
|
|
...lightColors,
|
|
|
|
// 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",
|
|
},
|
|
|
|
// Typography (updated to new system)
|
|
typography: typographySystem,
|
|
|
|
// 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
|
|
},
|
|
|
|
// 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,
|
|
},
|
|
|
|
// Shadow System (simplified)
|
|
shadows: {
|
|
subtle: {
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 3,
|
|
elevation: 1,
|
|
},
|
|
medium: {
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 8,
|
|
elevation: 2,
|
|
},
|
|
strong: {
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.12,
|
|
shadowRadius: 16,
|
|
elevation: 4,
|
|
},
|
|
// Legacy glow shadows (deprecated - avoid in new designs)
|
|
glow: {
|
|
shadowColor: "#6B9080",
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 12,
|
|
elevation: 6,
|
|
},
|
|
glowDanger: {
|
|
shadowColor: "#B66B6B",
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 12,
|
|
elevation: 6,
|
|
},
|
|
},
|
|
|
|
// Animation Timing (simplified)
|
|
animation: {
|
|
duration: {
|
|
fast: 200,
|
|
normal: 300,
|
|
slow: 500,
|
|
},
|
|
},
|
|
|
|
// 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,
|
|
},
|
|
};
|
|
|
|
/**
|
|
* 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;
|