Style: Design System use across more components (#6705)

## Summary

Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to
be working on to consolidate our different buttons soon.

## Changes

- **What**: Replace light/dark colors with theme aware design system
tokens.

## Review Focus

Double check the chosen colors for the components

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="607" height="432" alt="image"
src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104"
/> | <img width="646" height="488" alt="image"
src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/input/MultiSelect.vue

@@ -13,12 +13,77 @@
     option-label="name"
     unstyled
     :max-selected-labels="0"
-    :pt="pt"
+    :pt="{
+      root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
+        class: cn(
+          'h-10 relative inline-flex cursor-pointer select-none',
+          'rounded-lg bg-base-background text-base-foreground',
+          'transition-all duration-200 ease-in-out',
+          'border-[2.5px] border-solid',
+          selectedCount > 0
+            ? 'border-node-component-border'
+            : 'border-transparent',
+          'focus-within:border-node-component-border',
+          { 'opacity-60 cursor-default': props.disabled }
+        )
+      }),
+      labelContainer: {
+        class:
+          'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
+      },
+      label: {
+        class: 'p-0'
+      },
+      dropdown: {
+        class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
+      },
+      header: () => ({
+        class:
+          showSearchBox || showSelectedCount || showClearButton
+            ? 'block'
+            : 'hidden'
+      }),
+      // Overlay & list visuals unchanged
+      overlay: {
+        class: cn(
+          'mt-2 rounded-lg py-2 px-2',
+          'bg-base-background',
+          'text-base-foreground',
+          'border border-solid border-border-default'
+        )
+      },
+      listContainer: () => ({
+        style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
+        class: 'scrollbar-custom'
+      }),
+      list: {
+        class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
+      },
+      // Option row hover and focus tone
+      option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
+        class: cn(
+          'flex gap-2 items-center h-10 px-2 rounded-lg',
+          'hover:bg-secondary-background-hover',
+          // Add focus/highlight state for keyboard navigation
+          context?.focused &&
+            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+        )
+      }),
+      // Hide built-in checkboxes entirely via PT (no :deep)
+      pcHeaderCheckbox: {
+        root: { class: 'hidden' },
+        style: { display: 'none' }
+      },
+      pcOptionCheckbox: {
+        root: { class: 'hidden' },
+        style: { display: 'none' }
+      }
+    }"
     :aria-label="label || t('g.multiSelectDropdown')"
     role="combobox"
     :aria-expanded="false"
     aria-haspopup="listbox"
-    :tabindex="0"
+    tabindex="0"
   >
     <template
       v-if="showSearchBox || showSelectedCount || showClearButton"
@@ -39,7 +104,7 @@
         >
           <span
             v-if="showSelectedCount"
-            class="px-1 text-sm text-neutral-400 dark-theme:text-zinc-500"
+            class="px-1 text-sm text-base-foreground"
           >
             {{
               selectedCount > 0
@@ -52,22 +117,22 @@
             :label="$t('g.clearAll')"
             type="transparent"
             size="fit-content"
-            class="text-sm text-blue-500 dark-theme:text-blue-600"
+            class="text-sm text-text-primary"
             @click.stop="selectedItems = []"
           />
         </div>
-        <div class="my-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+        <div class="my-4 h-px bg-border-default"></div>
       </div>
     </template>
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm text-zinc-700 dark-theme:text-smoke-200">
+      <span class="text-sm text-muted-foreground">
         {{ label }}
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 text-xs font-semibold text-white dark-theme:bg-blue-500"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
       >
         {{ selectedCount }}
       </span>
@@ -85,8 +150,8 @@
           class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
           :class="
             slotProps.selected
-              ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
-              : 'bg-neutral-100 dark-theme:bg-zinc-700'
+              ? 'bg-primary-background'
+              : 'bg-secondary-background'
           "
         >
           <i
@@ -203,70 +268,4 @@ const filteredOptions = computed(() => {
 
   return [...selectedButNotInResults, ...searchResults]
 })
-
-const pt = computed(() => ({
-  root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
-    class: cn(
-      'h-10 relative inline-flex cursor-pointer select-none',
-      'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
-      'transition-all duration-200 ease-in-out',
-      'border-[2.5px] border-solid',
-      selectedCount.value > 0
-        ? 'border-blue-400 dark-theme:border-blue-500'
-        : 'border-transparent',
-      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
-      { 'opacity-60 cursor-default': props.disabled }
-    )
-  }),
-  labelContainer: {
-    class:
-      'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
-  },
-  label: {
-    class: 'p-0'
-  },
-  dropdown: {
-    class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
-  },
-  header: () => ({
-    class:
-      showSearchBox || showSelectedCount || showClearButton ? 'block' : 'hidden'
-  }),
-  // Overlay & list visuals unchanged
-  overlay: {
-    class: cn(
-      'mt-2 rounded-lg py-2 px-2',
-      'bg-white dark-theme:bg-zinc-800',
-      'text-neutral dark-theme:text-white',
-      'border border-solid border-neutral-200 dark-theme:border-zinc-700'
-    )
-  },
-  listContainer: () => ({
-    style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
-    class: 'scrollbar-custom'
-  }),
-  list: {
-    class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-  },
-  // Option row hover and focus tone
-  option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
-    class: [
-      'flex gap-2 items-center h-10 px-2 rounded-lg',
-      'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
-      // Add focus/highlight state for keyboard navigation
-      {
-        'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context?.focused
-      }
-    ]
-  }),
-  // Hide built-in checkboxes entirely via PT (no :deep)
-  pcHeaderCheckbox: {
-    root: { class: 'hidden' },
-    style: { display: 'none' }
-  },
-  pcOptionCheckbox: {
-    root: { class: 'hidden' },
-    style: { display: 'none' }
-  }
-}))
 </script>