Latest Changes - Logger, Size and Colors

components/product/Swatch/Swatch.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply h-12 w-12 bg-primary text-base rounded-full mr-3 inline-flex
+  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-75 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
 }
@@ -11,19 +11,3 @@
 .root:hover {
   @apply transform scale-110 bg-hover;
 }
-
-.colorViolet {
-  @apply bg-violet !important;
-}
-
-.colorPink {
-  @apply bg-pink !important;
-}
-
-.colorBlack {
-  @apply bg-black !important;
-}
-
-.colorWhite {
-  @apply bg-white text-black !important;
-}

components/product/Swatch/Swatch.tsx

@@ -5,16 +5,18 @@ import { Colors } from '@components/ui/types'
 import { Check } from '@components/icon'
 import Button, { ButtonProps } from '@components/ui/Button'
 
-interface Props extends ButtonProps {
-  className?: string
-  children?: any
+interface Props {
   active?: boolean
+  children?: any
+  className?: string
   label?: string
   variant?: 'size' | 'color' | string
+  color?: string
 }
 
-const Swatch: FC<Props> = ({
+const Swatch: FC<Props & ButtonProps> = ({
   className,
+  color,
   label,
   variant = 'size',
   active,
@@ -22,22 +24,21 @@ const Swatch: FC<Props> = ({
 }) => {
   variant = variant?.toLowerCase()
   label = label?.toLowerCase()
-
+  console.log(variant)
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
       [s.size]: variant === 'size',
-      [s.colorPink]: label === 'pink',
-      [s.colorWhite]: label === 'white',
-      [s.colorBlack]: label === 'black',
-      [s.colorViolet]: label === 'violet',
     },
     className
   )
 
   return (
-    <Button className={rootClassName}>
+    <Button
+      className={rootClassName}
+      style={color ? { backgroundColor: color } : {}}
+    >
       {variant === 'color' && active && (
         <span
           className={cn('absolute', {