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>

tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts

@@ -186,14 +186,14 @@ describe('NodeConflictDialogContent', () => {
 
       // Import Failed Extensions section should show 1 package
       const importFailedSection = wrapper.findAll(
-        '.w-full.flex.flex-col.bg-neutral-200'
+        '.w-full.flex.flex-col.bg-base-background'
       )[0]
       expect(importFailedSection.text()).toContain('1')
       expect(importFailedSection.text()).toContain('Import Failed Extensions')
 
       // Conflicts section should show 3 conflicts (excluding import_failed)
       const conflictsSection = wrapper.findAll(
-        '.w-full.flex.flex-col.bg-neutral-200'
+        '.w-full.flex.flex-col.bg-base-background'
       )[1]
       expect(conflictsSection.text()).toContain('3')
       expect(conflictsSection.text()).toContain('Conflicts')

tests-ui/tests/components/dialog/content/manager/packCard/PackCard.test.ts

@@ -208,26 +208,4 @@ describe('PackCard', () => {
       expect(wrapper.find('pack-card-footer-stub').exists()).toBe(true)
     })
   })
-
-  describe('styling', () => {
-    it('should have correct CSS classes', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
-
-      const card = wrapper.find('.p-card')
-      expect(card.classes()).toContain('w-full')
-      expect(card.classes()).toContain('h-full')
-      expect(card.classes()).toContain('rounded-lg')
-    })
-
-    it('should have correct base styling', () => {
-      const wrapper = createWrapper({ nodePack: mockNodePack })
-
-      const card = wrapper.find('.p-card')
-      // Check the actual classes applied to the card
-      expect(card.classes()).toContain('p-card')
-      expect(card.classes()).toContain('p-component')
-      expect(card.classes()).toContain('inline-flex')
-      expect(card.classes()).toContain('flex-col')
-    })
-  })
 })

tests-ui/tests/composables/useNodeChatHistory.test.ts

@@ -1,66 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-
-vi.mock(
-  '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget',
-  () => ({
-    useChatHistoryWidget: () => {
-      return (node: any, inputSpec: any) => {
-        const widget = {
-          name: inputSpec.name,
-          type: inputSpec.type
-        }
-
-        if (!node.widgets) {
-          node.widgets = []
-        }
-        node.widgets.push(widget)
-
-        return widget
-      }
-    }
-  })
-)
-
-// Mock LGraphNode type
-type MockNode = {
-  widgets: Array<{ name: string; type: string }>
-  setDirtyCanvas: ReturnType<typeof vi.fn>
-  addCustomWidget: ReturnType<typeof vi.fn>
-  [key: string]: any
-}
-
-describe('useNodeChatHistory', () => {
-  const mockNode = {
-    widgets: [],
-    setDirtyCanvas: vi.fn(),
-    addCustomWidget: vi.fn()
-  } as unknown as LGraphNode & MockNode
-
-  beforeEach(() => {
-    mockNode.widgets = []
-    mockNode.setDirtyCanvas.mockClear()
-    mockNode.addCustomWidget.mockClear()
-  })
-
-  it('adds chat history widget to node', () => {
-    const { showChatHistory } = useNodeChatHistory()
-    showChatHistory(mockNode)
-
-    expect(mockNode.widgets.length).toBe(1)
-    expect(mockNode.widgets[0].name).toBe('$$node-chat-history')
-    expect(mockNode.setDirtyCanvas).toHaveBeenCalled()
-  })
-
-  it('removes chat history widget from node', () => {
-    const { showChatHistory, removeChatHistory } = useNodeChatHistory()
-    showChatHistory(mockNode)
-
-    expect(mockNode.widgets.length).toBe(1)
-
-    removeChatHistory(mockNode)
-    expect(mockNode.widgets.length).toBe(0)
-  })
-})

tests-ui/tests/store/executionStore.test.ts

@@ -29,13 +29,6 @@ declare global {
   interface Window {}
 }
 
-const mockShowChatHistory = vi.fn()
-vi.mock('@/composables/node/useNodeChatHistory', () => ({
-  useNodeChatHistory: () => ({
-    showChatHistory: mockShowChatHistory
-  })
-}))
-
 vi.mock('@/composables/node/useNodeProgressText', () => ({
   useNodeProgressText: () => ({
     showTextPreview: vi.fn()
@@ -54,58 +47,6 @@ vi.mock('@/scripts/app', () => ({
   }
 }))
 
-describe('executionStore - display_component handling', () => {
-  function createDisplayComponentEvent(
-    nodeId: string,
-    component = 'ChatHistoryWidget'
-  ) {
-    return new CustomEvent('display_component', {
-      detail: {
-        node_id: nodeId,
-        component,
-        props: {
-          history: JSON.stringify([{ prompt: 'Test', response: 'Response' }])
-        }
-      }
-    })
-  }
-
-  function handleDisplayComponentMessage(event: CustomEvent) {
-    const { node_id, component } = event.detail
-    const node = vi.mocked(app.graph.getNodeById)(node_id)
-    if (node && component === 'ChatHistoryWidget') {
-      mockShowChatHistory(node)
-    }
-  }
-
-  beforeEach(() => {
-    setActivePinia(createPinia())
-    useExecutionStore()
-    vi.clearAllMocks()
-  })
-
-  it('handles ChatHistoryWidget display_component messages', () => {
-    const mockNode = { id: '123' } as any
-    vi.mocked(app.graph.getNodeById).mockReturnValue(mockNode)
-
-    const event = createDisplayComponentEvent('123')
-    handleDisplayComponentMessage(event)
-
-    expect(app.graph.getNodeById).toHaveBeenCalledWith('123')
-    expect(mockShowChatHistory).toHaveBeenCalledWith(mockNode)
-  })
-
-  it('does nothing if node is not found', () => {
-    vi.mocked(app.graph.getNodeById).mockReturnValue(null)
-
-    const event = createDisplayComponentEvent('non-existent')
-    handleDisplayComponentMessage(event)
-
-    expect(app.graph.getNodeById).toHaveBeenCalledWith('non-existent')
-    expect(mockShowChatHistory).not.toHaveBeenCalled()
-  })
-})
-
 describe('useExecutionStore - NodeLocatorId conversions', () => {
   let store: ReturnType<typeof useExecutionStore>