stream.place
Live video on the AT Protocol
1/**
2 * Design tokens for React Native components
3 * Inspired by shadcn/ui but adapted for React Native styling
4 */
5
6export const colors = {
7 // Primary colors
8 primary: {
9 50: "#eff6ff",
10 100: "#dbeafe",
11 200: "#bfdbfe",
12 300: "#93c5fd",
13 400: "#60a5fa",
14 500: "#3b82f6",
15 600: "#2563eb",
16 700: "#1d4ed8",
17 800: "#1e40af",
18 900: "#1e3a8a",
19 950: "#172554",
20 },
21
22 // Grayscale
23 gray: {
24 50: "#fafafa",
25 100: "#f5f5f5",
26 200: "#e5e5e5",
27 300: "#d4d4d4",
28 400: "#a3a3a3",
29 500: "#737373",
30 600: "#525252",
31 700: "#404040",
32 800: "#262626",
33 900: "#171717",
34 950: "#0d0d0d",
35 },
36
37 // Semantic colors
38 destructive: {
39 50: "#fef2f2",
40 100: "#fee2e2",
41 200: "#fecaca",
42 300: "#fca5a5",
43 400: "#f87171",
44 500: "#ef4444",
45 600: "#dc2626",
46 700: "#b91c1c",
47 800: "#991b1b",
48 900: "#7f1d1d",
49 950: "#450a0a",
50 },
51
52 success: {
53 50: "#f0fdf4",
54 100: "#dcfce7",
55 200: "#bbf7d0",
56 300: "#86efac",
57 400: "#4ade80",
58 500: "#22c55e",
59 600: "#16a34a",
60 700: "#15803d",
61 800: "#166534",
62 900: "#14532d",
63 950: "#052e16",
64 },
65
66 warning: {
67 50: "#fffbeb",
68 100: "#fef3c7",
69 200: "#fde68a",
70 300: "#fcd34d",
71 400: "#fbbf24",
72 500: "#f59e0b",
73 600: "#d97706",
74 700: "#b45309",
75 800: "#92400e",
76 900: "#78350f",
77 950: "#451a03",
78 },
79
80 // iOS system colors (adaptive)
81 ios: {
82 systemBlue: "#007AFF",
83 systemGreen: "#34C759",
84 systemRed: "#FF3B30",
85 systemOrange: "#FF9500",
86 systemYellow: "#FFCC00",
87 systemPurple: "#AF52DE",
88 systemPink: "#FF2D92",
89 systemTeal: "#5AC8FA",
90 systemIndigo: "#5856D6",
91 systemGray: "#8E8E93",
92 systemGray2: "#AEAEB2",
93 systemGray3: "#C7C7CC",
94 systemGray4: "#D1D1D6",
95 systemGray5: "#E5E5EA",
96 systemGray6: "#F2F2F7",
97 },
98
99 // Android Material colors
100 android: {
101 primary: "#6200EE",
102 primaryVariant: "#3700B3",
103 secondary: "#03DAC6",
104 secondaryVariant: "#018786",
105 background: "#FFFFFF",
106 surface: "#FFFFFF",
107 error: "#B00020",
108 onPrimary: "#FFFFFF",
109 onSecondary: "#000000",
110 onBackground: "#000000",
111 onSurface: "#000000",
112 onError: "#FFFFFF",
113 },
114
115 // Transparent colors
116 transparent: "transparent",
117 black: "#000000",
118 white: "#FFFFFF",
119} as const;
120
121export const spacing = {
122 0: 0,
123 1: 4,
124 2: 8,
125 3: 12,
126 4: 16,
127 5: 20,
128 6: 24,
129 7: 28,
130 8: 32,
131 9: 36,
132 10: 40,
133 11: 44,
134 12: 48,
135 14: 56,
136 16: 64,
137 20: 80,
138 24: 96,
139 28: 112,
140 32: 128,
141 36: 144,
142 40: 160,
143 44: 176,
144 48: 192,
145 52: 208,
146 56: 224,
147 60: 240,
148 64: 256,
149 72: 288,
150 80: 320,
151 96: 384,
152 auto: "auto",
153} as const;
154
155export const borderRadius = {
156 none: 0,
157 sm: 4,
158 md: 8,
159 lg: 12,
160 xl: 16,
161 "2xl": 20,
162 "3xl": 24,
163 full: 999,
164} as const;
165
166export const typography = {
167 // iOS system font sizes
168 ios: {
169 largeTitle: {
170 fontSize: 34,
171 lineHeight: 41,
172 fontWeight: "700" as const,
173 },
174 title1: {
175 fontSize: 28,
176 lineHeight: 34,
177 fontWeight: "700" as const,
178 },
179 title2: {
180 fontSize: 22,
181 lineHeight: 28,
182 fontWeight: "700" as const,
183 },
184 title3: {
185 fontSize: 20,
186 lineHeight: 25,
187 fontWeight: "600" as const,
188 },
189 headline: {
190 fontSize: 17,
191 lineHeight: 22,
192 fontWeight: "600" as const,
193 },
194 body: {
195 fontSize: 17,
196 lineHeight: 22,
197 fontWeight: "400" as const,
198 },
199 callout: {
200 fontSize: 16,
201 lineHeight: 21,
202 fontWeight: "400" as const,
203 },
204 subhead: {
205 fontSize: 15,
206 lineHeight: 20,
207 fontWeight: "400" as const,
208 },
209 footnote: {
210 fontSize: 13,
211 lineHeight: 18,
212 fontWeight: "400" as const,
213 },
214 caption1: {
215 fontSize: 12,
216 lineHeight: 16,
217 fontWeight: "400" as const,
218 },
219 caption2: {
220 fontSize: 11,
221 lineHeight: 13,
222 fontWeight: "400" as const,
223 },
224 },
225
226 // Android Material typography
227 android: {
228 headline1: {
229 fontSize: 96,
230 lineHeight: 112,
231 fontWeight: "300" as const,
232 },
233 headline2: {
234 fontSize: 60,
235 lineHeight: 72,
236 fontWeight: "300" as const,
237 },
238 headline3: {
239 fontSize: 48,
240 lineHeight: 56,
241 fontWeight: "400" as const,
242 },
243 headline4: {
244 fontSize: 34,
245 lineHeight: 42,
246 fontWeight: "400" as const,
247 },
248 headline5: {
249 fontSize: 24,
250 lineHeight: 32,
251 fontWeight: "400" as const,
252 },
253 headline6: {
254 fontSize: 20,
255 lineHeight: 28,
256 fontWeight: "500" as const,
257 },
258 subtitle1: {
259 fontSize: 16,
260 lineHeight: 24,
261 fontWeight: "400" as const,
262 },
263 subtitle2: {
264 fontSize: 14,
265 lineHeight: 22,
266 fontWeight: "500" as const,
267 },
268 body1: {
269 fontSize: 16,
270 lineHeight: 24,
271 fontWeight: "400" as const,
272 },
273 body2: {
274 fontSize: 14,
275 lineHeight: 20,
276 fontWeight: "400" as const,
277 },
278 button: {
279 fontSize: 14,
280 lineHeight: 16,
281 fontWeight: "500" as const,
282 },
283 caption: {
284 fontSize: 12,
285 lineHeight: 16,
286 fontWeight: "400" as const,
287 },
288 overline: {
289 fontSize: 10,
290 lineHeight: 16,
291 fontWeight: "400" as const,
292 },
293 },
294
295 // Universal typography scale
296 universal: {
297 xs: {
298 fontSize: 12,
299 lineHeight: 16,
300 fontWeight: "400" as const,
301 },
302 sm: {
303 fontSize: 14,
304 lineHeight: 20,
305 fontWeight: "400" as const,
306 },
307 base: {
308 fontSize: 16,
309 lineHeight: 24,
310 fontWeight: "400" as const,
311 },
312 lg: {
313 fontSize: 18,
314 lineHeight: 28,
315 fontWeight: "400" as const,
316 },
317 xl: {
318 fontSize: 20,
319 lineHeight: 28,
320 fontWeight: "500" as const,
321 },
322 "2xl": {
323 fontSize: 24,
324 lineHeight: 32,
325 fontWeight: "600" as const,
326 },
327 "3xl": {
328 fontSize: 30,
329 lineHeight: 36,
330 fontWeight: "700" as const,
331 },
332 "4xl": {
333 fontSize: 36,
334 lineHeight: 40,
335 fontWeight: "700" as const,
336 },
337 },
338} as const;
339
340export const shadows = {
341 none: {
342 shadowColor: "transparent",
343 shadowOffset: { width: 0, height: 0 },
344 shadowOpacity: 0,
345 shadowRadius: 0,
346 elevation: 0,
347 },
348 sm: {
349 shadowColor: colors.black,
350 shadowOffset: { width: 0, height: 1 },
351 shadowOpacity: 0.05,
352 shadowRadius: 2,
353 elevation: 2,
354 },
355 md: {
356 shadowColor: colors.black,
357 shadowOffset: { width: 0, height: 2 },
358 shadowOpacity: 0.1,
359 shadowRadius: 4,
360 elevation: 4,
361 },
362 lg: {
363 shadowColor: colors.black,
364 shadowOffset: { width: 0, height: 4 },
365 shadowOpacity: 0.15,
366 shadowRadius: 8,
367 elevation: 8,
368 },
369 xl: {
370 shadowColor: colors.black,
371 shadowOffset: { width: 0, height: 8 },
372 shadowOpacity: 0.2,
373 shadowRadius: 16,
374 elevation: 16,
375 },
376} as const;
377
378// Touch targets (iOS Human Interface Guidelines)
379export const touchTargets = {
380 minimum: 44, // Minimum touch target size
381 comfortable: 48, // Comfortable touch target size
382 large: 56, // Large touch target size
383} as const;
384
385// Animation durations
386export const animations = {
387 fast: 150,
388 normal: 200,
389 slow: 300,
390 slower: 500,
391} as const;
392
393// Breakpoints for responsive design
394export const breakpoints = {
395 sm: 640,
396 md: 768,
397 lg: 1024,
398 xl: 1280,
399 "2xl": 1536,
400} as const;
401
402export type Colors = typeof colors;
403export type Spacing = typeof spacing;
404export type BorderRadius = typeof borderRadius;
405export type Typography = typeof typography;
406export type Shadows = typeof shadows;
407export type TouchTargets = typeof touchTargets;
408export type Animations = typeof animations;
409export type Breakpoints = typeof breakpoints;