adding dark theme variables for badge tag (#31238)

GitOrigin-RevId: 08bd7ed75ecd8a934b8615374d1d976f448310d2

services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx

@@ -56,7 +56,7 @@ function InlineTag({ tag, projectId }: InlineTagProps) {
       closeBtnProps={{
         onClick: () => handleRemoveTag(tag._id, projectId),
       }}
-      className="ms-2"
+      className="ms-2 badge-themed"
       translate="no"
     >
       {tag.name}

services/web/frontend/stylesheets/components/badge.scss

@@ -1,3 +1,27 @@
+@mixin light-themed-badge-tag {
+  --badge-tag-themed-content-color: var(--content-primary);
+  --badge-tag-themed-btn-hover-bg: var(--neutral-40);
+  --badge-tag-themed-hover-bg: var(--neutral-30);
+  --badge-tag-themed-btn-bg: var(--neutral-20);
+}
+
+@mixin dark-themed-badge-tag {
+  --badge-tag-themed-content-color: var(--content-primary-dark);
+  --badge-tag-themed-btn-hover-bg: var(--neutral-60);
+  --badge-tag-themed-hover-bg: var(--neutral-50);
+  --badge-tag-themed-btn-bg: var(--neutral-70);
+}
+
+:root {
+  @include light-themed-badge-tag;
+
+  @include theme('default') {
+    .badge.badge-themed {
+      @include dark-themed-badge-tag;
+    }
+  }
+}
+
 $max-width: 160px;
 
 .badge {
@@ -150,3 +174,25 @@ $max-width: 160px;
     max-width: 200px;
   }
 }
+
+.badge.badge-themed {
+  .badge-close,
+  .badge-tag-content-btn {
+    &:hover {
+      background-color: var(--badge-tag-themed-btn-hover-bg);
+    }
+  }
+
+  &.badge-tag {
+    color: var(--badge-tag-themed-content-color);
+    background-color: var(--badge-tag-themed-btn-bg) !important;
+
+    &:hover {
+      background-color: var(--badge-tag-themed-hover-bg) !important;
+    }
+  }
+
+  .badge-content {
+    color: var(--badge-tag-themed-content-color);
+  }
+}