eletrotupi / tcc/ frontend/constants/theme.ts220d1611f18fcb1e6df7439a2c5cd8cbd19a8054
3.0 KB | 136 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
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
29
const tintColorLight = '#12ED5C';
30
const tintColorSecondary = '#618A70';
31
const black = '#0F172A';
32
const gray = '#475569';
33
const lightGray = '#64748B'
34
35
export const Colors = {
36
  light: {
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,
71
  },
72
};
73
74
export const Typography = {
75
  // Headlines
76
  headlineLg: {
77
    fontFamily: Platform.select({
78
      android: 'Inter_900Black',
79
      default: 'Inter',
80
    }),
81
    fontSize: 20,
82
    fontWeight: '900' as const,
83
    lineHeight: 28,
84
    letterSpacing: -0.02,
85
  },
86
  headlineMd: {
87
    fontFamily: Platform.select({
88
      android: 'Inter',
89
      default: 'Inter',
90
    }),
91
    fontSize: 18,
92
    fontWeight: '700' as const,
93
    lineHeight: 24,
94
  },
95
96
  // Body
97
  bodyLg: {
98
    fontFamily: Platform.select({
99
      android: 'Inter',
100
      default: 'Inter',
101
    }),
102
    fontSize: 16,
103
    fontWeight: '700' as const,
104
    lineHeight: 20,
105
  },
106
  bodyMd: {
107
    fontFamily: Platform.select({
108
      android: 'Inter',
109
      default: 'Inter',
110
    }),
111
    fontSize: 14,
112
    fontWeight: '500' as const,
113
    lineHeight: 20,
114
  },
115
116
  // Labels
117
  labelSm: {
118
    fontFamily: Platform.select({
119
      android: 'Inter',
120
      default: 'Inter',
121
    }),
122
    fontSize: 12,
123
    fontWeight: '600' as const,
124
    lineHeight: 16,
125
    letterSpacing: 0.05,
126
  },
127
};
128
129
export const Fonts = Platform.select({
130
  default: {
131
    sans: 'Inter',
132
    serif: 'serif',
133
    rounded: 'Inter',
134
    mono: 'monospace',
135
  },
136
});