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