CityTrack / User /src /theme /index.ts
0xarchit's picture
User app beta v1 complete
71638d4
export const colors = {
primary: {
main: "#3B82F6",
light: "#60A5FA",
dark: "#2563EB",
contrast: "#FFFFFF",
},
secondary: {
main: "#60A5FA",
light: "#93C5FD",
dark: "#3B82F6",
contrast: "#FFFFFF",
},
accent: {
cta: "#F97316",
orange: "#F97316",
pink: "#EC4899",
cyan: "#06B6D4",
purple: "#8B5CF6",
},
background: {
primary: "#F1F5F9", // Slate 100
secondary: "#E2E8F0", // Slate 200 (Darker for contrast)
tertiary: "#CBD5E1", // Slate 300
card: "#FFFFFF",
gradient: ["#F8FAFC", "#E2E8F0"] as const,
},
text: {
primary: "#1E293B",
secondary: "#475569",
tertiary: "#94A3B8",
inverse: "#FFFFFF",
},
border: {
light: "#E2E8F0",
medium: "#CBD5E1",
accent: "rgba(59, 130, 246, 0.3)",
},
status: {
success: "#10B981",
warning: "#F59E0B",
error: "#EF4444",
info: "#3B82F6",
},
priority: {
critical: "#EF4444",
high: "#F97316",
medium: "#F59E0B",
low: "#10B981",
},
glass: {
background: "rgba(255, 255, 255, 0.7)",
border: "rgba(255, 255, 255, 0.5)",
},
};
export const spacing = {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
xxl: 48,
};
export const borderRadius = {
sm: 8,
md: 12,
lg: 16,
xl: 24,
full: 9999,
};
export const typography = {
h1: {
fontSize: 32,
fontWeight: "700" as const,
lineHeight: 40,
},
h2: {
fontSize: 24,
fontWeight: "600" as const,
lineHeight: 32,
},
h3: {
fontSize: 20,
fontWeight: "600" as const,
lineHeight: 28,
},
body: {
fontSize: 16,
fontWeight: "400" as const,
lineHeight: 24,
},
bodySmall: {
fontSize: 14,
fontWeight: "400" as const,
lineHeight: 20,
},
caption: {
fontSize: 12,
fontWeight: "400" as const,
lineHeight: 16,
},
button: {
fontSize: 16,
fontWeight: "600" as const,
lineHeight: 24,
},
};
export const shadows = {
sm: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 2,
},
md: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.15,
shadowRadius: 8,
elevation: 4,
},
lg: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.2,
shadowRadius: 16,
elevation: 8,
},
glow: {
shadowColor: "#6366F1",
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.4,
shadowRadius: 20,
elevation: 10,
},
};