acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

[APP-1365]: Ensure toast text meets a11y guidelines (#8779)

Browse Source 
* update: toast colors for accessibility

* update: toast color codes from figma

* condense the colors to remove select calls that are unecessary

* remove unused select
This commit is contained in:
Anastasiya Uraleva
2025-08-06 14:27:44 -07:00
committed by GitHub
parent 75094f4860
commit 909ddc86e1
1 changed files with 22 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Toast/Toast.tsx
+22 -98
View File
@@ -2,20 +2,20 @@ import {createContext, useContext, useMemo} from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {atoms as a, select, useTheme} from '#/alf' import {atoms as a, select, useTheme} from '#/alf'
import {Check_Stroke2_Corner0_Rounded as SuccessIcon} from '#/components/icons/Check'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
import {type ToastType} from '#/components/Toast/types' import {type ToastType} from '#/components/Toast/types'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '../icons/CircleCheck'
type ContextType = { type ContextType = {
type: ToastType type: ToastType
} }
export const ICONS = { export const ICONS = {
default: SuccessIcon, default: CircleCheck,
success: SuccessIcon, success: CircleCheck,
error: ErrorIcon, error: ErrorIcon,
warning: WarningIcon, warning: WarningIcon,
info: CircleInfo, info: CircleInfo,
@@ -91,114 +91,38 @@ function useToastStyles({type}: {type: ToastType}) {
return useMemo(() => { return useMemo(() => {
return { return {
default: { default: {
backgroundColor: select(t.name, { backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
light: t.atoms.bg_contrast_25.backgroundColor, borderColor: t.atoms.border_contrast_high.borderColor,
dim: t.atoms.bg_contrast_100.backgroundColor, iconColor: t.atoms.text.color,
dark: t.atoms.bg_contrast_100.backgroundColor, textColor: t.atoms.text.color,
}),
borderColor: select(t.name, {
light: t.atoms.border_contrast_low.borderColor,
dim: t.atoms.border_contrast_high.borderColor,
dark: t.atoms.border_contrast_high.borderColor,
}),
iconColor: select(t.name, {
light: t.atoms.text_contrast_medium.color,
dim: t.atoms.text_contrast_medium.color,
dark: t.atoms.text_contrast_medium.color,
}),
textColor: select(t.name, {
light: t.atoms.text_contrast_medium.color,
dim: t.atoms.text_contrast_medium.color,
dark: t.atoms.text_contrast_medium.color,
}),
}, },
success: { success: {
backgroundColor: select(t.name, { backgroundColor: t.palette.primary_25,
light: t.palette.primary_100, borderColor: t.palette.primary_300,
dim: t.palette.primary_100, iconColor: t.palette.primary_600,
dark: t.palette.primary_50, textColor: t.palette.primary_600,
}),
borderColor: select(t.name, {
light: t.palette.primary_500,
dim: t.palette.primary_500,
dark: t.palette.primary_500,
}),
iconColor: select(t.name, {
light: t.palette.primary_500,
dim: t.palette.primary_600,
dark: t.palette.primary_600,
}),
textColor: select(t.name, {
light: t.palette.primary_500,
dim: t.palette.primary_600,
dark: t.palette.primary_600,
}),
}, },
error: { error: {
backgroundColor: select(t.name, { backgroundColor: t.palette.negative_25,
light: t.palette.negative_200,
dim: t.palette.negative_25,
dark: t.palette.negative_25,
}),
borderColor: select(t.name, { borderColor: select(t.name, {
light: t.palette.negative_300, light: t.palette.negative_300,
dim: t.palette.negative_300, dim: t.palette.negative_300,
dark: t.palette.negative_300, dark: t.palette.negative_300,
}), }),
iconColor: select(t.name, { iconColor: t.palette.negative_600,
light: t.palette.negative_600, textColor: t.palette.negative_600,
dim: t.palette.negative_600,
dark: t.palette.negative_600,
}),
textColor: select(t.name, {
light: t.palette.negative_600,
dim: t.palette.negative_600,
dark: t.palette.negative_600,
}),
}, },
warning: { warning: {
backgroundColor: select(t.name, { backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
light: t.atoms.bg_contrast_25.backgroundColor, borderColor: t.atoms.border_contrast_high.borderColor,
dim: t.atoms.bg_contrast_100.backgroundColor, iconColor: t.atoms.text.color,
dark: t.atoms.bg_contrast_100.backgroundColor, textColor: t.atoms.text.color,
}),
borderColor: select(t.name, {
light: t.atoms.border_contrast_low.borderColor,
dim: t.atoms.border_contrast_high.borderColor,
dark: t.atoms.border_contrast_high.borderColor,
}),
iconColor: select(t.name, {
light: t.atoms.text_contrast_medium.color,
dim: t.atoms.text_contrast_medium.color,
dark: t.atoms.text_contrast_medium.color,
}),
textColor: select(t.name, {
light: t.atoms.text_contrast_medium.color,
dim: t.atoms.text_contrast_medium.color,
dark: t.atoms.text_contrast_medium.color,
}),
}, },
info: { info: {
backgroundColor: select(t.name, { backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
light: t.atoms.bg_contrast_25.backgroundColor, borderColor: t.atoms.border_contrast_high.borderColor,
dim: t.atoms.bg_contrast_100.backgroundColor, iconColor: t.atoms.text.color,
dark: t.atoms.bg_contrast_100.backgroundColor, textColor: t.atoms.text.color,
}),
borderColor: select(t.name, {
light: t.atoms.border_contrast_low.borderColor,
dim: t.atoms.border_contrast_high.borderColor,
dark: t.atoms.border_contrast_high.borderColor,
}),
iconColor: select(t.name, {
light: t.atoms.text_contrast_medium.color,
dim: t.atoms.text_contrast_medium.color,
dark: t.atoms.text_contrast_medium.color,
}),
textColor: select(t.name, {
light: t.atoms.text_contrast_medium.color,
dim: t.atoms.text_contrast_medium.color,
dark: t.atoms.text_contrast_medium.color,
}),
}, },
}[type] }[type]
}, [t, type]) }, [t, type])