From 010c87f354ca805fcd5bcdedd05ffaf1aa8ae6e3 Mon Sep 17 00:00:00 2001
From: Patrick Erichsen <patrick.a.erichsen@gmail.com>
Date: Sun, 26 Jul 2026 12:38:44 -0500
Subject: [PATCH] fix: remove generated tint from uploaded icons (#3268)

---
 src/components/MarketplaceIcon.test.tsx | 21 +++++++++++++++++++++
 src/components/MarketplaceIcon.tsx      |  2 +-
 src/styles.css                          |  8 ++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/MarketplaceIcon.test.tsx b/src/components/MarketplaceIcon.test.tsx
index f644dca1..64bc1077 100644
--- a/src/components/MarketplaceIcon.test.tsx
+++ b/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", () => {
diff --git a/src/components/MarketplaceIcon.tsx b/src/components/MarketplaceIcon.tsx
index 2ed7deec..ced9484f 100644
--- a/src/components/MarketplaceIcon.tsx
+++ b/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,
diff --git a/src/styles.css b/src/styles.css
index da8aba6c..81f6845e 100644
--- a/src/styles.css
+++ b/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);