fix(toast): action button highlight color

Author: vvv-sss

example/src/app/(home)/components/toast.tsx

@@ -80,7 +80,12 @@ const MyToast1 = (props: ToastComponentProps) => {
   const { id, hide } = props;
 
   return (
-    <Toast variant="accent" className="flex-row items-center gap-3" {...props}>
+    <Toast
+      variant="success"
+      duration="persistent"
+      className="flex-row items-center gap-3"
+      {...props}
+    >
       <View className="flex-1">
         <Toast.Label>{id}</Toast.Label>
         <Toast.Description>

src/components/button/button.styles.ts

@@ -8,10 +8,10 @@ const root = tv({
     variant: {
       primary: 'bg-accent',
       secondary: 'bg-default',
-      tertiary: 'bg-default border border-border',
+      tertiary: 'bg-default',
       ghost: 'bg-transparent',
       destructive: 'bg-danger',
-      ['destructive-soft']: 'bg-default border border-border',
+      ['destructive-soft']: 'bg-default',
     },
     size: {
       sm: 'h-[36px] px-3.5 gap-1.5',

src/components/toast/toast.tsx

@@ -4,7 +4,7 @@ import { GestureDetector } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import { CloseIcon } from '../../helpers/components/close-icon';
 import { Text } from '../../helpers/components/text';
-import { cn } from '../../helpers/theme';
+import { cn, useThemeColor } from '../../helpers/theme';
 import type { ViewRef } from '../../helpers/types';
 import { createContext } from '../../helpers/utils';
 import * as ToastPrimitive from '../../primitives/toast';
@@ -13,6 +13,7 @@ import type {
   ToastShowOptions,
 } from '../../providers/toast';
 import { Button } from '../button';
+import type { PressableFeedbackHighlightRootAnimation } from '../pressable-feedback';
 import { useToastRootAnimation } from './toast.animation';
 import { DISPLAY_NAME } from './toast.constants';
 import { useToastDuration } from './toast.hooks';
@@ -106,10 +107,8 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
           </AnimatedToastRoot>
           {/* Static toast instance */}
           <AnimatedToastRoot
-            className={cn(
-              tvStyles,
-              'absolute top-[200px] opacity-0 pointer-events-none'
-            )}
+            pointerEvents="none"
+            className={cn(tvStyles, 'absolute opacity-0')}
             style={[styleSheet.root, style]}
             onLayout={(event) => {
               const measuredHeight = event.nativeEvent.layout.height;
@@ -172,6 +171,39 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
 
   const { variant: toastVariant } = useToast();
 
+  const tvStyles = toastStyles.action({
+    variant: toastVariant,
+    className,
+  });
+
+  const themeColorDefaultHover = useThemeColor('default-hover');
+  const themeColorAccentHover = useThemeColor('accent-hover');
+  const themeColorSuccessHover = useThemeColor('success-hover');
+  const themeColorWarningHover = useThemeColor('warning-hover');
+  const themeColorDangerHover = useThemeColor('danger-hover');
+
+  const highlightColorMap = useMemo(() => {
+    switch (toastVariant) {
+      case 'default':
+        return themeColorDefaultHover;
+      case 'accent':
+        return themeColorAccentHover;
+      case 'success':
+        return themeColorSuccessHover;
+      case 'warning':
+        return themeColorWarningHover;
+      case 'danger':
+        return themeColorDangerHover;
+    }
+  }, [
+    toastVariant,
+    themeColorDefaultHover,
+    themeColorAccentHover,
+    themeColorSuccessHover,
+    themeColorWarningHover,
+    themeColorDangerHover,
+  ]);
+
   const buttonVariant = useMemo(() => {
     if (variant) return variant;
 
@@ -185,17 +217,23 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
     }
   }, [toastVariant, variant]);
 
-  const tvStyles = toastStyles.action({
-    variant: toastVariant,
-    className,
-  });
+  const animationConfig = useMemo<PressableFeedbackHighlightRootAnimation>(
+    () => ({
+      highlight: {
+        backgroundColor: { value: highlightColorMap },
+        opacity: { value: [0, 1] },
+      },
+    }),
+    [highlightColorMap]
+  );
 
   return (
     <Button
       ref={ref}
       variant={buttonVariant}
       size={size}
       className={tvStyles}
+      animation={animationConfig}
       {...restProps}
     >
       {children}