Added voice work image fallback. Added tag/creator/circle chip components. Updated voice work search response to include favorite/blacklisted flags for tags/creators/circles.

JSMR.UI.Blazor/wwwroot/css/app.css

@@ -608,15 +608,90 @@ code {
     font-weight: 500;*/
 }
 
-/* Chips */
-.j-chip {
+.j-tag-2 {
+    padding: .4rem .8rem;
+    font-size: .8rem;
+    border-color: var(--tag-text-color);
+    border-width: 1px;
+    border-style: solid;
+    background-color: transparent;
+    border-radius: 1rem;
     display: flex;
     align-items: center;
-    gap: .5rem;
+    gap: .3rem;
+}
+
+.j-tag-favorite {
+    border: 1px solid rgb(167, 243, 208);
+    color: rgb(167, 243, 208);
+    background-color: rgba(67, 243, 208, .1);
+}
+
+    .j-tag-favorite > .j-icon-tag {
+        background-color: #a7f3d0;
+    }
+
+.j-tag-blacklisted {
+    border: 1px solid rgb(254, 205, 211);
+    color: rgb(254, 205, 211);
+    background-color: rgba(254, 205, 211, .1);
+    color: #ea9ab2;
+    border: 1px solid #ea9ab2;
+    background-color: #ea9ab222;
+    color: rgb(243, 167, 167);
+    border: 1px solid rgb(243, 167, 167);
+    background-color: rgba(243, 167, 167, .1);
+}
+
+/* Chips */
+.j-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: .4rem;
     font-size: 1rem;
     font-weight: 500;
+    font-size: .8rem;
+    font-weight: 400;
+    --chip-rgb: var(--secondary-rgb, 148 163 184);
+    --chip-tint-alpha: 0.12;
 }
 
+    .j-chip.is-clickable {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .j-chip.varient-filled {
+        padding: .4rem .8rem;
+        border-radius: 1rem;
+    }
+
+    .j-chip.varient-outlined {
+        border-width: 1px;
+        border-style: solid;
+        padding: .4rem .8rem;
+        border-radius: 1rem;
+        border-color: rgb(var(--chip-rgb));
+        color: rgb(var(--chip-rgb));
+        background: transparent;
+    }
+
+    .j-chip.tone-tint {
+        background: rgb(var(--chip-rgb) / var(--chip-tint-alpha));
+    }
+
+    .j-chip.color-mint {
+        --chip-rgb: var(--rgb-mint);
+    }
+
+    .j-chip.color-green {
+        --chip-rgb: var(--rgb-green);
+    }
+
+    .j-chip.color-teal {
+        --chip-rgb: var(--rgb-teal);
+    }
+
 /* Icons */
 .j-icon {
     mask-repeat: no-repeat;
@@ -705,6 +780,10 @@ code {
     mask-image: url("../svg/person.svg");
 }
 
+.j-icon-person-fill {
+    mask-image: url("../svg/person-fill.svg");
+}
+
 .j-icon-sort {
     mask-image: url("../svg/sort.svg");
 }
@@ -741,6 +820,39 @@ code {
     background-image: url("../svg/flag-kr.svg");
 }
 
+/* Colors */
+.color-black {
+    color: var(--color-black);
+}
+
+.color-yellow {
+    color: var(--color-yellow);
+}
+
+.color-green {
+    color: var(--color-green);
+}
+
+.color-mint {
+    color: var(--color-green);
+}
+
+.color-teal {
+    color: var(--color-teal);
+}
+
+.color-blue {
+    color: var(--color-blue);
+}
+
+.color-orange {
+    color: var(--color-orange);
+}
+
+.color-pink {
+    color: var(--color-pink);
+}
+
 /* Border Colors */
 .border-color-black {
     border-color: var(--color-black);
@@ -754,6 +866,11 @@ code {
     border-color: var(--color-green);
 }
 
+.border-color-mint {
+    border-color: var(--color-mint);
+}
+
+
 .border-color-teal {
     border-color: var(--color-teal);
 }
@@ -799,6 +916,10 @@ code {
     background-color: var(--color-green);
 }
 
+.background-color-mint {
+    background-color: var(--color-mint);
+}
+
 .background-color-teal {
     background-color: var(--color-teal);
 }