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 // Tailwind default palettes:
23 slate: {
24 50: "#f8fafc",
25 100: "#f1f5f9",
26 200: "#e2e8f0",
27 300: "#cbd5e1",
28 400: "#94a3b8",
29 500: "#64748b",
30 600: "#475569",
31 700: "#334155",
32 800: "#1e293b",
33 900: "#0f172a",
34 950: "#020617",
35 },
36 gray: {
37 50: "#f9fafb",
38 100: "#f3f4f6",
39 200: "#e5e7eb",
40 300: "#d1d5db",
41 400: "#9ca3af",
42 500: "#6b7280",
43 600: "#4b5563",
44 700: "#374151",
45 800: "#1f2937",
46 900: "#111827",
47 950: "#030712",
48 },
49 zinc: {
50 50: "#fafafa",
51 100: "#f4f4f5",
52 200: "#e4e4e7",
53 300: "#d4d4d8",
54 400: "#a1a1aa",
55 500: "#71717a",
56 600: "#52525b",
57 700: "#3f3f46",
58 800: "#27272a",
59 900: "#18181b",
60 950: "#09090b",
61 },
62 neutral: {
63 50: "#fafaf9",
64 100: "#f5f5f4",
65 200: "#e7e5e4",
66 300: "#d6d3d1",
67 400: "#a8a29e",
68 500: "#78716c",
69 600: "#57534e",
70 700: "#44403c",
71 800: "#292524",
72 900: "#1c1917",
73 950: "#0c0a09",
74 },
75 stone: {
76 50: "#fafaf9",
77 100: "#f5f5f4",
78 200: "#e7e5e4",
79 300: "#d6d3d1",
80 400: "#a8a29e",
81 500: "#78716c",
82 600: "#57534e",
83 700: "#44403c",
84 800: "#292524",
85 900: "#1c1917",
86 950: "#0c0a09",
87 },
88 red: {
89 50: "#fef2f2",
90 100: "#fee2e2",
91 200: "#fecaca",
92 300: "#fca5a5",
93 400: "#f87171",
94 500: "#ef4444",
95 600: "#dc2626",
96 700: "#b91c1c",
97 800: "#991b1b",
98 900: "#7f1d1d",
99 950: "#450a0a",
100 },
101 orange: {
102 50: "#fff7ed",
103 100: "#ffedd5",
104 200: "#fed7aa",
105 300: "#fdba74",
106 400: "#fb923c",
107 500: "#f97316",
108 600: "#ea580c",
109 700: "#c2410c",
110 800: "#9a3412",
111 900: "#7c2d12",
112 950: "#431407",
113 },
114 amber: {
115 50: "#fffbeb",
116 100: "#fef3c7",
117 200: "#fde68a",
118 300: "#fcd34d",
119 400: "#fbbf24",
120 500: "#f59e0b",
121 600: "#d97706",
122 700: "#b45309",
123 800: "#92400e",
124 900: "#78350f",
125 950: "#451a03",
126 },
127 yellow: {
128 50: "#fefce8",
129 100: "#fef9c3",
130 200: "#fef08a",
131 300: "#fde047",
132 400: "#facc15",
133 500: "#eab308",
134 600: "#ca8a04",
135 700: "#a16207",
136 800: "#854d0e",
137 900: "#713f12",
138 950: "#422006",
139 },
140 lime: {
141 50: "#f7fee7",
142 100: "#ecfccb",
143 200: "#d9f99d",
144 300: "#bef264",
145 400: "#a3e635",
146 500: "#84cc16",
147 600: "#65a30d",
148 700: "#4d7c0f",
149 800: "#3f6212",
150 900: "#365314",
151 950: "#1a2e05",
152 },
153 green: {
154 50: "#f0fdf4",
155 100: "#dcfce7",
156 200: "#bbf7d0",
157 300: "#86efac",
158 400: "#4ade80",
159 500: "#22c55e",
160 600: "#16a34a",
161 700: "#15803d",
162 800: "#166534",
163 900: "#14532d",
164 950: "#052e16",
165 },
166 emerald: {
167 50: "#ecfdf5",
168 100: "#d1fae5",
169 200: "#a7f3d0",
170 300: "#6ee7b7",
171 400: "#34d399",
172 500: "#10b981",
173 600: "#059669",
174 700: "#047857",
175 800: "#065f46",
176 900: "#064e3b",
177 950: "#022c22",
178 },
179 teal: {
180 50: "#f0fdfa",
181 100: "#ccfbf1",
182 200: "#99f6e4",
183 300: "#5eead4",
184 400: "#2dd4bf",
185 500: "#14b8a6",
186 600: "#0d9488",
187 700: "#0f766e",
188 800: "#115e59",
189 900: "#134e4a",
190 950: "#042f2e",
191 },
192 cyan: {
193 50: "#ecfeff",
194 100: "#cffafe",
195 200: "#a5f3fc",
196 300: "#67e8f9",
197 400: "#22d3ee",
198 500: "#06b6d4",
199 600: "#0891b2",
200 700: "#0e7490",
201 800: "#155e75",
202 900: "#164e63",
203 950: "#083344",
204 },
205 sky: {
206 50: "#f0f9ff",
207 100: "#e0f2fe",
208 200: "#bae6fd",
209 300: "#7dd3fc",
210 400: "#38bdf8",
211 500: "#0ea5e9",
212 600: "#0284c7",
213 700: "#0369a1",
214 800: "#075985",
215 900: "#0c4a6e",
216 950: "#082f49",
217 },
218 blue: {
219 50: "#eff6ff",
220 100: "#dbeafe",
221 200: "#bfdbfe",
222 300: "#93c5fd",
223 400: "#60a5fa",
224 500: "#3b82f6",
225 600: "#2563eb",
226 700: "#1d4ed8",
227 800: "#1e40af",
228 900: "#1e3a8a",
229 950: "#172554",
230 },
231 indigo: {
232 50: "#eef2ff",
233 100: "#e0e7ff",
234 200: "#c7d2fe",
235 300: "#a5b4fc",
236 400: "#818cf8",
237 500: "#6366f1",
238 600: "#4f46e5",
239 700: "#4338ca",
240 800: "#3730a3",
241 900: "#312e81",
242 950: "#1e1b4b",
243 },
244 violet: {
245 50: "#f5f3ff",
246 100: "#ede9fe",
247 200: "#ddd6fe",
248 300: "#c4b5fd",
249 400: "#a78bfa",
250 500: "#8b5cf6",
251 600: "#7c3aed",
252 700: "#6d28d9",
253 800: "#5b21b6",
254 900: "#4c1d95",
255 950: "#2e1065",
256 },
257 purple: {
258 50: "#faf5ff",
259 100: "#f3e8ff",
260 200: "#e9d5ff",
261 300: "#d8b4fe",
262 400: "#c084fc",
263 500: "#a855f7",
264 600: "#9333ea",
265 700: "#7e22ce",
266 800: "#6b21a8",
267 900: "#581c87",
268 950: "#3b0764",
269 },
270 fuchsia: {
271 50: "#fdf4ff",
272 100: "#fae8ff",
273 200: "#f5d0fe",
274 300: "#f0abfc",
275 400: "#e879f9",
276 500: "#d946ef",
277 600: "#c026d3",
278 700: "#a21caf",
279 800: "#86198f",
280 900: "#701a75",
281 950: "#4a044e",
282 },
283 pink: {
284 50: "#fdf2f8",
285 100: "#fce7f3",
286 200: "#fbcfe8",
287 300: "#f9a8d4",
288 400: "#f472b6",
289 500: "#ec4899",
290 600: "#db2777",
291 700: "#be185d",
292 800: "#9d174d",
293 900: "#831843",
294 950: "#500724",
295 },
296 rose: {
297 50: "#fff1f2",
298 100: "#ffe4e6",
299 200: "#fecdd3",
300 300: "#fda4af",
301 400: "#fb7185",
302 500: "#f43f5e",
303 600: "#e11d48",
304 700: "#be123c",
305 800: "#9f1239",
306 900: "#881337",
307 950: "#4c0519",
308 },
309
310 // Semantic colors
311 destructive: {
312 50: "#fef2f2",
313 100: "#fee2e2",
314 200: "#fecaca",
315 300: "#fca5a5",
316 400: "#f87171",
317 500: "#ef4444",
318 600: "#dc2626",
319 700: "#b91c1c",
320 800: "#991b1b",
321 900: "#7f1d1d",
322 950: "#450a0a",
323 },
324
325 success: {
326 50: "#f0fdf4",
327 100: "#dcfce7",
328 200: "#bbf7d0",
329 300: "#86efac",
330 400: "#4ade80",
331 500: "#22c55e",
332 600: "#16a34a",
333 700: "#15803d",
334 800: "#166534",
335 900: "#14532d",
336 950: "#052e16",
337 },
338
339 warning: {
340 50: "#fffbeb",
341 100: "#fef3c7",
342 200: "#fde68a",
343 300: "#fcd34d",
344 400: "#fbbf24",
345 500: "#f59e0b",
346 600: "#d97706",
347 700: "#b45309",
348 800: "#92400e",
349 900: "#78350f",
350 950: "#451a03",
351 },
352
353 // iOS system colors (adaptive)
354 ios: {
355 systemBlue: "#007AFF",
356 systemGreen: "#34C759",
357 systemRed: "#FF3B30",
358 systemOrange: "#FF9500",
359 systemYellow: "#FFCC00",
360 systemPurple: "#AF52DE",
361 systemPink: "#FF2D92",
362 systemTeal: "#5AC8FA",
363 systemIndigo: "#5856D6",
364 systemGray: "#8E8E93",
365 systemGray2: "#AEAEB2",
366 systemGray3: "#C7C7CC",
367 systemGray4: "#D1D1D6",
368 systemGray5: "#E5E5EA",
369 systemGray6: "#F2F2F7",
370 },
371
372 // Android Material colors
373 android: {
374 primary: "#6200EE",
375 primaryVariant: "#3700B3",
376 secondary: "#03DAC6",
377 secondaryVariant: "#018786",
378 background: "#FFFFFF",
379 surface: "#FFFFFF",
380 error: "#B00020",
381 onPrimary: "#FFFFFF",
382 onSecondary: "#000000",
383 onBackground: "#000000",
384 onSurface: "#000000",
385 onError: "#FFFFFF",
386 },
387
388 // Transparent colors
389 transparent: "transparent",
390 black: "#000000",
391 white: "#FFFFFF",
392} as const;
393
394export const spacing = {
395 0: 0,
396 1: 4,
397 2: 8,
398 3: 12,
399 4: 16,
400 5: 20,
401 6: 24,
402 7: 28,
403 8: 32,
404 9: 36,
405 10: 40,
406 11: 44,
407 12: 48,
408 14: 56,
409 16: 64,
410 20: 80,
411 24: 96,
412 28: 112,
413 32: 128,
414 36: 144,
415 40: 160,
416 44: 176,
417 48: 192,
418 52: 208,
419 56: 224,
420 60: 240,
421 64: 256,
422 72: 288,
423 80: 320,
424 96: 384,
425 auto: "auto",
426} as const;
427
428export const borderRadius = {
429 none: 0,
430 sm: 3,
431 md: 8,
432 lg: 12,
433 xl: 16,
434 "2xl": 20,
435 "3xl": 24,
436 full: 999,
437} as const;
438
439export const typography = {
440 // iOS system font sizes
441 ios: {
442 largeTitle: {
443 fontSize: 34,
444 lineHeight: 41,
445 fontWeight: "700" as const,
446 },
447 title1: {
448 fontSize: 28,
449 lineHeight: 34,
450 fontWeight: "700" as const,
451 },
452 title2: {
453 fontSize: 22,
454 lineHeight: 28,
455 fontWeight: "700" as const,
456 },
457 title3: {
458 fontSize: 20,
459 lineHeight: 25,
460 fontWeight: "600" as const,
461 },
462 headline: {
463 fontSize: 17,
464 lineHeight: 22,
465 fontWeight: "600" as const,
466 },
467 body: {
468 fontSize: 17,
469 lineHeight: 22,
470 fontWeight: "400" as const,
471 },
472 callout: {
473 fontSize: 16,
474 lineHeight: 21,
475 fontWeight: "400" as const,
476 },
477 subhead: {
478 fontSize: 15,
479 lineHeight: 20,
480 fontWeight: "400" as const,
481 },
482 footnote: {
483 fontSize: 13,
484 lineHeight: 18,
485 fontWeight: "400" as const,
486 },
487 caption1: {
488 fontSize: 12,
489 lineHeight: 16,
490 fontWeight: "400" as const,
491 },
492 caption2: {
493 fontSize: 11,
494 lineHeight: 13,
495 fontWeight: "400" as const,
496 },
497 },
498
499 // Android Material typography
500 android: {
501 headline1: {
502 fontSize: 96,
503 lineHeight: 112,
504 fontWeight: "300" as const,
505 },
506 headline2: {
507 fontSize: 60,
508 lineHeight: 72,
509 fontWeight: "300" as const,
510 },
511 headline3: {
512 fontSize: 48,
513 lineHeight: 56,
514 fontWeight: "400" as const,
515 },
516 headline4: {
517 fontSize: 34,
518 lineHeight: 42,
519 fontWeight: "400" as const,
520 },
521 headline5: {
522 fontSize: 24,
523 lineHeight: 32,
524 fontWeight: "400" as const,
525 },
526 headline6: {
527 fontSize: 20,
528 lineHeight: 28,
529 fontWeight: "500" as const,
530 },
531 subtitle1: {
532 fontSize: 16,
533 lineHeight: 24,
534 fontWeight: "400" as const,
535 },
536 subtitle2: {
537 fontSize: 14,
538 lineHeight: 22,
539 fontWeight: "500" as const,
540 },
541 body1: {
542 fontSize: 16,
543 lineHeight: 24,
544 fontWeight: "400" as const,
545 },
546 body2: {
547 fontSize: 14,
548 lineHeight: 20,
549 fontWeight: "400" as const,
550 },
551 button: {
552 fontSize: 14,
553 lineHeight: 16,
554 fontWeight: "500" as const,
555 },
556 caption: {
557 fontSize: 12,
558 lineHeight: 16,
559 fontWeight: "400" as const,
560 },
561 overline: {
562 fontSize: 10,
563 lineHeight: 16,
564 fontWeight: "400" as const,
565 },
566 },
567
568 // Universal typography scale
569 universal: {
570 xs: {
571 fontSize: 12,
572 lineHeight: 16,
573 fontWeight: "400" as const,
574 },
575 sm: {
576 fontSize: 14,
577 lineHeight: 20,
578 fontWeight: "400" as const,
579 },
580 base: {
581 fontSize: 16,
582 lineHeight: 24,
583 fontWeight: "400" as const,
584 },
585 lg: {
586 fontSize: 18,
587 lineHeight: 28,
588 fontWeight: "400" as const,
589 },
590 xl: {
591 fontSize: 20,
592 lineHeight: 28,
593 fontWeight: "500" as const,
594 },
595 "2xl": {
596 fontSize: 24,
597 lineHeight: 32,
598 fontWeight: "600" as const,
599 },
600 "3xl": {
601 fontSize: 30,
602 lineHeight: 36,
603 fontWeight: "700" as const,
604 },
605 "4xl": {
606 fontSize: 36,
607 lineHeight: 40,
608 fontWeight: "700" as const,
609 },
610 },
611} as const;
612
613export const shadows = {
614 none: {
615 shadowColor: "transparent",
616 shadowOffset: { width: 0, height: 0 },
617 shadowOpacity: 0,
618 shadowRadius: 0,
619 elevation: 0,
620 },
621 sm: {
622 shadowColor: colors.black,
623 shadowOffset: { width: 0, height: 1 },
624 shadowOpacity: 0.05,
625 shadowRadius: 2,
626 elevation: 2,
627 },
628 md: {
629 shadowColor: colors.black,
630 shadowOffset: { width: 0, height: 2 },
631 shadowOpacity: 0.1,
632 shadowRadius: 4,
633 elevation: 4,
634 },
635 lg: {
636 shadowColor: colors.black,
637 shadowOffset: { width: 0, height: 4 },
638 shadowOpacity: 0.15,
639 shadowRadius: 8,
640 elevation: 8,
641 },
642 xl: {
643 shadowColor: colors.black,
644 shadowOffset: { width: 0, height: 8 },
645 shadowOpacity: 0.2,
646 shadowRadius: 16,
647 elevation: 16,
648 },
649} as const;
650
651// Touch targets (iOS Human Interface Guidelines)
652export const touchTargets = {
653 minimum: 44, // Minimum touch target size
654 comfortable: 48, // Comfortable touch target size
655 large: 56, // Large touch target size
656} as const;
657
658// Animation durations
659export const animations = {
660 fast: 150,
661 normal: 200,
662 slow: 300,
663 slower: 500,
664} as const;
665
666// Breakpoints for responsive design
667export const breakpoints = {
668 sm: 640,
669 md: 768,
670 lg: 1024,
671 xl: 1280,
672 "2xl": 1536,
673} as const;
674
675export type Colors = typeof colors;
676export type Spacing = typeof spacing;
677export type BorderRadius = typeof borderRadius;
678export type Typography = typeof typography;
679export type Shadows = typeof shadows;
680export type TouchTargets = typeof touchTargets;
681export type Animations = typeof animations;
682export type Breakpoints = typeof breakpoints;