forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[APP-1365]: Ensure toast text meets a11y guidelines (#8779)
* update: toast colors for accessibility
* update: toast color codes from figma
* condense the colors to remove select calls that are unecessary
* remove unused select
authored by
Anastasiya Uraleva
and committed by
GitHub
909ddc86
75094f48
+22
-98
+22
-98
src/components/Toast/Toast.tsx
+22
-98
src/components/Toast/Toast.tsx
···
2
2
import {View} from 'react-native'
3
3
4
4
import {atoms as a, select, useTheme} from '#/alf'
5
-
import {Check_Stroke2_Corner0_Rounded as SuccessIcon} from '#/components/icons/Check'
6
5
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
7
6
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
8
7
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
9
8
import {type ToastType} from '#/components/Toast/types'
10
9
import {Text} from '#/components/Typography'
10
+
import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '../icons/CircleCheck'
11
11
12
12
type ContextType = {
13
13
type: ToastType
14
14
}
15
15
16
16
export const ICONS = {
17
-
default: SuccessIcon,
18
-
success: SuccessIcon,
17
+
default: CircleCheck,
18
+
success: CircleCheck,
19
19
error: ErrorIcon,
20
20
warning: WarningIcon,
21
21
info: CircleInfo,
···
91
91
return useMemo(() => {
92
92
return {
93
93
default: {
94
-
backgroundColor: select(t.name, {
95
-
light: t.atoms.bg_contrast_25.backgroundColor,
96
-
dim: t.atoms.bg_contrast_100.backgroundColor,
97
-
dark: t.atoms.bg_contrast_100.backgroundColor,
98
-
}),
99
-
borderColor: select(t.name, {
100
-
light: t.atoms.border_contrast_low.borderColor,
101
-
dim: t.atoms.border_contrast_high.borderColor,
102
-
dark: t.atoms.border_contrast_high.borderColor,
103
-
}),
104
-
iconColor: select(t.name, {
105
-
light: t.atoms.text_contrast_medium.color,
106
-
dim: t.atoms.text_contrast_medium.color,
107
-
dark: t.atoms.text_contrast_medium.color,
108
-
}),
109
-
textColor: select(t.name, {
110
-
light: t.atoms.text_contrast_medium.color,
111
-
dim: t.atoms.text_contrast_medium.color,
112
-
dark: t.atoms.text_contrast_medium.color,
113
-
}),
94
+
backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
95
+
borderColor: t.atoms.border_contrast_high.borderColor,
96
+
iconColor: t.atoms.text.color,
97
+
textColor: t.atoms.text.color,
114
98
},
115
99
success: {
116
-
backgroundColor: select(t.name, {
117
-
light: t.palette.primary_100,
118
-
dim: t.palette.primary_100,
119
-
dark: t.palette.primary_50,
120
-
}),
121
-
borderColor: select(t.name, {
122
-
light: t.palette.primary_500,
123
-
dim: t.palette.primary_500,
124
-
dark: t.palette.primary_500,
125
-
}),
126
-
iconColor: select(t.name, {
127
-
light: t.palette.primary_500,
128
-
dim: t.palette.primary_600,
129
-
dark: t.palette.primary_600,
130
-
}),
131
-
textColor: select(t.name, {
132
-
light: t.palette.primary_500,
133
-
dim: t.palette.primary_600,
134
-
dark: t.palette.primary_600,
135
-
}),
100
+
backgroundColor: t.palette.primary_25,
101
+
borderColor: t.palette.primary_300,
102
+
iconColor: t.palette.primary_600,
103
+
textColor: t.palette.primary_600,
136
104
},
137
105
error: {
138
-
backgroundColor: select(t.name, {
139
-
light: t.palette.negative_200,
140
-
dim: t.palette.negative_25,
141
-
dark: t.palette.negative_25,
142
-
}),
106
+
backgroundColor: t.palette.negative_25,
143
107
borderColor: select(t.name, {
144
108
light: t.palette.negative_300,
145
109
dim: t.palette.negative_300,
146
110
dark: t.palette.negative_300,
147
111
}),
148
-
iconColor: select(t.name, {
149
-
light: t.palette.negative_600,
150
-
dim: t.palette.negative_600,
151
-
dark: t.palette.negative_600,
152
-
}),
153
-
textColor: select(t.name, {
154
-
light: t.palette.negative_600,
155
-
dim: t.palette.negative_600,
156
-
dark: t.palette.negative_600,
157
-
}),
112
+
iconColor: t.palette.negative_600,
113
+
textColor: t.palette.negative_600,
158
114
},
159
115
warning: {
160
-
backgroundColor: select(t.name, {
161
-
light: t.atoms.bg_contrast_25.backgroundColor,
162
-
dim: t.atoms.bg_contrast_100.backgroundColor,
163
-
dark: t.atoms.bg_contrast_100.backgroundColor,
164
-
}),
165
-
borderColor: select(t.name, {
166
-
light: t.atoms.border_contrast_low.borderColor,
167
-
dim: t.atoms.border_contrast_high.borderColor,
168
-
dark: t.atoms.border_contrast_high.borderColor,
169
-
}),
170
-
iconColor: select(t.name, {
171
-
light: t.atoms.text_contrast_medium.color,
172
-
dim: t.atoms.text_contrast_medium.color,
173
-
dark: t.atoms.text_contrast_medium.color,
174
-
}),
175
-
textColor: select(t.name, {
176
-
light: t.atoms.text_contrast_medium.color,
177
-
dim: t.atoms.text_contrast_medium.color,
178
-
dark: t.atoms.text_contrast_medium.color,
179
-
}),
116
+
backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
117
+
borderColor: t.atoms.border_contrast_high.borderColor,
118
+
iconColor: t.atoms.text.color,
119
+
textColor: t.atoms.text.color,
180
120
},
181
121
info: {
182
-
backgroundColor: select(t.name, {
183
-
light: t.atoms.bg_contrast_25.backgroundColor,
184
-
dim: t.atoms.bg_contrast_100.backgroundColor,
185
-
dark: t.atoms.bg_contrast_100.backgroundColor,
186
-
}),
187
-
borderColor: select(t.name, {
188
-
light: t.atoms.border_contrast_low.borderColor,
189
-
dim: t.atoms.border_contrast_high.borderColor,
190
-
dark: t.atoms.border_contrast_high.borderColor,
191
-
}),
192
-
iconColor: select(t.name, {
193
-
light: t.atoms.text_contrast_medium.color,
194
-
dim: t.atoms.text_contrast_medium.color,
195
-
dark: t.atoms.text_contrast_medium.color,
196
-
}),
197
-
textColor: select(t.name, {
198
-
light: t.atoms.text_contrast_medium.color,
199
-
dim: t.atoms.text_contrast_medium.color,
200
-
dark: t.atoms.text_contrast_medium.color,
201
-
}),
122
+
backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
123
+
borderColor: t.atoms.border_contrast_high.borderColor,
124
+
iconColor: t.atoms.text.color,
125
+
textColor: t.atoms.text.color,
202
126
},
203
127
}[type]
204
128
}, [t, type])