Toast tweaks (#8791)

* Tweak colors

* Fix e2e

* Color tweaks

* Fix alignment

src/components/Toast/Toast.tsx

@@ -1,7 +1,7 @@
 import {createContext, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 
-import {atoms as a, select, useTheme} from '#/alf'
+import {atoms as a, select, useAlf, useTheme} from '#/alf'
 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'
@@ -32,9 +32,19 @@ export function Toast({
   type: ToastType
   content: React.ReactNode
 }) {
+  const {fonts} = useAlf()
   const t = useTheme()
   const styles = useToastStyles({type})
   const Icon = ICONS[type]
+  /**
+   * Vibes-based number, adjusts `top` of `View` that wraps the text to
+   * compensate for different type sizes and keep the first line of text
+   * aligned with the icon. - esb
+   */
+  const fontScaleCompensation = useMemo(
+    () => parseInt(fonts.scale) * -1 * 0.65,
+    [fonts.scale],
+  )
 
   return (
     <Context.Provider value={useMemo(() => ({type}), [type])}>
@@ -56,7 +66,13 @@ export function Toast({
         ]}>
         <Icon size="md" fill={styles.iconColor} />
 
-        <View style={[a.flex_1]}>
+        <View
+          style={[
+            a.flex_1,
+            {
+              top: fontScaleCompensation,
+            },
+          ]}>
           {typeof content === 'string' ? (
             <ToastText>{content}</ToastText>
           ) : (
@@ -92,35 +108,55 @@ function useToastStyles({type}: {type: ToastType}) {
     return {
       default: {
         backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
-        borderColor: t.atoms.border_contrast_high.borderColor,
+        borderColor: t.atoms.border_contrast_low.borderColor,
         iconColor: t.atoms.text.color,
         textColor: t.atoms.text.color,
       },
       success: {
         backgroundColor: t.palette.primary_25,
-        borderColor: t.palette.primary_300,
+        borderColor: select(t.name, {
-        iconColor: t.palette.primary_600,
+          light: t.palette.primary_300,
-        textColor: t.palette.primary_600,
+          dim: t.palette.primary_200,
+          dark: t.palette.primary_100,
+        }),
+        iconColor: select(t.name, {
+          light: t.palette.primary_600,
+          dim: t.palette.primary_700,
+          dark: t.palette.primary_700,
+        }),
+        textColor: select(t.name, {
+          light: t.palette.primary_600,
+          dim: t.palette.primary_700,
+          dark: t.palette.primary_700,
+        }),
       },
       error: {
         backgroundColor: t.palette.negative_25,
         borderColor: select(t.name, {
-          light: t.palette.negative_300,
+          light: t.palette.negative_200,
-          dim: t.palette.negative_300,
+          dim: t.palette.negative_200,
-          dark: t.palette.negative_300,
+          dark: t.palette.negative_100,
+        }),
+        iconColor: select(t.name, {
+          light: t.palette.negative_700,
+          dim: t.palette.negative_900,
+          dark: t.palette.negative_900,
+        }),
+        textColor: select(t.name, {
+          light: t.palette.negative_700,
+          dim: t.palette.negative_900,
+          dark: t.palette.negative_900,
         }),
-        iconColor: t.palette.negative_600,
-        textColor: t.palette.negative_600,
       },
       warning: {
         backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
-        borderColor: t.atoms.border_contrast_high.borderColor,
+        borderColor: t.atoms.border_contrast_low.borderColor,
         iconColor: t.atoms.text.color,
         textColor: t.atoms.text.color,
       },
       info: {
         backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
-        borderColor: t.atoms.border_contrast_high.borderColor,
+        borderColor: t.atoms.border_contrast_low.borderColor,
         iconColor: t.atoms.text.color,
         textColor: t.atoms.text.color,
       },

src/components/Toast/index.e2e.tsx

@@ -1,5 +1,9 @@
+import {type ToastApi} from '#/components/Toast/types'
+
 export function ToastContainer() {
   return null
 }
 
-export function show() {}
+export const toast: ToastApi = {
+  show() {},
+}