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
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: '100vh',
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
111 /**
112 * Visually hidden but available to screen readers (web).
113 * Use for live regions or off-screen labels (e.g. "Image 1 of 3").
114 */
115 sr_only: web({
116 position: 'absolute',
117 width: 1,
118 height: 1,
119 padding: 0,
120 margin: -1,
121 overflow: 'hidden',
122 clip: 'rect(0,0,0,0)',
123 whiteSpace: 'nowrap',
124 borderWidth: 0,
125 }),
126
127 /**
128 * {@link Layout.SCROLLBAR_OFFSET}
129 */
130 scrollbar_offset: platform({
131 web: {
132 transform: [
133 {
134 translateX: Layout.SCROLLBAR_OFFSET,
135 },
136 ],
137 },
138 native: {
139 transform: [],
140 },
141 }) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
142} as const