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/composables/node/useNodeChatHistory.ts

@@ -1,58 +0,0 @@
-import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useChatHistoryWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget'
-
-const CHAT_HISTORY_WIDGET_NAME = '$$node-chat-history'
-
-/**
- * Composable for handling node text previews
- */
-export function useNodeChatHistory(
-  options: {
-    minHeight?: number
-    props?: Omit<InstanceType<typeof ChatHistoryWidget>['$props'], 'widget'>
-  } = {}
-) {
-  const chatHistoryWidget = useChatHistoryWidget(options)
-
-  const addChatHistoryWidget = (node: LGraphNode) =>
-    chatHistoryWidget(node, {
-      name: CHAT_HISTORY_WIDGET_NAME,
-      type: 'chatHistory'
-    })
-
-  /**
-   * Shows chat history for a node
-   * @param node The graph node to show the chat history for
-   */
-  function showChatHistory(node: LGraphNode) {
-    // First remove any existing widget
-    removeChatHistory(node)
-
-    // Then add the widget with new history
-    addChatHistoryWidget(node)
-    node.setDirtyCanvas?.(true)
-  }
-
-  /**
-   * Removes chat history from a node
-   * @param node The graph node to remove the chat history from
-   */
-  function removeChatHistory(node: LGraphNode) {
-    if (!node.widgets) return
-
-    const widgetIdx = node.widgets.findIndex(
-      (w) => w.name === CHAT_HISTORY_WIDGET_NAME
-    )
-
-    if (widgetIdx > -1) {
-      node.widgets[widgetIdx].onRemove?.()
-      node.widgets.splice(widgetIdx, 1)
-    }
-  }
-
-  return {
-    showChatHistory,
-    removeChatHistory
-  }
-}