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/components/graph/selectionToolbox/MenuOptionItem.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="option.type === 'divider'"
-    class="my-1 h-px bg-smoke-200 dark-theme:bg-zinc-700"
-  />
+  <div v-if="option.type === 'divider'" class="my-1 h-px bg-border-default" />
   <div
     v-else
     role="button"
@@ -26,18 +23,21 @@
       v-if="option.badge"
       :severity="option.badge === 'new' ? 'info' : 'secondary'"
       :value="t(option.badge)"
-      :class="{
-        'rounded-4xl bg-azure-400 dark-theme:bg-azure-600':
-          option.badge === 'new',
-        'rounded-4xl bg-slate-100 dark-theme:bg-black':
-          option.badge === 'deprecated',
-        'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
-      }"
+      :class="
+        cn(
+          'h-4 gap-2.5 px-1 text-[9px] text-base-foreground uppercase rounded-4xl',
+          {
+            'bg-primary-background': option.badge === 'new',
+            'bg-secondary-background': option.badge === 'deprecated'
+          }
+        )
+      "
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import Badge from 'primevue/badge'
 import { useI18n } from 'vue-i18n'