Merge pull request #2303 from gluestack/fix/docs-color-combination

Fix/docs color combination

Author: Viraj-10

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

@@ -433,8 +433,9 @@ The Examples section provides visual representations of the different variants o
                 return (
                   <Toast
                     action="error"
+                    variant="outline"
                     nativeID={uniqueToastId}
-                    className="p-4 gap-6 w-full shadow-hard-5 max-w-[443px] flex-row justify-between"
+                    className="p-4 gap-6 border-error-500 w-full shadow-hard-5 max-w-[443px] flex-row justify-between"
                   >
                     <HStack space="md">
                       <Icon
@@ -443,18 +444,18 @@ The Examples section provides visual representations of the different variants o
                         size="lg"
                       />
                       <VStack space="xs">
-                        <ToastTitle className="font-semibold">Error!</ToastTitle>
-                        <ToastDescription className="text-typography-100" size="sm">
+                        <ToastTitle className="font-semibold text-error-500">Error!</ToastTitle>
+                        <ToastDescription size="sm">
                           Something went wrong.
                         </ToastDescription>
                       </VStack>
                     </HStack>
                     <HStack className="min-[450px]:gap-3 gap-1">
                       <Button variant="link" size="sm" className="px-3.5 self-center">
-                        <ButtonText className="text-typography-0 group-hover/button:text-typography-50">Retry</ButtonText>
+                        <ButtonText>Retry</ButtonText>
                       </Button>
                       <Pressable onPress={() => toast.close(id)}>
-                        <Icon as={CloseIcon} className="stroke-background-0" />
+                        <Icon as={CloseIcon} />
                       </Pressable>
                     </HStack>
                   </Toast>

example/storybook-nativewind/src/extra-components/nativewind/Demos/ModalDemo.tsx

@@ -61,7 +61,6 @@ const ModalDemo = () => {
             </Button>
             <Button
               size="sm"
-              action="positive"
               onPress={() => {
                 setShowModal(false);
               }}

example/storybook-nativewind/src/hooks/useMediaQuery/index.nw.stories.mdx

@@ -68,7 +68,7 @@ import Wrapper from '../../core-components/nativewind/Wrapper';
         <Box
           className={
             'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
-            (isMobile ? 'border-green-500 bg-green-50' : '')
+            (isMobile ? 'border-primary-500 bg-background-50' : '')
           }
         >
           <Icon as={Smartphone} size={'xs'} />
@@ -77,7 +77,7 @@ import Wrapper from '../../core-components/nativewind/Wrapper';
         <Box
           className={
             'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
-            (isTablet ? 'border-green-500 bg-green-50' : '')
+            (isTablet ? 'border-primary-500 bg-background-50' : '')
           }
         >
           <Icon as={Tablet} size="sm" />
@@ -86,7 +86,7 @@ import Wrapper from '../../core-components/nativewind/Wrapper';
         <Box
           className={
             'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
-            (isSmallScreen ? 'border-green-500 bg-green-50' : '')
+            (isSmallScreen ? 'border-primary-500 bg-background-50' : '')
           }
         >
           <Icon as={Laptop} size="sm" />
@@ -95,7 +95,7 @@ import Wrapper from '../../core-components/nativewind/Wrapper';
         <Box
           className={
             'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
-            (isLargeScreen ? 'border-green-500 bg-green-50' : '')
+            (isLargeScreen ? 'border-primary-500 bg-background-50' : '')
           }
         >
           <Icon as={Tv} size="sm" />

example/storybook-nativewind/src/hooks/useMediaQuery/useMediaQuery.tsx

@@ -31,7 +31,7 @@ const UseMediaQueryBasic = ({ ...props }: any) => {
         <Box
           className={
             'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
-            (isMobile ? 'border-green-500 bg-green-50' : '')
+            (isMobile ? 'border-primary-500 bg-background-50' : '')
           }
         >
           <Icon as={Smartphone} size={'xs'} />
@@ -40,7 +40,7 @@ const UseMediaQueryBasic = ({ ...props }: any) => {
         <Box
           className={
             'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
-            (isTablet ? 'border-green-500 bg-green-50' : '')
+            (isTablet ? 'border-primary-500 bg-background-50' : '')
           }
         >
           <Icon as={Tablet} />
@@ -49,7 +49,7 @@ const UseMediaQueryBasic = ({ ...props }: any) => {
         <Box
           className={
             'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
-            (isSmallScreen ? 'border-green-500 bg-green-50' : '')
+            (isSmallScreen ? 'border-primary-500 bg-background-50' : '')
           }
         >
           <Icon as={Laptop} />
@@ -58,7 +58,7 @@ const UseMediaQueryBasic = ({ ...props }: any) => {
         <Box
           className={
             'border justify-center items-center w-[120px] h-[80px] rounded gap-2 ' +
-            (isLargeScreen ? 'border-green-500 bg-green-50' : '')
+            (isLargeScreen ? 'border-primary-500 bg-background-50' : '')
           }
         >
           <Icon as={Tv} />