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/types/buttonTypes.ts

@@ -1,3 +1,4 @@
+import { cn } from '@comfyorg/tailwind-utils'
 import type { HTMLAttributes } from 'vue'
 
 export type ButtonSize = 'fit-content' | 'sm' | 'md'
@@ -25,10 +26,12 @@ export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
   const baseByType = {
     primary:
       'bg-neutral-900 border-none text-white dark-theme:bg-white dark-theme:text-neutral-900',
-    secondary:
-      'bg-white border-none text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
-    transparent:
-      'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-200',
+    secondary: cn(
+      'bg-secondary-background border-none text-base-foreground hover:bg-secondary-background-hover'
+    ),
+    transparent: cn(
+      'bg-transparent border-none text-base-foreground hover:bg-secondary-background-hover'
+    ),
     accent:
       'bg-primary-background hover:bg-primary-background-hover border-none text-white font-bold'
   } as const
@@ -42,7 +45,9 @@ export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => {
       'bg-neutral-900 text-white dark-theme:bg-white dark-theme:text-neutral-900',
     secondary:
       'bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
-    transparent: 'bg-transparent text-neutral-600 dark-theme:text-neutral-400',
+    transparent: cn(
+      'bg-transparent text-base-foreground hover:bg-secondary-background-hover'
+    ),
     accent:
       'bg-primary-background hover:bg-primary-background-hover text-white font-bold'
   } as const