@pradip1995/segment-product-card 0.3.20 → 0.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.20",
+  "version": "0.3.23",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,13 +17,10 @@
     "./product-scroll": "./src/product-scroll.tsx",
     "./product-rail-variants": "./src/product-rail-variants.tsx"
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
+    "@pradip1995/segment-animation-login-popup": "*",
     "next": ">=15",
     "react": ">=19",
     "react-dom": ">=19"
@@ -33,9 +30,17 @@
     "@pradip1995/segment-tokens": "^0.3.7"
   },
   "devDependencies": {
+    "@medusajs/types": "^2.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
     "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "next": ">=15",
     "react": "19.0.3",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "@pradip1995/segment-animation-login-popup": "0.1.1"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
   }
-}
+}

package/src/beauty-product-card.tsx

@@ -5,6 +5,10 @@ import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import type { HttpTypes } from "@medusajs/types"
 import ProductCardActions from "./product-card-actions"
+import {
+  getProductColorSwatches,
+  isLightSwatch,
+} from "./color-swatches"
 
 type Props = {
   product: HttpTypes.StoreProduct
@@ -46,6 +50,7 @@ export default function BeautyProductCard({
       : null
 
   const subtitle = productSubtitle(product)
+  const colors = getProductColorSwatches(product)
 
   return (
     <article
@@ -89,6 +94,28 @@ export default function BeautyProductCard({
           <p className="beauty-product-card__eyebrow">{subtitle}</p>
           <h3 className="beauty-product-card__title">{product.title}</h3>
 
+          {colors.length > 0 ? (
+            <div className="beauty-product-card__swatches" aria-label="Available colors">
+              {colors.map((color) => {
+                const swatch = color.swatch
+                const light = isLightSwatch(swatch)
+                return (
+                  <span
+                    key={color.name}
+                    title={color.name}
+                    aria-label={color.name}
+                    className={`beauty-product-card__swatch${light ? " is-light" : ""}${
+                      !swatch ? " is-label" : ""
+                    }`}
+                    style={swatch ? { backgroundColor: swatch } : undefined}
+                  >
+                    {!swatch ? color.name.slice(0, 1) : null}
+                  </span>
+                )
+              })}
+            </div>
+          ) : null}
+
           <div className="beauty-product-card__footer">
             {rating?.rating != null && rating.rating > 0 ? (
               <p className="beauty-product-card__rating" aria-label={`${rating.rating} out of 5 stars`}>

package/src/color-swatches.ts

@@ -0,0 +1,177 @@
+/** Shared admin color → CSS swatch resolution (matches PDP logic). */
+
+const ADMIN_COLOR_SWATCHES: Record<string, string> = {
+  black: "#111111",
+  white: "#ffffff",
+  red: "#c1272d",
+  blue: "#2563eb",
+  green: "#16a34a",
+  yellow: "#eab308",
+  orange: "#ea580c",
+  pink: "#ec4899",
+  purple: "#7c3aed",
+  brown: "#8b5e3c",
+  gray: "#9ca3af",
+  grey: "#9ca3af",
+  silver: "#c0c0c0",
+  gold: "#c9a86c",
+  navy: "#1e3a5f",
+  maroon: "#800000",
+  teal: "#0d9488",
+  cyan: "#06b6d4",
+  lime: "#84cc16",
+  indigo: "#4f46e5",
+  violet: "#8b5cf6",
+  magenta: "#d946ef",
+  beige: "#d4b896",
+  ivory: "#fffff0",
+  khaki: "#c3b091",
+  coral: "#ff7f50",
+  salmon: "#fa8072",
+  chocolate: "#7b3f00",
+  olive: "#556b2f",
+  tan: "#d2b48c",
+  cream: "#f5ebe0",
+  "off white": "#f5f5f0",
+  offwhite: "#f5f5f0",
+  nude: "#e8c4a8",
+  charcoal: "#36454f",
+  burgundy: "#800020",
+  rose: "#e8a4bf",
+  "navy blue": "#1e3a5f",
+  "light blue": "#93c5fd",
+  "sky blue": "#7dd3fc",
+  sky: "#7dd3fc",
+  camel: "#c19a6b",
+  rust: "#b7410e",
+  mustard: "#e1ad01",
+  wine: "#722f37",
+  peach: "#ffcba4",
+  mint: "#98d8c8",
+  lavender: "#b57edc",
+}
+
+function isHexColor(value: string) {
+  return /^#?[0-9a-f]{3}([0-9a-f]{3})?([0-9a-f]{2})?$/i.test(value.trim())
+}
+
+function normalizeColorKey(value: string) {
+  return value.toLowerCase().replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim()
+}
+
+function readOptionMeta(meta: Record<string, unknown> | null | undefined, key: string) {
+  const value = meta?.[key]
+  return typeof value === "string" ? value : null
+}
+
+/** Resolve swatch from admin value/metadata only — no random invented colors. */
+export function resolveAdminSwatch(
+  ...candidates: Array<string | null | undefined>
+): string | null {
+  for (const raw of candidates) {
+    const value = (raw || "").trim()
+    if (!value) continue
+
+    if (isHexColor(value)) {
+      return value.startsWith("#") ? value : `#${value}`
+    }
+    if (/^(rgb|hsl)a?\(/i.test(value)) return value
+
+    const key = normalizeColorKey(value)
+    if (ADMIN_COLOR_SWATCHES[key]) return ADMIN_COLOR_SWATCHES[key]
+
+    const firstWord = key.split(" ")[0]
+    if (ADMIN_COLOR_SWATCHES[firstWord]) return ADMIN_COLOR_SWATCHES[firstWord]
+  }
+  return null
+}
+
+export type ProductColorSwatch = {
+  name: string
+  swatch: string | null
+}
+
+type OptionValueLike = {
+  value?: string | null
+  metadata?: Record<string, unknown> | null
+}
+
+type OptionLike = {
+  title?: string | null
+  values?: OptionValueLike[] | null
+}
+
+type VariantLike = {
+  options?: Array<{ value?: string | null; option?: { title?: string | null } }> | null
+}
+
+type ProductLike = {
+  options?: OptionLike[] | null
+  variants?: VariantLike[] | null
+}
+
+export function getProductColorSwatches(product: ProductLike): ProductColorSwatch[] {
+  const colorOption = product.options?.find((opt) => {
+    const title = (opt.title || "").toLowerCase()
+    return title === "color" || title === "colour"
+  })
+
+  if (colorOption?.values?.length) {
+    const unique = Array.from(
+      new Set(
+        colorOption.values
+          .map((v) => String(v.value || "").trim())
+          .filter(Boolean)
+      )
+    )
+    return unique.map((name) => {
+      const optionValue = colorOption.values?.find((ov) => String(ov.value) === name)
+      const meta = optionValue?.metadata
+      return {
+        name,
+        swatch: resolveAdminSwatch(
+          name,
+          readOptionMeta(meta, "color"),
+          readOptionMeta(meta, "hex"),
+          readOptionMeta(meta, "swatch"),
+          readOptionMeta(meta, "value")
+        ),
+      }
+    })
+  }
+
+  const fromVariants = Array.from(
+    new Set(
+      (product.variants ?? [])
+        .flatMap((variant) =>
+          (variant.options ?? [])
+            .filter((o) => {
+              const t = (o.option?.title || "").toLowerCase()
+              return t === "color" || t === "colour"
+            })
+            .map((o) => String(o.value || "").trim())
+        )
+        .filter(Boolean)
+    )
+  )
+
+  return fromVariants.map((name) => ({
+    name,
+    swatch: resolveAdminSwatch(name),
+  }))
+}
+
+export function isLightSwatch(swatch: string | null): boolean {
+  if (!swatch) return false
+  const s = swatch.toLowerCase()
+  return (
+    s === "#fff" ||
+    s === "#ffffff" ||
+    s === "white" ||
+    s === "ivory" ||
+    s === "snow" ||
+    s === "#fffff0" ||
+    s === "#f5f5f0" ||
+    s === "#f5ebe0"
+  )
+}

package/src/motion-product-card.tsx

@@ -4,6 +4,10 @@ import Image from "next/image"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import type { HttpTypes } from "@medusajs/types"
+import {
+  getProductColorSwatches,
+  isLightSwatch,
+} from "./color-swatches"
 
 type Props = {
   product: HttpTypes.StoreProduct
@@ -18,22 +22,16 @@ export default function MotionProductCard({
   product,
   region,
   countryCode: countryCodeProp,
-  rating,
-  showWishlist = true,
-  wishlistProductIds,
 }: Props) {
   const variant = product.variants?.[0]
   const price = variant?.calculated_price?.calculated_amount
-  const originalPrice = variant?.calculated_price?.original_amount
   const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
   const countryCode =
     countryCodeProp?.toLowerCase() ||
     region?.countries?.[0]?.iso_2?.toLowerCase() ||
     "in"
 
-  // Get color options for swatches
-  const colorOption = product.options?.find((opt: any) => opt.title?.toLowerCase() === 'color' || opt.title?.toLowerCase() === 'colour')
-  const colorValues = colorOption?.values?.map((v: any) => v.value) || []
+  const colors = getProductColorSwatches(product)
 
   return (
     <article
@@ -50,13 +48,13 @@ export default function MotionProductCard({
                 fill
                 sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 50vw"
                 className={`object-cover transition-all duration-[800ms] ease-[cubic-bezier(0.16,1,0.3,1)] ${
-                  product.images && product.images.length > 1 
-                    ? 'group-hover/media:opacity-0' 
-                    : 'group-hover/media:scale-105'
+                  product.images && product.images.length > 1
+                    ? "group-hover/media:opacity-0"
+                    : "group-hover/media:scale-105"
                 }`}
                 loading="lazy"
               />
-              {product.images && product.images.length > 1 && (
+              {product.images && product.images.length > 1 ? (
                 <Image
                   src={product.images[1].url.trim()}
                   alt={product.title || ""}
@@ -65,16 +63,17 @@ export default function MotionProductCard({
                   className="absolute inset-0 object-cover opacity-0 scale-100 group-hover/media:opacity-100 group-hover/media:scale-105 transition-all duration-[800ms] ease-[cubic-bezier(0.16,1,0.3,1)]"
                   loading="lazy"
                 />
-              )}
+              ) : null}
             </>
           ) : (
             <div className="w-full h-full bg-[#F6F6F6]" />
           )}
 
-          {/* Quick view floating circle */}
           <div className="absolute top-3 right-3 z-10 opacity-0 group-hover/media:opacity-100 transition-all duration-300 pointer-events-none translate-y-1 group-hover/media:translate-y-0">
             <div className="w-14 h-14 rounded-full bg-white text-gray-900 flex items-center justify-center text-[10px] uppercase font-bold tracking-widest text-center leading-[1.1] shadow-[0_4px_15px_rgba(0,0,0,0.1)] pointer-events-auto cursor-pointer hover:bg-gray-50 hover:scale-105 transition-transform">
-              Quick<br/>view
+              Quick
+              <br />
+              view
             </div>
           </div>
         </div>
@@ -90,19 +89,27 @@ export default function MotionProductCard({
             </div>
           ) : null}
 
-          {/* Color Swatches */}
-          {colorValues.length > 0 && (
-            <div className="mt-2 flex items-center space-x-1.5">
-              {colorValues.map((color: string, idx: number) => (
-                <div 
-                  key={idx}
-                  className="w-[14px] h-[14px] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
-                  style={{ backgroundColor: color.toLowerCase() }}
-                  title={color}
-                />
-              ))}
+          {colors.length > 0 ? (
+            <div className="mt-2 flex items-center gap-1.5" aria-label="Available colors">
+              {colors.map((color) => {
+                const swatch = color.swatch
+                const light = isLightSwatch(swatch)
+                return (
+                  <span
+                    key={color.name}
+                    title={color.name}
+                    aria-label={color.name}
+                    className={`inline-flex items-center justify-center w-[14px] h-[14px] text-[8px] font-semibold uppercase shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)] ${
+                      light ? "border border-gray-300" : ""
+                    } ${!swatch ? "bg-[#f3f3f3] text-[#111]" : ""}`}
+                    style={swatch ? { backgroundColor: swatch } : undefined}
+                  >
+                    {!swatch ? color.name.slice(0, 1) : null}
+                  </span>
+                )
+              })}
             </div>
-          )}
+          ) : null}
         </div>
       </LocalizedLink>
     </article>

package/src/product-card-actions.tsx

@@ -10,22 +10,24 @@ import {
 } from "@pradip1995/commerce-core/client/actions/wishlist"
 import type { HttpTypes } from "@medusajs/types"
 import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
+import LoginRequiredModal from "@pradip1995/segment-animation-login-popup/required"
 import QuickAddPanel from "./quick-add-panel"
 
 type Props = {
   product: HttpTypes.StoreProduct
   countryCode: string
   wishlistProductIds?: string[]
+  showWishlist?: boolean
 }
 
 function findVariantForOptions(
   product: HttpTypes.StoreProduct,
   selectedOptions: Record<string, string>
 ) {
-  return product.variants?.find((variant) => {
+  return product.variants?.find((variant: { options?: Array<{ option_id?: string | null; value?: string | null }> }) => {
     const variantOptions =
       variant.options?.reduce(
-        (acc, option) => {
+        (acc: Record<string, string>, option: { option_id?: string | null; value?: string | null }) => {
           if (option.option_id) acc[option.option_id] = option.value ?? ""
           return acc
         },
@@ -37,7 +39,12 @@ function findVariantForOptions(
   })
 }
 
-export default function ProductCardActions({ product, countryCode, wishlistProductIds }: Props) {
+export default function ProductCardActions({
+  product,
+  countryCode,
+  wishlistProductIds,
+  showWishlist = true,
+}: Props) {
   const router = useRouter()
   const [wishlisted, setWishlisted] = useState(false)
   const [wishlistLoading, setWishlistLoading] = useState(false)
@@ -46,6 +53,7 @@ export default function ProductCardActions({ product, countryCode, wishlistProdu
   const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})
   const [quantity, setQuantity] = useState(1)
   const [error, setError] = useState<string | null>(null)
+  const [loginRequired, setLoginRequired] = useState(false)
 
   const variants = product.variants ?? []
   const hasMultipleVariants = variants.length > 1
@@ -112,7 +120,7 @@ export default function ProductCardActions({ product, countryCode, wishlistProdu
       }
 
       if (result.error?.toLowerCase().includes("login")) {
-        router.push(`/${countryCode}/account`)
+        setLoginRequired(true)
         return
       }
 
@@ -173,24 +181,26 @@ export default function ProductCardActions({ product, countryCode, wishlistProdu
 
   return (
     <>
-      <div className="product-card__actions" onClick={stopCardNav}>
-        <button
-          type="button"
-          className={`product-card__wishlist-btn${wishlisted ? " product-card__wishlist-btn--active" : ""}${
-            wishlistLoading ? " product-card__wishlist-btn--loading" : ""
-          }`}
-          onClick={handleWishlistToggle}
-          disabled={wishlistLoading}
-          aria-label={wishlisted ? "Remove from wishlist" : "Add to wishlist"}
-        >
-          <svg
-            viewBox="0 0 24 24"
-            className="product-card__wishlist-icon"
-            aria-hidden
+      <div className="product-card__actions absolute bottom-3.5 right-3.5 z-30 opacity-0 group-hover/media:opacity-100 transition-opacity duration-300 pointer-events-none group-hover/media:pointer-events-auto" onClick={stopCardNav}>
+        {showWishlist ? (
+          <button
+            type="button"
+            className={`product-card__wishlist-btn${wishlisted ? " product-card__wishlist-btn--active" : ""}${
+              wishlistLoading ? " product-card__wishlist-btn--loading" : ""
+            }`}
+            onClick={handleWishlistToggle}
+            disabled={wishlistLoading}
+            aria-label={wishlisted ? "Remove from wishlist" : "Add to wishlist"}
           >
-            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
-          </svg>
-        </button>
+            <svg
+              viewBox="0 0 24 24"
+              className="product-card__wishlist-icon"
+              aria-hidden
+            >
+              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+            </svg>
+          </button>
+        ) : null}
 
         <button
           type="button"
@@ -231,6 +241,13 @@ export default function ProductCardActions({ product, countryCode, wishlistProdu
         </div>
       ) : null}
 
+      <LoginRequiredModal
+        isOpen={loginRequired}
+        onClose={() => setLoginRequired(false)}
+        countryCode={countryCode}
+        message="Please log in to save items to your wishlist."
+      />
+
       {showQuickAdd ? (
         <QuickAddPanel
           product={product}

package/src/segment.css

@@ -53,8 +53,9 @@
 }
 
 .beauty-product-card .product-card__actions {
-  top: 0.5rem;
-  right: 0.5rem;
+  bottom: 0.875rem;
+  top: auto;
+  right: 0.875rem;
 }
 
 .beauty-product-card .product-card__wishlist-btn,
@@ -153,6 +154,35 @@
   min-height: 2.5rem;
 }
 
+.beauty-product-card__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0.45rem 0 0.15rem;
+}
+
+.beauty-product-card__swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+  font-size: 0.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #111;
+}
+
+.beauty-product-card__swatch.is-light {
+  border: 1px solid #d4d4d4;
+}
+
+.beauty-product-card__swatch.is-label {
+  background: #f3f3f3;
+}
+
 .beauty-product-card__footer {
   display: flex;
   align-items: flex-end;
@@ -275,8 +305,9 @@
 }
 
 .jewelry-product-card .product-card__actions {
-  top: 0.5rem;
-  right: 0.5rem;
+  bottom: 0.875rem;
+  top: auto;
+  right: 0.875rem;
 }
 
 .jewelry-product-card .product-card__wishlist-btn {
@@ -406,3 +437,31 @@
     pointer-events: auto;
   }
 }
+
+/* Shop product card (Motion style) */
+
+.shop-product-card .product-card__actions {
+  bottom: 0.875rem;
+  top: auto;
+  right: 0.875rem;
+}
+
+.shop-product-card .product-card__wishlist-btn {
+  width: 2.125rem;
+  height: 2.125rem;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.shop-product-card .product-card__wishlist-btn--active {
+  background: var(--color-brand-accent-muted, #f4eff8);
+}
+
+.shop-product-card .product-card__cart-btn {
+  display: none; /* Hide the cart icon since shop card uses the Quick View circle */
+}
+
+.shop-product-card .product-card__quick-add-wrap {
+  display: none; /* Hide the quick add bar at the bottom, triggered by the blue circle instead */
+}

package/src/shop-product-card.tsx

@@ -7,6 +7,10 @@ import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import type { HttpTypes } from "@medusajs/types"
 import ProductCardActions from "./product-card-actions"
 import { resolveProductCardImages } from "./resolve-product-images"
+import {
+  getProductColorSwatches,
+  isLightSwatch,
+} from "./color-swatches"
 
 type Props = {
   product: HttpTypes.StoreProduct
@@ -17,13 +21,11 @@ type Props = {
   wishlistProductIds?: string[]
 }
 
-type OptionWithValue = { value?: string | null }
-type OptionItem = { title?: string | null; values?: OptionWithValue[] | null }
-
 export default function ShopProductCard({
   product,
   region,
   countryCode: countryCodeProp,
+  showWishlist = false,
   wishlistProductIds,
 }: Props) {
   const variant = product.variants?.[0]
@@ -38,26 +40,9 @@ export default function ShopProductCard({
   const [mainImgSrc, setMainImgSrc] = useState(primary)
   const [hoverImgSrc, setHoverImgSrc] = useState(hover)
 
-  // Extract color options dynamically from product options
-  const colorOption = (product.options as OptionItem[] | undefined)?.find(
-    (opt) => opt.title?.toLowerCase() === "color" || opt.title?.toLowerCase() === "colour"
-  )
-  const rawColorValues: string[] = colorOption?.values
-    ?.map((v: OptionWithValue) => v.value)
-    .filter((val: string | undefined): val is string => Boolean(val)) || []
-
-  // Fallback to variant options if no top-level color options exist
-  const variantColors: string[] = Array.from(
-    new Set(
-      (product.variants ?? [])
-        .flatMap((v: unknown) => (v as { options?: OptionWithValue[] }).options?.map((o: OptionWithValue) => o.value))
-        .filter((val: string | undefined): val is string => Boolean(val))
-    )
-  )
-  const colorValues: string[] = rawColorValues.length > 0 ? rawColorValues : variantColors
-
+  const colors = getProductColorSwatches(product)
   const [selectedColor, setSelectedColor] = useState<string | null>(
-    colorValues.length > 0 ? (colorValues[0] as string) : null
+    colors.length > 0 ? colors[0].name : null
   )
 
   const originalPrice = variant?.calculated_price?.original_amount
@@ -65,9 +50,11 @@ export default function ShopProductCard({
     originalPrice && price && originalPrice > price
       ? Math.round(((originalPrice - price) / originalPrice) * 100)
       : 0
-      
+
   const isBestSelling = product.tags?.some(
-    (tag) => tag.value?.toLowerCase() === "best selling" || tag.value?.toLowerCase() === "bestseller"
+    (tag: { value?: string }) =>
+      tag.value?.toLowerCase() === "best selling" ||
+      tag.value?.toLowerCase() === "bestseller"
   )
 
   return (
@@ -150,6 +137,7 @@ export default function ShopProductCard({
               product={product}
               countryCode={countryCode}
               wishlistProductIds={wishlistProductIds}
+              showWishlist={showWishlist}
             />
           ) : null}
         </div>
@@ -166,32 +154,34 @@ export default function ShopProductCard({
           ) : null}
 
           {/* Dynamic Color Swatches below price */}
-          {colorValues.length > 0 && (
+          {colors.length > 0 && (
             <div className="mt-2.5 flex items-center gap-1.5">
-              {colorValues.map((color: string, idx: number) => {
-                const isSelected = selectedColor === color
-                const lowerColor = color.toLowerCase()
-                const isWhite = lowerColor === "#ffffff" || lowerColor === "white"
+              {colors.map((color) => {
+                const isSelected = selectedColor === color.name
+                const swatch = color.swatch
+                const light = isLightSwatch(swatch)
                 return (
                   <button
-                    key={idx}
+                    key={color.name}
                     type="button"
                     onClick={(e) => {
                       e.preventDefault()
                       e.stopPropagation()
-                      setSelectedColor(color)
+                      setSelectedColor(color.name)
                     }}
-                    className={`w-4 h-4 transition-all relative rounded-none ${
-                      isWhite ? "border border-gray-300" : ""
+                    className={`inline-flex items-center justify-center w-4 h-4 transition-all relative rounded-none text-[8px] font-semibold uppercase ${
+                      light ? "border border-gray-300" : ""
                     } ${
                       isSelected
                         ? "ring-1 ring-black ring-offset-1 scale-110 z-10"
                         : "hover:scale-105 opacity-90 hover:opacity-100"
-                    }`}
-                    style={{ backgroundColor: lowerColor }}
-                    title={color}
-                    aria-label={`Select ${color} color`}
-                  />
+                    } ${!swatch ? "bg-[#f3f3f3] text-[#111]" : ""}`}
+                    style={swatch ? { backgroundColor: swatch } : undefined}
+                    title={color.name}
+                    aria-label={`Select ${color.name} color`}
+                  >
+                    {!swatch ? color.name.slice(0, 1) : null}
+                  </button>
                 )
               })}
             </div>