Update swatch

components/product/Swatch/Swatch.module.css

@@ -1,8 +1,10 @@
 .root {
   composes: root from 'components/ui/Button/Button.module.css';
-  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
+  @apply h-12 p-0 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
-  p-0 shadow-none border-gray-200 border box-border;
+   shadow-none border-gray-200 border box-border;
+
+  min-width: 3em;
 
   & > span {
     @apply absolute;
@@ -13,6 +15,10 @@
   }
 }
 
+.size {
+  @apply px-3;
+}
+
 .color {
   @apply text-black transition duration-150 ease-in-out;
 

components/product/Swatch/Swatch.tsx

@@ -21,14 +21,14 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   active,
   ...props
 }) => {
-  variant = variant?.toLowerCase()
   label = label?.toLowerCase()
+  const isColor = color !== ''
 
   const rootClassName = cn(
     s.root,
     {
       [s.active]: active,
-      [s.size]: variant === 'size',
+      [s.size]: !isColor,
       [s.color]: color,
       [s.dark]: color ? isDark(color) : false,
     },
@@ -38,16 +38,18 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   return (
     <Button
       className={rootClassName}
-      style={color ? { backgroundColor: color } : {}}
+      style={isColor ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
+      {...(isColor && { title: label })}
       {...props}
     >
-      {variant === 'color' && active && (
+      {isColor ? (
         <span>
           <Check />
         </span>
+      ) : (
+        label
       )}
-      {variant !== 'color' ? label : null}
     </Button>
   )
 }

framework/shopify/utils/normalize.ts

@@ -16,6 +16,7 @@ import {
 import type { Cart, LineItem } from '../types'
 
 import type { Page } from '../common/get-all-pages'
+import { colorMap } from '@lib/colors'
 
 const money = ({ amount, currencyCode }: MoneyV2) => {
   return {
@@ -38,9 +39,12 @@ const normalizeProductOption = ({
         label: value,
       }
       if (displayName.match(/colou?r/gi)) {
-        output = {
+        const mapedColor = colorMap[value]
-          ...output,
+        if (mapedColor) {
-          hexColors: [value],
+          output = {
+            ...output,
+            hexColors: [mapedColor],
+          }
         }
       }
 

lib/colors.ts

@@ -42,7 +42,7 @@ function hexToRgb(hex: string = '') {
   return [r, g, b]
 }
 
-const colorMap: Record<string, string> = {
+export const colorMap: Record<string, string> = {
   aliceblue: '#F0F8FF',
   antiquewhite: '#FAEBD7',
   aqua: '#00FFFF',
@@ -56,6 +56,8 @@ const colorMap: Record<string, string> = {
   blueviolet: '#8A2BE2',
   brown: '#A52A2A',
   burlywood: '#DEB887',
+  burgandy: '#800020',
+  burgundy: '#800020',
   cadetblue: '#5F9EA0',
   chartreuse: '#7FFF00',
   chocolate: '#D2691E',