Fix

2026-08-08 11:30:53 -04:00
parent 1c690ca593
commit 3884e9524d
2 changed files with 19 additions and 4 deletions
@@ -172,12 +172,22 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
                          : 'ring-1 ring-border hover:ring-foreground/40'
                      } ${isSoldOut ? 'option-unavailable text-foreground/60 opacity-60' : ''}`}
                      style={{
-                        backgroundColor: background,
+                        // With no colour and no image the circle would be fully
+                        // transparent, leaving just a hairline ring that
+                        // antialiases unevenly and reads as a speckled border.
+                        // A neutral fill makes the initial-letter fallback look
+                        // deliberate. Set inline so it beats the ghost variant's
+                        // hover background.
+                        backgroundColor:
+                          background ??
+                          (image ? undefined : 'var(--color-muted)'),
                        backgroundImage: image ? `url(${image})` : undefined,
                      }}
                    >
                      {!background && !image && (
-                        <span className="text-[10px]">{value.name.at(0)}</span>
+                        <span className="text-[10px] font-medium uppercase text-muted-foreground">
+                          {value.name.at(0)}
+                        </span>
                      )}
                    </Button>
                  );