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/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -36,7 +36,7 @@ const searchQuery = defineModel<string>('searchQuery')
 
 <template>
   <div
-    class="flex max-h-[640px] w-103 flex-col rounded-lg bg-node-component-surface pt-4 outline outline-offset-[-1px] outline-node-component-border"
+    class="flex max-h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline outline-offset-[-1px] outline-node-component-border"
   >
     <!-- Filter -->
     <FormDropdownMenuFilter
@@ -66,9 +66,7 @@ const searchQuery = defineModel<string>('searchQuery')
           )
         "
       >
-        <div
-          class="pointer-events-none absolute inset-x-3 top-0 z-10 h-5 bg-gradient-to-b from-backdrop to-transparent"
-        />
+        <div class="pointer-events-none absolute inset-x-3 top-0 z-10 h-5" />
         <div
           v-if="items.length === 0"
           class="absolute inset-0 flex items-center justify-center"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue

@@ -15,8 +15,9 @@ const layoutMode = defineModel<LayoutMode>('layoutMode')
 const searchQuery = defineModel<string>('searchQuery')
 const sortSelected = defineModel<OptionId>('sortSelected')
 
-const actionButtonStyle =
-  'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-sand-100 dark-theme:outline-neutral-700 transition-all duration-150'
+const actionButtonStyle = cn(
+  'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-node-component-border transition-all duration-150'
+)
 
 const resetInputStyle = 'bg-transparent border-0 outline-0 ring-0 text-left'
 
@@ -45,14 +46,15 @@ function handleSortSelected(item: SortOption) {
 
 <template>
   <div class="text-secondary flex gap-2 px-4">
+    <!-- TODO: Replace with a common Search input -->
     <label
       :class="
         cn(
           actionButtonStyle,
           'flex-1 flex px-2 items-center text-base leading-none cursor-text',
           searchQuery?.trim() !== '' ? 'text-base-foreground' : '',
-          'hover:!outline-blue-500/80',
-          'focus-within:!outline-blue-500/80'
+          'hover:outline-component-node-widget-background-highlighted/80',
+          'focus-within:outline-component-node-widget-background-highlighted/80'
         )
       "
     >
@@ -77,7 +79,7 @@ function handleSortSelected(item: SortOption) {
           resetInputStyle,
           actionButtonStyle,
           'relative w-8 flex justify-center items-center cursor-pointer',
-          'hover:!outline-blue-500/80',
+          'hover:outline-component-node-widget-background-highlighted',
           'active:!scale-95'
         )
       "
@@ -85,7 +87,7 @@ function handleSortSelected(item: SortOption) {
     >
       <div
         v-if="sortSelected !== 'default'"
-        class="absolute top-[-2px] left-[-2px] size-2 rounded-full bg-blue-500"
+        class="absolute top-[-2px] left-[-2px] size-2 rounded-full bg-component-node-widget-background-highlighted"
       />
       <i class="icon-[lucide--arrow-up-down] size-4" />
     </button>
@@ -109,8 +111,8 @@ function handleSortSelected(item: SortOption) {
         :class="
           cn(
             'flex flex-col gap-2 p-2 min-w-32',
-            'bg-zinc-200 dark-theme:bg-charcoal-700',
-            'rounded-lg outline outline-offset-[-1px] outline-sand-200 dark-theme:outline-zinc-700'
+            'bg-component-node-background',
+            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
           )
         "
       >
@@ -140,7 +142,7 @@ function handleSortSelected(item: SortOption) {
       :class="
         cn(
           actionButtonStyle,
-          'flex justify-center items-center p-1 gap-1 hover:!outline-blue-500/80'
+          'flex justify-center items-center p-1 gap-1 hover:outline-component-node-widget-background-highlighted'
         )
       "
     >

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -57,16 +57,17 @@ function handleVideoLoad(event: Event) {
   <div
     :class="
       cn(
-        'flex gap-1 select-none group/item cursor-pointer',
+        'flex gap-1 select-none group/item cursor-pointer bg-component-node-widget-background',
         'transition-all duration-150',
         {
           'flex-col text-center': layout === 'grid',
-          'flex-row text-left max-h-16 bg-interface-menu-component-surface-hovered rounded-lg hover:scale-102 active:scale-98':
+          'flex-row text-left max-h-16 rounded-lg hover:scale-102 active:scale-98':
             layout === 'list',
-          'flex-row text-left hover:bg-interface-menu-component-surface-hovered rounded-lg':
+          'flex-row text-left hover:bg-component-node-widget-background-hovered rounded-lg':
             layout === 'list-small',
           // selection
-          'ring-2 ring-blue-500': layout === 'list' && selected
+          'ring-2 ring-component-node-widget-background-highlighted':
+            layout === 'list' && selected
         }
       )
     "
@@ -85,7 +86,8 @@ function handleVideoLoad(event: Event) {
             'rounded-sm group-hover/item:scale-108 group-active/item:scale-95':
               layout === 'grid',
             // selection
-            'ring-2 ring-blue-500': layout === 'grid' && selected
+            'ring-2 ring-component-node-widget-background-highlighted':
+              layout === 'grid' && selected
           }
         )
       "
@@ -93,10 +95,10 @@ function handleVideoLoad(event: Event) {
       <!-- Selected Icon -->
       <div
         v-if="selected"
-        class="absolute top-1 left-1 size-4 rounded-full border-1 border-white bg-blue-500"
+        class="absolute top-1 left-1 size-4 rounded-full border-1 border-base-foreground bg-primary-background"
       >
         <i
-          class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-white"
+          class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-base-foreground bold"
         />
       </div>
       <video
@@ -134,10 +136,10 @@ function handleVideoLoad(event: Event) {
         v-tooltip="layout === 'grid' ? (label ?? name) : undefined"
         :class="
           cn(
-            'block text-[15px] line-clamp-2 break-words overflow-hidden',
+            'block text-xs line-clamp-2 break-words overflow-hidden',
             'transition-colors duration-150',
             // selection
-            !!selected && 'text-blue-500'
+            !!selected && 'text-base-foreground'
           )
         "
       >