fix: issues reported by designer

Author: Rajat Chaudhary

example/storybook-nativewind/src/components/Alert/Alert.stories.tsx

@@ -13,7 +13,7 @@ const AlertMeta: ComponentMeta<typeof Alert> = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['solid', 'accent', 'outline'],
+      options: ['solid', 'outline'],
     },
     action: {
       control: 'select',

example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx

@@ -80,7 +80,7 @@ This is an illustration of **Alert** component.
         },
         variant: {
           control: 'select',
-          options: ['accent', 'solid', 'outline'],
+          options: ['solid', 'outline'],
           default: 'solid',
         },
       },
@@ -214,7 +214,7 @@ Alert component is created using View component from react-native. It extends al
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>solid | outline | accent</Table.TText>
+            <Table.TText>solid | outline</Table.TText>
           </Table.TD>
           <Table.TD>
             <Table.TText>solid</Table.TText>

example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx

@@ -14,21 +14,20 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 const SCOPE = 'ALERT';
 
 const alertStyle = tva({
-  base: 'items-center py-3 px-4 rounded-md flex-row gap-2',
+  base: 'items-center py-3 px-4 rounded-md flex-row gap-2 border-outline-100',
 
   variants: {
     action: {
-      error: 'bg-background-error border-error-300 ',
-      warning: 'bg-background-warning border-warning-300',
-      success: 'bg-background-success border-success-300',
-      info: 'bg-background-info border-info-300',
-      muted: 'bg-background-muted border-muted-300',
+      error: 'bg-background-error',
+      warning: 'bg-background-warning',
+      success: 'bg-background-success',
+      info: 'bg-background-info',
+      muted: 'bg-background-muted',
     },
 
     variant: {
       solid: '',
-      outline: 'border bg-transparent',
-      accent: 'border-l-4',
+      outline: 'border bg-background-0',
     },
   },
 });
@@ -72,6 +71,15 @@ const alertTextStyle = tva({
       true: 'bg-yellow-500',
     },
   },
+  parentVariants: {
+    action: {
+      error: 'text-error-800',
+      warning: 'text-warning-800',
+      success: 'text-success-800',
+      info: 'text-info-800',
+      muted: 'text-muted-800',
+    },
+  },
 });
 
 const alertIconStyle = tva({
@@ -88,11 +96,11 @@ const alertIconStyle = tva({
   },
   parentVariants: {
     action: {
-      error: 'text-error-500',
-      warning: 'text-warning-500',
-      success: 'text-success-500',
-      info: 'text-info-500',
-      muted: 'text-secondary-500',
+      error: 'text-error-800',
+      warning: 'text-warning-800',
+      success: 'text-success-800',
+      info: 'text-info-800',
+      muted: 'text-secondary-800',
     },
   },
 });
@@ -214,6 +222,7 @@ const AlertText = React.forwardRef(
     }: { className?: string } & IAlertTextProps,
     ref?: any
   ) => {
+    const { action: parentAction } = useStyleContext(SCOPE);
     return (
       <UIAlert.Text
         // @ts-ignore
@@ -227,6 +236,9 @@ const AlertText = React.forwardRef(
           italic,
           highlight,
           class: className,
+          parentVariants: {
+            action: parentAction,
+          },
         })}
         {...props}
         ref={ref}