Bluesky app fork with some witchin' additions 馃挮
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
8const EXP_CURVE = 'cubic-bezier(0.16, 1, 0.3, 1)'
9
10export const atoms = {
11 ...baseAtoms,
12
13 h_full_vh: web({
14 height: '100vh',
15 }),
16
17 /**
18 * Used for the outermost components on screens, to ensure that they can fill
19 * the screen and extend beyond.
20 */
21 util_screen_outer: [
22 web({
23 minHeight: '100dvh',
24 }),
25 native({
26 height: '100%',
27 }),
28 ] as StyleProp<ViewStyle>,
29
30 /*
31 * Theme-independent bg colors
32 */
33 bg_transparent: {
34 backgroundColor: 'transparent',
35 },
36
37 /**
38 * Aspect ratios
39 */
40 aspect_square: {
41 aspectRatio: 1,
42 },
43 aspect_card: {
44 aspectRatio: CARD_ASPECT_RATIO,
45 },
46
47 /*
48 * Transition
49 */
50 transition_none: web({
51 transitionProperty: 'none',
52 }),
53 transition_timing_default: web({
54 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
55 transitionDuration: '100ms',
56 }),
57 transition_all: web({
58 transitionProperty: 'all',
59 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
60 transitionDuration: '100ms',
61 }),
62 transition_color: web({
63 transitionProperty:
64 'color, background-color, border-color, text-decoration-color, fill, stroke',
65 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
66 transitionDuration: '100ms',
67 }),
68 transition_opacity: web({
69 transitionProperty: 'opacity',
70 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
71 transitionDuration: '100ms',
72 }),
73 transition_transform: web({
74 transitionProperty: 'transform',
75 transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
76 transitionDuration: '100ms',
77 }),
78 transition_delay_50ms: web({
79 transitionDelay: '50ms',
80 }),
81
82 /*
83 * Animations
84 */
85 fade_in: web({
86 animation: 'fadeIn ease-out 0.15s',
87 }),
88 fade_out: web({
89 animation: 'fadeOut ease-out 0.15s',
90 animationFillMode: 'forwards',
91 }),
92 zoom_in: web({
93 animation: 'zoomIn ease-out 0.1s',
94 }),
95 zoom_out: web({
96 animation: 'zoomOut ease-out 0.1s',
97 }),
98 slide_in_left: web({
99 // exponential easing function
100 animation: 'slideInLeft cubic-bezier(0.16, 1, 0.3, 1) 0.5s',
101 }),
102 slide_out_left: web({
103 animation: 'slideOutLeft ease-in 0.15s',
104 animationFillMode: 'forwards',
105 }),
106 // special composite animation for dialogs
107 zoom_fade_in: web({
108 animation: `zoomIn ${EXP_CURVE} 0.3s, fadeIn ${EXP_CURVE} 0.3s`,
109 }),
110 // bottom-anchored sheet entrance animation
111 slide_up_in: web({
112 animation: `slideUp ${EXP_CURVE} 0.25s, fadeIn ${EXP_CURVE} 0.25s`,
113 }),
114 // bottom-anchored sheet exit animation
115 slide_down_out: web({
116 animation: `slideDown ease-in 0.2s, fadeOut ease-in 0.2s`,
117 animationFillMode: 'forwards',
118 }),
119
120 /**
121 * Visually hidden but available to screen readers (web).
122 * Use for live regions or off-screen labels (e.g. "Image 1 of 3").
123 */
124 sr_only: web({
125 position: 'absolute',
126 width: 1,
127 height: 1,
128 padding: 0,
129 margin: -1,
130 overflow: 'hidden',
131 clip: 'rect(0,0,0,0)',
132 whiteSpace: 'nowrap',
133 borderWidth: 0,
134 }),
135
136 /**
137 * {@link Layout.SCROLLBAR_OFFSET}
138 */
139 scrollbar_offset: platform({
140 web: {
141 transform: [
142 {
143 translateX: Layout.SCROLLBAR_OFFSET,
144 },
145 ],
146 },
147 native: {
148 transform: [],
149 },
150 }) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
151} as const