extract typeColors out of badgeCVA so it can be used other places too

Author: nedtwigg

src/components/design.tsx

@@ -19,6 +19,22 @@ import { LinkPreview } from './BadgePreviews/LinkPreview'
 import { TextPreview } from './BadgePreviews/TextPreview'
 import { TimePreview } from './BadgePreviews/TimePreview'
 
+// Type colors definition - single source of truth
+export const typeColors = {
+  blank: 'bg-transparent text-gray-700',
+  code: 'bg-pink-50 text-pink-700',
+  hideTrashed: 'bg-transparent text-gray-700',
+  image: 'bg-purple-50 text-purple-700',
+  link: 'bg-blue-50 text-blue-700',
+  open: 'bg-cyan-50 text-cyan-700',
+  sent: 'bg-green-50 text-green-700',
+  settings: 'bg-gray-50 text-gray-700',
+  text: 'bg-gray-50 text-gray-700',
+  time: 'bg-gray-50 text-gray-700',
+  trashed: 'bg-gray-50 text-yellow-700',
+  unsent: 'bg-amber-100 text-amber-700',
+} as const
+
 // TV configuration for stat badges
 export const badgeCVA = tv({
   base: 'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-normal h-5',
@@ -34,20 +50,7 @@ export const badgeCVA = tv({
       false: '',
       true: '!border-solid !border-current',
     },
-    type: {
-      blank: 'bg-transparent text-gray-700',
-      code: 'bg-pink-50 text-pink-700',
-      hideTrashed: 'bg-transparent text-gray-700',
-      image: 'bg-purple-50 text-purple-700',
-      link: 'bg-blue-50 text-blue-700',
-      open: 'bg-cyan-50 text-cyan-700',
-      sent: 'bg-green-50 text-green-700',
-      settings: 'bg-gray-50 text-gray-700',
-      text: 'bg-gray-50 text-gray-700',
-      time: 'bg-gray-50 text-gray-700',
-      trashed: 'bg-gray-50 text-yellow-700',
-      unsent: 'bg-amber-100 text-amber-700',
-    },
+    type: typeColors,
   },
 })