frontend: lint theme file
Parents:
92fcd2f1 file(s) changed
- frontend/constants/theme.ts +61 -61
frontend/constants/theme.ts
@@ -3,38 +3,38 @@ * 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 - import { Platform } from 'react-native';
6 + import { Platform } from "react-native";
7 7
8 8 // Primary Colors
9 - const NEON_GREEN = '#13ec5b';
10 - const PRIMARY_DARK = '#0f172a';
9 + const NEON_GREEN = "#13ec5b";
10 + const PRIMARY_DARK = "#0f172a";
11 11
12 12 // Surface & Background
13 - const BACKGROUND_LIGHT = '#f6f8f6';
14 - const SURFACE_LIGHT = '#ffffff';
15 - const BACKGROUND_DARK_GHOST = '#F8FAFC';
13 + const BACKGROUND_LIGHT = "#f6f8f6";
14 + const SURFACE_LIGHT = "#ffffff";
15 + const BACKGROUND_DARK_GHOST = "#F8FAFC";
16 16
17 17 // Text Colors
18 - const TEXT_PRIMARY = '#0f172a';
19 - const TEXT_SECONDARY = '#64748b';
20 - const TEXT_PLACEHOLDER = '#94A3B8';
18 + const TEXT_PRIMARY = "#0f172a";
19 + const TEXT_SECONDARY = "#64748b";
20 + const TEXT_PLACEHOLDER = "#94A3B8";
21 21
22 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)';
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 27
28 28 // Semantic Color Pills and stuff
29 - const PILL_BLUE = '#dbeafe';
30 - const PILL_INDIGO = '#e0e7ff';
31 - const PILL_PURPLE = '#f3e8ff';
29 + const PILL_BLUE = "#dbeafe";
30 + const PILL_INDIGO = "#e0e7ff";
31 + const PILL_PURPLE = "#f3e8ff";
32 32
33 - const tintColorLight = '#12ED5C';
34 - const tintColorSecondary = '#618A70';
35 - const black = '#0F172A';
36 - const gray = '#475569';
37 - const lightGray = '#64748B'
33 + const tintColorLight = "#12ED5C";
34 + const tintColorSecondary = "#618A70";
35 + const black = "#0F172A";
36 + const gray = "#475569";
37 + const lightGray = "#64748B";
38 38
39 39 export const Colors = {
40 40 light: {
@@ -63,12 +63,12 @@
63 63 // Cards & Containers
64 64 cardBackground: SURFACE_LIGHT,
65 65 cardBorder: BORDER_SUBTLE,
66 - cardShadow: 'rgba(0, 0, 0, 0.05)',
66 + cardShadow: "rgba(0, 0, 0, 0.05)",
67 67
68 68 // Active / Inactive States
69 69 activeBackground: STATUS_ACTIVE_BG,
70 70 inactiveOpacity: 0.7,
71 - moodIntensityLabel: '#94a3b8',
71 + moodIntensityLabel: "#94a3b8",
72 72
73 73 // Semantic Accents (for categorization)
74 74 accentBlue: PILL_BLUE,
@@ -76,12 +76,12 @@ accentIndigo: PILL_INDIGO,
76 76 accentPurple: PILL_PURPLE,
77 77
78 78 // Disabled / Secondary
79 - disabled: '#cbd5e1',
79 + disabled: "#cbd5e1",
80 80 divider: BORDER_SUBTLE,
81 - sliderTracking: '#E2E8F0',
82 - sliderLabels: '#94a3b8',
83 - danger: '#EF4444',
84 - textBlack: PRIMARY_DARK
81 + sliderTracking: "#E2E8F0",
82 + sliderLabels: "#94a3b8",
83 + danger: "#EF4444",
84 + textBlack: PRIMARY_DARK,
85 85 },
86 86 };
87 87
@@ -89,61 +89,61 @@ export const Typography = {
89 89 // Headlines
90 90 headlineXg: {
91 91 fontFamily: Platform.select({
92 - android: 'Inter_900Black',
93 - default: 'Inter',
92 + android: "Inter_900Black",
93 + default: "Inter",
94 94 }),
95 95 fontSize: 36,
96 - fontWeight: '900' as const,
96 + fontWeight: "900" as const,
97 97 lineHeight: 40,
98 98 },
99 99 headlineLg: {
100 100 fontFamily: Platform.select({
101 - android: 'Inter_900Black',
102 - default: 'Inter',
101 + android: "Inter_900Black",
102 + default: "Inter",
103 103 }),
104 104 fontSize: 20,
105 - fontWeight: '900' as const,
105 + fontWeight: "900" as const,
106 106 lineHeight: 28,
107 107 letterSpacing: -0.02,
108 108 },
109 109 headlineMd: {
110 110 fontFamily: Platform.select({
111 - android: 'Inter',
112 - default: 'Inter',
111 + android: "Inter",
112 + default: "Inter",
113 113 }),
114 114 fontSize: 18,
115 - fontWeight: '700' as const,
115 + fontWeight: "700" as const,
116 116 lineHeight: 24,
117 117 },
118 118
119 119 // Body
120 120 bodyLg: {
121 121 fontFamily: Platform.select({
122 - android: 'Inter',
123 - default: 'Inter',
122 + android: "Inter",
123 + default: "Inter",
124 124 }),
125 125 fontSize: 16,
126 - fontWeight: '700' as const,
126 + fontWeight: "700" as const,
127 127 lineHeight: 20,
128 128 },
129 129 bodyMd: {
130 130 fontFamily: Platform.select({
131 - android: 'Inter',
132 - default: 'Inter',
131 + android: "Inter",
132 + default: "Inter",
133 133 }),
134 134 fontSize: 14,
135 - fontWeight: '500' as const,
135 + fontWeight: "500" as const,
136 136 lineHeight: 20,
137 137 },
138 138
139 139 // Labels
140 140 labelSm: {
141 141 fontFamily: Platform.select({
142 - android: 'Inter',
143 - default: 'Inter',
142 + android: "Inter",
143 + default: "Inter",
144 144 }),
145 145 fontSize: 12,
146 - fontWeight: '600' as const,
146 + fontWeight: "600" as const,
147 147 lineHeight: 16,
148 148 letterSpacing: 0.05,
149 149 },
@@ -151,30 +151,30 @@
151 151 // Used for the Slider labels
152 152 labelXs: {
153 153 fontFamily: Platform.select({
154 - android: 'Inter',
155 - default: 'Inter',
154 + android: "Inter",
155 + default: "Inter",
156 156 }),
157 157 fontSize: 10,
158 158 lineHeight: 15,
159 - letterSpacing: 0.25
159 + letterSpacing: 0.25,
160 160 },
161 161
162 162 cardHint: {
163 163 fontFamily: Platform.select({
164 - android: 'Inter',
165 - default: 'Inter',
164 + android: "Inter",
165 + default: "Inter",
166 166 }),
167 167 fontSize: 11,
168 168 lineHeight: 13.8,
169 - fontStyle: "italic"
170 - }
169 + fontStyle: "italic",
170 + },
171 171 };
172 172
173 173 export const Spacing = {
174 174 containerPadding: 16, // 1rem
175 175 sectionGap: 32, // 2rem
176 176 inlineGapSm: 8, // 0.5rem
177 - cardGap: 12 // 0.75rem
177 + cardGap: 12, // 0.75rem
178 178 };
179 179
180 180 export const BorderRadius = {
@@ -188,14 +188,14 @@ };
188 188
189 189 export const Shadows = {
190 190 sm: {
191 - shadowColor: '#000000',
191 + shadowColor: "#000000",
192 192 shadowOffset: { width: 0, height: 1 },
193 193 shadowOpacity: 0.05,
194 194 shadowRadius: 2,
195 195 elevation: 2,
196 196 },
197 197 md: {
198 - shadowColor: '#000000',
198 + shadowColor: "#000000",
199 199 shadowOffset: { width: 0, height: 4 },
200 200 shadowOpacity: 0.1,
201 201 shadowRadius: 8,
@@ -212,10 +212,10 @@ };
212 212
213 213 export const Fonts = Platform.select({
214 214 default: {
215 - sans: 'Inter',
216 - serif: 'serif',
217 - rounded: 'Inter',
218 - mono: 'monospace',
215 + sans: "Inter",
216 + serif: "serif",
217 + rounded: "Inter",
218 + mono: "monospace",
219 219 },
220 220 });
221 221
@@ -224,5 +224,5 @@ colors: Colors,
224 224 typography: Typography,
225 225 spacing: Spacing,
226 226 shadows: Shadows,
227 - borderRadius: BorderRadius
227 + borderRadius: BorderRadius,
228 228 };