fix : correct color

components/admin/create-guide-flow.tsx

@@ -17,7 +17,7 @@ import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
 import { Spinner } from "@/components/ui/spinner";
 import { Textarea } from "@/components/ui/textarea";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { characterRarityGradientClass } from "@/lib/catalog/rarity";
 import { cn } from "@/lib/utils";
 
 type Character = { key: string; name: string; aliases: string[]; element: string | null; rarity: number | null; imageUrl: string };
@@ -85,7 +85,7 @@ export function CreateGuideFlow({ characters, existingKeys }: { characters: Char
           const disabled = existing.has(character.key);
           return (
             <Card key={character.key} className="overflow-hidden py-0">
-              <div className={cn("relative aspect-square", rarityGradientClass(character.rarity))}><Image src={character.imageUrl} alt={character.name} fill className="object-cover" /></div>
+              <div className={cn("relative aspect-square", characterRarityGradientClass(character.key, character.rarity))}><Image src={character.imageUrl} alt={character.name} fill className="object-cover" /></div>
               <CardHeader className="pt-4">
                 <CardTitle>{character.name}</CardTitle>
                 <CardDescription>{character.element ?? "Unknown element"}</CardDescription>

components/admin/glossary-manager.tsx

@@ -19,7 +19,7 @@ import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, Pagi
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Spinner } from "@/components/ui/spinner";
 import type { GlossaryKind } from "@/lib/glossary";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
 import { cn } from "@/lib/utils";
 
 type CatalogItem = { key: string; name: string; imageUrl: string; rarity?: number | null };
@@ -113,6 +113,7 @@ export function GlossaryManager({
                 onValueChange={(key) => setItem(catalogs[kind].find((value) => value.key === key) ?? null)}
                 placeholder="ค้นหารายการ…"
                 rarityBackground
+                characterBackground={kind === "character"}
               />
             </Field>
             <Field>
@@ -154,7 +155,7 @@ export function GlossaryManager({
                 {catalogItem ? (
                   <span className={cn(
                     "relative size-10 shrink-0 overflow-hidden rounded-md bg-muted",
-                    rarityGradientClass(catalogItem.rarity),
+                    entry.kind === "character" ? characterRarityGradientClass(catalogItem.key, catalogItem.rarity) : rarityGradientClass(catalogItem.rarity),
                   )}>
                     <Image src={catalogItem.imageUrl} alt="" fill sizes="40px" className="object-contain" />
                   </span>

components/admin/guide-section-editor.tsx

@@ -162,7 +162,7 @@ import {
 } from "@/lib/guides/stats";
 import { elementBackgroundColor, elementIconFilter } from "@/lib/catalog/element";
 import { supportsWeaponType } from "@/lib/catalog/lunaris";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
 import { isCustomTravelerKey } from "@/lib/catalog/travelers";
 import {
   applyPresetFields,
@@ -3911,7 +3911,7 @@ function TeamEditor({
                                   return (
                                     <div key={member.characterKey} className="min-w-0 text-center">
                                       <div className="flex items-center justify-center gap-2">
-                                        <div className={cn("relative size-16 shrink-0 overflow-hidden rounded-lg bg-muted", rarityGradientClass(isCustomTravelerKey(member.characterKey) ? 5 : character?.rarity))}>
+                                        <div className={cn("relative size-16 shrink-0 overflow-hidden rounded-lg bg-muted", characterRarityGradientClass(member.characterKey, isCustomTravelerKey(member.characterKey) ? 5 : character?.rarity))}>
                                           {character ? <Image src={character.imageUrl} alt={character.name} fill sizes="64px" className="object-contain" /> : null}
                                         </div>
                                         <div className="flex flex-col gap-1">
@@ -4162,6 +4162,7 @@ function ExtraCatalogItemsEditor({
               placeholder={`เลือก${labels[kind]}`}
               showSelectedImage
               rarityBackground
+              characterBackground={kind === "character"}
             />
           </div>
         </div>

components/admin/stygian-editor.tsx

@@ -219,6 +219,7 @@ function ItemPicker({
             placeholder={`Search ${kind}…`}
             emptyLabel="No matches"
             rarityBackground
+            characterBackground={kind === "character"}
           />
         </Field>
       ) : null}

components/admin/ui/catalog-select.tsx

@@ -13,7 +13,7 @@ import {
   ComboboxTrigger,
   FuzzyCombobox,
 } from "@/components/ui/combobox";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
 import { cn } from "@/lib/utils";
 
 export interface AdminCatalogItem {
@@ -50,6 +50,7 @@ type CommonSelectProps<Item extends AdminCatalogItem> = {
   emptyLabel?: string;
   invalid?: boolean;
   rarityBackground?: boolean;
+  characterBackground?: boolean;
   searchNames?: (item: Item) => string[];
 };
 
@@ -69,6 +70,7 @@ export function CatalogDropdown<Item extends AdminCatalogItem>({
   emptyLabel = "ไม่พบรายการ",
   invalid = false,
   rarityBackground = false,
+  characterBackground = false,
   showSelectedImage = false,
   showClear = true,
   label,
@@ -82,7 +84,7 @@ export function CatalogDropdown<Item extends AdminCatalogItem>({
         <div
           className={cn(
             "relative size-10 shrink-0 overflow-hidden rounded-md",
-            rarityBackground && rarityGradientClass(selected.rarity),
+            rarityBackground && (characterBackground ? characterRarityGradientClass(selected.key, selected.rarity) : rarityGradientClass(selected.rarity)),
           )}
         >
           <Image src={selected.imageUrl} alt="" fill sizes="40px" className="object-contain" />
@@ -110,7 +112,7 @@ export function CatalogDropdown<Item extends AdminCatalogItem>({
             <ComboboxList>
               {(item) => (
                 <ComboboxItem key={item.key} value={item}>
-                  <CatalogOptionImage item={item} rarityBackground={rarityBackground} />
+                  <CatalogOptionImage item={item} rarityBackground={rarityBackground} characterBackground={characterBackground} />
                   <span className="whitespace-nowrap">{item.name}</span>
                 </ComboboxItem>
               )}
@@ -138,6 +140,7 @@ function CatalogSlotSelect<Item extends AdminCatalogItem>({
   emptyLabel = "ไม่พบรายการ",
   invalid = false,
   rarityBackground = true,
+  characterBackground = false,
   searchNames = (item) => [item.name, ...(item.aliases ?? [])],
   className,
 }: CatalogSlotSelectProps<Item>) {
@@ -158,7 +161,7 @@ function CatalogSlotSelect<Item extends AdminCatalogItem>({
         aria-invalid={invalid}
         className={cn(
           "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-md border bg-muted p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&>svg]:hidden",
-          rarityBackground && selected && rarityGradientClass(selected.rarity),
+          rarityBackground && selected && (characterBackground ? characterRarityGradientClass(selected.key, selected.rarity) : rarityGradientClass(selected.rarity)),
           className,
         )}
       >
@@ -174,7 +177,7 @@ function CatalogSlotSelect<Item extends AdminCatalogItem>({
         <ComboboxList>
           {(item) => (
             <ComboboxItem key={item.key} value={item}>
-              <CatalogOptionImage item={item} rarityBackground={rarityBackground} />
+              <CatalogOptionImage item={item} rarityBackground={rarityBackground} characterBackground={characterBackground} />
               <span className="whitespace-nowrap">{item.name}</span>
             </ComboboxItem>
           )}
@@ -216,7 +219,7 @@ function DomainCatalogSelect<Item extends AdminCatalogItem>({
 }
 
 export function CharacterSelect<Item extends AdminCatalogItem>(props: DomainSelectProps<Item>) {
-  return <DomainCatalogSelect {...props} />;
+  return <DomainCatalogSelect {...props} characterBackground />;
 }
 
 export function WeaponSelect<Item extends AdminCatalogItem>(props: DomainSelectProps<Item>) {
@@ -318,15 +321,17 @@ export function ArtifactSelect<Item extends AdminCatalogItem>(
 function CatalogOptionImage({
   item,
   rarityBackground,
+  characterBackground = false,
 }: {
   item: AdminCatalogItem;
   rarityBackground: boolean;
+  characterBackground?: boolean;
 }) {
   return (
     <div
       className={cn(
         "relative size-8 shrink-0 overflow-hidden rounded-md",
-        rarityBackground && rarityGradientClass(item.rarity),
+        rarityBackground && (characterBackground ? characterRarityGradientClass(item.key, item.rarity) : rarityGradientClass(item.rarity)),
       )}
     >
       <Image src={item.imageUrl} alt="" fill sizes="32px" className="object-contain" />