eletrotupi / tcc/ frontend/constants/theme.ts9671ed464961e554cd1fcbecdee8ef718000e49c
4.3 KB | 193 lines Raw
1
/**
2
 * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
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
 */
5
6
import { Platform } from 'react-native';
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
const BACKGROUND_DARK_GHOST = '#F8FAFC';
16
17
// Text Colors
18
const TEXT_PRIMARY = '#0f172a';
19
const TEXT_SECONDARY = '#64748b';
20
const TEXT_PLACEHOLDER = '#94A3B8';
21
22
// Borders & Accents
23
const BORDER_SUBTLE = '#f1f5f9';
24
const BORDER_SUBTLE_GRAY = '#E5E7EB';
25
const BORDER_SUBTLE_LIGHT_GRAY = '#CBD5E1';
26
const STATUS_ACTIVE_BG = 'rgba(19, 236, 91, 0.1)';
27
28
// Semantic Color Pills and stuff
29
const PILL_BLUE = '#dbeafe';
30
const PILL_INDIGO = '#e0e7ff';
31
const PILL_PURPLE = '#f3e8ff';
32
33
const tintColorLight = '#12ED5C';
34
const tintColorSecondary = '#618A70';
35
const black = '#0F172A';
36
const gray = '#475569';
37
const lightGray = '#64748B'
38
39
export const Colors = {
40
  light: {
41
    // Primary Actions & Focus
42
    text: TEXT_PRIMARY,
43
    textSecondary: TEXT_SECONDARY,
44
    background: BACKGROUND_LIGHT,
45
    surface: SURFACE_LIGHT,
46
    tint: NEON_GREEN,
47
    backgroundDarkGhost: BACKGROUND_DARK_GHOST,
48
    borderDashed: BORDER_SUBTLE_LIGHT_GRAY,
49
50
    // Interactive States
51
    icon: TEXT_SECONDARY,
52
    tabIconDefault: TEXT_SECONDARY,
53
    tabIconSelected: NEON_GREEN,
54
55
    // Form Inputs
56
    inputBackgroundColor: SURFACE_LIGHT,
57
    inputBackgroundDarkGhostColor: BACKGROUND_DARK_GHOST,
58
    inputBorderColor: BORDER_SUBTLE_GRAY,
59
    inputFocusBorderColor: NEON_GREEN,
60
    inputPlaceholderColor: TEXT_PLACEHOLDER,
61
62
    // Cards & Containers
63
    cardBackground: SURFACE_LIGHT,
64
    cardBorder: BORDER_SUBTLE,
65
    cardShadow: 'rgba(0, 0, 0, 0.05)',
66
67
    // Active / Inactive States
68
    activeBackground: STATUS_ACTIVE_BG,
69
    inactiveOpacity: 0.7,
70
71
    // Semantic Accents (for categorization)
72
    accentBlue: PILL_BLUE,
73
    accentIndigo: PILL_INDIGO,
74
    accentPurple: PILL_PURPLE,
75
76
    // Disabled / Secondary
77
    disabled: '#cbd5e1',
78
    divider: BORDER_SUBTLE,
79
  },
80
};
81
82
export const Typography = {
83
  // Headlines
84
  headlineXg: {
85
    fontFamily: Platform.select({
86
      android: 'Inter_900Black',
87
      default: 'Inter',
88
    }),
89
    fontSize: 36,
90
    fontWeight: '900' as const,
91
    lineHeight: 40,
92
  },
93
  headlineLg: {
94
    fontFamily: Platform.select({
95
      android: 'Inter_900Black',
96
      default: 'Inter',
97
    }),
98
    fontSize: 20,
99
    fontWeight: '900' as const,
100
    lineHeight: 28,
101
    letterSpacing: -0.02,
102
  },
103
  headlineMd: {
104
    fontFamily: Platform.select({
105
      android: 'Inter',
106
      default: 'Inter',
107
    }),
108
    fontSize: 18,
109
    fontWeight: '700' as const,
110
    lineHeight: 24,
111
  },
112
113
  // Body
114
  bodyLg: {
115
    fontFamily: Platform.select({
116
      android: 'Inter',
117
      default: 'Inter',
118
    }),
119
    fontSize: 16,
120
    fontWeight: '700' as const,
121
    lineHeight: 20,
122
  },
123
  bodyMd: {
124
    fontFamily: Platform.select({
125
      android: 'Inter',
126
      default: 'Inter',
127
    }),
128
    fontSize: 14,
129
    fontWeight: '500' as const,
130
    lineHeight: 20,
131
  },
132
133
  // Labels
134
  labelSm: {
135
    fontFamily: Platform.select({
136
      android: 'Inter',
137
      default: 'Inter',
138
    }),
139
    fontSize: 12,
140
    fontWeight: '600' as const,
141
    lineHeight: 16,
142
    letterSpacing: 0.05,
143
  },
144
};
145
146
export const Spacing = {
147
  containerPadding: 16, // 1rem
148
  sectionGap: 32, // 2rem
149
  inlineGapSm: 8, // 0.5rem
150
  cardGap: 12 // 0.75rem
151
};
152
153
export const BorderRadius = {
154
  sm: 4, // 0.25rem
155
  default: 8, // 0.5rem
156
  md: 12, // 0.75rem
157
  lg: 16, // 1rem
158
  xl: 24, // 1.5rem
159
  full: 9999, // pill-shaped
160
};
161
162
export const Shadows = {
163
  sm: {
164
    shadowColor: '#000000',
165
    shadowOffset: { width: 0, height: 1 },
166
    shadowOpacity: 0.05,
167
    shadowRadius: 2,
168
    elevation: 2,
169
  },
170
  md: {
171
    shadowColor: '#000000',
172
    shadowOffset: { width: 0, height: 4 },
173
    shadowOpacity: 0.1,
174
    shadowRadius: 8,
175
    elevation: 4,
176
  },
177
  lg: {
178
    shadowColor: NEON_GREEN,
179
    shadowOffset: { width: 0, height: 8 },
180
    shadowOpacity: 0.15,
181
    shadowRadius: 16,
182
    elevation: 8,
183
  },
184
};
185
186
export const Fonts = Platform.select({
187
  default: {
188
    sans: 'Inter',
189
    serif: 'serif',
190
    rounded: 'Inter',
191
    mono: 'monospace',
192
  },
193
});