frontend: refactor colors
Parents:
fa5bcca1 file(s) changed
- frontend/constants/theme.ts +58 -9
frontend/constants/theme.ts
@@ -5,20 +5,69 @@ */
5 5
6 6 import { Platform } from 'react-native';
7 7
8 + // Primary Colors
9 + const NEON_GREEN = '#13ec5b';
10 + const PRIMARY_DARK = '#0f172a';
11 +
12 + // Surface & Background
13 + const BACKGROUND_LIGHT = '#f6f8f6';
14 + const SURFACE_LIGHT = '#ffffff';
15 +
16 + // Text Colors
17 + const TEXT_PRIMARY = '#0f172a';
18 + const TEXT_SECONDARY = '#64748b';
19 +
20 + // Borders & Accents
21 + const BORDER_SUBTLE = '#f1f5f9';
22 + const STATUS_ACTIVE_BG = 'rgba(19, 236, 91, 0.1)';
23 +
24 + // Semantic Color Pills and stuff
25 + const PILL_BLUE = '#dbeafe';
26 + const PILL_INDIGO = '#e0e7ff';
27 + const PILL_PURPLE = '#f3e8ff';
28 +
8 29 const tintColorLight = '#12ED5C';
9 30 const tintColorSecondary = '#618A70';
10 - const black = '#121712';
31 + const black = '#0F172A';
32 + const gray = '#475569';
33 + const lightGray = '#64748B'
11 34
12 35 export const Colors = {
13 36 light: {
14 - text: black,
15 - background: '#fff',
16 - tint: tintColorLight,
17 - icon: '#687076',
18 - tabIconDefault: tintColorSecondary,
19 - tabIconSelected: black,
20 - inputBackgroundColor: '#F0F5F2',
21 - inputBorderColor: '#F0F5F2'
37 + // Primary Actions & Focus
38 + text: TEXT_PRIMARY,
39 + textSecondary: TEXT_SECONDARY,
40 + background: BACKGROUND_LIGHT,
41 + surface: SURFACE_LIGHT,
42 + tint: NEON_GREEN,
43 +
44 + // Interactive States
45 + icon: TEXT_SECONDARY,
46 + tabIconDefault: TEXT_SECONDARY,
47 + tabIconSelected: NEON_GREEN,
48 +
49 + // Form Inputs
50 + inputBackgroundColor: SURFACE_LIGHT,
51 + inputBorderColor: BORDER_SUBTLE,
52 + inputFocusBorderColor: NEON_GREEN,
53 +
54 + // Cards & Containers
55 + cardBackground: SURFACE_LIGHT,
56 + cardBorder: BORDER_SUBTLE,
57 + cardShadow: 'rgba(0, 0, 0, 0.05)',
58 +
59 + // Active / Inactive States
60 + activeBackground: STATUS_ACTIVE_BG,
61 + inactiveOpacity: 0.7,
62 +
63 + // Semantic Accents (for categorization)
64 + accentBlue: PILL_BLUE,
65 + accentIndigo: PILL_INDIGO,
66 + accentPurple: PILL_PURPLE,
67 +
68 + // Disabled / Secondary
69 + disabled: '#cbd5e1',
70 + divider: BORDER_SUBTLE,
22 71 },
23 72 };
24 73