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/SearchBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperStyle" @click="focusInput">
-    <i class="icon-[lucide--search]" :class="iconColorStyle" />
+    <i class="icon-[lucide--search] text-muted" />
     <InputText
       ref="input"
       v-model="internalSearchQuery"
@@ -12,7 +12,7 @@
       "
       type="text"
       unstyled
-      :class="inputStyle"
+      class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm text-base-foreground"
     />
   </div>
 </template>
@@ -72,18 +72,13 @@ const focusInput = () => {
 onMounted(() => autofocus && focusInput())
 
 const wrapperStyle = computed(() => {
-  const baseClasses = [
-    'relative flex w-full items-center gap-2',
-    'bg-white dark-theme:bg-zinc-800',
-    'cursor-text'
-  ]
+  const baseClasses =
+    'relative flex w-full items-center gap-2 bg-base-background cursor-text'
 
   if (showBorder) {
     return cn(
-      ...baseClasses,
-      'rounded p-2',
-      'border border-solid',
-      'border-zinc-200 dark-theme:border-zinc-700'
+      baseClasses,
+      'rounded p-2 border border-solid border-border-default'
     )
   }
 
@@ -93,20 +88,6 @@ const wrapperStyle = computed(() => {
     lg: 'h-10 px-4 py-2' // Matches button md size
   }[size]
 
-  return cn(...baseClasses, 'rounded-lg', sizeClasses)
-})
-
-const inputStyle = computed(() => {
-  return cn(
-    'absolute inset-0 w-full h-full pl-11',
-    'border-none outline-none bg-transparent',
-    'text-sm text-neutral dark-theme:text-white'
-  )
-})
-
-const iconColorStyle = computed(() => {
-  return cn(
-    !showBorder ? 'text-neutral' : ['text-zinc-300', 'dark-theme:text-zinc-700']
-  )
+  return cn(baseClasses, 'rounded-lg', sizeClasses)
 })
 </script>