Backport: Css token standardization (#6363) (#6669)

## Summary
Backports the CSS token standardization changes from PR #6363 to the
`core/1.30` branch.

Resolved merge conflict in `MediaTitle.vue` and added missing
`truncateFilename` function to maintain compatibility.

**Original PR**: https://github.com/Comfy-Org/ComfyUI_frontend/pull/6363
**Cherry-picked commit**: bde5244a71

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6669-Backport-Css-token-standardization-6363-2aa6d73d36508153be09cdc67f6ac8a4)
by [Unito](https://www.unito.io)

src/platform/assets/components/AssetCard.vue

@@ -27,8 +27,7 @@
           :class="
             cn(
               'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
-              'text-slate-800',
-              'dark-theme:text-white'
+              'text-base-foreground'
             )
           "
         >
@@ -111,7 +110,7 @@ const cardClasses = computed(() => {
     'appearance-none bg-transparent p-0 m-0',
     'font-inherit text-inherit outline-none cursor-pointer text-left',
     'bg-smoke-100 dark-theme:bg-charcoal-800',
-    'hover:bg-smoke-200 dark-theme:hover:bg-charcoal-600',
+    'hover:bg-secondary-background',
     'border-none',
     'focus:outline-solid outline-azure-600 outline-4'
   )

src/platform/assets/components/MediaAssetMoreMenu.vue

@@ -3,7 +3,7 @@
     <IconTextButton
       v-if="asset?.kind !== '3D'"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Inspect asset"
       @click="handleInspect"
     >
@@ -14,7 +14,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Add to current workflow"
       @click="handleAddToWorkflow"
     >
@@ -25,7 +25,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Download"
       @click="handleDownload"
     >
@@ -39,7 +39,7 @@
     <IconTextButton
       v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Open as workflow in new tab"
       @click="handleOpenWorkflow"
     >
@@ -51,7 +51,7 @@
     <IconTextButton
       v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Export workflow"
       @click="handleExportWorkflow"
     >
@@ -64,7 +64,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Copy job ID"
       @click="handleCopyJobId"
     >
@@ -77,7 +77,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Delete"
       @click="handleDelete"
     >

src/platform/assets/components/MediaTitle.vue

@@ -0,0 +1,21 @@
+<template>
+  <h3
+    class="m-0 line-clamp-1 text-sm font-bold text-base-foreground"
+    :title="fullName"
+  >
+    {{ displayName }}
+  </h3>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { truncateFilename } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  fileName: string
+}>()
+
+const fullName = computed(() => props.fileName)
+const displayName = computed(() => truncateFilename(props.fileName))
+</script>