eletrotupi / tcc/ frontend/constants/theme.ts1180f89b2b7144177e9d52ec64e26ee1bc4485d0
3.4 KB | 154 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
16
// Text Colors
17
const TEXT_PRIMARY = '#0f172a';
18
const TEXT_SECONDARY = '#64748b';
19
const TEXT_PLACEHOLDER = '#94A3B8';
20
21
// Borders & Accents
22
const BORDER_SUBTLE = '#f1f5f9';
23
const BORDER_SUBTLE_GRAY = '#E5E7EB';
24
const STATUS_ACTIVE_BG = 'rgba(19, 236, 91, 0.1)';
25
26
// Semantic Color Pills and stuff
27
const PILL_BLUE = '#dbeafe';
28
const PILL_INDIGO = '#e0e7ff';
29
const PILL_PURPLE = '#f3e8ff';
30
31
const tintColorLight = '#12ED5C';
32
const tintColorSecondary = '#618A70';
33
const black = '#0F172A';
34
const gray = '#475569';
35
const lightGray = '#64748B'
36
37
export const Colors = {
38
  light: {
39
    // Primary Actions & Focus
40
    text: TEXT_PRIMARY,
41
    textSecondary: TEXT_SECONDARY,
42
    background: BACKGROUND_LIGHT,
43
    surface: SURFACE_LIGHT,
44
    tint: NEON_GREEN,
45
46
    // Interactive States
47
    icon: TEXT_SECONDARY,
48
    tabIconDefault: TEXT_SECONDARY,
49
    tabIconSelected: NEON_GREEN,
50
51
    // Form Inputs
52
    inputBackgroundColor: SURFACE_LIGHT,
53
    inputBorderColor: BORDER_SUBTLE_GRAY,
54
    inputFocusBorderColor: NEON_GREEN,
55
    inputPlaceholderColor: TEXT_PLACEHOLDER,
56
57
    // Cards & Containers
58
    cardBackground: SURFACE_LIGHT,
59
    cardBorder: BORDER_SUBTLE,
60
    cardShadow: 'rgba(0, 0, 0, 0.05)',
61
62
    // Active / Inactive States
63
    activeBackground: STATUS_ACTIVE_BG,
64
    inactiveOpacity: 0.7,
65
66
    // Semantic Accents (for categorization)
67
    accentBlue: PILL_BLUE,
68
    accentIndigo: PILL_INDIGO,
69
    accentPurple: PILL_PURPLE,
70
71
    // Disabled / Secondary
72
    disabled: '#cbd5e1',
73
    divider: BORDER_SUBTLE,
74
  },
75
};
76
77
export const Typography = {
78
  // Headlines
79
  headlineLg: {
80
    fontFamily: Platform.select({
81
      android: 'Inter_900Black',
82
      default: 'Inter',
83
    }),
84
    fontSize: 20,
85
    fontWeight: '900' as const,
86
    lineHeight: 28,
87
    letterSpacing: -0.02,
88
  },
89
  headlineMd: {
90
    fontFamily: Platform.select({
91
      android: 'Inter',
92
      default: 'Inter',
93
    }),
94
    fontSize: 18,
95
    fontWeight: '700' as const,
96
    lineHeight: 24,
97
  },
98
99
  // Body
100
  bodyLg: {
101
    fontFamily: Platform.select({
102
      android: 'Inter',
103
      default: 'Inter',
104
    }),
105
    fontSize: 16,
106
    fontWeight: '700' as const,
107
    lineHeight: 20,
108
  },
109
  bodyMd: {
110
    fontFamily: Platform.select({
111
      android: 'Inter',
112
      default: 'Inter',
113
    }),
114
    fontSize: 14,
115
    fontWeight: '500' as const,
116
    lineHeight: 20,
117
  },
118
119
  // Labels
120
  labelSm: {
121
    fontFamily: Platform.select({
122
      android: 'Inter',
123
      default: 'Inter',
124
    }),
125
    fontSize: 12,
126
    fontWeight: '600' as const,
127
    lineHeight: 16,
128
    letterSpacing: 0.05,
129
  },
130
};
131
132
export const Spacing = {
133
  containerPadding: 16, // 1rem
134
  sectionGap: 32, // 2rem
135
  inlineGapSm: 8, // 0.5rem
136
};
137
138
export const BorderRadius = {
139
  sm: 4, // 0.25rem
140
  default: 8, // 0.5rem
141
  md: 12, // 0.75rem
142
  lg: 16, // 1rem
143
  xl: 24, // 1.5rem
144
  full: 9999, // pill-shaped
145
};
146
147
export const Fonts = Platform.select({
148
  default: {
149
    sans: 'Inter',
150
    serif: 'serif',
151
    rounded: 'Inter',
152
    mono: 'monospace',
153
  },
154
});