feat(components): add new link props and theme

- Add new colors - Add text, hover, icon variables

BREAKING CHANGE: changed the name of the variables from the past versions

Author: raferdev

src/components/Link/iconVariants.tsx

@@ -10,7 +10,6 @@ const iconVariants = cva('group-hover:fill-none', {
       twitter: 'fill-celestial-500',
       instagram: 'fill-amethyst-400',
       storybook: 'fill-rose-200',
-      'bell-plus': 'fill-yellow-200',
       home: 'fill-steal-800',
       white: 'fill-white',
       none: '',

src/components/Link/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { LinkProps } from '@/@types/components'
 import { cn } from '@/utils/cn'
 
@@ -12,8 +11,8 @@ const Link = ({
   variant = 'decorated',
   iconName,
   hover,
-  color,
-  text,
+  iconColor,
+  textColor,
   background,
   size,
   children,
@@ -25,16 +24,16 @@ const Link = ({
   return (
     <a
       className={cn(
-        linkVariants({ variant, text, size, className, background, hover })
+        linkVariants({ variant, textColor, size, className, background, hover })
       )}
       {...props}
     >
       <span>
         {Icon && (
           <Icon
             size={22}
-            strokeWidth={1.8}
-            color={color || '#171717'}
+            strokeWidth={1.4}
+            color={iconColor || '#171717'}
             className={cn(iconVariants({ color: iconFillColor }))}
           />
         )}

src/components/Link/linkVariants.tsx

@@ -16,25 +16,26 @@ const linkVariants = cva(
         black3: 'bg-black/30',
         none: '',
       },
-      text: {
+      textColor: {
         black: '[&>span]:text-neutral-800 [&>span]:hover:text-white',
         gray: '[&>span]:text-neutral-300 ',
         white: '[&>span]:text-white ',
       },
       hover: {
-        green: 'hover:bg-lime-300/30',
-        cyan: 'hover:bg-cyan-300/30',
-        textGreen: 'hover:text-lime-300',
+        bgGreen: 'hover:bg-lime-300/30',
+        bgCyan: 'hover:bg-cyan-300/30',
+        textYellow: 'hover:text-yellow-500',
       },
       size: {
-        normal: 'h-12 w-full',
+        normal: 'h-12 w-full  min-w-[200px]',
         none: '',
+        sm: 'm-0 inline-block w-0 min-w-min p-0 text-base sm:text-lg md:min-w-min',
       },
     },
     defaultVariants: {
       variant: 'decorated',
       size: 'normal',
-      hover: 'green',
+      hover: 'bgGreen',
       background: 'white',
     },
   }