158 lines
3.1 KiB
TypeScript
158 lines
3.1 KiB
TypeScript
export const Colors = {
|
|
background: {
|
|
primary: '#0a0b0d',
|
|
card: '#14151a',
|
|
elevated: '#1a1b22',
|
|
subtle: 'rgba(255,255,255,0.02)',
|
|
hover: 'rgba(255,255,255,0.04)',
|
|
},
|
|
accent: {
|
|
green: '#00ff88',
|
|
red: '#ff3366',
|
|
blue: '#3498db',
|
|
orange: '#e67e22',
|
|
amber: '#facc15',
|
|
purple: '#a855f7',
|
|
},
|
|
text: {
|
|
primary: '#ffffff',
|
|
secondary: '#929292',
|
|
muted: '#666666',
|
|
ultraDim: '#555555',
|
|
},
|
|
border: {
|
|
default: 'rgba(255,255,255,0.05)',
|
|
subtle: 'rgba(255,255,255,0.08)',
|
|
medium: 'rgba(255,255,255,0.1)',
|
|
accent: 'rgba(0,255,136,0.12)',
|
|
accentStrong: 'rgba(0,255,136,0.3)',
|
|
},
|
|
tier: {
|
|
free: '#94a3b8',
|
|
pro: '#3b82f6',
|
|
elite: '#00ff88',
|
|
},
|
|
status: {
|
|
running: '#4ade80',
|
|
paused: '#ff9500',
|
|
cooldown: '#facc15',
|
|
armed: '#38bdf8',
|
|
idle: '#a1a1aa',
|
|
},
|
|
};
|
|
|
|
export const Fonts = {
|
|
inter: {
|
|
regular: 'Inter-Regular',
|
|
medium: 'Inter-Medium',
|
|
semiBold: 'Inter-SemiBold',
|
|
bold: 'Inter-Bold',
|
|
extraBold: 'Inter-ExtraBold',
|
|
black: 'Inter-Black',
|
|
},
|
|
mono: {
|
|
regular: 'JetBrainsMono-Regular',
|
|
medium: 'JetBrainsMono-Medium',
|
|
bold: 'JetBrainsMono-Bold',
|
|
extraBold: 'JetBrainsMono-ExtraBold',
|
|
},
|
|
};
|
|
|
|
export const FontSize = {
|
|
micro: 10,
|
|
badge: 11,
|
|
bodySmall: 12,
|
|
body: 13,
|
|
bodyLarge: 14,
|
|
subheading: 16,
|
|
heading: 20,
|
|
hero: 28,
|
|
pageTitle: 36,
|
|
};
|
|
|
|
export const Spacing = {
|
|
screenPadding: 20,
|
|
cardPadding: 20,
|
|
cardPaddingLarge: 24,
|
|
sectionGap: 24,
|
|
innerGap: 12,
|
|
innerGapLarge: 16,
|
|
};
|
|
|
|
export const BorderRadius = {
|
|
large: 20,
|
|
medium: 16,
|
|
small: 12,
|
|
xs: 8,
|
|
pill: 20,
|
|
};
|
|
|
|
export const Shadows = {
|
|
card: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 8 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 32,
|
|
elevation: 8,
|
|
},
|
|
elevated: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 25 },
|
|
shadowOpacity: 0.6,
|
|
shadowRadius: 80,
|
|
elevation: 16,
|
|
},
|
|
glowGreen: {
|
|
shadowColor: '#00ff88',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 20,
|
|
elevation: 4,
|
|
},
|
|
activeDotGlow: {
|
|
shadowColor: '#00ff88',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.5,
|
|
shadowRadius: 8,
|
|
elevation: 4,
|
|
},
|
|
};
|
|
|
|
export const Gradients = {
|
|
cardSurface: {
|
|
colors: ['rgba(20,21,26,0.9)', 'rgba(14,15,18,0.95)'],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 1 },
|
|
},
|
|
greenCta: {
|
|
colors: ['#00ff88', '#00cc6a'],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 1 },
|
|
},
|
|
chatUserBubble: {
|
|
colors: ['rgba(59,130,246,0.15)', 'rgba(59,130,246,0.08)'],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 1 },
|
|
},
|
|
chatBotBubble: {
|
|
colors: ['rgba(255,255,255,0.04)', 'rgba(255,255,255,0.015)'],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 1 },
|
|
},
|
|
signalCard: {
|
|
colors: ['#1e1e2e', '#2a2a3e'],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 1 },
|
|
},
|
|
chatHeader: {
|
|
colors: ['#14151f', '#0f1017'],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 1 },
|
|
},
|
|
fabButton: {
|
|
colors: ['#1a1b2e', '#0f1017'],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 1 },
|
|
},
|
|
};
|