robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge pull request #8743 from internet-development/@APiligrim/update-toast
[APP-1345] Hot fix: add toast.style file
+167
+167
src/view/com/util/Toast.style.tsx
+167
src/view/com/util/Toast.style.tsx
···
1
+
import {type Theme, select} from '#/alf'
2
+
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
3
+
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
4
+
import {Check_Stroke2_Corner0_Rounded as SuccessIcon} from '#/components/icons/Check'
5
+
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
6
+
7
+
export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
8
+
9
+
export const TOAST_ANIMATION_CONFIG = {
10
+
duration: 300,
11
+
damping: 15,
12
+
stiffness: 150,
13
+
mass: 0.8,
14
+
overshootClamping: false,
15
+
restSpeedThreshold: 0.01,
16
+
restDisplacementThreshold: 0.01,
17
+
}
18
+
19
+
export const TOAST_TYPE_TO_ICON = {
20
+
default: SuccessIcon,
21
+
success: SuccessIcon,
22
+
error: ErrorIcon,
23
+
warning: WarningIcon,
24
+
info: CircleInfo,
25
+
}
26
+
27
+
export const getToastTypeStyles = (t: Theme) => ({
28
+
default: {
29
+
backgroundColor: select(t.name, {
30
+
light: t.atoms.bg_contrast_25.backgroundColor,
31
+
dim: t.atoms.bg_contrast_100.backgroundColor,
32
+
dark: t.atoms.bg_contrast_100.backgroundColor,
33
+
}),
34
+
borderColor: select(t.name, {
35
+
light: t.atoms.border_contrast_low.borderColor,
36
+
dim: t.atoms.border_contrast_high.borderColor,
37
+
dark: t.atoms.border_contrast_high.borderColor,
38
+
}),
39
+
iconColor: select(t.name, {
40
+
light: t.atoms.text_contrast_medium.color,
41
+
dim: t.atoms.text_contrast_medium.color,
42
+
dark: t.atoms.text_contrast_medium.color,
43
+
}),
44
+
textColor: select(t.name, {
45
+
light: t.atoms.text_contrast_medium.color,
46
+
dim: t.atoms.text_contrast_medium.color,
47
+
dark: t.atoms.text_contrast_medium.color,
48
+
}),
49
+
},
50
+
success: {
51
+
backgroundColor: select(t.name, {
52
+
light: t.palette.primary_100,
53
+
dim: t.palette.primary_100,
54
+
dark: t.palette.primary_50,
55
+
}),
56
+
borderColor: select(t.name, {
57
+
light: t.palette.primary_500,
58
+
dim: t.palette.primary_500,
59
+
dark: t.palette.primary_500,
60
+
}),
61
+
iconColor: select(t.name, {
62
+
light: t.palette.primary_500,
63
+
dim: t.palette.primary_600,
64
+
dark: t.palette.primary_600,
65
+
}),
66
+
textColor: select(t.name, {
67
+
light: t.palette.primary_500,
68
+
dim: t.palette.primary_600,
69
+
dark: t.palette.primary_600,
70
+
}),
71
+
},
72
+
error: {
73
+
backgroundColor: select(t.name, {
74
+
light: t.palette.negative_200,
75
+
dim: t.palette.negative_25,
76
+
dark: t.palette.negative_25,
77
+
}),
78
+
borderColor: select(t.name, {
79
+
light: t.palette.negative_300,
80
+
dim: t.palette.negative_300,
81
+
dark: t.palette.negative_300,
82
+
}),
83
+
iconColor: select(t.name, {
84
+
light: t.palette.negative_600,
85
+
dim: t.palette.negative_600,
86
+
dark: t.palette.negative_600,
87
+
}),
88
+
textColor: select(t.name, {
89
+
light: t.palette.negative_600,
90
+
dim: t.palette.negative_600,
91
+
dark: t.palette.negative_600,
92
+
}),
93
+
},
94
+
warning: {
95
+
backgroundColor: select(t.name, {
96
+
light: t.atoms.bg_contrast_25.backgroundColor,
97
+
dim: t.atoms.bg_contrast_100.backgroundColor,
98
+
dark: t.atoms.bg_contrast_100.backgroundColor,
99
+
}),
100
+
borderColor: select(t.name, {
101
+
light: t.atoms.border_contrast_low.borderColor,
102
+
dim: t.atoms.border_contrast_high.borderColor,
103
+
dark: t.atoms.border_contrast_high.borderColor,
104
+
}),
105
+
iconColor: select(t.name, {
106
+
light: t.atoms.text_contrast_medium.color,
107
+
dim: t.atoms.text_contrast_medium.color,
108
+
dark: t.atoms.text_contrast_medium.color,
109
+
}),
110
+
textColor: select(t.name, {
111
+
light: t.atoms.text_contrast_medium.color,
112
+
dim: t.atoms.text_contrast_medium.color,
113
+
dark: t.atoms.text_contrast_medium.color,
114
+
}),
115
+
},
116
+
info: {
117
+
backgroundColor: select(t.name, {
118
+
light: t.atoms.bg_contrast_25.backgroundColor,
119
+
dim: t.atoms.bg_contrast_100.backgroundColor,
120
+
dark: t.atoms.bg_contrast_100.backgroundColor,
121
+
}),
122
+
borderColor: select(t.name, {
123
+
light: t.atoms.border_contrast_low.borderColor,
124
+
dim: t.atoms.border_contrast_high.borderColor,
125
+
dark: t.atoms.border_contrast_high.borderColor,
126
+
}),
127
+
iconColor: select(t.name, {
128
+
light: t.atoms.text_contrast_medium.color,
129
+
dim: t.atoms.text_contrast_medium.color,
130
+
dark: t.atoms.text_contrast_medium.color,
131
+
}),
132
+
textColor: select(t.name, {
133
+
light: t.atoms.text_contrast_medium.color,
134
+
dim: t.atoms.text_contrast_medium.color,
135
+
dark: t.atoms.text_contrast_medium.color,
136
+
}),
137
+
},
138
+
})
139
+
140
+
export const getToastWebAnimationStyles = () => ({
141
+
entering: {
142
+
animation: 'toastFadeIn 0.3s ease-out forwards',
143
+
},
144
+
exiting: {
145
+
animation: 'toastFadeOut 0.2s ease-in forwards',
146
+
},
147
+
})
148
+
149
+
export const TOAST_WEB_KEYFRAMES = `
150
+
@keyframes toastFadeIn {
151
+
from {
152
+
opacity: 0;
153
+
}
154
+
to {
155
+
opacity: 1;
156
+
}
157
+
}
158
+
159
+
@keyframes toastFadeOut {
160
+
from {
161
+
opacity: 1;
162
+
}
163
+
to {
164
+
opacity: 0;
165
+
}
166
+
}
167
+
`