Just move styles into Toast component itself

src/components/Toast/Toast.tsx

@@ -1,8 +1,11 @@
 import {createContext, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, select, useTheme} from '#/alf'
-import {getToastTypeStyles, TOAST_TYPE_TO_ICON} from '#/components/Toast/style'
+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 ErrorIcon} from '#/components/icons/CircleInfo'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import {type ToastType} from '#/components/Toast/types'
 import {Text} from '#/components/Typography'
 
@@ -10,6 +13,14 @@ type ContextType = {
   type: ToastType
 }
 
+export const ICONS = {
+  default: SuccessIcon,
+  success: SuccessIcon,
+  error: ErrorIcon,
+  warning: WarningIcon,
+  info: CircleInfo,
+}
+
 const Context = createContext<ContextType>({
   type: 'default',
 })
@@ -22,9 +33,8 @@ export function Toast({
   content: React.ReactNode
 }) {
   const t = useTheme()
-  const toastTypeStyles = getToastTypeStyles(t)
+  const styles = useToastStyles({type})
-  const styles = toastTypeStyles[type]
+  const Icon = ICONS[type]
-  const Icon = TOAST_TYPE_TO_ICON[type]
 
   return (
     <Context.Provider value={useMemo(() => ({type}), [type])}>
@@ -58,10 +68,8 @@ export function Toast({
 }
 
 export function ToastText({children}: {children: React.ReactNode}) {
-  const t = useTheme()
-  const toastTypeStyles = getToastTypeStyles(t)
   const {type} = useContext(Context)
-  const styles = toastTypeStyles[type]
+  const {textColor} = useToastStyles({type})
   return (
     <Text
       style={[
@@ -69,10 +77,128 @@ export function ToastText({children}: {children: React.ReactNode}) {
         a.font_bold,
         a.leading_snug,
         {
-          color: styles.textColor,
+          color: textColor,
         },
       ]}>
       {children}
     </Text>
   )
 }
+
+function useToastStyles({type}: {type: ToastType}) {
+  const t = useTheme()
+  return useMemo(() => {
+    return {
+      default: {
+        backgroundColor: select(t.name, {
+          light: t.atoms.bg_contrast_25.backgroundColor,
+          dim: t.atoms.bg_contrast_100.backgroundColor,
+          dark: t.atoms.bg_contrast_100.backgroundColor,
+        }),
+        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: {
+        backgroundColor: select(t.name, {
+          light: t.palette.primary_100,
+          dim: t.palette.primary_100,
+          dark: t.palette.primary_50,
+        }),
+        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: {
+        backgroundColor: select(t.name, {
+          light: t.palette.negative_200,
+          dim: t.palette.negative_25,
+          dark: t.palette.negative_25,
+        }),
+        borderColor: select(t.name, {
+          light: t.palette.negative_300,
+          dim: t.palette.negative_300,
+          dark: t.palette.negative_300,
+        }),
+        iconColor: select(t.name, {
+          light: 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: {
+        backgroundColor: select(t.name, {
+          light: t.atoms.bg_contrast_25.backgroundColor,
+          dim: t.atoms.bg_contrast_100.backgroundColor,
+          dark: t.atoms.bg_contrast_100.backgroundColor,
+        }),
+        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: {
+        backgroundColor: select(t.name, {
+          light: t.atoms.bg_contrast_25.backgroundColor,
+          dim: t.atoms.bg_contrast_100.backgroundColor,
+          dark: t.atoms.bg_contrast_100.backgroundColor,
+        }),
+        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]
+  }, [t, type])
+}

src/components/Toast/style.ts

@@ -1,126 +0,0 @@
-import {select, type Theme} 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 ErrorIcon} from '#/components/icons/CircleInfo'
-import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
-
-export const TOAST_TYPE_TO_ICON = {
-  default: SuccessIcon,
-  success: SuccessIcon,
-  error: ErrorIcon,
-  warning: WarningIcon,
-  info: CircleInfo,
-}
-
-export const getToastTypeStyles = (t: Theme) => ({
-  default: {
-    backgroundColor: select(t.name, {
-      light: t.atoms.bg_contrast_25.backgroundColor,
-      dim: t.atoms.bg_contrast_100.backgroundColor,
-      dark: t.atoms.bg_contrast_100.backgroundColor,
-    }),
-    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: {
-    backgroundColor: select(t.name, {
-      light: t.palette.primary_100,
-      dim: t.palette.primary_100,
-      dark: t.palette.primary_50,
-    }),
-    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: {
-    backgroundColor: select(t.name, {
-      light: t.palette.negative_200,
-      dim: t.palette.negative_25,
-      dark: t.palette.negative_25,
-    }),
-    borderColor: select(t.name, {
-      light: t.palette.negative_300,
-      dim: t.palette.negative_300,
-      dark: t.palette.negative_300,
-    }),
-    iconColor: select(t.name, {
-      light: 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: {
-    backgroundColor: select(t.name, {
-      light: t.atoms.bg_contrast_25.backgroundColor,
-      dim: t.atoms.bg_contrast_100.backgroundColor,
-      dark: t.atoms.bg_contrast_100.backgroundColor,
-    }),
-    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: {
-    backgroundColor: select(t.name, {
-      light: t.atoms.bg_contrast_25.backgroundColor,
-      dim: t.atoms.bg_contrast_100.backgroundColor,
-      dark: t.atoms.bg_contrast_100.backgroundColor,
-    }),
-    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,
-    }),
-  },
-})