UI Changes

components/product/Swatch/Swatch.module.css

@@ -1,13 +1,32 @@
 .root {
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-100 ease-in-out
-  p-0 shadow-none border-gray-200 border box-border text-black;
+  p-0 shadow-none border-gray-200 border box-border;
+
+  & > span {
+    @apply absolute;
+  }
+
+  &:hover {
+    @apply transform scale-110 bg-hover;
+  }
 }
 
-.active.size {
-  @apply border-accents-9 border-2;
+.color {
+  @apply text-black transition duration-100 ease-in-out;
+
+  &:hover {
+    @apply text-black;
+  }
+
+  &.dark,
+  &.dark:hover {
+    color: white !important;
+  }
 }
 
-.root:hover {
-  @apply transform scale-110 bg-hover;
+.active {
+  &.size {
+    @apply border-accents-9 border-2;
+  }
 }

components/product/Swatch/Swatch.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const Swatch: FC<Props & ButtonProps> = ({
   className,
-  color,
+  color = '',
   label,
   variant = 'size',
   active,
@@ -23,13 +23,14 @@ const Swatch: FC<Props & ButtonProps> = ({
 }) => {
   variant = variant?.toLowerCase()
   label = label?.toLowerCase()
-  const isDarkBg = isDark(color)
 
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
       [s.size]: variant === 'size',
+      [s.color]: color,
+      [s.dark]: color ? isDark(color) : false,
     },
     className
   )
@@ -41,11 +42,7 @@ const Swatch: FC<Props & ButtonProps> = ({
       {...props}
     >
       {variant === 'color' && active && (
-        <span
-          className={cn('absolute', {
-            'text-white': isDarkBg,
-          })}
-        >
+        <span>
           <Check />
         </span>
       )}