frontend: refactor colors
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
5c917bdeb33696b5868cd255a813aa764a66a4e4 Browse filesParents
fa5bccaChanged files
1
Additions
+58
Deletions
-9
frontend/constants/theme.ts
1 1
/**
2 2
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
3 3
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
4 4
*/
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
25 74
export const Fonts = Platform.select({
26 75
default: {
28 77
serif: 'serif',
29 78
rounded: 'normal',
30 79
mono: 'monospace',
31 80
},
32 81
});