robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1import {type StyleProp, type ViewStyle} from 'react-native'
2import {atoms as baseAtoms} from '@bsky.app/alf'
3
4import {CARD_ASPECT_RATIO} from '#/lib/constants'
5import {native, platform, web} from '#/alf/util/platform'
6import * as Layout from '#/components/Layout'
7
8export const atoms = {
9 ...baseAtoms,
10
11 h_full_vh: web({
12 height: '100vh',
13 }),
14
15 /**
16 * Used for the outermost components on screens, to ensure that they can fill
17 * the screen and extend beyond.
18 */
19 util_screen_outer: [
20 web({
21 minHeight: '100vh',
22 }),
23 native({
24 height: '100%',
25 }),
26 ] as StyleProp<ViewStyle>,
27
28 /*
29 * Theme-independent bg colors
30 */
31 bg_transparent: {
32 backgroundColor: 'transparent',
33 },
34
35 /**
36 * Aspect ratios
37 */
38 aspect_square: {
39 aspectRatio: 1,
40 },
41 aspect_card: {
42 aspectRatio: CARD_ASPECT_RATIO,
43 },
44
45 /*
46 * Transition
47 */
48 transition_none: web({
49 transitionProperty: 'none',
50 }),
51 transition_timing_default: web({
52 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
53 transitionDuration: '100ms',
54 }),
55 transition_all: web({
56 transitionProperty: 'all',
57 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
58 transitionDuration: '100ms',
59 }),
60 transition_color: web({
61 transitionProperty:
62 'color, background-color, border-color, text-decoration-color, fill, stroke',
63 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
64 transitionDuration: '100ms',
65 }),
66 transition_opacity: web({
67 transitionProperty: 'opacity',
68 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
69 transitionDuration: '100ms',
70 }),
71 transition_transform: web({
72 transitionProperty: 'transform',
73 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
74 transitionDuration: '100ms',
75 }),
76 transition_delay_50ms: web({
77 transitionDelay: '50ms',
78 }),
79
80 /*
81 * Animations
82 */
83 fade_in: web({
84 animation: 'fadeIn ease-out 0.15s',
85 }),
86 fade_out: web({
87 animation: 'fadeOut ease-out 0.15s',
88 animationFillMode: 'forwards',
89 }),
90 zoom_in: web({
91 animation: 'zoomIn ease-out 0.1s',
92 }),
93 zoom_out: web({
94 animation: 'zoomOut ease-out 0.1s',
95 }),
96 slide_in_left: web({
97 // exponential easing function
98 animation: 'slideInLeft cubic-bezier(0.16, 1, 0.3, 1) 0.5s',
99 }),
100 slide_out_left: web({
101 animation: 'slideOutLeft ease-in 0.15s',
102 animationFillMode: 'forwards',
103 }),
104 // special composite animation for dialogs
105 zoom_fade_in: web({
106 animation: 'zoomIn ease-out 0.1s, fadeIn ease-out 0.1s',
107 }),
108
109 /**
110 * {@link Layout.SCROLLBAR_OFFSET}
111 */
112 scrollbar_offset: platform({
113 web: {
114 transform: [
115 {
116 translateX: Layout.SCROLLBAR_OFFSET,
117 },
118 ],
119 },
120 native: {
121 transform: [],
122 },
123 }) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
124} as const