fix: remove generated tint from uploaded icons (#3268)

src/components/MarketplaceIcon.test.tsx

@@ -21,6 +21,11 @@ describe("MarketplaceIcon", () => {
 
     expect(container.querySelector("img")?.getAttribute("src")).toBe(imageUrl);
     expect(container.querySelector("svg.marketplace-icon-glyph")).toBeNull();
+    expect(
+      container
+        .querySelector(".marketplace-icon")
+        ?.classList.contains("marketplace-icon-image-backed"),
+    ).toBe(true);
   });
 
   it("ignores legacy skill custom-icon values", () => {
@@ -39,6 +44,22 @@ describe("MarketplaceIcon", () => {
 
     expect(container.querySelector("img")).toBeNull();
     expect(container.querySelector("svg.marketplace-icon-glyph")).toBeTruthy();
+    expect(
+      container
+        .querySelector(".marketplace-icon")
+        ?.classList.contains("marketplace-icon-image-backed"),
+    ).toBe(false);
+  });
+
+  it("keeps hosted skill icons image-backed in muted contexts", () => {
+    const imageUrl = `/api/v1/skill-icons/${"b".repeat(64)}`;
+    const { container } = render(
+      <MarketplaceIcon kind="skill" label="Muted Icon Skill" imageUrl={imageUrl} tone="muted" />,
+    );
+    const icon = container.querySelector(".marketplace-icon");
+
+    expect(icon?.classList.contains("marketplace-icon-muted")).toBe(true);
+    expect(icon?.classList.contains("marketplace-icon-image-backed")).toBe(true);
   });
 
   it("renders Slash for skills whose stored category cannot resolve", () => {

src/components/MarketplaceIcon.tsx

@@ -66,7 +66,7 @@ export function MarketplaceIcon({
     <span
       className={`marketplace-icon marketplace-icon-${kind} marketplace-icon-${size}${
         tone === "muted" ? " marketplace-icon-muted" : ""
-      }`}
+      }${visibleImageUrl ? " marketplace-icon-image-backed" : ""}`}
       style={
         {
           "--marketplace-icon-accent": hashedTone.accent,

src/styles.css

@@ -3910,6 +3910,14 @@ code {
   box-shadow: 0 4px 12px color-mix(in srgb, var(--marketplace-icon-accent) 20%, transparent);
 }
 
+.marketplace-icon.marketplace-icon-image-backed,
+.marketplace-icon.marketplace-icon-image-backed:hover {
+  background: #fff;
+  border-color: rgb(0 0 0 / 14%);
+  border-radius: var(--oc-radius-control);
+  box-shadow: none;
+}
+
 .marketplace-icon-muted,
 .marketplace-icon-muted:hover {
   background: color-mix(in srgb, var(--ink) 4%, transparent);