Utilities to handle Colors

components/icon/ArrowLeft.tsx

@@ -10,15 +10,15 @@ const ArrowLeft = ({ ...props }) => {
     >
       <path
         d="M19 12H5"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 19L5 12L12 5"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/icon/Check.tsx

@@ -10,9 +10,9 @@ const Check = ({ ...props }) => {
     >
       <path
         d="M20 6L9 17L4 12"
-        stroke-width="2"
+        strokeWidth="2"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/icon/Minus.tsx

@@ -4,9 +4,9 @@ const Minus = ({ ...props }) => {
       <path
         d="M5 12H19"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/icon/Plus.tsx

@@ -4,16 +4,16 @@ const Plus = ({ ...props }) => {
       <path
         d="M12 5V19"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
       <path
         d="M5 12H19"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

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-white': isDarkBg,
-            'text-black': label === 'white',
           })}
         >
           <Check />

lib/colors.ts

@@ -14,3 +14,36 @@ export function getRandomPairOfColors() {
   // Returns a pair of colors
   return [colors[idx], colors[idx2]]
 }
+
+function hexToRgb(hex: string = '') {
+  const match = hex.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i)
+
+  if (!match) {
+    return [0, 0, 0]
+  }
+
+  let colorString = match[0]
+
+  if (match[0].length === 3) {
+    colorString = colorString
+      .split('')
+      .map((char: string) => {
+        return char + char
+      })
+      .join('')
+  }
+
+  const integer = parseInt(colorString, 16)
+  const r = (integer >> 16) & 0xff
+  const g = (integer >> 8) & 0xff
+  const b = integer & 0xff
+
+  return [r, g, b]
+}
+
+export function isDark(color = '') {
+  // Equation from http://24ways.org/2010/calculating-color-contrast
+  const rgb = hexToRgb(color)
+  const res = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
+  return res < 128
+}