Live video on the AT Protocol
stream.place
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 fontFamily: "AtkinsonHyperlegibleNext-Bold",
447 },
448 title1: {
449 fontSize: 28,
450 lineHeight: 34,
451 fontWeight: "700" as const,
452 fontFamily: "AtkinsonHyperlegibleNext-Bold",
453 },
454 title2: {
455 fontSize: 22,
456 lineHeight: 28,
457 fontWeight: "700" as const,
458 fontFamily: "AtkinsonHyperlegibleNext-Bold",
459 },
460 title3: {
461 fontSize: 20,
462 lineHeight: 25,
463 fontWeight: "600" as const,
464 fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
465 },
466 headline: {
467 fontSize: 17,
468 lineHeight: 22,
469 fontWeight: "600" as const,
470 fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
471 },
472 body: {
473 fontSize: 17,
474 lineHeight: 22,
475 fontWeight: "400" as const,
476 fontFamily: "AtkinsonHyperlegibleNext-Regular",
477 },
478 callout: {
479 fontSize: 16,
480 lineHeight: 21,
481 fontWeight: "400" as const,
482 fontFamily: "AtkinsonHyperlegibleNext-Regular",
483 },
484 subhead: {
485 fontSize: 15,
486 lineHeight: 20,
487 fontWeight: "400" as const,
488 fontFamily: "AtkinsonHyperlegibleNext-Regular",
489 },
490 footnote: {
491 fontSize: 13,
492 lineHeight: 18,
493 fontWeight: "400" as const,
494 fontFamily: "AtkinsonHyperlegibleNext-Regular",
495 },
496 caption1: {
497 fontSize: 12,
498 lineHeight: 16,
499 fontWeight: "400" as const,
500 fontFamily: "AtkinsonHyperlegibleNext-Regular",
501 },
502 caption2: {
503 fontSize: 11,
504 lineHeight: 13,
505 fontWeight: "400" as const,
506 fontFamily: "AtkinsonHyperlegibleNext-Regular",
507 },
508 },
509
510 // Android Material typography
511 android: {
512 headline1: {
513 fontSize: 96,
514 lineHeight: 112,
515 fontWeight: "300" as const,
516 fontFamily: "AtkinsonHyperlegibleNext-ExtraLight",
517 },
518 headline2: {
519 fontSize: 60,
520 lineHeight: 72,
521 fontWeight: "300" as const,
522 fontFamily: "AtkinsonHyperlegibleNext-Light",
523 },
524 headline3: {
525 fontSize: 48,
526 lineHeight: 56,
527 fontWeight: "400" as const,
528 fontFamily: "AtkinsonHyperlegibleNext-Regular",
529 },
530 headline4: {
531 fontSize: 34,
532 lineHeight: 42,
533 fontWeight: "400" as const,
534 fontFamily: "AtkinsonHyperlegibleNext-Regular",
535 },
536 headline5: {
537 fontSize: 24,
538 lineHeight: 32,
539 fontWeight: "400" as const,
540 fontFamily: "AtkinsonHyperlegibleNext-Regular",
541 },
542 headline6: {
543 fontSize: 20,
544 lineHeight: 28,
545 fontWeight: "500" as const,
546 fontFamily: "AtkinsonHyperlegibleNext-Medium",
547 },
548 subtitle1: {
549 fontSize: 16,
550 lineHeight: 24,
551 fontWeight: "400" as const,
552 fontFamily: "AtkinsonHyperlegibleNext-Regular",
553 },
554 subtitle2: {
555 fontSize: 14,
556 lineHeight: 22,
557 fontWeight: "500" as const,
558 fontFamily: "AtkinsonHyperlegibleNext-Medium",
559 },
560 body1: {
561 fontSize: 16,
562 lineHeight: 24,
563 fontWeight: "400" as const,
564 fontFamily: "AtkinsonHyperlegibleNext-Regular",
565 },
566 body2: {
567 fontSize: 14,
568 lineHeight: 20,
569 fontWeight: "400" as const,
570 fontFamily: "AtkinsonHyperlegibleNext-Regular",
571 },
572 button: {
573 fontSize: 14,
574 lineHeight: 16,
575 fontWeight: "500" as const,
576 fontFamily: "AtkinsonHyperlegibleNext-Medium",
577 },
578 caption: {
579 fontSize: 12,
580 lineHeight: 16,
581 fontWeight: "400" as const,
582 fontFamily: "AtkinsonHyperlegibleNext-Regular",
583 },
584 overline: {
585 fontSize: 10,
586 lineHeight: 16,
587 fontWeight: "400" as const,
588 fontFamily: "AtkinsonHyperlegibleNext-Regular",
589 },
590 },
591
592 // Universal typography scale
593 universal: {
594 xs: {
595 fontSize: 12,
596 lineHeight: 16,
597 fontWeight: "400" as const,
598 fontFamily: "AtkinsonHyperlegibleNext-Regular",
599 },
600 sm: {
601 fontSize: 14,
602 lineHeight: 20,
603 fontWeight: "400" as const,
604 fontFamily: "AtkinsonHyperlegibleNext-Regular",
605 },
606 base: {
607 fontSize: 16,
608 lineHeight: 24,
609 fontWeight: "400" as const,
610 fontFamily: "AtkinsonHyperlegibleNext-Regular",
611 },
612 lg: {
613 fontSize: 18,
614 lineHeight: 28,
615 fontWeight: "400" as const,
616 fontFamily: "AtkinsonHyperlegibleNext-Regular",
617 },
618 xl: {
619 fontSize: 20,
620 lineHeight: 28,
621 fontWeight: "500" as const,
622 fontFamily: "AtkinsonHyperlegibleNext-Medium",
623 },
624 "2xl": {
625 fontSize: 24,
626 lineHeight: 32,
627 fontWeight: "600" as const,
628 fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
629 },
630 "3xl": {
631 fontSize: 30,
632 lineHeight: 36,
633 fontWeight: "700" as const,
634 fontFamily: "AtkinsonHyperlegibleNext-Bold",
635 },
636 "4xl": {
637 fontSize: 36,
638 lineHeight: 40,
639 fontWeight: "700" as const,
640 fontFamily: "AtkinsonHyperlegibleNext-ExtraBold",
641 },
642 },
643
644 // Monospace typography for code and technical content
645 mono: {
646 xs: {
647 fontSize: 11,
648 lineHeight: 16,
649 fontWeight: "400" as const,
650 fontFamily: "AtkinsonHyperlegibleMono-Regular",
651 },
652 sm: {
653 fontSize: 13,
654 lineHeight: 18,
655 fontWeight: "400" as const,
656 fontFamily: "AtkinsonHyperlegibleMono-Regular",
657 },
658 base: {
659 fontSize: 14,
660 lineHeight: 20,
661 fontWeight: "400" as const,
662 fontFamily: "AtkinsonHyperlegibleMono-Regular",
663 },
664 lg: {
665 fontSize: 16,
666 lineHeight: 24,
667 fontWeight: "400" as const,
668 fontFamily: "AtkinsonHyperlegibleMono-Regular",
669 },
670 xl: {
671 fontSize: 18,
672 lineHeight: 28,
673 fontWeight: "500" as const,
674 fontFamily: "AtkinsonHyperlegibleMono-Medium",
675 },
676 "2xl": {
677 fontSize: 20,
678 lineHeight: 32,
679 fontWeight: "600" as const,
680 fontFamily: "AtkinsonHyperlegibleMono-SemiBold",
681 },
682 "3xl": {
683 fontSize: 24,
684 lineHeight: 36,
685 fontWeight: "700" as const,
686 fontFamily: "AtkinsonHyperlegibleMono-Bold",
687 },
688 },
689} as const;
690
691// Font families available in the app
692export const fontFamilies = {
693 // Sans serif fonts
694 regular: "AtkinsonHyperlegibleNext-Regular",
695 light: "AtkinsonHyperlegibleNext-Light",
696 extraLight: "AtkinsonHyperlegibleNext-ExtraLight",
697 medium: "AtkinsonHyperlegibleNext-Medium",
698 semiBold: "AtkinsonHyperlegibleNext-SemiBold",
699 bold: "AtkinsonHyperlegibleNext-Bold",
700 extraBold: "AtkinsonHyperlegibleNext-ExtraBold",
701
702 // Monospace fonts
703 monoRegular: "AtkinsonHyperlegibleMono-Regular",
704 monoMedium: "AtkinsonHyperlegibleMono-Medium",
705 monoSemiBold: "AtkinsonHyperlegibleMono-SemiBold",
706 monoBold: "AtkinsonHyperlegibleMono-Bold",
707} as const;
708
709export const shadows = {
710 none: {
711 shadowColor: "transparent",
712 shadowOffset: { width: 0, height: 0 },
713 shadowOpacity: 0,
714 shadowRadius: 0,
715 elevation: 0,
716 },
717 sm: {
718 shadowColor: colors.black,
719 shadowOffset: { width: 0, height: 1 },
720 shadowOpacity: 0.05,
721 shadowRadius: 2,
722 elevation: 2,
723 },
724 md: {
725 shadowColor: colors.black,
726 shadowOffset: { width: 0, height: 2 },
727 shadowOpacity: 0.1,
728 shadowRadius: 4,
729 elevation: 4,
730 },
731 lg: {
732 shadowColor: colors.black,
733 shadowOffset: { width: 0, height: 4 },
734 shadowOpacity: 0.15,
735 shadowRadius: 8,
736 elevation: 8,
737 },
738 xl: {
739 shadowColor: colors.black,
740 shadowOffset: { width: 0, height: 8 },
741 shadowOpacity: 0.2,
742 shadowRadius: 16,
743 elevation: 16,
744 },
745} as const;
746
747// Touch targets (iOS Human Interface Guidelines)
748export const touchTargets = {
749 minimum: 44, // Minimum touch target size
750 comfortable: 48, // Comfortable touch target size
751 large: 56, // Large touch target size
752} as const;
753
754// Animation durations
755export const animations = {
756 fast: 150,
757 normal: 200,
758 slow: 300,
759 slower: 500,
760} as const;
761
762// Breakpoints for responsive design
763export const breakpoints = {
764 sm: 640,
765 md: 768,
766 lg: 1024,
767 xl: 1280,
768 "2xl": 1536,
769} as const;
770
771export type Colors = typeof colors;
772export type Spacing = typeof spacing;
773export type BorderRadius = typeof borderRadius;
774export type Typography = typeof typography;
775export type FontFamilies = typeof fontFamilies;
776export type Shadows = typeof shadows;
777export type TouchTargets = typeof touchTargets;
778export type Animations = typeof animations;
779export type Breakpoints = typeof breakpoints;