Format product color labels

src/pages/ProductDetails.tsx

@@ -8,6 +8,7 @@ import RefreshStatus from '../components/RefreshStatus';
 import type { DateRange, ProductDetailsAnalytics } from '../types';
 import { fetchProductDetailsAnalytics } from '../dataService';
 import { parseProductName } from '../productParsing';
+import { formatColorLabel } from '../displayFormatters';
 
 const CHART_GRID_COLOR = 'var(--chart-grid)';
 const CHART_AXIS_COLOR = 'var(--chart-axis)';
@@ -361,7 +362,7 @@ const ProductDetails = () => {
                         <span>#{variant.id}</span>
                         {metadata.color && (
                           <span className="rounded-full border border-sky-400/25 bg-sky-400/10 px-2 py-0.5 font-bold text-sky-300">
-                            {metadata.color}
+                            {formatColorLabel(metadata.color)}
                           </span>
                         )}
                         {metadata.size && (