Utilities to handle Colors

components/product/ProductView/ProductView.tsx

@@ -110,6 +110,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
                         label={v.label}
                         onClick={() => {
                           setChoices((choices) => {
+                            console.log(choices)
                             return {
                               ...choices,
                               [opt.displayName]: v.label,

components/product/Swatch/Swatch.module.css

@@ -1,7 +1,7 @@
 .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;
+  p-0 shadow-none border-gray-200 border box-border text-black;
 }
 
 .active.size {

components/product/Swatch/Swatch.tsx

@@ -1,10 +1,9 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Swatch.module.css'
-import { Colors } from '@components/ui/types'
 import { Check } from '@components/icon'
 import Button, { ButtonProps } from '@components/ui/Button'
-
+import { isDark } from '@lib/colors'
 interface Props {
   active?: boolean
   children?: any
@@ -24,6 +23,7 @@ const Swatch: FC<Props & ButtonProps> = ({
 }) => {
   variant = variant?.toLowerCase()
   label = label?.toLowerCase()
+  const isDarkBg = isDark(color)
 
   const rootClassName = cn(
     s.root,
@@ -43,8 +43,7 @@ const Swatch: FC<Props & ButtonProps> = ({
       {variant === 'color' && active && (
         <span
           className={cn('absolute', {
-            'text-white': label !== 'white',
-            'text-black': label === 'white',
+            'text-white': isDarkBg,
           })}
         >
           <Check />