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>
                  );
@@ -208,10 +208,15 @@ const ProductFilters: React.FC<ProductFiltersProps> = ({
                                ? 'ring-2 ring-foreground ring-offset-2'
                                : 'ring-1 ring-border hover:ring-foreground/40'
                            }`}
-                            style={{ backgroundColor: color ?? undefined }}
+                            style={{
+                              // A colourless swatch would otherwise be a fully
+                              // transparent circle behind a hairline ring,
+                              // which antialiases into a speckled border.
+                              backgroundColor: color ?? 'var(--color-muted)',
+                            }}
                          >
                            {!color && (
-                              <span className="text-[10px]">
+                              <span className="text-[10px] font-medium uppercase text-muted-foreground">
                                {value.label.at(0)}
                              </span>
                            )}