From 6e634972c96742c75bffa6260cec31a8aa135c50 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 12 May 2026 21:43:27 -0700
Subject: [PATCH] add transparent icon color variant

---
 src/shared/components/icon/icon.module.css | 8 ++++++++
 src/shared/components/icon/icon.tsx        | 9 +++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/icon/icon.module.css b/src/shared/components/icon/icon.module.css
index c1741a1a0..241d243b9 100644
--- a/src/shared/components/icon/icon.module.css
+++ b/src/shared/components/icon/icon.module.css
@@ -79,6 +79,10 @@ img.size-5xl {
     color: rgb(255 49 49);
 }
 
+.color-transparent {
+    color: transparent;
+}
+
 .fill {
     fill: transparent;
 }
@@ -123,6 +127,10 @@ img.size-5xl {
     fill: rgb(255 49 49);
 }
 
+.fill-transparent {
+    fill: transparent;
+}
+
 .spin {
     animation: spin 1s linear infinite;
 }
diff --git a/src/shared/components/icon/icon.tsx b/src/shared/components/icon/icon.tsx
index 0a3949d9b..fc8c0bdce 100644
--- a/src/shared/components/icon/icon.tsx
+++ b/src/shared/components/icon/icon.tsx
@@ -35,6 +35,7 @@ import {
     LuChevronLeft,
     LuChevronRight,
     LuChevronUp,
+    LuCircle,
     LuCircleCheck,
     LuCircleX,
     LuClipboardCopy,
@@ -247,6 +248,7 @@ export const AppIcon = {
     brandSpotify: SpotifyLogoIcon,
     cache: LuCloudDownload,
     check: LuCheck,
+    circle: LuCircle,
     clipboardCopy: LuClipboardCopy,
     collection: LuPackage2,
     delete: LuTrash,
@@ -384,6 +386,7 @@ type IconColor =
     | 'muted'
     | 'primary'
     | 'success'
+    | 'transparent'
     | 'warn';
 
 const _Icon = forwardRef<HTMLDivElement, IconProps>((props, ref) => {
@@ -391,17 +394,19 @@ const _Icon = forwardRef<HTMLDivElement, IconProps>((props, ref) => {
 
     const IconComponent: ComponentType<any> = AppIcon[icon];
 
+    const colorClassToken = color ?? (fill && fill !== 'transparent' ? fill : undefined);
+
     const classNames = useMemo(
         () =>
             clsx(className, {
                 [styles.fill]: true,
                 [styles.pulse]: animate === 'pulse',
                 [styles.spin]: animate === 'spin',
-                [styles[`color-${color || fill}`]]: color || fill,
+                [styles[`color-${colorClassToken}`]]: colorClassToken,
                 [styles[`fill-${fill}`]]: fill,
                 [styles[`size-${size}`]]: true,
             }),
-        [animate, className, color, fill, size],
+        [animate, className, colorClassToken, fill, size],
     );
 
     return (