From 394b25545e5dea2e7268b708ad219ac845dd447d Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Sat, 22 Nov 2025 15:30:14 -0800
Subject: [PATCH] Style: Fix the filter/search/sort controls on the Template
 Select Modal (#6835)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Background and text colors.

## Screenshot
<img width="1186" height="148" alt="image"
src="https://github.com/user-attachments/assets/0ff3b0d5-6aae-45c5-9ebf-060a9973489c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6835-Style-Fix-the-filter-search-sort-controls-on-the-Template-Select-Modal-2b36d73d3650816b9850e1b9f7feb25e)
by [Unito](https://www.unito.io)
---
 .../custom/widget/WorkflowTemplateSelectorDialog.vue        | 2 +-
 src/components/input/MultiSelect.vue                        | 6 +++---
 src/components/input/SearchBox.vue                          | 4 ++--
 src/components/input/SingleSelect.vue                       | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index 890f148061a..a1174aa1002 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -92,7 +92,7 @@
             class="w-62.5"
           >
             <template #icon>
-              <i class="icon-[lucide--arrow-up-down]" />
+              <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
             </template>
           </SingleSelect>
         </div>
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 74a7035b19f..9a54ae9e3c3 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -17,7 +17,7 @@
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
           'h-10 relative inline-flex cursor-pointer select-none',
-          'rounded-lg bg-base-background text-base-foreground',
+          'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
           'border-[2.5px] border-solid',
           selectedCount > 0
@@ -127,7 +127,7 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm text-muted-foreground">
+      <span class="text-sm">
         {{ label }}
       </span>
       <span
@@ -140,7 +140,7 @@
 
     <!-- Chevron size identical to current -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-lg text-neutral-400" />
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
     </template>
 
     <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
index dab0a5e0ec2..1565bfcb314 100644
--- a/src/components/input/SearchBox.vue
+++ b/src/components/input/SearchBox.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperStyle" @click="focusInput">
-    <i class="icon-[lucide--search] text-muted" />
+    <i class="icon-[lucide--search] text-muted-foreground" />
     <InputText
       ref="input"
       v-model="internalSearchQuery"
@@ -73,7 +73,7 @@ onMounted(() => autofocus && focusInput())
 
 const wrapperStyle = computed(() => {
   const baseClasses =
-    'relative flex w-full items-center gap-2 bg-base-background cursor-text'
+    'relative flex w-full items-center gap-2 bg-secondary-background cursor-text'
 
   if (showBorder) {
     return cn(
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index ee683d71719..d22d0064e83 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -20,7 +20,7 @@
           'h-10 relative inline-flex cursor-pointer select-none items-center',
           // trigger surface
           'rounded-lg',
-          'bg-base-background text-base-foreground',
+          'bg-secondary-background text-base-foreground',
           'border-[2.5px] border-solid border-transparent',
           'transition-all duration-200 ease-in-out',
           'focus-within:border-node-component-border',
@@ -84,7 +84,7 @@
   >
     <!-- Trigger value -->
     <template #value="slotProps">
-      <div class="flex items-center gap-2 text-sm text-neutral-500">
+      <div class="flex items-center gap-2 text-sm">
         <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
@@ -100,7 +100,7 @@
 
     <!-- Trigger caret -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-base text-neutral-500" />
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
     </template>
 
     <!-- Option row -->