Tune team element backgrounds and badges

lib/catalog/element.test.ts

@@ -3,19 +3,19 @@ import { describe, expect, it } from "vitest";
 import { elementBackgroundColor } from "@/lib/catalog/element";
 
 describe("catalog element backgrounds", () => {
-  it("maps every character element to its flat color", () => {
-    expect(elementBackgroundColor("Pyro")).toBe("#EF7938");
-    expect(elementBackgroundColor("Hydro")).toBe("#4CC2F1");
-    expect(elementBackgroundColor("Anemo")).toBe("#74C2A8");
-    expect(elementBackgroundColor("Electro")).toBe("#AF8EC1");
-    expect(elementBackgroundColor("Dendro")).toBe("#A5C83B");
-    expect(elementBackgroundColor("Cryo")).toBe("#9FD6E3");
-    expect(elementBackgroundColor("Geo")).toBe("#FAB632");
+  it("maps every character element to its 80% opacity color", () => {
+    expect(elementBackgroundColor("Pyro")).toBe("#EF7938CC");
+    expect(elementBackgroundColor("Hydro")).toBe("#4CC2F1CC");
+    expect(elementBackgroundColor("Anemo")).toBe("#74C2A8CC");
+    expect(elementBackgroundColor("Electro")).toBe("#AF8EC1CC");
+    expect(elementBackgroundColor("Dendro")).toBe("#A5C83BCC");
+    expect(elementBackgroundColor("Cryo")).toBe("#9FD6E3CC");
+    expect(elementBackgroundColor("Geo")).toBe("#FAB632CC");
   });
 
   it("uses the neutral character background when the element is unavailable", () => {
-    expect(elementBackgroundColor(null)).toBe("#17383d");
-    expect(elementBackgroundColor(undefined)).toBe("#17383d");
-    expect(elementBackgroundColor("Unknown")).toBe("#17383d");
+    expect(elementBackgroundColor(null)).toBe("#17383dcc");
+    expect(elementBackgroundColor(undefined)).toBe("#17383dcc");
+    expect(elementBackgroundColor("Unknown")).toBe("#17383dcc");
   });
 });

lib/catalog/element.ts

@@ -1,13 +1,13 @@
 const elementBackgroundColors: Record<string, string> = {
-  Pyro: "#EF7938",
-  Hydro: "#4CC2F1",
-  Anemo: "#74C2A8",
-  Electro: "#AF8EC1",
-  Dendro: "#A5C83B",
-  Cryo: "#9FD6E3",
-  Geo: "#FAB632",
+  Pyro: "#EF7938CC",
+  Hydro: "#4CC2F1CC",
+  Anemo: "#74C2A8CC",
+  Electro: "#AF8EC1CC",
+  Dendro: "#A5C83BCC",
+  Cryo: "#9FD6E3CC",
+  Geo: "#FAB632CC",
 };
 
 export function elementBackgroundColor(element: string | null | undefined): string {
-  return (element && elementBackgroundColors[element]) || "#17383d";
+  return (element && elementBackgroundColors[element]) || "#17383dcc";
 }