From bde5244a714117a1d4868e49a569c24c8d3104f8 Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Wed, 29 Oct 2025 15:10:54 +0100
Subject: [PATCH] Css token standardization (#6363)

This pull request introduces a comprehensive update to the design
system's color management, focusing on establishing semantic color
tokens for both light and dark themes. It replaces many hardcoded color
values and legacy CSS classes throughout the codebase with new semantic
CSS variables, ensuring consistent theming and easier future
maintenance. The changes affect core CSS files as well as numerous Vue
components, aligning their styling with the new design system.

**Design System Foundation**

* Added a wide range of new color variables to `style.css`, including
base colors (e.g., `--color-white`, `--color-black`), additional shades
for sand, azure, cobalt, gold, coral, and magenta, and new alpha
(transparency) colors.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0L52-R87)
[[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R119-R123)
* Introduced semantic color tokens for both light and dark modes
(`--base-background`, `--primary-background`,
`--destructive-background`, etc.), mapping them to the new base colors
for consistent usage across the application.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R219-R239)
[[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R301-R321)
* Exposed semantic tokens as CSS variables (e.g.,
`--color-base-foreground`, `--color-secondary-background`) for use
throughout the app.

**Component Refactoring to Semantic Tokens**

* Updated Vue components and their tests to use the new semantic color
classes (e.g., `bg-base-background`, `text-base-foreground`,
`bg-secondary-background`) instead of hardcoded colors or legacy
dark-theme classes. This affects components such as
`WorkflowTemplateSelectorDialog.vue`, `BypassButton.vue`,
`ExecuteButton.vue`, `MenuOptionItem.vue`, `AssetCard.vue`,
`MediaAssetMoreMenu.vue`, `MediaTitle.vue`, `WidgetFileUpload.vue`,
`WidgetRecordAudio.vue`, `AudioPreviewPlayer.vue`, and
`FormDropdownMenuActions.vue`.
[[1]](diffhunk://#diff-2c860bdc48e907b1b85dbef846599d8376dd02cff90f49e490eebe61371fecedL149-R149)
[[2]](diffhunk://#diff-8ec606ef1100f3a56945ed24cbdc1965050932cd744d4172a3868cdfd23894c0L95-R95)
[[3]](diffhunk://#diff-80b781aeba31712968ae157bb70194e4b72bc73430d1cca6a79d718d839daed6L10-R10)
[[4]](diffhunk://#diff-55fd9056d35e50249dc9f2280017dc99294221fdbe56d8399cea60f8bac499b5L7-R7)
[[5]](diffhunk://#diff-c5e6830e63e2441d2dc70d2ecf7c9b56d0a93821f827e9c5377fc10ae6016f18L30-R32)
[[6]](diffhunk://#diff-a1091d53a4b5d493e045aab5960188d2e7c3b80002e7178427268835fadb5809L30-R30)
[[7]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL6-R6)
[[8]](diffhunk://#diff-7ef9ebd48e6f38a644c1a4e7bae1c7bb818bb959b2d20985974824e299ea5c34L3-R3)
[[9]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L115-R115)
[[10]](diffhunk://#diff-7bee4b453fc869f546e7150a6e39992ab6442987f80c10f8260b8f3715491997L51-R51)
[[11]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL41-R41)
[[12]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L24-R24)

**Consistency and Maintainability**

* Ensured hover, active, and selected states use semantic background and
foreground colors for both light and dark themes, improving visual
consistency and simplifying future updates.
[[1]](diffhunk://#diff-2c860bdc48e907b1b85dbef846599d8376dd02cff90f49e490eebe61371fecedL183-R183)
[[2]](diffhunk://#diff-a1091d53a4b5d493e045aab5960188d2e7c3b80002e7178427268835fadb5809L115-R114)
[[3]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL18-R18)
[[4]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL29-R29)
[[5]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL43-R43)
[[6]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL55-R55)
[[7]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL69-R69)
[[8]](diffhunk://#diff-ccdb389a5e355d525dcfa26ecd77519297b6232dd34522411c8bfdd4cde05a1cL83-R83)
[[9]](diffhunk://#diff-2c860bdc48e907b1b85dbef846599d8376dd02cff90f49e490eebe61371fecedL328-R328)
[[10]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L138-R138)
[[11]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL119-R119)
[[12]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL137-R137)
[[13]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L53-R53)
[[14]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L153-R153)

**Removal of Legacy Styles**

* Removed legacy dark-theme class usage and hardcoded color values,
replacing them with semantic tokens to unify the styling approach.
[[1]](diffhunk://#diff-c5e6830e63e2441d2dc70d2ecf7c9b56d0a93821f827e9c5377fc10ae6016f18L30-R32)
[[2]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L24-R24)
[[3]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L53-R53)
[[4]](diffhunk://#diff-d464ebe3a44bec4fda7155e5605bf173612aca409250b7ef6b78920a89ae2044L153-R153)

These changes lay the groundwork for a scalable and maintainable design
system, making it easier to implement future theme changes and ensuring
a consistent look and feel across all components.
---
 packages/design-system/src/css/style.css      | 85 ++++++++++++++++++-
 .../widget/WorkflowTemplateSelectorDialog.vue |  6 +-
 .../selectionToolbox/BypassButton.test.ts     |  2 +-
 .../graph/selectionToolbox/BypassButton.vue   |  2 +-
 .../graph/selectionToolbox/ExecuteButton.vue  |  2 +-
 .../graph/selectionToolbox/MenuOptionItem.vue |  4 +-
 src/platform/assets/components/AssetCard.vue  |  5 +-
 .../assets/components/MediaAssetMoreMenu.vue  | 14 +--
 src/platform/assets/components/MediaTitle.vue |  2 +-
 .../widgets/components/WidgetFileUpload.vue   |  4 +-
 .../widgets/components/WidgetRecordAudio.vue  |  2 +-
 .../components/audio/AudioPreviewPlayer.vue   | 17 ++--
 .../form/dropdown/FormDropdownMenuActions.vue |  8 +-
 .../form/dropdown/FormDropdownMenuFilter.vue  |  4 +-
 .../manager/ManagerDialogContent.vue          |  4 +-
 .../manager/NodeConflictDialogContent.vue     |  4 +-
 .../infoPanel/tabs/WarningTabPanel.vue        |  2 +-
 17 files changed, 120 insertions(+), 47 deletions(-)

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 21553a439..f5b3877be 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -49,27 +49,42 @@
   --color-smoke-800: #8a8a8a;
 
   --color-sand-100: #e1ded5;
-  --color-sand-200: #d6cfc2;
+  --color-sand-200: #fff7d5;
   --color-sand-300: #888682;
+  --color-sand-400: #eed7ac;
 
   --color-slate-100: #9c9eab;
   --color-slate-200: #9fa2bd;
   --color-slate-300: #5b5e7d;
 
+  --color-white: #ffffff;
+  --color-black: #000000;
+
   --color-electric-400: #f0ff41;
   --color-sapphire-700: #172dd7;
   --color-brand-yellow: var(--color-electric-400);
   --color-brand-blue: var(--color-sapphire-700);
 
+  --color-azure-300: #78bae9;
   --color-azure-400: #31b9f4;
   --color-azure-600: #0b8ce9;
 
+  --color-cobalt-800: #185a8b;
+
   --color-jade-400: #47e469;
   --color-jade-600: #00cd72;
 
   --color-gold-400: #fcbf64;
+  --color-gold-500: #fdab34;
   --color-gold-600: #fd9903;
 
+  --color-coral-500: #f75951;
+  --color-coral-600: #e04e48;
+  --color-coral-700: #b33a3a;
+
+  --color-magenta-300: #ceaac9;
+  --color-magenta-700: #6a246a;
+
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
@@ -101,6 +116,11 @@
     var(--color-smoke-500) 50%,
     transparent
   );
+  --color-alpha-smoke-500-20: #c5c5c533;
+  --color-alpha-smoke-400-40: #d9d9d966;
+  --color-alpha-azure-600-30: #0b8ce94d;
+  --color-alpha-magenta-700-60: #6a246a99;
+  --color-alpha-magenta-300-60: #ceaac999;
 
   /* PrimeVue pulled colors */
   --color-muted: var(--p-text-muted-color);
@@ -196,6 +216,27 @@
   --text-secondary: var(--color-ash-500);
   --text-primary: var(--color-charcoal-700);
   --input-surface: rgb(0 0 0 / 0.15);
+
+  /* Semantic tokens - light mode */
+  --muted-foreground: var(--color-charcoal-200);
+  --base-foreground: var(--color-charcoal-800);
+  --brand-yellow: var(--color-electric-400);
+  --brand-blue: var(--color-sapphire-700);
+  --secondary-background: var(--color-smoke-200);
+  --secondary-background-hover: var(--color-smoke-400);
+  --secondary-background-selected: var(--color-smoke-600);
+  --base-background: var(--color-white);
+  --primary-background: var(--color-azure-400);
+  --primary-background-hover: var(--color-cobalt-800);
+  --destructive-background: var(--color-coral-500);
+  --destructive-background-hover: var(--color-coral-600);
+  --inverted-background-hover: var(--color-charcoal-600);
+  --warning-background: var(--color-gold-400);
+  --warning-background-hover: var(--color-gold-500);
+  --border-default: var(--color-smoke-600);
+  --border-subtle: var(--color-smoke-400);
+  --muted-background: var(--color-smoke-700);
+  --accent-background: var(--color-smoke-800);
 }
 
 .dark-theme {
@@ -257,6 +298,27 @@
   --text-primary: var(--color-white);
 
   --input-surface: rgb(130 130 130 / 0.1);
+
+  /* Semantic tokens - dark mode */
+  --muted-foreground: var(--color-smoke-800);
+  --base-foreground: var(--color-white);
+  --brand-yellow: var(--color-electric-400);
+  --brand-blue: var(--color-sapphire-700);
+  --secondary-background: var(--color-charcoal-600);
+  --secondary-background-hover: var(--color-charcoal-400);
+  --secondary-background-selected: var(--color-charcoal-200);
+  --base-background: var(--color-charcoal-800);
+  --primary-background: var(--color-azure-600);
+  --primary-background-hover: var(--color-azure-400);
+  --destructive-background: var(--color-coral-700);
+  --destructive-background-hover: var(--color-coral-600);
+  --inverted-background-hover: var(--color-smoke-200);
+  --warning-background: var(--color-gold-600);
+  --warning-background-hover: var(--color-gold-500);
+  --border-default: var(--color-charcoal-200);
+  --border-subtle: var(--color-charcoal-300);
+  --muted-background: var(--color-charcoal-100);
+  --accent-background: var(--color-charcoal-100);
 }
 
 @theme inline {
@@ -321,6 +383,27 @@
   --color-text-secondary: var(--text-secondary);
   --color-text-primary: var(--text-primary);
   --color-input-surface: var(--input-surface);
+
+  /* Semantic tokens */
+  --color-base-foreground: var(--base-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-base-background: var(--base-background);
+  --color-secondary-background: var(--secondary-background);
+  --color-secondary-background-hover: var(--secondary-background-hover);
+  --color-secondary-background-selected: var(--secondary-background-selected);
+  --color-primary-background: var(--primary-background);
+  --color-primary-background-hover: var(--primary-background-hover);
+  --color-destructive-background: var(--destructive-background);
+  --color-destructive-background-hover: var(--destructive-background-hover);
+  --color-inverted-background-hover: var(--inverted-background-hover);
+  --color-warning-background: var(--warning-background);
+  --color-warning-background-hover: var(--warning-background-hover);
+  --color-border-default: var(--border-default);
+  --color-border-subtle: var(--border-subtle);
+  --color-muted-background: var(--muted-background);
+  --color-accent-background: var(--accent-background);
+  --color-brand-yellow: var(--brand-yellow);
+  --color-brand-blue: var(--brand-blue);
 }
 
 @custom-variant dark-theme {
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index fc2ea1fec..751bc0574 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -146,7 +146,7 @@
             size="compact"
             variant="ghost"
             rounded="lg"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
           >
             <template #top>
               <CardTop ratio="landscape">
@@ -180,7 +180,7 @@
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
             @mouseenter="hoveredTemplate = template.name"
             @mouseleave="hoveredTemplate = null"
             @click="onLoadWorkflow(template)"
@@ -325,7 +325,7 @@
             size="compact"
             variant="ghost"
             rounded="lg"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
           >
             <template #top>
               <CardTop ratio="square">
diff --git a/src/components/graph/selectionToolbox/BypassButton.test.ts b/src/components/graph/selectionToolbox/BypassButton.test.ts
index c966e180a..1f8a5d34f 100644
--- a/src/components/graph/selectionToolbox/BypassButton.test.ts
+++ b/src/components/graph/selectionToolbox/BypassButton.test.ts
@@ -92,7 +92,7 @@ describe('BypassButton', () => {
     const button = wrapper.find('button')
 
     expect(button.classes()).not.toContain(
-      'dark-theme:[&:not(:active)]:!bg-[#262729]'
+      'dark-theme:[&:not(:active)]:!bg-charcoal-600'
     )
   })
 
diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 84882a285..26d40052b 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -7,7 +7,7 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:bg-[#E7E6E6] hover:dark-theme:bg-charcoal-600"
+    class="hover:bg-secondary-background"
     @click="toggleBypass"
   >
     <template #icon>
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index e37568a4d..8e5666b34 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -4,7 +4,7 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="size-8 bg-[#31B9F4] !p-0 dark-theme:bg-[#0B8CE9]"
+    class="size-8 bg-azure-400 !p-0 dark-theme:bg-azure-600"
     text
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index 4bc8f4a9e..fb1f8c01a 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -27,9 +27,9 @@
       :severity="option.badge === 'new' ? 'info' : 'secondary'"
       :value="t(option.badge)"
       :class="{
-        'rounded-4xl bg-[#31B9F4] dark-theme:bg-[#0B8CE9]':
+        'rounded-4xl bg-azure-400 dark-theme:bg-azure-600':
           option.badge === 'new',
-        'rounded-4xl bg-[#9C9EAB] dark-theme:bg-[#000]':
+        '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
       }"
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index a0bd81b54..3082c19c1 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/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'
             )
           "
           :title="asset.name"
@@ -112,7 +111,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'
   )
diff --git a/src/platform/assets/components/MediaAssetMoreMenu.vue b/src/platform/assets/components/MediaAssetMoreMenu.vue
index 818f69d96..0c57b5ccf 100644
--- a/src/platform/assets/components/MediaAssetMoreMenu.vue
+++ b/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"
     >
@@ -15,7 +15,7 @@
     <IconTextButton
       v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Add to current workflow"
       @click="handleAddToWorkflow"
     >
@@ -26,7 +26,7 @@
 
     <IconTextButton
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Download"
       @click="handleDownload"
     >
@@ -40,7 +40,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"
     >
@@ -52,7 +52,7 @@
     <IconTextButton
       v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Export workflow"
       @click="handleExportWorkflow"
     >
@@ -66,7 +66,7 @@
     <IconTextButton
       v-if="showCopyJobId"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Copy job ID"
       @click="handleCopyJobId"
     >
@@ -80,7 +80,7 @@
     <IconTextButton
       v-if="shouldShowDeleteButton"
       type="transparent"
-      class="dark-theme:text-white"
+      class="text-base-foreground"
       label="Delete"
       @click="handleDelete"
     >
diff --git a/src/platform/assets/components/MediaTitle.vue b/src/platform/assets/components/MediaTitle.vue
index c872f7737..7ad9999af 100644
--- a/src/platform/assets/components/MediaTitle.vue
+++ b/src/platform/assets/components/MediaTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <h3
-    class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+    class="m-0 line-clamp-1 text-sm font-bold text-base-foreground"
     :title="fullName"
   >
     {{ displayName }}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 4eea704b1..60b9aeb28 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -112,7 +112,7 @@
     <!-- Audio player -->
     <div class="group relative px-2">
       <div
-        class="flex items-center gap-4 rounded-lg bg-[#1a1b1e] p-4"
+        class="flex items-center gap-4 rounded-lg bg-charcoal-800 p-4"
         style="border: 1px solid #262729"
       >
         <!-- Audio icon -->
@@ -135,7 +135,7 @@
           <!-- Delete button -->
           <button
             :aria-label="$t('g.deleteAudioFile')"
-            class="flex h-8 w-8 items-center justify-center rounded border-none transition-all duration-150 hover:bg-[#262729] focus:outline-none"
+            class="flex h-8 w-8 items-center justify-center rounded border-none transition-all duration-150 hover:bg-charcoal-600 focus:outline-none"
             @click="clearFile"
           >
             <i class="pi pi-times text-sm text-white"></i>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index 8ec4c2087..b9d840538 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -48,7 +48,7 @@
         class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopRecording"
       >
-        <div class="size-2.5 rounded-sm bg-[#C02323]" />
+        <div class="size-2.5 rounded-sm bg-danger-100" />
       </button>
 
       <button
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index 550fb8aef..6aeac17e5 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -38,9 +38,7 @@
         </div>
 
         <!-- Time Display -->
-        <div
-          class="text-sm font-normal text-nowrap text-black dark-theme:text-white"
-        >
+        <div class="text-sm font-normal text-nowrap text-base-foreground">
           {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
         </div>
       </div>
@@ -116,10 +114,9 @@
       >
         <template #item="{ item }">
           <div v-if="item.key === 'volume'" class="w-48 px-4 py-2">
-            <label
-              class="mb-2 block text-xs text-black dark-theme:text-white"
-              >{{ item.label }}</label
-            >
+            <label class="mb-2 block text-xs text-base-foreground">{{
+              item.label
+            }}</label>
             <Slider
               :model-value="volume * 10"
               :min="0"
@@ -134,12 +131,10 @@
             class="flex cursor-pointer items-center px-4 py-2 text-xs hover:bg-white/10"
             @click="item.onClick?.()"
           >
-            <span class="text-black dark-theme:text-white">{{
-              item.label
-            }}</span>
+            <span class="text-base-foreground">{{ item.label }}</span>
             <i
               v-if="item.selected"
-              class="ml-auto icon-[lucide--check] size-4 text-black dark-theme:text-white"
+              class="ml-auto icon-[lucide--check] size-4 text-base-foreground"
             />
           </div>
         </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index 6a865c10d..3d88053ea 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -21,7 +21,7 @@ const actionButtonStyle =
 const resetInputStyle = 'bg-transparent border-0 outline-0 ring-0 text-left'
 
 const layoutSwitchItemStyle =
-  'size-6 flex justify-center items-center rounded-sm cursor-pointer transition-all duration-150 hover:scale-108 hover:text-black hover:dark-theme:text-white active:scale-95'
+  'size-6 flex justify-center items-center rounded-sm cursor-pointer transition-all duration-150 hover:scale-108 hover:text-base-foreground active:scale-95'
 
 const sortPopoverRef = useTemplateRef('sortPopoverRef')
 const sortTriggerRef = useTemplateRef('sortTriggerRef')
@@ -50,7 +50,7 @@ function handleSortSelected(item: SortOption) {
         cn(
           actionButtonStyle,
           'flex-1 flex px-2 items-center text-base leading-none cursor-text',
-          searchQuery?.trim() !== '' ? 'text-black dark-theme:text-white' : '',
+          searchQuery?.trim() !== '' ? 'text-base-foreground' : '',
           'hover:!outline-blue-500/80',
           'focus-within:!outline-blue-500/80'
         )
@@ -150,7 +150,7 @@ function handleSortSelected(item: SortOption) {
             resetInputStyle,
             layoutSwitchItemStyle,
             layoutMode === 'list'
-              ? 'bg-neutral-500/50 text-black dark-theme:text-white'
+              ? 'bg-neutral-500/50 text-base-foreground'
               : ''
           )
         "
@@ -164,7 +164,7 @@ function handleSortSelected(item: SortOption) {
             resetInputStyle,
             layoutSwitchItemStyle,
             layoutMode === 'grid'
-              ? 'bg-neutral-500/50 text-black dark-theme:text-white'
+              ? 'bg-neutral-500/50 text-base-foreground'
               : ''
           )
         "
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index d047fa2c0..a0dd11199 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -19,10 +19,10 @@ const filterSelected = defineModel<OptionId>('filterSelected')
         cn(
           'px-4 py-2 rounded-md inline-flex justify-center items-center cursor-pointer select-none',
           'transition-all duration-150',
-          'hover:text-black hover:dark-theme:text-white hover:bg-zinc-500/10',
+          'hover:text-base-foreground hover:bg-zinc-500/10',
           'active:scale-95',
           filterSelected === option.id
-            ? '!bg-zinc-500/20 text-black dark-theme:text-white'
+            ? '!bg-zinc-500/20 text-base-foreground'
             : 'bg-transparent'
         )
       "
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
index 91e021f69..3703bfbd8 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
@@ -51,9 +51,7 @@
               type="transparent"
               @click="dismissWarningBanner"
             >
-              <i
-                class="pi pi-times text-xs text-neutral-900 dark-theme:text-white"
-              ></i>
+              <i class="pi pi-times text-xs text-base-foreground"></i>
             </IconButton>
           </div>
           <RegistrySearchBar
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index 1425a21c4..037083f3f 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -4,9 +4,7 @@
     <div class="flex h-full w-full flex-col gap-2 px-4 py-6">
       <!-- Description -->
       <div v-if="showAfterWhatsNew">
-        <p
-          class="m-0 mb-4 text-sm leading-4 text-neutral-800 dark-theme:text-white"
-        >
+        <p class="m-0 mb-4 text-sm leading-4 text-base-foreground">
           {{ $t('manager.conflicts.description') }}
           <br /><br />
           {{ $t('manager.conflicts.info') }}
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
index 853728074..f673318da 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -6,7 +6,7 @@
       @click="showImportFailedDialog"
     >
       <i class="pi pi-code text-base"></i>
-      <span class="text-sm dark-theme:text-white">{{
+      <span class="text-sm text-base-foreground">{{
         t('serverStart.openLogs')
       }}</span>
     </button>