lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
samuel.fm
1import {
2 Platform,
3 type StyleProp,
4 StyleSheet,
5 type ViewStyle,
6} from 'react-native'
7
8import * as tokens from '#/alf/tokens'
9import {ios, native, platform, web} from '#/alf/util/platform'
10import * as Layout from '#/components/Layout'
11
12export const atoms = {
13 debug: {
14 borderColor: 'red',
15 borderWidth: 1,
16 },
17
18 /*
19 * Positioning
20 */
21 fixed: {
22 position: Platform.select({web: 'fixed', native: 'absolute'}) as 'absolute',
23 },
24 absolute: {
25 position: 'absolute',
26 },
27 relative: {
28 position: 'relative',
29 },
30 static: {
31 position: 'static',
32 },
33 sticky: web({
34 position: 'sticky',
35 }),
36 inset_0: {
37 top: 0,
38 left: 0,
39 right: 0,
40 bottom: 0,
41 },
42 top_0: {
43 top: 0,
44 },
45 right_0: {
46 right: 0,
47 },
48 bottom_0: {
49 bottom: 0,
50 },
51 left_0: {
52 left: 0,
53 },
54 z_10: {
55 zIndex: 10,
56 },
57 z_20: {
58 zIndex: 20,
59 },
60 z_30: {
61 zIndex: 30,
62 },
63 z_40: {
64 zIndex: 40,
65 },
66 z_50: {
67 zIndex: 50,
68 },
69
70 overflow_visible: {
71 overflow: 'visible',
72 },
73 overflow_hidden: {
74 overflow: 'hidden',
75 },
76 /**
77 * @platform web
78 */
79 overflow_auto: web({
80 overflow: 'auto',
81 }),
82
83 /*
84 * Width & Height
85 */
86 w_full: {
87 width: '100%',
88 },
89 h_full: {
90 height: '100%',
91 },
92 h_full_vh: web({
93 height: '100vh',
94 }),
95 max_w_full: {
96 maxWidth: '100%',
97 },
98 max_h_full: {
99 maxHeight: '100%',
100 },
101
102 /**
103 * Used for the outermost components on screens, to ensure that they can fill
104 * the screen and extend beyond.
105 */
106 util_screen_outer: [
107 web({
108 minHeight: '100vh',
109 }),
110 native({
111 height: '100%',
112 }),
113 ] as StyleProp<ViewStyle>,
114
115 /*
116 * Theme-independent bg colors
117 */
118 bg_transparent: {
119 backgroundColor: 'transparent',
120 },
121
122 /*
123 * Border radius
124 */
125 rounded_0: {
126 borderRadius: 0,
127 },
128 rounded_2xs: {
129 borderRadius: tokens.borderRadius._2xs,
130 },
131 rounded_xs: {
132 borderRadius: tokens.borderRadius.xs,
133 },
134 rounded_sm: {
135 borderRadius: tokens.borderRadius.sm,
136 },
137 rounded_md: {
138 borderRadius: tokens.borderRadius.md,
139 },
140 rounded_lg: {
141 borderRadius: tokens.borderRadius.lg,
142 },
143 rounded_full: {
144 borderRadius: tokens.borderRadius.full,
145 },
146
147 /*
148 * Flex
149 */
150 gap_0: {
151 gap: 0,
152 },
153 gap_2xs: {
154 gap: tokens.space._2xs,
155 },
156 gap_xs: {
157 gap: tokens.space.xs,
158 },
159 gap_sm: {
160 gap: tokens.space.sm,
161 },
162 gap_md: {
163 gap: tokens.space.md,
164 },
165 gap_lg: {
166 gap: tokens.space.lg,
167 },
168 gap_xl: {
169 gap: tokens.space.xl,
170 },
171 gap_2xl: {
172 gap: tokens.space._2xl,
173 },
174 gap_3xl: {
175 gap: tokens.space._3xl,
176 },
177 gap_4xl: {
178 gap: tokens.space._4xl,
179 },
180 gap_5xl: {
181 gap: tokens.space._5xl,
182 },
183 flex: {
184 display: 'flex',
185 },
186 flex_col: {
187 flexDirection: 'column',
188 },
189 flex_row: {
190 flexDirection: 'row',
191 },
192 flex_col_reverse: {
193 flexDirection: 'column-reverse',
194 },
195 flex_row_reverse: {
196 flexDirection: 'row-reverse',
197 },
198 flex_wrap: {
199 flexWrap: 'wrap',
200 },
201 flex_nowrap: {
202 flexWrap: 'nowrap',
203 },
204 flex_0: {
205 flex: web('0 0 auto') || (native(0) as number),
206 },
207 flex_1: {
208 flex: 1,
209 },
210 flex_grow: {
211 flexGrow: 1,
212 },
213 flex_grow_0: {
214 flexGrow: 0,
215 },
216 flex_shrink: {
217 flexShrink: 1,
218 },
219 flex_shrink_0: {
220 flexShrink: 0,
221 },
222 justify_start: {
223 justifyContent: 'flex-start',
224 },
225 justify_center: {
226 justifyContent: 'center',
227 },
228 justify_between: {
229 justifyContent: 'space-between',
230 },
231 justify_end: {
232 justifyContent: 'flex-end',
233 },
234 align_center: {
235 alignItems: 'center',
236 },
237 align_start: {
238 alignItems: 'flex-start',
239 },
240 align_end: {
241 alignItems: 'flex-end',
242 },
243 align_baseline: {
244 alignItems: 'baseline',
245 },
246 align_stretch: {
247 alignItems: 'stretch',
248 },
249 self_auto: {
250 alignSelf: 'auto',
251 },
252 self_start: {
253 alignSelf: 'flex-start',
254 },
255 self_end: {
256 alignSelf: 'flex-end',
257 },
258 self_center: {
259 alignSelf: 'center',
260 },
261 self_stretch: {
262 alignSelf: 'stretch',
263 },
264 self_baseline: {
265 alignSelf: 'baseline',
266 },
267
268 /*
269 * Text
270 */
271 text_left: {
272 textAlign: 'left',
273 },
274 text_center: {
275 textAlign: 'center',
276 },
277 text_right: {
278 textAlign: 'right',
279 },
280 text_2xs: {
281 fontSize: tokens.fontSize._2xs,
282 letterSpacing: tokens.TRACKING,
283 },
284 text_xs: {
285 fontSize: tokens.fontSize.xs,
286 letterSpacing: tokens.TRACKING,
287 },
288 text_sm: {
289 fontSize: tokens.fontSize.sm,
290 letterSpacing: tokens.TRACKING,
291 },
292 text_md: {
293 fontSize: tokens.fontSize.md,
294 letterSpacing: tokens.TRACKING,
295 },
296 text_lg: {
297 fontSize: tokens.fontSize.lg,
298 letterSpacing: tokens.TRACKING,
299 },
300 text_xl: {
301 fontSize: tokens.fontSize.xl,
302 letterSpacing: tokens.TRACKING,
303 },
304 text_2xl: {
305 fontSize: tokens.fontSize._2xl,
306 letterSpacing: tokens.TRACKING,
307 },
308 text_3xl: {
309 fontSize: tokens.fontSize._3xl,
310 letterSpacing: tokens.TRACKING,
311 },
312 text_4xl: {
313 fontSize: tokens.fontSize._4xl,
314 letterSpacing: tokens.TRACKING,
315 },
316 text_5xl: {
317 fontSize: tokens.fontSize._5xl,
318 letterSpacing: tokens.TRACKING,
319 },
320 leading_tight: {
321 lineHeight: 1.15,
322 },
323 leading_snug: {
324 lineHeight: 1.3,
325 },
326 leading_normal: {
327 lineHeight: 1.5,
328 },
329 tracking_normal: {
330 letterSpacing: tokens.TRACKING,
331 },
332 font_normal: {
333 fontWeight: tokens.fontWeight.normal,
334 },
335 font_medium: {
336 fontWeight: tokens.fontWeight.medium,
337 },
338 font_bold: {
339 fontWeight: tokens.fontWeight.bold,
340 },
341 font_heavy: {
342 fontWeight: tokens.fontWeight.heavy,
343 },
344 italic: {
345 fontStyle: 'italic',
346 },
347
348 /*
349 * Border
350 */
351 border_0: {
352 borderWidth: 0,
353 },
354 border_t_0: {
355 borderTopWidth: 0,
356 },
357 border_b_0: {
358 borderBottomWidth: 0,
359 },
360 border_l_0: {
361 borderLeftWidth: 0,
362 },
363 border_r_0: {
364 borderRightWidth: 0,
365 },
366 border: {
367 borderWidth: StyleSheet.hairlineWidth,
368 },
369 border_t: {
370 borderTopWidth: StyleSheet.hairlineWidth,
371 },
372 border_b: {
373 borderBottomWidth: StyleSheet.hairlineWidth,
374 },
375 border_l: {
376 borderLeftWidth: StyleSheet.hairlineWidth,
377 },
378 border_r: {
379 borderRightWidth: StyleSheet.hairlineWidth,
380 },
381 border_transparent: {
382 borderColor: 'transparent',
383 },
384 curve_circular: ios({
385 borderCurve: 'circular',
386 }),
387 curve_continuous: ios({
388 borderCurve: 'continuous',
389 }),
390
391 /*
392 * Shadow
393 */
394 shadow_sm: {
395 shadowRadius: 8,
396 shadowOpacity: 0.1,
397 elevation: 8,
398 },
399 shadow_md: {
400 shadowRadius: 16,
401 shadowOpacity: 0.1,
402 elevation: 16,
403 },
404 shadow_lg: {
405 shadowRadius: 32,
406 shadowOpacity: 0.1,
407 elevation: 24,
408 },
409
410 /*
411 * Padding
412 */
413 p_0: {
414 padding: 0,
415 },
416 p_2xs: {
417 padding: tokens.space._2xs,
418 },
419 p_xs: {
420 padding: tokens.space.xs,
421 },
422 p_sm: {
423 padding: tokens.space.sm,
424 },
425 p_md: {
426 padding: tokens.space.md,
427 },
428 p_lg: {
429 padding: tokens.space.lg,
430 },
431 p_xl: {
432 padding: tokens.space.xl,
433 },
434 p_2xl: {
435 padding: tokens.space._2xl,
436 },
437 p_3xl: {
438 padding: tokens.space._3xl,
439 },
440 p_4xl: {
441 padding: tokens.space._4xl,
442 },
443 p_5xl: {
444 padding: tokens.space._5xl,
445 },
446 px_0: {
447 paddingLeft: 0,
448 paddingRight: 0,
449 },
450 px_2xs: {
451 paddingLeft: tokens.space._2xs,
452 paddingRight: tokens.space._2xs,
453 },
454 px_xs: {
455 paddingLeft: tokens.space.xs,
456 paddingRight: tokens.space.xs,
457 },
458 px_sm: {
459 paddingLeft: tokens.space.sm,
460 paddingRight: tokens.space.sm,
461 },
462 px_md: {
463 paddingLeft: tokens.space.md,
464 paddingRight: tokens.space.md,
465 },
466 px_lg: {
467 paddingLeft: tokens.space.lg,
468 paddingRight: tokens.space.lg,
469 },
470 px_xl: {
471 paddingLeft: tokens.space.xl,
472 paddingRight: tokens.space.xl,
473 },
474 px_2xl: {
475 paddingLeft: tokens.space._2xl,
476 paddingRight: tokens.space._2xl,
477 },
478 px_3xl: {
479 paddingLeft: tokens.space._3xl,
480 paddingRight: tokens.space._3xl,
481 },
482 px_4xl: {
483 paddingLeft: tokens.space._4xl,
484 paddingRight: tokens.space._4xl,
485 },
486 px_5xl: {
487 paddingLeft: tokens.space._5xl,
488 paddingRight: tokens.space._5xl,
489 },
490 py_0: {
491 paddingTop: 0,
492 paddingBottom: 0,
493 },
494 py_2xs: {
495 paddingTop: tokens.space._2xs,
496 paddingBottom: tokens.space._2xs,
497 },
498 py_xs: {
499 paddingTop: tokens.space.xs,
500 paddingBottom: tokens.space.xs,
501 },
502 py_sm: {
503 paddingTop: tokens.space.sm,
504 paddingBottom: tokens.space.sm,
505 },
506 py_md: {
507 paddingTop: tokens.space.md,
508 paddingBottom: tokens.space.md,
509 },
510 py_lg: {
511 paddingTop: tokens.space.lg,
512 paddingBottom: tokens.space.lg,
513 },
514 py_xl: {
515 paddingTop: tokens.space.xl,
516 paddingBottom: tokens.space.xl,
517 },
518 py_2xl: {
519 paddingTop: tokens.space._2xl,
520 paddingBottom: tokens.space._2xl,
521 },
522 py_3xl: {
523 paddingTop: tokens.space._3xl,
524 paddingBottom: tokens.space._3xl,
525 },
526 py_4xl: {
527 paddingTop: tokens.space._4xl,
528 paddingBottom: tokens.space._4xl,
529 },
530 py_5xl: {
531 paddingTop: tokens.space._5xl,
532 paddingBottom: tokens.space._5xl,
533 },
534 pt_0: {
535 paddingTop: 0,
536 },
537 pt_2xs: {
538 paddingTop: tokens.space._2xs,
539 },
540 pt_xs: {
541 paddingTop: tokens.space.xs,
542 },
543 pt_sm: {
544 paddingTop: tokens.space.sm,
545 },
546 pt_md: {
547 paddingTop: tokens.space.md,
548 },
549 pt_lg: {
550 paddingTop: tokens.space.lg,
551 },
552 pt_xl: {
553 paddingTop: tokens.space.xl,
554 },
555 pt_2xl: {
556 paddingTop: tokens.space._2xl,
557 },
558 pt_3xl: {
559 paddingTop: tokens.space._3xl,
560 },
561 pt_4xl: {
562 paddingTop: tokens.space._4xl,
563 },
564 pt_5xl: {
565 paddingTop: tokens.space._5xl,
566 },
567 pb_0: {
568 paddingBottom: 0,
569 },
570 pb_2xs: {
571 paddingBottom: tokens.space._2xs,
572 },
573 pb_xs: {
574 paddingBottom: tokens.space.xs,
575 },
576 pb_sm: {
577 paddingBottom: tokens.space.sm,
578 },
579 pb_md: {
580 paddingBottom: tokens.space.md,
581 },
582 pb_lg: {
583 paddingBottom: tokens.space.lg,
584 },
585 pb_xl: {
586 paddingBottom: tokens.space.xl,
587 },
588 pb_2xl: {
589 paddingBottom: tokens.space._2xl,
590 },
591 pb_3xl: {
592 paddingBottom: tokens.space._3xl,
593 },
594 pb_4xl: {
595 paddingBottom: tokens.space._4xl,
596 },
597 pb_5xl: {
598 paddingBottom: tokens.space._5xl,
599 },
600 pl_0: {
601 paddingLeft: 0,
602 },
603 pl_2xs: {
604 paddingLeft: tokens.space._2xs,
605 },
606 pl_xs: {
607 paddingLeft: tokens.space.xs,
608 },
609 pl_sm: {
610 paddingLeft: tokens.space.sm,
611 },
612 pl_md: {
613 paddingLeft: tokens.space.md,
614 },
615 pl_lg: {
616 paddingLeft: tokens.space.lg,
617 },
618 pl_xl: {
619 paddingLeft: tokens.space.xl,
620 },
621 pl_2xl: {
622 paddingLeft: tokens.space._2xl,
623 },
624 pl_3xl: {
625 paddingLeft: tokens.space._3xl,
626 },
627 pl_4xl: {
628 paddingLeft: tokens.space._4xl,
629 },
630 pl_5xl: {
631 paddingLeft: tokens.space._5xl,
632 },
633 pr_0: {
634 paddingRight: 0,
635 },
636 pr_2xs: {
637 paddingRight: tokens.space._2xs,
638 },
639 pr_xs: {
640 paddingRight: tokens.space.xs,
641 },
642 pr_sm: {
643 paddingRight: tokens.space.sm,
644 },
645 pr_md: {
646 paddingRight: tokens.space.md,
647 },
648 pr_lg: {
649 paddingRight: tokens.space.lg,
650 },
651 pr_xl: {
652 paddingRight: tokens.space.xl,
653 },
654 pr_2xl: {
655 paddingRight: tokens.space._2xl,
656 },
657 pr_3xl: {
658 paddingRight: tokens.space._3xl,
659 },
660 pr_4xl: {
661 paddingRight: tokens.space._4xl,
662 },
663 pr_5xl: {
664 paddingRight: tokens.space._5xl,
665 },
666
667 /*
668 * Margin
669 */
670 m_0: {
671 margin: 0,
672 },
673 m_2xs: {
674 margin: tokens.space._2xs,
675 },
676 m_xs: {
677 margin: tokens.space.xs,
678 },
679 m_sm: {
680 margin: tokens.space.sm,
681 },
682 m_md: {
683 margin: tokens.space.md,
684 },
685 m_lg: {
686 margin: tokens.space.lg,
687 },
688 m_xl: {
689 margin: tokens.space.xl,
690 },
691 m_2xl: {
692 margin: tokens.space._2xl,
693 },
694 m_3xl: {
695 margin: tokens.space._3xl,
696 },
697 m_4xl: {
698 margin: tokens.space._4xl,
699 },
700 m_5xl: {
701 margin: tokens.space._5xl,
702 },
703 m_auto: {
704 margin: 'auto',
705 },
706 mx_0: {
707 marginLeft: 0,
708 marginRight: 0,
709 },
710 mx_2xs: {
711 marginLeft: tokens.space._2xs,
712 marginRight: tokens.space._2xs,
713 },
714 mx_xs: {
715 marginLeft: tokens.space.xs,
716 marginRight: tokens.space.xs,
717 },
718 mx_sm: {
719 marginLeft: tokens.space.sm,
720 marginRight: tokens.space.sm,
721 },
722 mx_md: {
723 marginLeft: tokens.space.md,
724 marginRight: tokens.space.md,
725 },
726 mx_lg: {
727 marginLeft: tokens.space.lg,
728 marginRight: tokens.space.lg,
729 },
730 mx_xl: {
731 marginLeft: tokens.space.xl,
732 marginRight: tokens.space.xl,
733 },
734 mx_2xl: {
735 marginLeft: tokens.space._2xl,
736 marginRight: tokens.space._2xl,
737 },
738 mx_3xl: {
739 marginLeft: tokens.space._3xl,
740 marginRight: tokens.space._3xl,
741 },
742 mx_4xl: {
743 marginLeft: tokens.space._4xl,
744 marginRight: tokens.space._4xl,
745 },
746 mx_5xl: {
747 marginLeft: tokens.space._5xl,
748 marginRight: tokens.space._5xl,
749 },
750 mx_auto: {
751 marginLeft: 'auto',
752 marginRight: 'auto',
753 },
754 my_0: {
755 marginTop: 0,
756 marginBottom: 0,
757 },
758 my_2xs: {
759 marginTop: tokens.space._2xs,
760 marginBottom: tokens.space._2xs,
761 },
762 my_xs: {
763 marginTop: tokens.space.xs,
764 marginBottom: tokens.space.xs,
765 },
766 my_sm: {
767 marginTop: tokens.space.sm,
768 marginBottom: tokens.space.sm,
769 },
770 my_md: {
771 marginTop: tokens.space.md,
772 marginBottom: tokens.space.md,
773 },
774 my_lg: {
775 marginTop: tokens.space.lg,
776 marginBottom: tokens.space.lg,
777 },
778 my_xl: {
779 marginTop: tokens.space.xl,
780 marginBottom: tokens.space.xl,
781 },
782 my_2xl: {
783 marginTop: tokens.space._2xl,
784 marginBottom: tokens.space._2xl,
785 },
786 my_3xl: {
787 marginTop: tokens.space._3xl,
788 marginBottom: tokens.space._3xl,
789 },
790 my_4xl: {
791 marginTop: tokens.space._4xl,
792 marginBottom: tokens.space._4xl,
793 },
794 my_5xl: {
795 marginTop: tokens.space._5xl,
796 marginBottom: tokens.space._5xl,
797 },
798 my_auto: {
799 marginTop: 'auto',
800 marginBottom: 'auto',
801 },
802 mt_0: {
803 marginTop: 0,
804 },
805 mt_2xs: {
806 marginTop: tokens.space._2xs,
807 },
808 mt_xs: {
809 marginTop: tokens.space.xs,
810 },
811 mt_sm: {
812 marginTop: tokens.space.sm,
813 },
814 mt_md: {
815 marginTop: tokens.space.md,
816 },
817 mt_lg: {
818 marginTop: tokens.space.lg,
819 },
820 mt_xl: {
821 marginTop: tokens.space.xl,
822 },
823 mt_2xl: {
824 marginTop: tokens.space._2xl,
825 },
826 mt_3xl: {
827 marginTop: tokens.space._3xl,
828 },
829 mt_4xl: {
830 marginTop: tokens.space._4xl,
831 },
832 mt_5xl: {
833 marginTop: tokens.space._5xl,
834 },
835 mt_auto: {
836 marginTop: 'auto',
837 },
838 mb_0: {
839 marginBottom: 0,
840 },
841 mb_2xs: {
842 marginBottom: tokens.space._2xs,
843 },
844 mb_xs: {
845 marginBottom: tokens.space.xs,
846 },
847 mb_sm: {
848 marginBottom: tokens.space.sm,
849 },
850 mb_md: {
851 marginBottom: tokens.space.md,
852 },
853 mb_lg: {
854 marginBottom: tokens.space.lg,
855 },
856 mb_xl: {
857 marginBottom: tokens.space.xl,
858 },
859 mb_2xl: {
860 marginBottom: tokens.space._2xl,
861 },
862 mb_3xl: {
863 marginBottom: tokens.space._3xl,
864 },
865 mb_4xl: {
866 marginBottom: tokens.space._4xl,
867 },
868 mb_5xl: {
869 marginBottom: tokens.space._5xl,
870 },
871 mb_auto: {
872 marginBottom: 'auto',
873 },
874 ml_0: {
875 marginLeft: 0,
876 },
877 ml_2xs: {
878 marginLeft: tokens.space._2xs,
879 },
880 ml_xs: {
881 marginLeft: tokens.space.xs,
882 },
883 ml_sm: {
884 marginLeft: tokens.space.sm,
885 },
886 ml_md: {
887 marginLeft: tokens.space.md,
888 },
889 ml_lg: {
890 marginLeft: tokens.space.lg,
891 },
892 ml_xl: {
893 marginLeft: tokens.space.xl,
894 },
895 ml_2xl: {
896 marginLeft: tokens.space._2xl,
897 },
898 ml_3xl: {
899 marginLeft: tokens.space._3xl,
900 },
901 ml_4xl: {
902 marginLeft: tokens.space._4xl,
903 },
904 ml_5xl: {
905 marginLeft: tokens.space._5xl,
906 },
907 ml_auto: {
908 marginLeft: 'auto',
909 },
910 mr_0: {
911 marginRight: 0,
912 },
913 mr_2xs: {
914 marginRight: tokens.space._2xs,
915 },
916 mr_xs: {
917 marginRight: tokens.space.xs,
918 },
919 mr_sm: {
920 marginRight: tokens.space.sm,
921 },
922 mr_md: {
923 marginRight: tokens.space.md,
924 },
925 mr_lg: {
926 marginRight: tokens.space.lg,
927 },
928 mr_xl: {
929 marginRight: tokens.space.xl,
930 },
931 mr_2xl: {
932 marginRight: tokens.space._2xl,
933 },
934 mr_3xl: {
935 marginRight: tokens.space._3xl,
936 },
937 mr_4xl: {
938 marginRight: tokens.space._4xl,
939 },
940 mr_5xl: {
941 marginRight: tokens.space._5xl,
942 },
943 mr_auto: {
944 marginRight: 'auto',
945 },
946
947 /*
948 * Pointer events & user select
949 */
950 pointer_events_none: {
951 pointerEvents: 'none',
952 },
953 pointer_events_auto: {
954 pointerEvents: 'auto',
955 },
956 user_select_none: {
957 userSelect: 'none',
958 },
959 user_select_text: {
960 userSelect: 'text',
961 },
962 user_select_all: {
963 userSelect: 'all',
964 },
965 outline_inset_1: {
966 outlineOffset: -1,
967 },
968
969 /*
970 * Text decoration
971 */
972 underline: {
973 textDecorationLine: 'underline',
974 },
975 strike_through: {
976 textDecorationLine: 'line-through',
977 },
978
979 /*
980 * Display
981 */
982 hidden: {
983 display: 'none',
984 },
985 inline: web({
986 display: 'inline',
987 }),
988 block: web({
989 display: 'block',
990 }),
991
992 /*
993 * Transition
994 */
995 transition_none: web({
996 transitionProperty: 'none',
997 }),
998 transition_timing_default: web({
999 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
1000 transitionDuration: '100ms',
1001 }),
1002 transition_all: web({
1003 transitionProperty: 'all',
1004 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
1005 transitionDuration: '100ms',
1006 }),
1007 transition_color: web({
1008 transitionProperty:
1009 'color, background-color, border-color, text-decoration-color, fill, stroke',
1010 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
1011 transitionDuration: '100ms',
1012 }),
1013 transition_opacity: web({
1014 transitionProperty: 'opacity',
1015 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
1016 transitionDuration: '100ms',
1017 }),
1018 transition_transform: web({
1019 transitionProperty: 'transform',
1020 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
1021 transitionDuration: '100ms',
1022 }),
1023 transition_delay_50ms: web({
1024 transitionDelay: '50ms',
1025 }),
1026
1027 /*
1028 * Animaations
1029 */
1030 fade_in: web({
1031 animation: 'fadeIn ease-out 0.15s',
1032 }),
1033 fade_out: web({
1034 animation: 'fadeOut ease-out 0.15s',
1035 }),
1036 zoom_in: web({
1037 animation: 'zoomIn ease-out 0.1s',
1038 }),
1039 zoom_out: web({
1040 animation: 'zoomOut ease-out 0.1s',
1041 }),
1042 slide_in_left: web({
1043 // exponential easing function
1044 animation: 'slideInLeft cubic-bezier(0.16, 1, 0.3, 1) 0.5s',
1045 }),
1046 slide_out_left: web({
1047 animation: 'slideOutLeft ease-in 0.15s',
1048 animationFillMode: 'forwards',
1049 }),
1050 // special composite animation for dialogs
1051 zoom_fade_in: web({
1052 animation: 'zoomIn ease-out 0.1s, fadeIn ease-out 0.1s',
1053 }),
1054
1055 /**
1056 * {@link Layout.SCROLLBAR_OFFSET}
1057 */
1058 scrollbar_offset: platform({
1059 web: {
1060 transform: [
1061 {
1062 translateX: Layout.SCROLLBAR_OFFSET,
1063 },
1064 ],
1065 },
1066 native: {
1067 transform: [],
1068 },
1069 }) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
1070
1071 pointer: web({
1072 cursor: 'pointer',
1073 }),
1074} as const