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/components/LGraphNode.vue

@@ -84,7 +84,6 @@
 
     <template v-if="!isCollapsed">
       <div class="relative mb-1">
-        <div :class="separatorClasses" />
         <!-- Progress bar for executing state -->
         <div
           v-if="executing && progress !== undefined"
@@ -388,7 +387,6 @@ const hasCustomContent = computed(() => {
 })
 
 // Computed classes and conditions for better reusability
-const separatorClasses = 'bg-component-node-border h-px mx-0 w-full lod-toggle'
 const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'
 
 const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -7,7 +7,7 @@
     :class="
       cn(
         'lg-node-header py-2 pl-2 pr-3 text-sm rounded-t-2xl w-full min-w-50',
-        'text-node-component-header',
+        'text-node-component-header bg-node-component-header-surface',
         collapsed && 'rounded-2xl'
       )
     "

src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="flex flex-col gap-1">
-    <div
-      class="max-h-[48rem] rounded border border-smoke-300 p-4 dark-theme:border-smoke-600"
-    >
+    <div class="max-h-[48rem] rounded border p-4">
       <Chart
         :type="chartType"
         :data="chartData"

src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <div class="mb-4">
       <Button
-        class="text-secondary w-[413px] border-0 bg-zinc-500/10 dark-theme:bg-charcoal-600 dark-theme:text-white"
+        class="text-text-secondary w-[413px] border-0 bg-secondary-background hover:bg-secondary-background-hover"
         :disabled="isRecording || readonly"
         @click="handleStartRecording"
       >
@@ -12,7 +12,7 @@
     </div>
     <div
       v-if="isRecording || isPlaying || recordedURL"
-      class="text-secondary flex h-14 w-[413px] items-center gap-4 rounded-lg bg-zinc-500/10 px-4 dark-theme:bg-node-component-surface dark-theme:text-white"
+      class="flex h-14 w-[413px] items-center gap-4 rounded-lg px-4 bg-node-component-surface text-text-secondary"
     >
       <!-- Recording Status -->
       <div class="flex min-w-30 items-center gap-2">
@@ -57,9 +57,7 @@
         class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handlePlayRecording"
       >
-        <i
-          class="text-secondary icon-[lucide--play] size-4 dark-theme:text-white"
-        />
+        <i class="text-text-secondary icon-[lucide--play] size-4" />
       </button>
 
       <button
@@ -68,9 +66,7 @@
         class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopPlayback"
       >
-        <i
-          class="text-secondary icon-[lucide--square] size-4 dark-theme:text-white"
-        />
+        <i class="text-text-secondary icon-[lucide--square] size-4" />
       </button>
     </div>
     <audio

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -99,8 +99,10 @@
         :model="menuItems"
         popup
         class="audio-player-menu"
-        pt:root:class="!bg-white dark-theme:!bg-charcoal-800 !border-sand-100 dark-theme:!border-charcoal-600"
-        pt:submenu:class="!bg-white dark-theme:!bg-charcoal-800"
+        :pt:root:class="
+          cn('bg-component-node-widget-background border-component-node-border')
+        "
+        :pt:submenu:class="cn('bg-component-node-widget-background')"
       >
         <template #item="{ item }">
           <div v-if="item.key === 'volume'" class="w-48 px-4 py-2">

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'
           )
         "
       >

src/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget.ts

@@ -1,49 +0,0 @@
-import { ref } from 'vue'
-
-import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
-import type { ComponentWidgetStandardProps } from '@/scripts/domWidget'
-import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
-
-type ChatHistoryCustomProps = Omit<
-  InstanceType<typeof ChatHistoryWidget>['$props'],
-  ComponentWidgetStandardProps
->
-
-const PADDING = 16
-
-export const useChatHistoryWidget = (
-  options: {
-    props?: ChatHistoryCustomProps
-  } = {}
-) => {
-  const widgetConstructor: ComfyWidgetConstructorV2 = (
-    node: LGraphNode,
-    inputSpec: InputSpec
-  ) => {
-    const widgetValue = ref<string>('')
-    const widget = new ComponentWidgetImpl<
-      string | object,
-      ChatHistoryCustomProps
-    >({
-      node,
-      name: inputSpec.name,
-      component: ChatHistoryWidget,
-      props: options.props,
-      inputSpec,
-      options: {
-        getValue: () => widgetValue.value,
-        setValue: (value: string | object) => {
-          widgetValue.value = typeof value === 'string' ? value : String(value)
-        },
-        getMinHeight: () => 400 + PADDING
-      }
-    })
-    addWidget(node, widget)
-    return widget
-  }
-
-  return widgetConstructor
-}