style: Searchbox theme token

Author: DrJKL

packages/design-system/src/css/style.css

@@ -98,7 +98,6 @@
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
-  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
 
   --color-interface-panel-job-progress-primary: var(--color-azure-300);
   --color-interface-panel-job-progress-secondary: var(--color-alpha-azure-600-30);
@@ -438,7 +437,11 @@
   --color-interface-button-hover-surface: var(
     --interface-button-hover-surface
   );
+  --color-comfy-input: var(--comfy-input-bg);
+  --color-comfy-input-foreground: var(--input-text);
   --color-comfy-menu-bg: var(--comfy-menu-bg);
+  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
+
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
   --color-node-border: var(--node-border);

src/components/input/SearchBox.vue

@@ -1,6 +1,14 @@
 <template>
-  <div :class="wrapperStyle" @click="focusInput">
-    <i class="icon-[lucide--search] text-muted-foreground" />
+  <div
+    :class="
+      cn(
+        'relative flex w-full items-center gap-2 bg-comfy-input cursor-text text-comfy-input-foreground',
+        wrapperStyle
+      )
+    "
+    @click="focusInput"
+  >
+    <i class="icon-[lucide--search]" />
     <InputText
       ref="input"
       v-model="internalSearchQuery"
@@ -12,7 +20,7 @@
       "
       type="text"
       unstyled
-      class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm text-base-foreground"
+      class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm"
     />
   </div>
 </template>
@@ -72,14 +80,8 @@ const focusInput = () => {
 onMounted(() => autofocus && focusInput())
 
 const wrapperStyle = computed(() => {
-  const baseClasses =
-    'relative flex w-full items-center gap-2 bg-secondary-background cursor-text'
-
   if (showBorder) {
-    return cn(
-      baseClasses,
-      'rounded p-2 border border-solid border-border-default'
-    )
+    return cn('rounded p-2 border border-solid border-border-default')
   }
 
   // Size-specific classes matching button sizes for consistency
@@ -88,6 +90,6 @@ const wrapperStyle = computed(() => {
     lg: 'h-10 px-4 py-2' // Matches button md size
   }[size]
 
-  return cn(baseClasses, 'rounded-lg', sizeClasses)
+  return cn('rounded-lg', sizeClasses)
 })
 </script>